working on metrics visualization

Aquaveo · Nov 8, 2024 · 3c3b2ef · 3c3b2ef
1 parent 4992b39
commit 3c3b2ef
Show file tree

Hide file tree

Showing 20 changed files with 4,084 additions and 358 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "prismjs": "^1.29.0",
     "react": "^18.0.0",
     "react-bootstrap": "^2.4.0",
+    "react-data-table-component": "^7.6.2",
     "react-dom": "^18.0.0",
     "react-icons": "^4.3.1",
     "react-router-bootstrap": "^0.26.1",

diff --git a/reactapp/features/hydroFabric/components/catchmentsSelect.js b/reactapp/features/hydroFabric/components/catchmentsSelect.js
@@ -19,7 +19,6 @@ const CatchmentSelect = (props) => {
       catchment_id: state.catchment.id
     }
     appAPI.getCatchmentTimeSeries(params).then((response) => {
-      // actions.set_catchment_series(response.data);
       actions.set_series(response.data);
       actions.set_catchment_variable_list(response.variables);
       actions.set_catchment_variable(null);
@@ -48,7 +47,6 @@ const CatchmentSelect = (props) => {
       variable_column: state.catchment.variable
     }
     appAPI.getCatchmentTimeSeries(params).then((response) => {
-      // actions.set_catchment_series(response.data);
       actions.set_series(response.data);
       props.toggleSingleRow(false);
       props.setIsLoading(false);
@@ -67,9 +65,9 @@ const CatchmentSelect = (props) => {
     <Fragment>
           {state.catchment.id &&
             <Fragment>
-              <h5>Catchment Metadata</h5>
+              <h5>Catchment</h5>
               <p><b>ID</b>: {state.catchment.id}</p>
-                <label>Current Catchment ID </label>
+                <label>Catchment ID </label>
                 <SelectComponent 
                   optionsList={state.catchment.list} 
                   onChangeHandler={actions.set_catchment_id} 
@@ -80,7 +78,7 @@ const CatchmentSelect = (props) => {
                     }
                   }
                 />
-              <label>Current Variable</label>
+              <label>Variable</label>
               <SelectComponent 
                 optionsList={state.catchment.variable_list} 
                 onChangeHandler={actions.set_catchment_variable}

diff --git a/reactapp/features/hydroFabric/components/chart.js b/reactapp/features/hydroFabric/components/chart.js
@@ -126,30 +126,30 @@ function LineChart({ width, height, data }) {
           y={0}
           width={width}
           height={height}
-          fill={"#718096"}
+          fill={"#fff"}
           rx={14}
         />
         <Group left={margin.left} top={margin.top}>
           <GridRows
             scale={yScale}
             width={innerWidth}
             height={innerHeight}
-            stroke="#EDF2F7"
+            stroke="#0a100d"
             strokeOpacity={0.2}
           />
           <GridColumns
             scale={xScale}
             width={innerWidth}
             height={innerHeight}
-            stroke="#EDF2F7"
+            stroke="#0a100d"
             strokeOpacity={0.2}
           />
           <AxisLeft
             scale={yScale}
             stroke={"#EDF2F7"}
             tickStroke={"#EDF2F7"}
             tickLabelProps={() => ({
-              fill: "#EDF2F7",
+              fill: "#0a100d",
               fontSize: 11,
               textAnchor: "end",
             })}
@@ -159,7 +159,7 @@ function LineChart({ width, height, data }) {
             y="20"
             transform="rotate(-90)"
             fontSize={12}
-            fill="#EDF2F7"
+            fill="#0a100d"
           >
             Y-axis Label
           </text>
@@ -170,7 +170,7 @@ function LineChart({ width, height, data }) {
             tickStroke={"#EDF2F7"}
             top={innerHeight}
             tickLabelProps={() => ({
-              fill: "#EDF2F7",
+              fill: "#0a100d",
               fontSize: 11,
               textAnchor: "middle",
             })}
@@ -180,7 +180,7 @@ function LineChart({ width, height, data }) {
             <LinePath
               key={`line-${index}`}
               stroke={colors[index % colors.length]}
-              strokeWidth={3}
+              strokeWidth={2}
               data={series.data}
               x={(d) => xScale(getDate(d)) ?? 0}
               y={(d) => yScale(getYValue(d)) ?? 0}
@@ -192,7 +192,7 @@ function LineChart({ width, height, data }) {
               <Line
                 from={{ x: tooltipLeft - margin.left, y: 0 }}
                 to={{ x: tooltipLeft - margin.left, y: innerHeight }}
-                stroke={"#EDF2F7"}
+                stroke={"#0a100d"}
                 strokeWidth={2}
                 pointerEvents="none"
                 strokeDasharray="4,2"
@@ -273,7 +273,7 @@ function LineChart({ width, height, data }) {
                 marginRight: 5,
               }}
             />
-            <div style={{ color: "#EDF2F7", fontSize: 12 }}>
+            <div style={{ color: "#0a100d", fontSize: 14 }}>
               {series.label}
             </div>
           </div>

diff --git a/reactapp/features/hydroFabric/components/data.js b/reactapp/features/hydroFabric/components/data.js
diff --git a/reactapp/features/hydroFabric/components/hydroFabricLinePlot.js b/reactapp/features/hydroFabric/components/hydroFabricLinePlot.js
@@ -151,8 +151,8 @@ const HydroFabricLinePlot = (props) => {
       );
       const chartData = {
         series: [
-          { name: 'TEERH', data: teehrSeries[0] },
-          { name: 'TEERH 2', data: teehrSeries[1] },
+          { name: 'TEEHR', data: teehrSeries[0] },
+          { name: 'TEEHR 2', data: teehrSeries[1] },
         ]
       };
 

diff --git a/reactapp/features/hydroFabric/components/nexusSelect.js b/reactapp/features/hydroFabric/components/nexusSelect.js
@@ -16,8 +16,6 @@ const NexusSelect = (props) => {
       nexus_id: state.nexus.id
     }    
     appAPI.getNexusTimeSeries(params).then((response) => {
-      // actions.set_nexus_series(response.data);
-      console.log(response.data)
       actions.set_series(response.data);
       actions.set_nexus_list(response.nexus_ids);
       actions.set_troute_id(state.nexus.id);

diff --git a/reactapp/features/hydroFabric/components/teehrMetrics.js b/reactapp/features/hydroFabric/components/teehrMetrics.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import DataTable from 'react-data-table-component';
+
+const TeehrMetricsTable = ({ data }) => {
+    // Define the columns based on the configuration names in the data
+    const columns = [
+        { name: 'Metric', selector: row => row.metric, sortable: true },
+        ...Object.keys(data[0]).filter(key => key !== 'metric').map(configName => ({
+            name: configName,
+            selector: row => row[configName],
+            sortable: true,
+        }))
+    ];
+
+    return (
+        <DataTable
+            title="Teehr Metrics"
+            columns={columns}
+            data={data}
+            defaultSortField="metric"
+            pagination
+        />
+    );
+};
+
+export default TeehrMetricsTable;
diff --git a/reactapp/features/hydroFabric/components/teehrSelect.js b/reactapp/features/hydroFabric/components/teehrSelect.js
@@ -11,16 +11,17 @@ const TeehrSelect = (props) => {
 
   useEffect(() => {
     if (!state.teehr.id) return;
-    actions.reset_teehr();
     var params = {}   
     appAPI.getTeehrVariables(params).then((response) => {
       actions.set_teehr_variable_list(response.teehr_variables);
+      console.log(response.teehr_variables)
+
       props.toggleSingleRow(false);
       props.setIsLoading(false);
 
     }).catch((error) => {
       props.setIsLoading(false);
-      console.log("Error fetching troute variables", error);
+      console.log("Error fetching teehr variables", error);
     })
     return  () => {
       if (state.teehr.id) return;
@@ -35,11 +36,11 @@ const TeehrSelect = (props) => {
       teehr_id: state.teehr.id,
       teehr_variable: state.teehr.variable
     }
-    console.log(params)
-    appAPI.getTeehrTimeSeries(params).then((response) => {
-      console.log(response.data)
+    appAPI.getTeehrTimeSeries(params).then((rep) => {
+      response = JSON.parse(rep)
+      console.log(response)
       actions.set_series(response.data)
-      // actions.set_teehr_series(response.data);
+      actions.set_teehr_metrics(response.metrics)
       props.toggleSingleRow(false);
       props.setIsLoading(false);
     }).catch((error) => {
@@ -57,8 +58,7 @@ const TeehrSelect = (props) => {
         {
           state.teehr.id &&
           <Fragment>
-            <h5>TEEHR</h5>
-            <label>Current Variable</label>
+            <label>TEEHR</label>
             <SelectComponent 
               optionsList={state.teehr.variable_list} 
               onChangeHandler={actions.set_teehr_variable}