Update LineChart.vue to add data quality filter

frontend/src/components/LineChart.vue

@@ -11,6 +11,8 @@
         <v-sheet>
           <v-select label="Plot Style" v-model="plotStyle" :items="['Scatter', 'Connected',]"
             @update:modelValue="updateChartLine()"></v-select>
+          <v-select label="Data Quality" v-model="dataQuality" :items="dataQualityOptions" item-title="label"
+            item-value="value" @update:modelValue="filterAllDatasets()" multiple chips></v-select>
           <v-btn :loading="downloading.chart" @click="downloadChart()" class="mb-2">
             <v-icon :icon="mdiDownloadBox"></v-icon>
             Download Plot
@@ -19,7 +21,7 @@
             <v-icon :icon="mdiFileDelimited"></v-icon>
             Download CSV
           </v-btn>
-          <v-btn :loading="downloading.json" @click="downloadJson()" class="mb-2">
+          <v-btn :loading="downloading.json" @click="downJson()" class="mb-2">
             <v-icon :icon="mdiCodeJson"></v-icon>
             Download JSON
           </v-btn>
@@ -57,6 +59,7 @@ const chartStore = useChartsStore()
 const props = defineProps({ data: Object, chosenVariable: Object })
 const line = ref(null)
 const plotStyle = ref('Scatter')
+const dataQuality = ref([0, 1, 2, 3])
 const downloading = ref({ csv: false, json: false, chart: false })
 
 ChartJS.register(LinearScale, TimeScale, PointElement, LineElement, Title, Tooltip, Legend, customCanvasBackgroundColor)
@@ -67,6 +70,7 @@ let chartData = ref(props.data)
 if (props.chosenVariable !== undefined) {
   chartData.value.datasets = chartData.value.datasets.map((dataset) => {
     dataset.parsing.yAxisKey = props.chosenVariable.abbreviation
+    console.log("Dataset", dataset)
     return dataset
   })
 }
@@ -113,6 +117,8 @@ const options = {
   }
 }
 
+const dataQualityOptions = [{ label: 'good', value: 0 }, { label: 'suspect', value: 1 }, { label: 'degraded', value: 2 }, { label: 'bad', value: 3 }]
+
 const getChartName = () => {
   let identifier = `${props.data.datasets[0].label}-${props.chosenVariable.abbreviation}`
   identifier = identifier.replace(/[^a-zA-Z0-9]/g, '_')
@@ -169,6 +175,34 @@ const updateChartLine = () => {
   line.value.chart.update()
 }
 
+const filterAllDatasets = () => {
+  let dataQualityValues = dataQuality.value
+  console.log("Initial datasets", chartData.value.datasets)
+  console.log("Data Quality Filters", dataQualityValues)
+  chartData.value.datasets.forEach((dataset) => {
+    console.log("Filtering dataset", dataset)
+    const filtered = filterDataset(dataset)
+    console.log("Filtered Dataset", filtered)
+  })
+  console.log("Filtered datasets", chartData.value.datasets)
+  // TODO: for some reason the chart doesn't get updated even though the data does
+  line.value.chart.update()
+}
+
+const filterDataset = (dataset) => {
+  let dataQualityValues = dataQuality.value
+  console.log("Filtering dataset", dataset)
+  console.log("Starting number of points", dataset.data.length)
+  let filteredData = dataset.data.filter((dataPoint) => {
+    const include = dataQualityValues.includes(parseInt(dataPoint.reach_q))
+    console.log("Data Point Quality", parseInt(dataPoint.reach_q))
+    console.log("Include?", include)
+    return include
+  })
+  console.log("Ending number of points", filteredData.length)
+  return dataset.data = filteredData
+}
+
 
 onMounted(() => {
   const chartInstance = line.value

frontend/src/stores/hydrologic.js

@@ -80,6 +80,16 @@ export const useHydrologicStore = defineStore('hydrologic', () => {
       default: false,
       always: false,
       selectable: false
+    },
+    {
+      abbreviation: 'reach_q',
+      name: 'Reach Quality',
+      unit: '',
+      definition:
+        'Summary quality indicator for the reach measurement. Values of 0, 1, 2, and 3 indicate good, suspect, degraded, and bad measurements, respectively. Measurements that are marked as suspect may have large errors. Measurements that are marked as degraded very likely do have large errors. Measurements that are marked as bad may be nonsensicial and should be ignored.',
+      default: false,
+      always: true,
+      selectable: false
     }
   ])