add zoom

CUAHSI · May 2, 2024 · e75de0e · e75de0e
1 parent d654850
commit e75de0e
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 8 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,6 +18,7 @@
     "@vueuse/core": "^10.5.0",
     "chart.js": "^4.4.1",
     "chartjs-adapter-date-fns": "^3.0.0",
+    "chartjs-plugin-zoom": "^2.0.1",
     "date-fns": "^3.6.0",
     "esri-leaflet": "^3.0.12",
     "esri-leaflet-vector": "^4.2.3",

diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue
@@ -4,7 +4,7 @@
       <v-col xs="12" lg="10">
         <v-sheet :min-height="lgAndUp ? '65vh' : '50vh'" :max-height="lgAndUp ? '100%' : '20vh'" max-width="100%"
           min-width="500px">
-          <Line :data="chartData" :options="options" ref="line" :plugins="[customCanvasBackgroundColor]" />
+          <Line :data="chartData" :options="options" ref="line" :plugins="[zoomPlugin]" />
         </v-sheet>
       </v-col>
       <v-col xs="12" lg="2">
@@ -29,6 +29,10 @@
             <v-icon :icon="mdiPalette"></v-icon>
             Color
           </v-btn>
+          <v-btn @click="resetZoom()" color="input" class="ma-1">
+            <v-icon :icon="mdiLoupe"></v-icon>
+            Reset Zoom
+          </v-btn>
         </v-sheet>
       </v-col>
     </v-row>
@@ -52,9 +56,10 @@ import { enUS } from 'date-fns/locale';
 import { useChartsStore } from '@/stores/charts'
 import { ref } from 'vue'
 import { customCanvasBackgroundColor } from '@/_helpers/charts/plugins'
-import { mdiPalette, mdiDownloadBox, mdiFileDelimited, mdiCodeJson } from '@mdi/js'
+import { mdiPalette, mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiLoupe } from '@mdi/js'
 import { downloadCsv, downloadJson } from '../_helpers/hydroCron';
 import { useDisplay } from 'vuetify'
+import zoomPlugin from 'chartjs-plugin-zoom';
 
 const { lgAndUp } = useDisplay()
 
@@ -65,7 +70,7 @@ 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)
+ChartJS.register(LinearScale, TimeScale, PointElement, LineElement, Title, Tooltip, Legend, customCanvasBackgroundColor, zoomPlugin)
 // TODO: might need a more efficient way of doing this instead of re-mapping the data
 // Ideally use the store directly instead of passing it as a prop
 let chartData = ref(props.data)
@@ -100,7 +105,21 @@ const options = {
     },
     customCanvasBackgroundColor: {
       color: 'white',
-    }
+    },
+    zoom: {
+      zoom: {
+        wheel: {
+          enabled: false,
+        },
+        pinch: {
+          enabled: false
+        },
+        drag: {
+          enabled: true
+        },
+        mode: 'xy',
+      }
+    },
   },
   scales: {
     x: {
@@ -128,6 +147,10 @@ const options = {
 
 const dataQualityOptions = [{ label: 'good', value: 0 }, { label: 'suspect', value: 1 }, { label: 'degraded', value: 2 }, { label: 'bad', value: 3 }]
 
+const resetZoom = () => {
+  line.value.chart.resetZoom()
+}
+
 const getChartName = () => {
   let identifier = `${props.data.datasets[0].label}-${props.chosenVariable.abbreviation}`
   identifier = identifier.replace(/[^a-zA-Z0-9]/g, '_')

diff --git a/frontend/src/components/NodeChart.vue b/frontend/src/components/NodeChart.vue
@@ -4,7 +4,7 @@
       <v-col lg="10">
         <v-sheet :min-height="lgAndUp ? '65vh' : '50vh'" :max-height="lgAndUp ? '100%' : '20vh'" max-width="100%"
           min-width="500px">
-          <Line :data="chartData" :options="options" ref="line" :plugins="[customCanvasBackgroundColor]" />
+          <Line :data="chartData" :options="options" ref="line" :plugins="[customCanvasBackgroundColor, zoomPlugin]" />
         </v-sheet>
       </v-col>
       <v-col lg="2">
@@ -27,6 +27,10 @@
             <v-icon :icon="mdiPalette"></v-icon>
             Color
           </v-btn>
+          <v-btn @click="resetZoom()" color="input" class="ma-1">
+            <v-icon :icon="mdiLoupe"></v-icon>
+            Reset Zoom
+          </v-btn>
         </v-sheet>
       </v-col>
     </v-row>
@@ -49,9 +53,10 @@ import 'chartjs-adapter-date-fns';
 import { useChartsStore } from '@/stores/charts'
 import { ref } from 'vue'
 import { customCanvasBackgroundColor } from '@/_helpers/charts/plugins'
-import { mdiPalette, mdiDownloadBox, mdiFileDelimited, mdiCodeJson } from '@mdi/js'
+import { mdiPalette, mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiLoupe } from '@mdi/js'
 import { downloadCsv, downloadJson } from '../_helpers/hydroCron';
 import { useDisplay } from 'vuetify'
+import zoomPlugin from 'chartjs-plugin-zoom';
 
 const { lgAndUp } = useDisplay()
 
@@ -61,7 +66,7 @@ const line = ref(null)
 const plotStyle = ref('Scatter')
 const downloading = ref({ csv: false, json: false, chart: false })
 
-ChartJS.register(LinearScale, TimeScale, PointElement, LineElement, Title, Tooltip, Legend, customCanvasBackgroundColor)
+ChartJS.register(LinearScale, TimeScale, PointElement, LineElement, Title, Tooltip, Legend, customCanvasBackgroundColor, zoomPlugin)
 // TODO: might need a more efficient way of doing this instead of re-mapping the data
 // Ideally use the store directly instead of passing it as a prop
 let chartData = ref(props.data)
@@ -95,7 +100,21 @@ const options = {
     },
     customCanvasBackgroundColor: {
       color: 'white',
-    }
+    },
+    zoom: {
+      zoom: {
+        wheel: {
+          enabled: false,
+        },
+        pinch: {
+          enabled: false
+        },
+        drag: {
+          enabled: true
+        },
+        mode: 'xy',
+      }
+    },
   },
   scales: {
     x: {
@@ -114,6 +133,10 @@ const options = {
   }
 }
 
+const resetZoom = () => {
+  line.value.chart.resetZoom()
+}
+
 const getChartName = () => {
   let identifier = `${props.data.datasets[0].label}-${props.chosenVariable.abbreviation}`
   identifier = identifier.replace(/[^a-zA-Z0-9]/g, '_')