@mui/x-charts-pro 9.0.0-alpha.0 → 9.0.0-alpha.2

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.mjs

@@ -0,0 +1,100 @@
+'use client';
+
+import * as React from 'react';
+import { getChartPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { translateZoom } from "./useZoom.utils.mjs";
+import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.mjs";
+export const usePanOnWheel = ({
+  store,
+  instance
+}, setZoomDataCallback) => {
+  const {
+    chartsLayerContainerRef
+  } = instance;
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
+  const startedOutsideRef = React.useRef(false);
+  const startedOutsideTimeoutRef = React.useRef(null);
+  const config = store.use(selectorPanInteractionConfig, 'wheel');
+  const isPanOnWheelEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
+  React.useEffect(() => {
+    if (!isPanOnWheelEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('panTurnWheel', {
+      requiredKeys: config.requiredKeys
+    });
+  }, [config, isPanOnWheelEnabled, instance]);
+
+  // Add event for chart pan on wheel
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    const accumulatedChange = {
+      x: 0,
+      y: 0
+    };
+    if (element === null || !isPanOnWheelEnabled) {
+      return () => {};
+    }
+    const rafThrottledSetZoomData = rafThrottle(setZoomDataCallback);
+    const wheelHandler = instance.addInteractionListener('panTurnWheel', event => {
+      const point = getChartPoint(element, {
+        clientX: event.detail.centroid.x,
+        clientY: event.detail.centroid.y
+      });
+
+      // This prevents a pan event from being triggered when the mouse is outside the chart area.
+      // The timeout is used to prevent an weird behavior where if the mouse is outside but enters due to
+      // scrolling, then the pan event is triggered.
+      if (startedOutsideRef.current || !instance.isPointInside(point.x, point.y)) {
+        startedOutsideRef.current = true;
+        if (startedOutsideTimeoutRef.current) {
+          clearTimeout(startedOutsideTimeoutRef.current);
+        }
+        startedOutsideTimeoutRef.current = setTimeout(() => {
+          startedOutsideRef.current = false;
+          startedOutsideTimeoutRef.current = null;
+        }, 100);
+        return;
+      }
+      event.detail.srcEvent.preventDefault();
+      const allowedDirection = config?.allowedDirection ?? 'x';
+      if (event.detail.deltaX === 0 && event.detail.deltaY === 0) {
+        return;
+      }
+      accumulatedChange.x += event.detail.deltaX;
+      accumulatedChange.y += event.detail.deltaY;
+      rafThrottledSetZoomData(prev => {
+        const x = accumulatedChange.x;
+        const y = accumulatedChange.y;
+        accumulatedChange.x = 0;
+        accumulatedChange.y = 0;
+        let movementX = 0;
+        let movementY = 0;
+        if (allowedDirection === 'x' || allowedDirection === 'xy') {
+          movementX = -x;
+        }
+        if (allowedDirection === 'y' || allowedDirection === 'xy') {
+          movementY = y;
+        }
+        if (movementX === 0 && movementY === 0) {
+          return prev;
+        }
+        return translateZoom(prev, {
+          x: movementX,
+          y: movementY
+        }, drawingArea, optionsLookup, allowedDirection);
+      });
+    });
+    return () => {
+      wheelHandler.cleanup();
+      if (startedOutsideTimeoutRef.current) {
+        clearTimeout(startedOutsideTimeoutRef.current);
+        startedOutsideTimeoutRef.current = null;
+      }
+      startedOutsideRef.current = false;
+      rafThrottledSetZoomData.clear();
+    };
+  }, [chartsLayerContainerRef, drawingArea, isPanOnWheelEnabled, optionsLookup, instance, setZoomDataCallback, store, config]);
+};

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.d.mts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "../useChartProZoom.types.mjs";
+export declare const useZoomOnBrush: ({
+  store,
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<(prev: ZoomData[]) => ZoomData[]>) => void;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.js

@@ -15,7 +15,7 @@ const useZoomOnBrush = ({
   instance
 }, setZoomDataCallback) => {
   const {
-    svgRef
+    chartsLayerContainerRef
   } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
@@ -27,7 +27,7 @@ const useZoomOnBrush = ({
 
   // Zoom on brush
   React.useEffect(() => {
-    const element = svgRef.current;
+    const element = chartsLayerContainerRef.current;
     if (element === null || !isZoomOnBrushEnabled) {
       return () => {};
     }
@@ -104,6 +104,6 @@ const useZoomOnBrush = ({
     return () => {
       brushEndHandler.cleanup();
     };
-  }, [svgRef, drawingArea, isZoomOnBrushEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+  }, [chartsLayerContainerRef, drawingArea, isZoomOnBrushEnabled, optionsLookup, instance, setZoomDataCallback, store]);
 };
 exports.useZoomOnBrush = useZoomOnBrush;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.mjs

@@ -0,0 +1,102 @@
+'use client';
+
+import * as React from 'react';
+import { getChartPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid } from "./useZoom.utils.mjs";
+import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.mjs";
+export const useZoomOnBrush = ({
+  store,
+  instance
+}, setZoomDataCallback) => {
+  const {
+    chartsLayerContainerRef
+  } = instance;
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
+  const config = store.use(selectorZoomInteractionConfig, 'brush');
+  const isZoomOnBrushEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
+  React.useEffect(() => {
+    instance.setZoomBrushEnabled(isZoomOnBrushEnabled);
+  }, [isZoomOnBrushEnabled, instance]);
+
+  // Zoom on brush
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (element === null || !isZoomOnBrushEnabled) {
+      return () => {};
+    }
+    const handleBrushEnd = event => {
+      // Convert the brush rectangle to zoom percentages for each axis
+      setZoomDataCallback(prev => {
+        const startPoint = getChartPoint(element, {
+          clientX: event.detail.initialCentroid.x,
+          clientY: event.detail.initialCentroid.y
+        });
+        const endPoint = getChartPoint(element, {
+          clientX: event.detail.centroid.x,
+          clientY: event.detail.centroid.y
+        });
+
+        // Calculate the brush rectangle
+        const minX = Math.min(startPoint.x, endPoint.x);
+        const maxX = Math.max(startPoint.x, endPoint.x);
+        const minY = Math.min(startPoint.y, endPoint.y);
+        const maxY = Math.max(startPoint.y, endPoint.y);
+        return prev.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          let startRatio;
+          let endRatio;
+          const reverse = option.reverse;
+          if (option.axisDirection === 'x') {
+            startRatio = getHorizontalCenterRatio({
+              x: minX,
+              y: 0
+            }, drawingArea, reverse);
+            endRatio = getHorizontalCenterRatio({
+              x: maxX,
+              y: 0
+            }, drawingArea, reverse);
+          } else {
+            startRatio = getVerticalCenterRatio({
+              x: 0,
+              y: maxY
+            }, drawingArea, reverse);
+            endRatio = getVerticalCenterRatio({
+              x: 0,
+              y: minY
+            }, drawingArea, reverse);
+          }
+
+          // Ensure start < end regardless of reverse
+          const minRatio = Math.min(startRatio, endRatio);
+          const maxRatio = Math.max(startRatio, endRatio);
+
+          // Calculate the new zoom range based on the current zoom state
+          // This is important: we need to map the brush selection ratios to the current zoom range
+          const currentStart = zoom.start;
+          const currentEnd = zoom.end;
+          const currentSpan = currentEnd - currentStart;
+          const newStart = currentStart + minRatio * currentSpan;
+          const newEnd = currentStart + maxRatio * currentSpan;
+          const clampedStart = Math.max(option.minStart, Math.min(option.maxEnd, newStart));
+          const clampedEnd = Math.max(option.minStart, Math.min(option.maxEnd, newEnd));
+          if (!isSpanValid(clampedStart, clampedEnd, true, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: clampedStart,
+            end: clampedEnd
+          };
+        });
+      });
+    };
+    const brushEndHandler = instance.addInteractionListener('brushEnd', handleBrushEnd);
+    return () => {
+      brushEndHandler.cleanup();
+    };
+  }, [chartsLayerContainerRef, drawingArea, isZoomOnBrushEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+};

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnDoubleTapReset.d.mts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "../useChartProZoom.types.mjs";
+export declare const useZoomOnDoubleTapReset: ({
+  store,
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnDoubleTapReset.js

@@ -14,7 +14,7 @@ const useZoomOnDoubleTapReset = ({
   instance
 }, setZoomDataCallback) => {
   const {
-    svgRef
+    chartsLayerContainerRef
   } = instance;
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'doubleTapReset');
@@ -35,7 +35,7 @@ const useZoomOnDoubleTapReset = ({
 
   // Reset zoom on double tap
   React.useEffect(() => {
-    const element = svgRef.current;
+    const element = chartsLayerContainerRef.current;
     if (element === null || !isZoomOnDoubleTapResetEnabled) {
       return () => {};
     }
@@ -61,6 +61,6 @@ const useZoomOnDoubleTapReset = ({
     return () => {
       doubleTapResetHandler.cleanup();
     };
-  }, [svgRef, isZoomOnDoubleTapResetEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+  }, [chartsLayerContainerRef, isZoomOnDoubleTapResetEnabled, optionsLookup, instance, setZoomDataCallback, store]);
 };
 exports.useZoomOnDoubleTapReset = useZoomOnDoubleTapReset;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnDoubleTapReset.mjs

@@ -0,0 +1,59 @@
+'use client';
+
+import * as React from 'react';
+import { selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.mjs";
+export const useZoomOnDoubleTapReset = ({
+  store,
+  instance
+}, setZoomDataCallback) => {
+  const {
+    chartsLayerContainerRef
+  } = instance;
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
+  const config = store.use(selectorZoomInteractionConfig, 'doubleTapReset');
+  const isZoomOnDoubleTapResetEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
+  React.useEffect(() => {
+    if (!isZoomOnDoubleTapResetEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomDoubleTapReset', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [config, isZoomOnDoubleTapResetEnabled, instance]);
+
+  // Reset zoom on double tap
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (element === null || !isZoomOnDoubleTapResetEnabled) {
+      return () => {};
+    }
+    const handleDoubleTapReset = () => {
+      // Reset all axes to their default zoom state
+      setZoomDataCallback(prev => {
+        return prev.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+
+          // Reset to the full range (minStart to maxEnd)
+          return {
+            axisId: zoom.axisId,
+            start: option.minStart,
+            end: option.maxEnd
+          };
+        });
+      });
+    };
+    const doubleTapResetHandler = instance.addInteractionListener('zoomDoubleTapReset', handleDoubleTapReset);
+    return () => {
+      doubleTapResetHandler.cleanup();
+    };
+  }, [chartsLayerContainerRef, isZoomOnDoubleTapResetEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+};

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.d.mts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "../useChartProZoom.types.mjs";
+export declare const useZoomOnPinch: ({
+  store,
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.js

@@ -16,7 +16,7 @@ const useZoomOnPinch = ({
   instance
 }, setZoomDataCallback) => {
   const {
-    svgRef
+    chartsLayerContainerRef
   } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
@@ -33,7 +33,7 @@ const useZoomOnPinch = ({
 
   // Zoom on pinch
   React.useEffect(() => {
-    const element = svgRef.current;
+    const element = chartsLayerContainerRef.current;
     if (element === null || !isZoomOnPinchEnabled) {
       return () => {};
     }
@@ -72,6 +72,6 @@ const useZoomOnPinch = ({
       zoomHandler.cleanup();
       rafThrottledCallback.clear();
     };
-  }, [svgRef, drawingArea, isZoomOnPinchEnabled, optionsLookup, store, instance, setZoomDataCallback]);
+  }, [chartsLayerContainerRef, drawingArea, isZoomOnPinchEnabled, optionsLookup, store, instance, setZoomDataCallback]);
 };
 exports.useZoomOnPinch = useZoomOnPinch;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.mjs

@@ -0,0 +1,70 @@
+'use client';
+
+import * as React from 'react';
+import { getChartPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.mjs";
+import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.mjs";
+export const useZoomOnPinch = ({
+  store,
+  instance
+}, setZoomDataCallback) => {
+  const {
+    chartsLayerContainerRef
+  } = instance;
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
+  const config = store.use(selectorZoomInteractionConfig, 'pinch');
+  const isZoomOnPinchEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
+  React.useEffect(() => {
+    if (!isZoomOnPinchEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomPinch', {
+      requiredKeys: config.requiredKeys
+    });
+  }, [config, isZoomOnPinchEnabled, instance]);
+
+  // Zoom on pinch
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (element === null || !isZoomOnPinchEnabled) {
+      return () => {};
+    }
+    const rafThrottledCallback = rafThrottle(event => {
+      // If the delta is 0, it means the pinch gesture is not valid.
+      if (event.detail.direction === 0) {
+        return;
+      }
+      setZoomDataCallback(prev => {
+        return prev.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          const isZoomIn = event.detail.direction > 0;
+          const scaleRatio = 1 + event.detail.deltaScale;
+          const point = getChartPoint(element, {
+            clientX: event.detail.centroid.x,
+            clientY: event.detail.centroid.y
+          });
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea, option.reverse) : getVerticalCenterRatio(point, drawingArea, option.reverse);
+          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
+          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: newMinRange,
+            end: newMaxRange
+          };
+        });
+      });
+    });
+    const zoomHandler = instance.addInteractionListener('zoomPinch', rafThrottledCallback);
+    return () => {
+      zoomHandler.cleanup();
+      rafThrottledCallback.clear();
+    };
+  }, [chartsLayerContainerRef, drawingArea, isZoomOnPinchEnabled, optionsLookup, store, instance, setZoomDataCallback]);
+};

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.d.mts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "../useChartProZoom.types.mjs";
+export declare const useZoomOnTapAndDrag: ({
+  store,
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.js

@@ -16,7 +16,7 @@ const useZoomOnTapAndDrag = ({
   instance
 }, setZoomDataCallback) => {
   const {
-    svgRef
+    chartsLayerContainerRef
   } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
@@ -38,7 +38,7 @@ const useZoomOnTapAndDrag = ({
 
   // Zoom on tap and drag
   React.useEffect(() => {
-    const element = svgRef.current;
+    const element = chartsLayerContainerRef.current;
     if (element === null || !isZoomOnTapAndDragEnabled) {
       return () => {};
     }
@@ -77,6 +77,6 @@ const useZoomOnTapAndDrag = ({
       zoomHandler.cleanup();
       rafThrottledCallback.clear();
     };
-  }, [svgRef, drawingArea, isZoomOnTapAndDragEnabled, optionsLookup, store, instance, setZoomDataCallback]);
+  }, [chartsLayerContainerRef, drawingArea, isZoomOnTapAndDragEnabled, optionsLookup, store, instance, setZoomDataCallback]);
 };
 exports.useZoomOnTapAndDrag = useZoomOnTapAndDrag;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.mjs

@@ -0,0 +1,75 @@
+'use client';
+
+import * as React from 'react';
+import { getChartPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.mjs";
+import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.mjs";
+export const useZoomOnTapAndDrag = ({
+  store,
+  instance
+}, setZoomDataCallback) => {
+  const {
+    chartsLayerContainerRef
+  } = instance;
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
+  const config = store.use(selectorZoomInteractionConfig, 'tapAndDrag');
+  const isZoomOnTapAndDragEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
+  React.useEffect(() => {
+    if (!isZoomOnTapAndDragEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomTapAndDrag', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [config, isZoomOnTapAndDragEnabled, instance]);
+
+  // Zoom on tap and drag
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (element === null || !isZoomOnTapAndDragEnabled) {
+      return () => {};
+    }
+    const rafThrottledCallback = rafThrottle(event => {
+      // If the delta is 0, we didn't move
+      if (event.detail.deltaY === 0) {
+        return;
+      }
+      setZoomDataCallback(prev => {
+        return prev.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          const isZoomIn = event.detail.deltaY > 0;
+          const scaleRatio = 1 + event.detail.deltaY / 100;
+          const point = getChartPoint(element, {
+            clientX: event.detail.initialCentroid.x,
+            clientY: event.detail.initialCentroid.y
+          });
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea, option.reverse) : getVerticalCenterRatio(point, drawingArea, option.reverse);
+          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
+          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: newMinRange,
+            end: newMaxRange
+          };
+        });
+      });
+    });
+    const zoomHandler = instance.addInteractionListener('zoomTapAndDrag', rafThrottledCallback);
+    return () => {
+      zoomHandler.cleanup();
+      rafThrottledCallback.clear();
+    };
+  }, [chartsLayerContainerRef, drawingArea, isZoomOnTapAndDragEnabled, optionsLookup, store, instance, setZoomDataCallback]);
+};

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.d.mts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
+import { type UseChartProZoomSignature } from "../useChartProZoom.types.mjs";
+export declare const useZoomOnWheel: ({
+  store,
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.js

@@ -16,7 +16,7 @@ const useZoomOnWheel = ({
   instance
 }, setZoomDataCallback) => {
   const {
-    svgRef
+    chartsLayerContainerRef
   } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
@@ -35,7 +35,7 @@ const useZoomOnWheel = ({
 
   // Add event for chart zoom in/out
   React.useEffect(() => {
-    const element = svgRef.current;
+    const element = chartsLayerContainerRef.current;
     if (element === null || !isZoomOnWheelEnabled) {
       return () => {};
     }
@@ -93,6 +93,6 @@ const useZoomOnWheel = ({
       startedOutsideRef.current = false;
       rafThrottledSetZoomData.clear();
     };
-  }, [svgRef, drawingArea, isZoomOnWheelEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+  }, [chartsLayerContainerRef, drawingArea, isZoomOnWheelEnabled, optionsLookup, instance, setZoomDataCallback, store]);
 };
 exports.useZoomOnWheel = useZoomOnWheel;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.mjs

@@ -0,0 +1,91 @@
+'use client';
+
+import * as React from 'react';
+import { getChartPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { getHorizontalCenterRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.mjs";
+import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.mjs";
+export const useZoomOnWheel = ({
+  store,
+  instance
+}, setZoomDataCallback) => {
+  const {
+    chartsLayerContainerRef
+  } = instance;
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
+  const startedOutsideRef = React.useRef(false);
+  const startedOutsideTimeoutRef = React.useRef(null);
+  const config = store.use(selectorZoomInteractionConfig, 'wheel');
+  const isZoomOnWheelEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
+  React.useEffect(() => {
+    if (!isZoomOnWheelEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomTurnWheel', {
+      requiredKeys: config.requiredKeys
+    });
+  }, [config, isZoomOnWheelEnabled, instance]);
+
+  // Add event for chart zoom in/out
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (element === null || !isZoomOnWheelEnabled) {
+      return () => {};
+    }
+    const rafThrottledSetZoomData = rafThrottle(setZoomDataCallback);
+    const zoomOnWheelHandler = instance.addInteractionListener('zoomTurnWheel', event => {
+      const point = getChartPoint(element, {
+        clientX: event.detail.centroid.x,
+        clientY: event.detail.centroid.y
+      });
+
+      // This prevents a zoom event from being triggered when the mouse is outside the chart area.
+      // The timeout is used to prevent an weird behavior where if the mouse is outside but enters due to
+      // scrolling, then the zoom event is triggered.
+      if (startedOutsideRef.current || !instance.isPointInside(point.x, point.y)) {
+        startedOutsideRef.current = true;
+        if (startedOutsideTimeoutRef.current) {
+          clearTimeout(startedOutsideTimeoutRef.current);
+        }
+        startedOutsideTimeoutRef.current = setTimeout(() => {
+          startedOutsideRef.current = false;
+          startedOutsideTimeoutRef.current = null;
+        }, 100);
+        return;
+      }
+      event.detail.srcEvent.preventDefault();
+      rafThrottledSetZoomData(prev => {
+        return prev.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea, option.reverse) : getVerticalCenterRatio(point, drawingArea, option.reverse);
+          const {
+            scaleRatio,
+            isZoomIn
+          } = getWheelScaleRatio(event.detail.srcEvent, option.step);
+          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
+          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: newMinRange,
+            end: newMaxRange
+          };
+        });
+      });
+    });
+    return () => {
+      zoomOnWheelHandler.cleanup();
+      if (startedOutsideTimeoutRef.current) {
+        clearTimeout(startedOutsideTimeoutRef.current);
+        startedOutsideTimeoutRef.current = null;
+      }
+      startedOutsideRef.current = false;
+      rafThrottledSetZoomData.clear();
+    };
+  }, [chartsLayerContainerRef, drawingArea, isZoomOnWheelEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+};