Cam 461/wse vs reach for timeseries view

frontend/src/components/LineChart.vue

@@ -147,9 +147,34 @@ const getParsing = () => {
 
   parsing.xAxisKey = plt.xvar.abbreviation
   parsing.yAxisKey = plt.yvar.abbreviation
+
   return parsing
 }
 
+const getXScale = () => {
+  let xvar_abbr = props.chosenPlot.xvar.abbreviation
+  if (xvar_abbr == 'time_str') {
+    return {
+      type: 'time',
+      time: {
+        locale: enUS
+      },
+      title: {
+        display: true,
+        text: xLabel
+      }
+    }
+  } else {
+    return {
+      type: 'linear',
+      title: {
+        display: true,
+        text: xLabel
+      }
+    }
+  }
+}
+
 const options = {
   responsive: true,
   maintainAspectRatio: false,
@@ -216,20 +241,7 @@ const options = {
     }
   },
   scales: {
-    x: {
-      type: 'time',
-      time: {
-        // unit: 'day',
-        // displayFormats: {
-        //   day: 'MM.dd'
-        // },
-        locale: enUS
-      },
-      title: {
-        display: true,
-        text: xLabel
-      }
-    },
+    x: getXScale(),
     y: {
       title: {
         display: true,

frontend/src/stores/charts.js

@@ -71,14 +71,6 @@ export const useChartsStore = defineStore('charts', () => {
       title: 'Reach Width along Reach Length',
       help: "Reach Width plotted against Reach Length for all nodes in the selected reach",
       name: 'Width vs Distance',
-    },
-    {
-      abbreviation: 'wse/width',
-      xvar: swotVariables.value.find((v) => v.abbreviation == 'width'),
-      yvar: swotVariables.value.find((v) => v.abbreviation == 'wse'),
-      title: 'Water Surface Elevation vs Reach Width',
-      help: "Water Surface Elevation plotted against Reach Width for all nodes in the selected reach",
-      name: 'WSE vs Width',
     }
   ])
 
@@ -117,6 +109,14 @@ export const useChartsStore = defineStore('charts', () => {
       title: 'Reach Slope',
       help: swotVariables.value.find((v) => v.abbreviation == 'slope').definition,
       name: 'Slope vs Time',
+    },
+    {
+      abbreviation: 'wse/width',
+      xvar: swotVariables.value.find((v) => v.abbreviation == 'width'),
+      yvar: swotVariables.value.find((v) => v.abbreviation == 'wse'),
+      title: 'Water Surface Elevation vs Reach Width',
+      help: "Water Surface Elevation plotted against Reach Width for all nodes in the selected reach",
+      name: 'WSE vs Width',
     }
   ])
 
@@ -686,10 +686,12 @@ export const useChartsStore = defineStore('charts', () => {
     // iterate over stored charts and update the line visibility
     storedCharts.value.forEach((storedChart) => {
       try {
-        storedChart.chart.data.datasets.filter(ds => ds.seriesType != 'computed_series').forEach((dataset) => {
-          dataset.showLine = showLine.value
-        })
-        storedChart.chart.update()
+        if (storedChart.chart != null) {
+          storedChart.chart.data.datasets.filter(ds => ds.seriesType != 'computed_series').forEach((dataset) => {
+            dataset.showLine = showLine.value
+          })
+          storedChart.chart.update()
+        }
       } catch (error) {
         console.error('Error updating chart lines', error)
       }
@@ -700,10 +702,12 @@ export const useChartsStore = defineStore('charts', () => {
     updateNodeDataSetStyles()
     // iterate over stored charts and update the line visibility
     storedCharts.value.forEach((storedChart) => {
-      try {
-        storedChart.chart.update()
-      } catch (error) {
-        console.error('Error updating chart', error)
+      if (storedChart.chart != null) {
+        try {
+          storedChart.chart.update()
+        } catch (error) {
+          console.error('Error updating chart', error)
+        }
       }
     })
   }
@@ -721,6 +725,21 @@ export const useChartsStore = defineStore('charts', () => {
 
   }
 
+const sortChartByX = (plt) => {
+
+  // get the chart data and sort it by the x-axis variable.
+  // If the x-axis variable is time, sort by time otherwise
+  // sort numerically.
+  let plotData = chartData.value.datasets[0].data
+  let xvar = plt.xvar.abbreviation
+
+  if (xvar == 'time_str') {
+    return plotData.sort((a,b) => new Date(a.time_str) - new Date(b.time_str));
+  }
+  else {
+    return plotData.sort((a,b) => parseFloat(a[xvar]) - parseFloat(b[xvar]));
+  }
+}
 
   return {
     updateNodeChartData,
@@ -746,6 +765,7 @@ export const useChartsStore = defineStore('charts', () => {
     showLine,
     updateShowLine,
     storeMountedChart,
-    activePlt
+    activePlt,
+    sortChartByX,
   }
 })

frontend/src/views/ChartsView.vue

@@ -3,7 +3,7 @@
     <v-tabs v-model="chartStore.chartTab" align-tabs="center" fixed-tabs color="primary" grow @update:model-value="changePlotType">
       <v-tab value="timeseries">
         <v-icon :icon="mdiTimelineClock"></v-icon>
-        Reach Timeseries
+        Reach Averaged
       </v-tab>
       <v-tab value="distance">
         <v-icon :icon="mdiMapMarkerDistance"></v-icon>

frontend/src/views/DistanceCharts.vue

@@ -76,6 +76,15 @@ onMounted(() => {
 })
 
 const changePlot = (plt) => {
+  // re-sort the chart data by the x-axis variable
+  // before rending the chart. Set the sorted data
+  // to the active data in the chart prior to rendering
+  const {chartData} = storeToRefs(chartStore)
+  chartData.value.datasets[0].data = chartStore.sortChartByX(plt)
+
+  // force a re-render of the line charts
+  chartStore.updateShowLine()
+
   router.push({ query: { ...router.currentRoute.value.query, variables: plt.abbreviation } })
 }
 

frontend/src/views/TimeSeriesCharts.vue

@@ -76,6 +76,15 @@ onMounted(() => {
 })
 
 const changePlot = (plt) => {
+  // re-sort the chart data by the x-axis variable
+  // before rending the chart. Set the sorted data
+  // to the active data in the chart prior to rendering
+  const {chartData} = storeToRefs(chartStore)
+  chartData.value.datasets[0].data = chartStore.sortChartByX(plt)
+
+  // force a re-render of the line charts
+  chartStore.updateShowLine()
+
   router.push({ query: { ...router.currentRoute.value.query, variables: plt.abbreviation } })
 }