diff --git a/src/components/charts/ElevationChart.vue b/src/components/charts/ElevationChart.vue index d46ecca1..641d6f9f 100644 --- a/src/components/charts/ElevationChart.vue +++ b/src/components/charts/ElevationChart.vue @@ -75,6 +75,7 @@ interface Props { config?: ChartConfig series?: Record 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 index 9bc16b26..30ae3a11 100644 --- 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" > @@ -43,6 +43,7 @@ :key="`${subplot.title}-${i}`" :style="`min-width: ${xs ? 100 : 50}%`" :isLoading="isLoading(subplot, elevationLoadingSeriesIds)" + :zoomHandler="sharedVerticalZoomHandler" > @@ -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(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(() => { return {