making chart more flexible

Aquaveo · Nov 11, 2024 · 09e04c8 · 09e04c8
1 parent 392fda8
commit 09e04c8
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 10 deletions.
diff --git a/reactapp/features/hydroFabric/components/catchmentsSelect.js b/reactapp/features/hydroFabric/components/catchmentsSelect.js
@@ -48,6 +48,7 @@ const CatchmentSelect = (props) => {
     }
     appAPI.getCatchmentTimeSeries(params).then((response) => {
       actions.set_series(response.data);
+      actions.set_chart_layout(response.layout);
       props.toggleSingleRow(false);
       props.setIsLoading(false);
     }).catch((error) => {

diff --git a/reactapp/features/hydroFabric/components/chart.js b/reactapp/features/hydroFabric/components/chart.js
@@ -20,6 +20,7 @@ import { RectClipPath } from "@visx/clip-path"; // Import ClipPath
 
 function LineChart({ width, height, data, layout }) {
   // Tooltip parameters
+  console.log(layout)
   const {
     tooltipData,
     tooltipLeft = 0,

diff --git a/reactapp/features/hydroFabric/components/nexusSelect.js b/reactapp/features/hydroFabric/components/nexusSelect.js
@@ -17,6 +17,7 @@ const NexusSelect = (props) => {
     }    
     appAPI.getNexusTimeSeries(params).then((response) => {
       actions.set_series(response.data);
+      actions.set_chart_layout(response.layout);
       actions.set_nexus_list(response.nexus_ids);
       actions.set_troute_id(state.nexus.id);
       props.toggleSingleRow(false);

diff --git a/reactapp/features/hydroFabric/components/teehrSelect.js b/reactapp/features/hydroFabric/components/teehrSelect.js
@@ -37,7 +37,8 @@ const TeehrSelect = (props) => {
       teehr_variable: state.teehr.variable
     }
     appAPI.getTeehrTimeSeries(params).then((response) => {
-      actions.set_series(response.data)
+      actions.set_series(response.data);
+      actions.set_chart_layout(response.layout);
       actions.set_teehr_metrics(response.metrics)
       props.toggleSingleRow(false);
       props.setIsLoading(false);

diff --git a/reactapp/features/hydroFabric/components/trouteSelect.js b/reactapp/features/hydroFabric/components/trouteSelect.js
@@ -43,7 +43,8 @@ const TRouteSelect = (props) => {
       troute_variable: state.troute.variable
     }
     appAPI.getTrouteTimeSeries(params).then((response) => {
-      actions.set_series(response.data)
+      actions.set_series(response.data);
+      actions.set_chart_layout(response.layout);
       props.toggleSingleRow(false);
       props.setIsLoading(false);
     }).catch((error) => {

diff --git a/reactapp/features/hydroFabric/hooks/useHydroFabric.js b/reactapp/features/hydroFabric/hooks/useHydroFabric.js
@@ -25,11 +25,13 @@ const useHydroFabric = () => {
         set_teehr_variable_list: (list) => dispatch({ type: hydroFabricActionsTypes.set_teehr_variable_list, payload: list }),
         set_teehr_metrics: (metrics) => dispatch({ type: hydroFabricActionsTypes.set_teehr_metrics, payload: metrics }),
 
+        set_series: (series) => dispatch({ type: hydroFabricActionsTypes.set_series, payload: series }),
+        set_chart_layout: (layout) => dispatch({ type: hydroFabricActionsTypes.set_chart_layout, payload: layout }),
+
         reset_teehr: () => dispatch({ type: hydroFabricActionsTypes.reset_teehr }),
         reset_troute: () => dispatch({ type: hydroFabricActionsTypes.reset_troute }),
         reset_nexus: () => dispatch({ type: hydroFabricActionsTypes.reset_nexus }),
         reset_catchment: () => dispatch({ type: hydroFabricActionsTypes.reset_catchment }),
-        set_series: (series) => dispatch({ type: hydroFabricActionsTypes.set_series, payload: series }),
         reset: () => dispatch({ type: hydroFabricActionsTypes.reset }),
     };
     return { state, actions };

diff --git a/reactapp/features/hydroFabric/store/actions/actionsTypes.js b/reactapp/features/hydroFabric/store/actions/actionsTypes.js
@@ -16,11 +16,13 @@ const hydroFabricActionsTypes = {
     set_teehr_variable_list: 'SET_TEEHR_VARIABLE_LIST',
     set_teehr_metrics: 'SET_TEEHR_METRICS',
 
+    set_series: 'SET_SERIES',
+    set_chart_layout: 'SET_CHART_LAYOUT',
+
     set_reset_teehr: 'SET_RESET_TEEHR',
     reset_nexus: 'RESET_NEXUS',
     reset_catchment: 'RESET_CATCHMENT',
     reset_troute: 'RESET_TROUTE',
-    set_series: 'SET_SERIES',
     reset: 'RESET',
 
 };

diff --git a/reactapp/features/hydroFabric/store/reducers/hydroFabricReducer.js b/reactapp/features/hydroFabric/store/reducers/hydroFabricReducer.js
@@ -188,7 +188,17 @@ const hydroFabricReducer = (state, action) => {
                     }
                 }
             };
-
+        case hydroFabricActionsTypes.set_chart_layout:
+            return {
+                ...state,
+                state: {
+                    ...state.state,
+                    chart: {
+                        ...state.state.chart,
+                        layout: action.payload
+                    }
+                }
+            };
         case hydroFabricActionsTypes.reset_teehr:
             return {
                 ...state,

diff --git a/reactapp/views/ngiab/hydroFabricView.js b/reactapp/views/ngiab/hydroFabricView.js
@@ -13,7 +13,7 @@ const SelectionView = lazy(() => import('../../components/selections'));
 
 
 const HydroFabricView = (props) => {
-  const {state,actions} = useHydroFabricContext();
+  const {state} = useHydroFabricContext();
   return (
 
     <Fragment>
@@ -35,7 +35,7 @@ const HydroFabricView = (props) => {
        <HydroFabricPlotContainer>
           <ParentSize>
             {({ width, height }) => 
-              <LineChart width={width} height={height} data={state.chart.series} layout={{yaxis: state.teehr.variable}}/>}
+              <LineChart width={width} height={height} data={state.chart.series} layout={state.chart.layout}/>}
           </ParentSize>
 
         </HydroFabricPlotContainer> 

diff --git a/tethysapp/ngiab/controllers.py b/tethysapp/ngiab/controllers.py
@@ -73,6 +73,11 @@ def getCatchmentTimeSeries(request, app_workspace):
                 if variable_column
                 else list_variables[0]
             ),
+            "layout": {
+                "yaxis": variable_column,
+                "xaxis": "",
+                "title": "",
+            },
             "catchment_ids": getCatchmentsIds(app_workspace),
         }
     )
@@ -123,7 +128,17 @@ def getNexusTimeSeries(request, app_workspace):
 
     return JsonResponse(
         {
-            "data": [{"label": f"{nexus_id}-Streamflow", "data": data}],
+            "data": [
+                {
+                    "label": f"{nexus_id}-Streamflow",
+                    "data": data,
+                }
+            ],
+            "layout": {
+                "yaxis": "Streamflow",
+                "xaxis": "",
+                "title": "",
+            },
             "nexus_ids": getNexusIDs(app_workspace),
         }
     )
@@ -163,7 +178,19 @@ def getTrouteTimeSeries(request, app_workspace):
         data = []
 
     return JsonResponse(
-        {"data": [{"label": f"{troute_id}-{variable_column}", "data": data}]}
+        {
+            "data": [
+                {
+                    "label": f"{troute_id}-{variable_column}",
+                    "data": data,
+                }
+            ],
+            "layout": {
+                "yaxis": variable_column.title(),
+                "xaxis": "",
+                "title": "",
+            },
+        }
     )
 
 
@@ -178,7 +205,13 @@ def getTeehrTimeSeries(request, app_workspace):
     )
     teehr_ts = get_teehr_ts(teehr_ts_path, teehr_id, teehr_configuration)
     teehr_metrics = get_teehr_metrics(app_workspace, teehr_id)
-    return JsonResponse({"metrics": teehr_metrics, "data": teehr_ts})
+    return JsonResponse(
+        {
+            "metrics": teehr_metrics,
+            "data": teehr_ts,
+            "layout": {"yaxis": teehr_variable.title(), "xaxis": "", "title": ""},
+        }
+    )
 
 
 @controller(app_workspace=True)