replacement of am5charts for a more simple library

package.json

@@ -13,9 +13,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@amcharts/amcharts5": "^5.9.4",
     "axios": "^0.27.2",
     "bootstrap": "^5.1.3",
+    "chartist": "^1.3.0",
     "color": "^4.2.3",
     "css-loader": "^6.5.1",
     "dotenv": "^16.0.1",

reactapp/App.scss

@@ -4,6 +4,7 @@ $primary: #2c3e50;
 
 /* import bootstrap to set changes */
 @import "../node_modules/bootstrap/scss/bootstrap";
+@import '../node_modules/chartist/dist/index.css';
 
 :root {
     --ts-header-height: 56px;

reactapp/features/hydroFabric/components/hydroFabricLinePlot.js

@@ -1,54 +1,108 @@
-import { useEffect ,useRef } from "react";
+import { useEffect, useRef } from 'react';
 import { useHydroFabricContext } from "../hooks/useHydroFabricContext";
-import { initializeChart, updateSeries } from "../lib/chartAuxiliary";
+// import Chartist from 'chartist';
+import { LineChart, FixedScaleAxis, easings } from 'chartist';
+import { makeAxis,addAnimationToLineChart,makeTitle } from '../lib/chartAuxiliary';
+import 'chartist/dist/index.css';
+import '../css/chart.css';
+
+
+
+const chartOptions = {
+  axisX: {
+    type: FixedScaleAxis,
+    divisor: 5,
+    labelInterpolationFnc: function(value) {
+      return new Date(value).toLocaleDateString();
+    }
+  },
+  axisY: {
+    offset: 20
+  },
+  showArea: true,
+  fullWidth: true,
+  showPoint: false,
+  chartPadding: {
+    left: 70,
+    top: 50
+  }
+};
 
 
 const HydroFabricLinePlot = (props) => {
+  // Reference to the chart container
   const chartRef = useRef(null);
-  const {state, actions} = useHydroFabricContext();
-  const variable = `${state.catchment.id ? state.catchment.variable : 'streamflow'}`;
+  const chartInstance = useRef(null);
 
-  useEffect(() => {
-    chartRef.current = initializeChart('chartdiv', props.title , props.subtitle) // initialize the chart
-    return () => {
-      // if full screen has changed, reset the chart
-      if (chartRef.current && props.singleRowOn ){
-        chartRef.current && chartRef.current.dispose();
-        actions.reset();
-      }      
-    }  
-  }, []);
+  const { state, actions } = useHydroFabricContext();
 
   useEffect(() => {
-    if (!state.nexus.series) return
-    updateSeries(chartRef.current,state.nexus,props.title, props.subtitle,variable)
+    if (!state.nexus.series) return;    
+      const nexusSeries = state.nexus.series.map(point => ({x: new Date(point.x), y: point.y}));
+      const chartData = {
+        series: [
+          { name: 'Nexus', data: nexusSeries },
+        ]
+      };
+
+      chartInstance.current = new LineChart (chartRef.current, chartData, chartOptions);
+
+      addAnimationToLineChart(chartInstance.current, easings)
+      makeAxis(chartRef.current,'Date', 'StreamFlow' )
+      makeTitle(chartRef.current, `StreamFlow: ${state.nexus.id}`)
+
+
     return () => {
-      if (chartRef.current && props.singleRowOn) {
-        chartRef.current.dispose();
+      if(chartInstance && props.singleRowOn){
         actions.reset_nexus();
+        chartInstance.current.detach();
+        document.getElementById('x-axis-title')?.remove();
+        document.getElementById('y-axis-title')?.remove();
       }
     };
   }, [state.nexus.series]);
 
 
   useEffect(() => {
-    if (!state.catchment.series) return
-    updateSeries(chartRef.current,state.catchment,props.title, props.subtitle, variable)
+    if (!state.catchment.series) return;
+    if (chartRef.current) {
+      const catchmentSeries = state.catchment.series.map(point => ({x: new Date(point.x), y: point.y}));
+
+      const chartData = {
+        series: [
+          { name: 'Catchment', data: catchmentSeries }
+        ]
+      };
+
+      chartInstance.current = new LineChart(chartRef.current, chartData, chartOptions);
+
+      addAnimationToLineChart(chartInstance.current, easings)
+      makeAxis(
+        chartRef.current,
+        'Time (Date)', 
+        `${state.catchment.variable ? state.catchment.variable.toLowerCase().replace(/_/g, " ") : state.catchment.variable_list ? state.catchment.variable_list[0].label : null}`
+      )
+
+
+      makeTitle(
+        chartRef.current, 
+        `${state.catchment.variable ? state.catchment.variable.toLowerCase().replace(/_/g, " ") : state.catchment.variable_list ? state.catchment.variable_list[0].label : null}: ${state.catchment.id} `)
+    }
+
     return () => {
-      if (chartRef.current && props.singleRowOn) {
-        chartRef.current.dispose();
+      if(props.singleRowOn){
         actions.reset_catchment();
+        chartRef.current.detach();
+        document.getElementById('x-axis-title')?.remove();
+        document.getElementById('y-axis-title')?.remove();      
       }
-    };
-  }, [state.catchment.series]);
-
 
- return (  
-    <div id="chartdiv" style={{ width: "100%", height: "100%" }}></div>
-
- )
-
-}
-export default HydroFabricLinePlot;
+    };
+  }, [state.catchment.series]); // Re-run effect if series data changes
 
+  return (
+    <div ref={chartRef} style={{ width: "100%", height: "90%", position: "relative"}}></div>
+  );
+};
 
+export default HydroFabricLinePlot;

reactapp/features/hydroFabric/components/selectComponent.js

@@ -40,12 +40,16 @@ const customStyles = {
     })
   };
 
+
 // Usage of the Select component with the custom Option component
 const SelectComponent = ({ optionsList, onChangeHandler,defaultValue }) => {
  // Handler for when an option is selected, wrapped in useCallback
  const handleChange = useCallback((option) => {
   onChangeHandler(`${option.value}`)
-  }, [onChangeHandler,defaultValue]);
+  }, [onChangeHandler]);
+  // const handleChange = (option) =>{
+  //   onChangeHandler(`${option.value}`)
+  // }
 
   return (
     <Select
@@ -54,7 +58,7 @@ const SelectComponent = ({ optionsList, onChangeHandler,defaultValue }) => {
       filterOption={createFilter({ ignoreAccents: false })} // this makes all the difference!
       options={optionsList}
       onChange={handleChange}
-      defaultValue={defaultValue}
+      value={defaultValue}
     />
   );
 };

reactapp/features/hydroFabric/css/chart.css

@@ -0,0 +1,8 @@
+.ct-series-a .ct-line {
+    stroke: #2c3e50; /* Blue */
+    stroke-width: 2px;
+}
+
+.ct-series-a .ct-area {
+    fill: #2c3e50;
+}