Set x and y shared zoom handler for chart and vertical chart

Deltares · Sep 18, 2024 · d2674be · d2674be
1 parent 8a128a8
commit d2674be
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/components/charts/ElevationChart.vue b/src/components/charts/ElevationChart.vue
@@ -75,6 +75,7 @@ interface Props {
   config?: ChartConfig
   series?: Record<string, Series>
   isLoading?: boolean
+  zoomHandler?: ZoomHandler
 }
 
 interface Tag {
@@ -147,7 +148,7 @@ onMounted(() => {
       axisOptions,
     )
     const mouseOver = new VerticalMouseOver()
-    const zoom = new ZoomHandler(WheelMode.NONE)
+    const zoom = props.zoomHandler ?? new ZoomHandler(WheelMode.NONE)
 
     axis.accept(zoom)
     axis.accept(mouseOver)

diff --git a/src/components/timeseries/TimeSeriesComponent.vue b/src/components/timeseries/TimeSeriesComponent.vue
@@ -12,7 +12,7 @@
           :key="`${subplot.title}-${i}`"
           :currentTime="props.currentTime"
           :isLoading="isLoading(subplot, loadingSeriesIds)"
-          :zoomHandler="zoomHandler"
+          :zoomHandler="sharedZoomHandler"
         >
         </TimeSeriesChart>
       </KeepAlive>
@@ -43,6 +43,7 @@
           :key="`${subplot.title}-${i}`"
           :style="`min-width: ${xs ? 100 : 50}%`"
           :isLoading="isLoading(subplot, elevationLoadingSeriesIds)"
+          :zoomHandler="sharedVerticalZoomHandler"
         >
         </ElevationChart>
       </KeepAlive>
@@ -85,7 +86,7 @@ import type { TimeSeriesEvent } from '@deltares/fews-pi-requests'
 import { useDisplay } from 'vuetify'
 import { onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router'
 import { until } from '@vueuse/core'
-import { WheelMode, ZoomHandler } from '@deltares/fews-web-oc-charts'
+import { ZoomHandler, ZoomMode } from '@deltares/fews-web-oc-charts'
 
 interface Props {
   config?: DisplayConfig
@@ -129,7 +130,12 @@ const lastUpdated = ref<Date>(new Date())
 const isEditing = ref(false)
 const confirmationDialog = ref(false)
 const { xs } = useDisplay()
-const zoomHandler = new ZoomHandler(WheelMode.NONE)
+const sharedZoomHandler = new ZoomHandler({
+  sharedZoomMode: ZoomMode.X,
+})
+const sharedVerticalZoomHandler = new ZoomHandler({
+  sharedZoomMode: ZoomMode.Y,
+})
 
 const options = computed<UseTimeSeriesOptions>(() => {
   return {