@mui/x-charts-pro 8.0.0-alpha.7 → 8.0.0-alpha.8

package/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -0,0 +1,324 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useSelector, getSVGPoint, selectorChartDrawingArea } from '@mui/x-charts/internals';
+import { defaultizeZoom } from "./defaultizeZoom.js";
+import { getDiff, getHorizontalCenterRatio, getPinchScaleRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, preventDefault, zoomAtPoint } from "./useChartProZoom.utils.js";
+import { selectorChartZoomOptionsLookup } from "./useChartProZoom.selectors.js";
+
+// It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
+function initializeZoomData(options) {
+  return Object.values(options).map(({
+    axisId,
+    minStart: start,
+    maxEnd: end
+  }) => ({
+    axisId,
+    start,
+    end
+  }));
+}
+export const useChartProZoom = ({
+  store,
+  instance,
+  svgRef,
+  params
+}) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const isZoomEnabled = Object.keys(optionsLookup).length > 0;
+
+  // Add events
+  const panningEventCacheRef = React.useRef([]);
+  const zoomEventCacheRef = React.useRef([]);
+  const eventPrevDiff = React.useRef(0);
+  const interactionTimeoutRef = React.useRef(undefined);
+  const setIsInteracting = React.useCallback(isInteracting => {
+    store.update(prev => _extends({}, prev, {
+      zoom: _extends({}, prev.zoom, {
+        isInteracting
+      })
+    }));
+  }, [store]);
+  const setZoomDataCallback = React.useCallback(zoomData => {
+    store.update(prevState => {
+      const newZoomData = typeof zoomData === 'function' ? zoomData(prevState.zoom.zoomData) : zoomData;
+      params.onZoomChange?.(newZoomData);
+      return _extends({}, prevState, {
+        zoom: _extends({}, prevState.zoom, {
+          zoomData: newZoomData
+        })
+      });
+    });
+  }, [params, store]);
+
+  // Add event for chart panning
+  const isPanEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) || false, [optionsLookup]);
+  const isDraggingRef = React.useRef(false);
+  const touchStartRef = React.useRef(null);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isPanEnabled) {
+      return () => {};
+    }
+    const handlePan = event => {
+      if (element === null || !isDraggingRef.current || panningEventCacheRef.current.length > 1) {
+        return;
+      }
+      if (touchStartRef.current == null) {
+        return;
+      }
+      const point = getSVGPoint(element, event);
+      const movementX = point.x - touchStartRef.current.x;
+      const movementY = (point.y - touchStartRef.current.y) * -1;
+      const newZoomData = touchStartRef.current.zoomData.map(zoom => {
+        const options = optionsLookup[zoom.axisId];
+        if (!options || !options.panning) {
+          return zoom;
+        }
+        const min = zoom.start;
+        const max = zoom.end;
+        const span = max - min;
+        const MIN_PERCENT = options.minStart;
+        const MAX_PERCENT = options.maxEnd;
+        const movement = options.axisDirection === 'x' ? movementX : movementY;
+        const dimension = options.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
+        let newMinPercent = min - movement / dimension * span;
+        let newMaxPercent = max - movement / dimension * span;
+        if (newMinPercent < MIN_PERCENT) {
+          newMinPercent = MIN_PERCENT;
+          newMaxPercent = newMinPercent + span;
+        }
+        if (newMaxPercent > MAX_PERCENT) {
+          newMaxPercent = MAX_PERCENT;
+          newMinPercent = newMaxPercent - span;
+        }
+        if (newMinPercent < MIN_PERCENT || newMaxPercent > MAX_PERCENT || span < options.minSpan || span > options.maxSpan) {
+          return zoom;
+        }
+        return _extends({}, zoom, {
+          start: newMinPercent,
+          end: newMaxPercent
+        });
+      });
+      setZoomDataCallback(newZoomData);
+    };
+    const handleDown = event => {
+      panningEventCacheRef.current.push(event);
+      const point = getSVGPoint(element, event);
+      if (!instance.isPointInside(point)) {
+        return;
+      }
+      // If there is only one pointer, prevent selecting text
+      if (panningEventCacheRef.current.length === 1) {
+        event.preventDefault();
+      }
+      isDraggingRef.current = true;
+      setIsInteracting(true);
+      touchStartRef.current = {
+        x: point.x,
+        y: point.y,
+        zoomData: store.getSnapshot().zoom.zoomData
+      };
+    };
+    const handleUp = event => {
+      panningEventCacheRef.current.splice(panningEventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
+      setIsInteracting(false);
+      isDraggingRef.current = false;
+      touchStartRef.current = null;
+    };
+    element.addEventListener('pointerdown', handleDown);
+    document.addEventListener('pointermove', handlePan);
+    document.addEventListener('pointerup', handleUp);
+    document.addEventListener('pointercancel', handleUp);
+    document.addEventListener('pointerleave', handleUp);
+    return () => {
+      element.removeEventListener('pointerdown', handleDown);
+      document.removeEventListener('pointermove', handlePan);
+      document.removeEventListener('pointerup', handleUp);
+      document.removeEventListener('pointercancel', handleUp);
+      document.removeEventListener('pointerleave', handleUp);
+    };
+  }, [instance, svgRef, isDraggingRef, setIsInteracting, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
+
+  // Add event for chart zoom in/out
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isZoomEnabled) {
+      return () => {};
+    }
+    const wheelHandler = event => {
+      if (element === null) {
+        return;
+      }
+      const point = getSVGPoint(element, event);
+      if (!instance.isPointInside(point)) {
+        return;
+      }
+      event.preventDefault();
+      if (interactionTimeoutRef.current) {
+        clearTimeout(interactionTimeoutRef.current);
+      }
+      setIsInteracting(true);
+      // Debounce transition to `isInteractive=false`.
+      // Useful because wheel events don't have an "end" event.
+      interactionTimeoutRef.current = window.setTimeout(() => {
+        setIsInteracting(false);
+      }, 166);
+      setZoomDataCallback(prevZoomData => {
+        return prevZoomData.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const {
+            scaleRatio,
+            isZoomIn
+          } = getWheelScaleRatio(event, 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
+          };
+        });
+      });
+    };
+    function pointerDownHandler(event) {
+      zoomEventCacheRef.current.push(event);
+      setIsInteracting(true);
+    }
+    function pointerMoveHandler(event) {
+      if (element === null) {
+        return;
+      }
+      const index = zoomEventCacheRef.current.findIndex(cachedEv => cachedEv.pointerId === event.pointerId);
+      zoomEventCacheRef.current[index] = event;
+
+      // Not a pinch gesture
+      if (zoomEventCacheRef.current.length !== 2) {
+        return;
+      }
+      const firstEvent = zoomEventCacheRef.current[0];
+      const curDiff = getDiff(zoomEventCacheRef.current);
+      setZoomDataCallback(prevZoomData => {
+        const newZoomData = prevZoomData.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          const {
+            scaleRatio,
+            isZoomIn
+          } = getPinchScaleRatio(curDiff, eventPrevDiff.current, option.step);
+
+          // If the scale ratio is 0, it means the pinch gesture is not valid.
+          if (scaleRatio === 0) {
+            return zoom;
+          }
+          const point = getSVGPoint(element, firstEvent);
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
+          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: newMinRange,
+            end: newMaxRange
+          };
+        });
+        eventPrevDiff.current = curDiff;
+        return newZoomData;
+      });
+    }
+    function pointerUpHandler(event) {
+      zoomEventCacheRef.current.splice(zoomEventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
+      if (zoomEventCacheRef.current.length < 2) {
+        eventPrevDiff.current = 0;
+      }
+      if (event.type === 'pointerup' || event.type === 'pointercancel') {
+        setIsInteracting(false);
+      }
+    }
+    element.addEventListener('wheel', wheelHandler);
+    element.addEventListener('pointerdown', pointerDownHandler);
+    element.addEventListener('pointermove', pointerMoveHandler);
+    element.addEventListener('pointerup', pointerUpHandler);
+    element.addEventListener('pointercancel', pointerUpHandler);
+    element.addEventListener('pointerout', pointerUpHandler);
+    element.addEventListener('pointerleave', pointerUpHandler);
+
+    // Prevent zooming the entire page on touch devices
+    element.addEventListener('touchstart', preventDefault);
+    element.addEventListener('touchmove', preventDefault);
+    return () => {
+      element.removeEventListener('wheel', wheelHandler);
+      element.removeEventListener('pointerdown', pointerDownHandler);
+      element.removeEventListener('pointermove', pointerMoveHandler);
+      element.removeEventListener('pointerup', pointerUpHandler);
+      element.removeEventListener('pointercancel', pointerUpHandler);
+      element.removeEventListener('pointerout', pointerUpHandler);
+      element.removeEventListener('pointerleave', pointerUpHandler);
+      element.removeEventListener('touchstart', preventDefault);
+      element.removeEventListener('touchmove', preventDefault);
+      if (interactionTimeoutRef.current) {
+        clearTimeout(interactionTimeoutRef.current);
+      }
+    };
+  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, setIsInteracting, instance, setZoomDataCallback]);
+  return {
+    publicAPI: {
+      setZoomData: setZoomDataCallback
+    },
+    instance: {
+      setZoomData: setZoomDataCallback
+    }
+  };
+};
+useChartProZoom.params = {
+  initialZoom: true,
+  onZoomChange: true
+};
+useChartProZoom.getDefaultizedParams = ({
+  params
+}) => {
+  const optionsLookup = _extends({}, params.defaultizedXAxis.reduce((acc, v) => {
+    const {
+      zoom,
+      id: axisId
+    } = v;
+    const defaultizedZoom = defaultizeZoom(zoom, axisId, 'x');
+    if (defaultizedZoom) {
+      acc[axisId] = defaultizedZoom;
+    }
+    return acc;
+  }, {}), params.defaultizedYAxis.reduce((acc, v) => {
+    const {
+      zoom,
+      id: axisId
+    } = v;
+    const defaultizedZoom = defaultizeZoom(zoom, axisId, 'y');
+    if (defaultizedZoom) {
+      acc[axisId] = defaultizedZoom;
+    }
+    return acc;
+  }, {}));
+  return _extends({}, params, {
+    optionsLookup
+  });
+};
+useChartProZoom.getInitialState = params => {
+  return {
+    zoom: {
+      optionsLookup: params.optionsLookup,
+      zoomData: params.initialZoom === undefined ? initializeZoomData(params.optionsLookup) : params.initialZoom,
+      isInteracting: false
+    }
+  };
+};

