update zooming

CUAHSI · May 16, 2024 · 499ad88 · 499ad88
1 parent acc1b01
commit 499ad88
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue
@@ -26,7 +26,7 @@
             Download JSON
           </v-btn>
           <v-btn @click="resetZoom()" color="input" class="ma-1">
-            <v-icon :icon="mdiLoupe"></v-icon>
+            <v-icon :icon="mdiMagnifyMinusOutline"></v-icon>
             Reset Zoom
           </v-btn>
         </v-sheet>
@@ -52,7 +52,7 @@ 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, mdiLoupe } from '@mdi/js'
+import { mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiMagnifyMinusOutline } from '@mdi/js'
 import { downloadCsv, downloadFeatureJson } from '../_helpers/hydroCron';
 import { useDisplay } from 'vuetify'
 import zoomPlugin from 'chartjs-plugin-zoom';
@@ -103,15 +103,19 @@ const options = {
       color: 'white',
     },
     zoom: {
+      pan: {
+        enabled: true,
+        mode: 'xy',
+      },
       zoom: {
         wheel: {
-          enabled: false,
+          enabled: true,
         },
         pinch: {
           enabled: false
         },
         drag: {
-          enabled: true
+          enabled: false
         },
         mode: 'xy',
       }

diff --git a/frontend/src/components/NodeChart.vue b/frontend/src/components/NodeChart.vue
@@ -22,7 +22,7 @@
             Download JSON
           </v-btn>
           <v-btn @click="resetZoom()" color="input" class="ma-1">
-            <v-icon :icon="mdiLoupe"></v-icon>
+            <v-icon :icon="mdiMagnifyMinusOutline"></v-icon>
             Reset Zoom
           </v-btn>
         </v-sheet>
@@ -46,7 +46,7 @@ import { Line } from 'vue-chartjs'
 import 'chartjs-adapter-date-fns';
 import { ref } from 'vue'
 import { customCanvasBackgroundColor } from '@/_helpers/charts/plugins'
-import { mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiLoupe } from '@mdi/js'
+import { mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiMagnifyMinusOutline } from '@mdi/js'
 import { downloadMultiNodesCsv, downloadMultiNodesJson } from '../_helpers/hydroCron';
 import { useDisplay } from 'vuetify'
 import zoomPlugin from 'chartjs-plugin-zoom';
@@ -93,15 +93,19 @@ const options = {
       color: 'white',
     },
     zoom: {
+      pan: {
+        enabled: true,
+        mode: 'xy',
+      },
       zoom: {
         wheel: {
-          enabled: false,
+          enabled: true,
         },
         pinch: {
           enabled: false
         },
         drag: {
-          enabled: true
+          enabled: false
         },
         mode: 'xy',
       }