Update LineChart.vue to add plot style selection and randomize color …

…button
CUAHSI · Apr 28, 2024 · 7ce11b5 · 7ce11b5
1 parent 76d3f65
commit 7ce11b5
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 18 deletions.
diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue
@@ -8,20 +8,26 @@
       </v-col>
       <v-divider class="my-2" vertical></v-divider>
       <v-col>
-        <v-btn :loading="downloading.chart" @click="downloadChart()" class="mb-2">
-          <v-icon :icon="mdiDownloadBox"></v-icon>
-          Download Plot
-        </v-btn>
-        <v-btn :loading="downloading.csv"  @click="downCsv()" class="mb-2">
-          <v-icon :icon="mdiFileDelimited"></v-icon>
-          Download CSV
-        </v-btn>
-        <v-btn :loading="downloading.json" @click="downloadJson()">
-          <v-icon :icon="mdiCodeJson"></v-icon>
-          Download JSON
-        </v-btn>
-        <!-- <v-btn class="ma-2" :icon="mdiPalette" @click="updateChartColor()" size="small">
-        </v-btn> -->
+        <v-sheet>
+          <v-select label="Plot Style" v-model="plotStyle" :items="['Scatter', 'Connected',]"
+            @update:modelValue="updateChartLine()"></v-select>
+          <v-btn :loading="downloading.chart" @click="downloadChart()" class="mb-2">
+            <v-icon :icon="mdiDownloadBox"></v-icon>
+            Download Plot
+          </v-btn>
+          <v-btn :loading="downloading.csv" @click="downCsv()" class="mb-2">
+            <v-icon :icon="mdiFileDelimited"></v-icon>
+            Download CSV
+          </v-btn>
+          <v-btn :loading="downloading.json" @click="downloadJson()" class="mb-2">
+            <v-icon :icon="mdiCodeJson"></v-icon>
+            Download JSON
+          </v-btn>
+          <v-btn @click="updateChartColor()">
+            <v-icon :icon="mdiPalette"></v-icon>
+            Randomize Color
+          </v-btn>
+        </v-sheet>
       </v-col>
     </v-row>
   </v-container>
@@ -44,13 +50,14 @@ import { enUS } from 'date-fns/locale';
 import { useChartsStore } from '@/stores/charts'
 import { ref, onMounted } from 'vue'
 import { customCanvasBackgroundColor } from '@/_helpers/charts/plugins'
-import { mdiDownloadBox, mdiFileDelimited, mdiCodeJson } from '@mdi/js'
+import { mdiPalette, mdiDownloadBox, mdiFileDelimited, mdiCodeJson } from '@mdi/js'
 import { downloadCsv, downloadJson } from '../_helpers/hydroCron';
 
 const chartStore = useChartsStore()
 const props = defineProps({ data: Object, chosenVariable: Object })
 const line = ref(null)
-const downloading = ref({ csv: false, json: false, chart: false})
+const plotStyle = ref('Scatter')
+const downloading = ref({ csv: false, json: false, chart: false })
 
 ChartJS.register(LinearScale, TimeScale, PointElement, LineElement, Title, Tooltip, Legend, customCanvasBackgroundColor)
 // TODO: might need a more efficient way of doing this instead of re-mapping the data
@@ -146,10 +153,21 @@ const updateChartColor = (color) => {
     dataset.borderColor = color
     dataset.backgroundColor = color
   })
-  // TODO: for some reasone the chart gets clobbered when updating the color
+  // TODO: for some reasone the chart gets clobbered when updating
   line.value.chart.update()
 }
 
+const updateChartLine = () => {
+  let showLine = false
+  if (plotStyle.value === 'Connected') {
+    showLine = true
+  }
+  line.value.chart.data.datasets.forEach((dataset) => {
+    dataset.showLine = showLine
+  })
+  // TODO: for some reasone the chart gets clobbered when updating
+  line.value.chart.update()
+}
 
 
 onMounted(() => {

diff --git a/frontend/src/stores/charts.js b/frontend/src/stores/charts.js
@@ -70,7 +70,7 @@ export const useChartsStore = defineStore('charts', () => {
         },
         // borderColor: dynamicColors(),
         borderColor: 'rgb(75, 192, 192)',
-        // showLine: false,
+        showLine: false,
       }
     })
   }