package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts

@@ -0,0 +1,149 @@
+import { ChartRootSelector } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from './useChartProZoom.types';
+export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature>;
+export declare const selectorChartZoomOptionsLookup: ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("./useChartProZoom.types").UseChartProZoomState & Partial<{}> & {
+    cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        optionsLookup: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+        isInteracting: boolean;
+        zoomData: import("@mui/x-charts/internals").ZoomData[];
+    }) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        optionsLookup: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+        isInteracting: boolean;
+        zoomData: import("@mui/x-charts/internals").ZoomData[];
+    }) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+    dependencies: [ChartRootSelector<UseChartProZoomSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+export declare const selectorChartZoomData: ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("./useChartProZoom.types").UseChartProZoomState & Partial<{}> & {
+    cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}) => import("@mui/x-charts/internals").ZoomData[]) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        optionsLookup: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+        isInteracting: boolean;
+        zoomData: import("@mui/x-charts/internals").ZoomData[];
+    }) => import("@mui/x-charts/internals").ZoomData[];
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        optionsLookup: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+        isInteracting: boolean;
+        zoomData: import("@mui/x-charts/internals").ZoomData[];
+    }) => import("@mui/x-charts/internals").ZoomData[]) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => import("@mui/x-charts/internals").ZoomData[];
+    dependencies: [ChartRootSelector<UseChartProZoomSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+export declare const selectorChartZoomIsInteracting: ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("./useChartProZoom.types").UseChartProZoomState & Partial<{}> & {
+    cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        optionsLookup: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+        isInteracting: boolean;
+        zoomData: import("@mui/x-charts/internals").ZoomData[];
+    }) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        optionsLookup: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+        isInteracting: boolean;
+        zoomData: import("@mui/x-charts/internals").ZoomData[];
+    }) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [ChartRootSelector<UseChartProZoomSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("./useChartProZoom.types").UseChartProZoomState & Partial<{}> & {
+    cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("./useChartProZoom.types").UseChartProZoomState & Partial<{}> & {
+        cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+    }) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: {
+            optionsLookup: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+            isInteracting: boolean;
+            zoomData: import("@mui/x-charts/internals").ZoomData[];
+        }) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+        memoizedResultFunc: ((resultFuncArgs_0: {
+            optionsLookup: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+            isInteracting: boolean;
+            zoomData: import("@mui/x-charts/internals").ZoomData[];
+        }) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+        dependencies: [ChartRootSelector<UseChartProZoomSignature>];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/useChartProZoom/useChartProZoom.selectors.js

@@ -0,0 +1,6 @@
+import { createSelector } from '@mui/x-charts/internals';
+export const selectorChartZoomState = state => state.zoom;
+export const selectorChartZoomOptionsLookup = createSelector(selectorChartZoomState, zoom => zoom.optionsLookup);
+export const selectorChartZoomData = createSelector(selectorChartZoomState, zoom => zoom.zoomData);
+export const selectorChartZoomIsInteracting = createSelector(selectorChartZoomState, zoom => zoom.isInteracting);
+export const selectorChartZoomIsEnabled = createSelector(selectorChartZoomOptionsLookup, optionsLookup => Object.keys(optionsLookup).length > 0);

package/internals/plugins/useChartProZoom/useChartProZoom.types.d.ts

@@ -0,0 +1,54 @@
+import { AxisId, UseChartSeriesSignature, ChartPluginSignature, DefaultizedZoomOptions, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData } from '@mui/x-charts/internals';
+export interface UseChartProZoomParameters {
+    /**
+     * The list of zoom data related to each axis.
+     */
+    initialZoom?: ZoomData[];
+    /**
+     * Callback fired when the zoom has changed.
+     *
+     * @param {ZoomData[]} zoomData Updated zoom data.
+     */
+    onZoomChange?: (zoomData: ZoomData[] | ((zoomData: ZoomData[]) => ZoomData[])) => void;
+}
+export type UseChartProZoomDefaultizedParameters = UseChartProZoomParameters & UseChartCartesianAxisDefaultizedParameters & {
+    /**
+     * The zoom options for each axis.
+     */
+    optionsLookup: Record<AxisId, DefaultizedZoomOptions>;
+};
+export interface UseChartProZoomState {
+    zoom: {
+        /**
+         * The zoom options for each axis.
+         */
+        optionsLookup: Record<AxisId, DefaultizedZoomOptions>;
+        /**
+         * Whether the user is currently interacting with the chart.
+         * This is useful to disable animations while the user is interacting.
+         */
+        isInteracting: boolean;
+        /**
+         * Mapping of axis id to the zoom data.
+         */
+        zoomData: ZoomData[];
+    };
+}
+export interface UseChartProZoomPublicApi {
+    /**
+     * Set the zoom data state.
+     * @param {ZoomData[] | ((prev: ZoomData[]) => ZoomData[])} value  The new value. Can either be the new zoom data, or an updater function.
+     * @returns {void}
+     */
+    setZoomData: (value: ZoomData[] | ((prev: ZoomData[]) => ZoomData[])) => void;
+}
+export interface UseChartProZoomInstance extends UseChartProZoomPublicApi {
+}
+export type UseChartProZoomSignature = ChartPluginSignature<{
+    params: UseChartProZoomParameters;
+    defaultizedParams: UseChartProZoomDefaultizedParameters;
+    state: UseChartProZoomState;
+    publicAPI: UseChartProZoomPublicApi;
+    instance: UseChartProZoomInstance;
+    dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
+}>;

package/internals/plugins/useChartProZoom/useChartProZoom.utils.d.ts

@@ -0,0 +1,45 @@
+import { DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+/**
+ * Helper to get the range (in percents of a reference range) corresponding to a given scale.
+ * @param centerRatio {number} The ratio of the point that should not move between the previous and next range.
+ * @param scaleRatio {number} The target scale ratio.
+ * @returns The range to display.
+ */
+export declare const zoomAtPoint: (centerRatio: number, scaleRatio: number, currentZoomData: ZoomData, options: DefaultizedZoomOptions) => number[];
+/**
+ * Checks if the new span is valid.
+ */
+export declare function isSpanValid(minRange: number, maxRange: number, isZoomIn: boolean, option: DefaultizedZoomOptions): boolean;
+/**
+ * Get the scale ratio and if it's a zoom in or out from a wheel event.
+ */
+export declare function getWheelScaleRatio(event: WheelEvent, step: number): {
+    scaleRatio: number;
+    isZoomIn: boolean;
+};
+/**
+ * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
+ */
+export declare function getPinchScaleRatio(curDiff: number, prevDiff: number, step: number): {
+    scaleRatio: number;
+    isZoomIn: boolean;
+};
+export declare function getDiff(eventCache: PointerEvent[]): number;
+/**
+ * Get the ratio of the point in the horizontal center of the area.
+ */
+export declare function getHorizontalCenterRatio(point: {
+    x: number;
+    y: number;
+}, area: {
+    left: number;
+    width: number;
+}): number;
+export declare function preventDefault(event: TouchEvent): void;
+export declare function getVerticalCenterRatio(point: {
+    x: number;
+    y: number;
+}, area: {
+    top: number;
+    height: number;
+}): number;