@mui/x-charts-pro 9.3.0 → 9.5.0

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

@@ -1,67 +1,27 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useZoomOnWheel = void 0;
-var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
-var _rafThrottle = require("@mui/x-internals/rafThrottle");
 var _useZoom = require("./useZoom.utils");
 var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
+var _useWheelGesture = require("../../zoomGestures/useWheelGesture");
 const useZoomOnWheel = ({
   store,
   instance
 }, setZoomDataCallback) => {
-  const {
-    chartsLayerContainerRef
-  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
-  const startedOutsideRef = React.useRef(false);
-  const startedOutsideTimeoutRef = React.useRef(null);
   const config = store.use(_ZoomInteractionConfig.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 = (0, _rafThrottle.rafThrottle)(setZoomDataCallback);
-    const zoomOnWheelHandler = instance.addInteractionListener('zoomTurnWheel', event => {
-      const point = (0, _internals.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 a 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 => {
+  (0, _useWheelGesture.useWheelGesture)(instance, {
+    enabled: isZoomOnWheelEnabled,
+    requiredKeys: config?.requiredKeys,
+    onWheel: (point, wheelEvent) => {
+      setZoomDataCallback(prev => {
         return prev.map(zoom => {
           const option = optionsLookup[zoom.axisId];
           if (!option) {
@@ -71,7 +31,7 @@ const useZoomOnWheel = ({
           const {
             scaleRatio,
             isZoomIn
-          } = (0, _useZoom.getWheelScaleRatio)(event.detail.srcEvent, option.step);
+          } = (0, _useZoom.getWheelScaleRatio)(wheelEvent, option.step);
           const [newMinRange, newMaxRange] = (0, _useZoom.zoomAtPoint)(centerRatio, scaleRatio, zoom, option);
           if (!(0, _useZoom.isSpanValid)(newMinRange, newMaxRange, isZoomIn, option)) {
             return zoom;
@@ -83,16 +43,7 @@ const useZoomOnWheel = ({
           };
         });
       });
-    });
-    return () => {
-      zoomOnWheelHandler.cleanup();
-      if (startedOutsideTimeoutRef.current) {
-        clearTimeout(startedOutsideTimeoutRef.current);
-        startedOutsideTimeoutRef.current = null;
-      }
-      startedOutsideRef.current = false;
-      rafThrottledSetZoomData.clear();
-    };
-  }, [chartsLayerContainerRef, drawingArea, isZoomOnWheelEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+    }
+  });
 };
 exports.useZoomOnWheel = useZoomOnWheel;

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

@@ -1,61 +1,22 @@
 'use client';
 
-import * as React from 'react';
-import { getChartPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
-import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { getHorizontalCenterRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.mjs";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.mjs";
+import { useWheelGesture } from "../../zoomGestures/useWheelGesture.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 a 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 => {
+  useWheelGesture(instance, {
+    enabled: isZoomOnWheelEnabled,
+    requiredKeys: config?.requiredKeys,
+    onWheel: (point, wheelEvent) => {
+      setZoomDataCallback(prev => {
         return prev.map(zoom => {
           const option = optionsLookup[zoom.axisId];
           if (!option) {
@@ -65,7 +26,7 @@ export const useZoomOnWheel = ({
           const {
             scaleRatio,
             isZoomIn
-          } = getWheelScaleRatio(event.detail.srcEvent, option.step);
+          } = getWheelScaleRatio(wheelEvent, option.step);
           const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
           if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
             return zoom;
@@ -77,15 +38,6 @@ export const useZoomOnWheel = ({
           };
         });
       });
-    });
-    return () => {
-      zoomOnWheelHandler.cleanup();
-      if (startedOutsideTimeoutRef.current) {
-        clearTimeout(startedOutsideTimeoutRef.current);
-        startedOutsideTimeoutRef.current = null;
-      }
-      startedOutsideRef.current = false;
-      rafThrottledSetZoomData.clear();
-    };
-  }, [chartsLayerContainerRef, drawingArea, isZoomOnWheelEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+    }
+  });
 };

package/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -11,9 +11,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
 var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useEffectAfterFirstRender = require("@mui/x-internals/useEffectAfterFirstRender");
 var _utils = require("@mui/material/utils");
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
+var _rangeButtonValueToZoom = require("../../../ChartsToolbarPro/rangeButtonValueToZoom");
 var _calculateZoom = require("./calculateZoom");
 var _useZoomOnWheel = require("./gestureHooks/useZoomOnWheel");
 var _useZoomOnPinch = require("./gestureHooks/useZoomOnPinch");
@@ -25,6 +27,12 @@ var _useZoomOnBrush = require("./gestureHooks/useZoomOnBrush");
 var _useZoomOnDoubleTapReset = require("./gestureHooks/useZoomOnDoubleTapReset");
 var _initializeZoomInteractionConfig = require("./initializeZoomInteractionConfig");
 var _initializeZoomData = require("./initializeZoomData");
+/**
+ * Type guard for `initialZoom` entries provided as a range value.
+ */
+function isInitialZoomRange(entry) {
+  return 'value' in entry;
+}
 const useChartProZoom = pluginData => {
   const {
     store,
@@ -62,6 +70,68 @@ const useChartProZoom = pluginData => {
     }));
     removeIsInteracting();
   }, [store, paramsZoomData, removeIsInteracting]);
+
+  // Resolve `initialZoom` entries provided as range values (e.g. `{ axisId, value: { unit: 'month' } }`).
+  // These depend on the computed axis domains, which are only available after the first render
+  // (unless the user provides explicit `width`/`height`), so they are resolved once on mount.
+  // A layout effect avoids a visible unzoomed frame.
+  const hasResolvedInitialZoomRanges = React.useRef(false);
+  (0, _useEnhancedEffect.default)(() => {
+    if (hasResolvedInitialZoomRanges.current) {
+      // `initialZoom` is only read on mount, like the rest of the initial zoom state.
+      return;
+    }
+    hasResolvedInitialZoomRanges.current = true;
+    if (paramsZoomData !== undefined) {
+      // The zoom is controlled, `initialZoom` is ignored.
+      return;
+    }
+    const rangeEntries = (params.initialZoom ?? []).filter(isInitialZoomRange);
+    if (rangeEntries.length === 0) {
+      return;
+    }
+    const {
+      axes: xAxes,
+      domains: xDomains
+    } = (0, _internals.selectorChartXAxisWithDomains)(store.state);
+    const {
+      axes: yAxes,
+      domains: yDomains
+    } = (0, _internals.selectorChartYAxisWithDomains)(store.state);
+    const resolvedZoom = new Map();
+    rangeEntries.forEach(entry => {
+      const xAxis = xAxes?.find(axis => axis.id === entry.axisId);
+      const axis = xAxis ?? yAxes?.find(candidate => candidate.id === entry.axisId);
+      if (!axis) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(`MUI X Charts: \`initialZoom\` references the axis with id "${entry.axisId}", which does not exist.\n` + 'The range cannot be resolved. Provide an `axisId` that matches a chart axis.');
+        }
+        return;
+      }
+      const domain = (xAxis ? xDomains : yDomains)[entry.axisId]?.domain;
+      const domainParams = (0, _rangeButtonValueToZoom.getRangeButtonDomainParams)(axis, domain);
+      if (!domainParams) {
+        return;
+      }
+      const {
+        start,
+        end
+      } = (0, _rangeButtonValueToZoom.rangeButtonValueToZoom)(entry.value, domainParams);
+      resolvedZoom.set(entry.axisId, {
+        axisId: entry.axisId,
+        start,
+        end
+      });
+    });
+    if (resolvedZoom.size === 0) {
+      return;
+    }
+    store.set('zoom', (0, _extends2.default)({}, store.state.zoom, {
+      isInteracting: true,
+      zoomData: store.state.zoom.zoomData.map(zoom => resolvedZoom.get(zoom.axisId) ?? zoom)
+    }));
+    removeIsInteracting();
+  }, [store, paramsZoomData, params.initialZoom, removeIsInteracting]);
   const setZoomDataCallback = React.useCallback(zoomData => {
     const newZoomData = typeof zoomData === 'function' ? zoomData([...store.state.zoom.zoomData]) : zoomData;
     if ((0, _isDeepEqual.isDeepEqual)(store.state.zoom.zoomData, newZoomData)) {
@@ -70,14 +140,12 @@ const useChartProZoom = pluginData => {
     onZoomChange(newZoomData);
     if (store.state.zoom.isControlled) {
       store.set('zoom', (0, _extends2.default)({}, store.state.zoom, {
-        isInteracting: true,
-        activeRangeButtonKey: null
+        isInteracting: true
       }));
     } else {
       store.set('zoom', (0, _extends2.default)({}, store.state.zoom, {
         isInteracting: true,
-        zoomData: newZoomData,
-        activeRangeButtonKey: null
+        zoomData: newZoomData
       }));
       removeIsInteracting();
     }
@@ -141,11 +209,6 @@ const useChartProZoom = pluginData => {
   }, [setZoomDataCallback, store]);
   const zoomIn = React.useCallback(() => zoom(0.1), [zoom]);
   const zoomOut = React.useCallback(() => zoom(-0.1), [zoom]);
-  const setActiveRangeButtonKey = React.useCallback(key => {
-    store.set('zoom', (0, _extends2.default)({}, store.state.zoom, {
-      activeRangeButtonKey: key
-    }));
-  }, [store]);
   return {
     publicAPI: {
       setZoomData: setZoomDataCallback,
@@ -158,8 +221,7 @@ const useChartProZoom = pluginData => {
       setAxisZoomData,
       moveZoomRange,
       zoomIn,
-      zoomOut,
-      setActiveRangeButtonKey
+      zoomOut
     }
   };
 };
@@ -178,16 +240,17 @@ useChartProZoom.getInitialState = params => {
     defaultizedYAxis
   } = params;
   const optionsLookup = (0, _extends2.default)({}, (0, _internals.createZoomLookup)('x')(defaultizedXAxis), (0, _internals.createZoomLookup)('y')(defaultizedYAxis));
+  // Range-value entries of `initialZoom` are resolved after the first render, once the axis
+  // domains are computed. Only the explicit `ZoomData` entries are applied to the initial state.
   const userZoomData =
   // eslint-disable-next-line no-nested-ternary
-  zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom : undefined;
+  zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom.filter(entry => !isInitialZoomRange(entry)) : undefined;
   return {
     zoom: {
       zoomData: (0, _initializeZoomData.initializeZoomData)(optionsLookup, userZoomData),
       isInteracting: false,
       isControlled: zoomData !== undefined,
-      zoomInteractionConfig: (0, _initializeZoomInteractionConfig.initializeZoomInteractionConfig)(params.zoomInteractionConfig, optionsLookup),
-      activeRangeButtonKey: null
+      zoomInteractionConfig: (0, _initializeZoomInteractionConfig.initializeZoomInteractionConfig)(params.zoomInteractionConfig, optionsLookup)
     }
   };
 };

package/internals/plugins/useChartProZoom/useChartProZoom.mjs

@@ -2,11 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { selectorChartZoomOptionsLookup, createZoomLookup, selectorChartAxisZoomOptionsLookup } from '@mui/x-charts/internals';
+import { selectorChartZoomOptionsLookup, createZoomLookup, selectorChartAxisZoomOptionsLookup, selectorChartXAxisWithDomains, selectorChartYAxisWithDomains } from '@mui/x-charts/internals';
 import debounce from '@mui/utils/debounce';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
 import { useEventCallback } from '@mui/material/utils';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { getRangeButtonDomainParams, rangeButtonValueToZoom } from "../../../ChartsToolbarPro/rangeButtonValueToZoom.mjs";
 import { calculateZoom } from "./calculateZoom.mjs";
 import { useZoomOnWheel } from "./gestureHooks/useZoomOnWheel.mjs";
 import { useZoomOnPinch } from "./gestureHooks/useZoomOnPinch.mjs";
@@ -18,6 +20,13 @@ import { useZoomOnBrush } from "./gestureHooks/useZoomOnBrush.mjs";
 import { useZoomOnDoubleTapReset } from "./gestureHooks/useZoomOnDoubleTapReset.mjs";
 import { initializeZoomInteractionConfig } from "./initializeZoomInteractionConfig.mjs";
 import { initializeZoomData } from "./initializeZoomData.mjs";
+
+/**
+ * Type guard for `initialZoom` entries provided as a range value.
+ */
+function isInitialZoomRange(entry) {
+  return 'value' in entry;
+}
 export const useChartProZoom = pluginData => {
   const {
     store,
@@ -55,6 +64,68 @@ export const useChartProZoom = pluginData => {
     }));
     removeIsInteracting();
   }, [store, paramsZoomData, removeIsInteracting]);
+
+  // Resolve `initialZoom` entries provided as range values (e.g. `{ axisId, value: { unit: 'month' } }`).
+  // These depend on the computed axis domains, which are only available after the first render
+  // (unless the user provides explicit `width`/`height`), so they are resolved once on mount.
+  // A layout effect avoids a visible unzoomed frame.
+  const hasResolvedInitialZoomRanges = React.useRef(false);
+  useEnhancedEffect(() => {
+    if (hasResolvedInitialZoomRanges.current) {
+      // `initialZoom` is only read on mount, like the rest of the initial zoom state.
+      return;
+    }
+    hasResolvedInitialZoomRanges.current = true;
+    if (paramsZoomData !== undefined) {
+      // The zoom is controlled, `initialZoom` is ignored.
+      return;
+    }
+    const rangeEntries = (params.initialZoom ?? []).filter(isInitialZoomRange);
+    if (rangeEntries.length === 0) {
+      return;
+    }
+    const {
+      axes: xAxes,
+      domains: xDomains
+    } = selectorChartXAxisWithDomains(store.state);
+    const {
+      axes: yAxes,
+      domains: yDomains
+    } = selectorChartYAxisWithDomains(store.state);
+    const resolvedZoom = new Map();
+    rangeEntries.forEach(entry => {
+      const xAxis = xAxes?.find(axis => axis.id === entry.axisId);
+      const axis = xAxis ?? yAxes?.find(candidate => candidate.id === entry.axisId);
+      if (!axis) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(`MUI X Charts: \`initialZoom\` references the axis with id "${entry.axisId}", which does not exist.\n` + 'The range cannot be resolved. Provide an `axisId` that matches a chart axis.');
+        }
+        return;
+      }
+      const domain = (xAxis ? xDomains : yDomains)[entry.axisId]?.domain;
+      const domainParams = getRangeButtonDomainParams(axis, domain);
+      if (!domainParams) {
+        return;
+      }
+      const {
+        start,
+        end
+      } = rangeButtonValueToZoom(entry.value, domainParams);
+      resolvedZoom.set(entry.axisId, {
+        axisId: entry.axisId,
+        start,
+        end
+      });
+    });
+    if (resolvedZoom.size === 0) {
+      return;
+    }
+    store.set('zoom', _extends({}, store.state.zoom, {
+      isInteracting: true,
+      zoomData: store.state.zoom.zoomData.map(zoom => resolvedZoom.get(zoom.axisId) ?? zoom)
+    }));
+    removeIsInteracting();
+  }, [store, paramsZoomData, params.initialZoom, removeIsInteracting]);
   const setZoomDataCallback = React.useCallback(zoomData => {
     const newZoomData = typeof zoomData === 'function' ? zoomData([...store.state.zoom.zoomData]) : zoomData;
     if (isDeepEqual(store.state.zoom.zoomData, newZoomData)) {
@@ -63,14 +134,12 @@ export const useChartProZoom = pluginData => {
     onZoomChange(newZoomData);
     if (store.state.zoom.isControlled) {
       store.set('zoom', _extends({}, store.state.zoom, {
-        isInteracting: true,
-        activeRangeButtonKey: null
+        isInteracting: true
       }));
     } else {
       store.set('zoom', _extends({}, store.state.zoom, {
         isInteracting: true,
-        zoomData: newZoomData,
-        activeRangeButtonKey: null
+        zoomData: newZoomData
       }));
       removeIsInteracting();
     }
@@ -134,11 +203,6 @@ export const useChartProZoom = pluginData => {
   }, [setZoomDataCallback, store]);
   const zoomIn = React.useCallback(() => zoom(0.1), [zoom]);
   const zoomOut = React.useCallback(() => zoom(-0.1), [zoom]);
-  const setActiveRangeButtonKey = React.useCallback(key => {
-    store.set('zoom', _extends({}, store.state.zoom, {
-      activeRangeButtonKey: key
-    }));
-  }, [store]);
   return {
     publicAPI: {
       setZoomData: setZoomDataCallback,
@@ -151,8 +215,7 @@ export const useChartProZoom = pluginData => {
       setAxisZoomData,
       moveZoomRange,
       zoomIn,
-      zoomOut,
-      setActiveRangeButtonKey
+      zoomOut
     }
   };
 };
@@ -170,16 +233,17 @@ useChartProZoom.getInitialState = params => {
     defaultizedYAxis
   } = params;
   const optionsLookup = _extends({}, createZoomLookup('x')(defaultizedXAxis), createZoomLookup('y')(defaultizedYAxis));
+  // Range-value entries of `initialZoom` are resolved after the first render, once the axis
+  // domains are computed. Only the explicit `ZoomData` entries are applied to the initial state.
   const userZoomData =
   // eslint-disable-next-line no-nested-ternary
-  zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom : undefined;
+  zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom.filter(entry => !isInitialZoomRange(entry)) : undefined;
   return {
     zoom: {
       zoomData: initializeZoomData(optionsLookup, userZoomData),
       isInteracting: false,
       isControlled: zoomData !== undefined,
-      zoomInteractionConfig: initializeZoomInteractionConfig(params.zoomInteractionConfig, optionsLookup),
-      activeRangeButtonKey: null
+      zoomInteractionConfig: initializeZoomInteractionConfig(params.zoomInteractionConfig, optionsLookup)
     }
   };
 };

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

@@ -13,9 +13,6 @@ export declare const selectorChartAxisZoomData: (args_0: import("@mui/x-charts/i
 export declare const selectorChartCanZoomOut: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.mjs").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;
-export declare const selectorChartActiveRangeButtonKey: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.mjs").UseChartProZoomState & Partial<{}> & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}) => string | null;
 export declare const selectorChartCanZoomIn: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.mjs").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;

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

@@ -13,9 +13,6 @@ export declare const selectorChartAxisZoomData: (args_0: import("@mui/x-charts/i
 export declare const selectorChartCanZoomOut: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;
-export declare const selectorChartActiveRangeButtonKey: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}) => string | null;
 export declare const selectorChartCanZoomIn: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartZoomState = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomIsEnabled = exports.selectorChartCanZoomOut = exports.selectorChartCanZoomIn = exports.selectorChartAxisZoomData = exports.selectorChartActiveRangeButtonKey = void 0;
+exports.selectorChartZoomState = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomIsEnabled = exports.selectorChartCanZoomOut = exports.selectorChartCanZoomIn = exports.selectorChartAxisZoomData = void 0;
 var _store = require("@mui/x-internals/store");
 var _internals = require("@mui/x-charts/internals");
 const selectorChartZoomState = state => state.zoom;
@@ -18,7 +18,6 @@ const selectorChartCanZoomOut = exports.selectorChartCanZoomOut = (0, _store.cre
     return zoomData.start === options.minStart && zoomData.end === options.maxEnd || span === options.maxSpan;
   });
 });
-const selectorChartActiveRangeButtonKey = exports.selectorChartActiveRangeButtonKey = (0, _store.createSelector)(selectorChartZoomState, zoom => zoom.activeRangeButtonKey);
 const selectorChartCanZoomIn = exports.selectorChartCanZoomIn = (0, _store.createSelector)(selectorChartZoomState, _internals.selectorChartZoomOptionsLookup, (zoomState, zoomOptions) => {
   return !zoomState.zoomData.every(zoomData => {
     const span = zoomData.end - zoomData.start;

package/internals/plugins/useChartProZoom/useChartProZoom.selectors.mjs

@@ -11,7 +11,6 @@ export const selectorChartCanZoomOut = createSelector(selectorChartZoomState, se
     return zoomData.start === options.minStart && zoomData.end === options.maxEnd || span === options.maxSpan;
   });
 });
-export const selectorChartActiveRangeButtonKey = createSelector(selectorChartZoomState, zoom => zoom.activeRangeButtonKey);
 export const selectorChartCanZoomIn = createSelector(selectorChartZoomState, selectorChartZoomOptionsLookup, (zoomState, zoomOptions) => {
   return !zoomState.zoomData.every(zoomData => {
     const span = zoomData.end - zoomData.start;

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

@@ -1,11 +1,38 @@
 import { type UseChartSeriesSignature, type ChartPluginSignature, type UseChartCartesianAxisSignature, type UseChartCartesianAxisDefaultizedParameters, type ZoomData, type AxisId, type UseChartBrushSignature } from '@mui/x-charts/internals';
 import { type ZoomInteractionConfig, type DefaultizedZoomInteractionConfig } from "./ZoomInteractionConfig.types.mjs";
+import { type RangeButtonValue } from "../../../ChartsToolbarPro/rangeButtonValueToZoom.mjs";
+/**
+ * Initializes the zoom of an axis with a range value instead of zoom percentages.
+ */
+export interface InitialZoomRange {
+  /**
+   * The id of the axis to apply the zoom to.
+   */
+  axisId: AxisId;
+  /**
+   * The range to zoom to. Accepts the same values as a range button:
+   *
+   * - `{ unit, step }` — A calendar interval from the end of the data.
+   * - `[start, end]` — An absolute date range, or a range between two ordinal axis values.
+   * - `(params) => { start, end }` — A function returning zoom percentages (0-100).
+   * - `null` — Shows all data.
+   */
+  value: RangeButtonValue;
+}
+/**
+ * An entry of the `initialZoom` prop. Either explicit zoom percentages ({@link ZoomData})
+ * or a range value resolved against the axis ({@link InitialZoomRange}).
+ */
+export type InitialZoom = ZoomData | InitialZoomRange;
 export interface UseChartProZoomParameters {
   /**
    * The list of zoom data related to each axis.
    * Used to initialize the zoom in a specific configuration without controlling it.
+   *
+   * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
+   * range value (`{ axisId, value }`) resolved against the axis domain.
    */
-  initialZoom?: readonly ZoomData[];
+  initialZoom?: readonly InitialZoom[];
   /**
    * Callback fired when the zoom has changed.
    *
@@ -41,11 +68,6 @@ export interface UseChartProZoomState {
      * Configuration for zoom interactions.
      */
     zoomInteractionConfig: DefaultizedZoomInteractionConfig;
-    /**
-     * The key of the currently active range button, or `null` if no range button is active.
-     * Cleared when the user manually zooms or pans the chart.
-     */
-    activeRangeButtonKey: string | null;
   };
 }
 export interface UseChartProZoomPublicApi {
@@ -78,11 +100,6 @@ export interface UseChartProZoomInstance extends UseChartProZoomPublicApi {
    * Zoom out the chart.
    */
   zoomOut: () => void;
-  /**
-   * Set the active range button key. Pass `null` to clear.
-   * @param {string | null} key The key of the active range button.
-   */
-  setActiveRangeButtonKey: (key: string | null) => void;
 }
 export type UseChartProZoomSignature = ChartPluginSignature<{
   params: UseChartProZoomParameters;