@mui/x-charts-pro 8.1.0 → 8.3.0

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

@@ -0,0 +1,23 @@
+import { DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+/**
+ * Calculates the new zoom range based on the current zoom, step, and constraints.
+ *
+ * A step of 0.1 or -0.1 means that 10% of the current range will be subtracted/added, respectively, and assuming no
+ * constraints (e.g., minSpan, maxEnd) are faced.
+ *
+ * @param zoom Current zoom range with start and end values.
+ * @param step Percentage of the current zoom range to adjust (positive to zoom in, negative to zoom out). Ranges from 0 to 1.
+ * @param minSpan Minimum allowed span between start and end values.
+ * @param maxSpan Maximum allowed span between start and end values.
+ * @param minStart Minimum allowed start value.
+ * @param maxEnd Maximum allowed end value.
+ */
+export declare function calculateZoom<T extends Readonly<Pick<ZoomData, 'start' | 'end'>>>(zoom: T, step: number, {
+  minSpan,
+  maxSpan,
+  minStart,
+  maxEnd
+}: Pick<DefaultizedZoomOptions, 'minSpan' | 'maxSpan' | 'minStart' | 'maxEnd'>): T & {
+  start: number;
+  end: number;
+};

package/internals/plugins/useChartProZoom/calculateZoom.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateZoom = calculateZoom;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+/**
+ * Calculates the new zoom range based on the current zoom, step, and constraints.
+ *
+ * A step of 0.1 or -0.1 means that 10% of the current range will be subtracted/added, respectively, and assuming no
+ * constraints (e.g., minSpan, maxEnd) are faced.
+ *
+ * @param zoom Current zoom range with start and end values.
+ * @param step Percentage of the current zoom range to adjust (positive to zoom in, negative to zoom out). Ranges from 0 to 1.
+ * @param minSpan Minimum allowed span between start and end values.
+ * @param maxSpan Maximum allowed span between start and end values.
+ * @param minStart Minimum allowed start value.
+ * @param maxEnd Maximum allowed end value.
+ */
+function calculateZoom(zoom, step, {
+  minSpan,
+  maxSpan,
+  minStart,
+  maxEnd
+}) {
+  const span = zoom.end - zoom.start;
+  let delta = span * step / 2;
+  if (delta > 0) {
+    delta = Math.min(delta, (span - minSpan) / 2);
+  } else {
+    delta = Math.max(delta, (span - maxSpan) / 2);
+  }
+  return (0, _extends2.default)({}, zoom, {
+    start: Math.max(minStart, zoom.start + delta),
+    end: Math.min(maxEnd, zoom.end - delta)
+  });
+}

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

@@ -1,4 +1,4 @@
 import { ChartPlugin, AxisId, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
-export declare function initializeZoomData(options: Record<AxisId, DefaultizedZoomOptions>, zoomData?: readonly ZoomData[]): ZoomData[];
+export declare function initializeZoomData(options: Record<AxisId, Pick<DefaultizedZoomOptions, 'axisId' | 'minStart' | 'maxEnd'>>, zoomData?: readonly ZoomData[]): ZoomData[];
 export declare const useChartProZoom: ChartPlugin<UseChartProZoomSignature>;

package/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -14,6 +14,7 @@ var _internals = require("@mui/x-charts/internals");
 var _utils = require("@mui/material/utils");
 var _rafThrottle = require("@mui/x-internals/rafThrottle");
 var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
+var _calculateZoom = require("./calculateZoom");
 var _useChartProZoom = require("./useChartProZoom.utils");
 // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
 function initializeZoomData(options, zoomData) {
@@ -61,7 +62,7 @@ const useChartProZoom = ({
     }
     store.update(prevState => {
       if (process.env.NODE_ENV !== 'production' && !prevState.zoom.isControlled) {
-        console.error([`MUI X: A chart component is changing the \`zoomData\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+        console.error([`MUI X Charts: A chart component is changing the \`zoomData\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
       }
       return (0, _extends2.default)({}, prevState, {
         zoom: (0, _extends2.default)({}, prevState.zoom, {
@@ -108,6 +109,34 @@ const useChartProZoom = ({
       });
     });
   }, [onZoomChange, store, removeIsInteracting]);
+  const moveZoomRange = React.useCallback((axisId, by) => {
+    setZoomDataCallback(prevZoomData => {
+      return prevZoomData.map(zoom => {
+        if (zoom.axisId !== axisId) {
+          return zoom;
+        }
+        const options = optionsLookup[axisId];
+        if (!options) {
+          return zoom;
+        }
+        let start = zoom.start;
+        let end = zoom.end;
+        if (by > 0) {
+          const span = end - start;
+          end = Math.min(end + by, options.maxEnd);
+          start = end - span;
+        } else {
+          const span = end - start;
+          start = Math.max(start + by, options.minStart);
+          end = start + span;
+        }
+        return (0, _extends2.default)({}, zoom, {
+          start,
+          end
+        });
+      });
+    });
+  }, [optionsLookup, setZoomDataCallback]);
   React.useEffect(() => {
     return () => {
       removeIsInteracting.clear();
@@ -334,12 +363,25 @@ const useChartProZoom = ({
       rafThrottledSetZoomData.clear();
     };
   }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback]);
+  const zoom = React.useCallback(step => {
+    setZoomDataCallback(prev => prev.map(zoomData => {
+      const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), zoomData.axisId);
+      return (0, _calculateZoom.calculateZoom)(zoomData, step, zoomOptions);
+    }));
+  }, [setZoomDataCallback, store]);
+  const zoomIn = React.useCallback(() => zoom(0.1), [zoom]);
+  const zoomOut = React.useCallback(() => zoom(-0.1), [zoom]);
   return {
     publicAPI: {
-      setZoomData: setZoomDataCallback
+      setZoomData: setZoomDataCallback,
+      zoomIn,
+      zoomOut
     },
     instance: {
-      setZoomData: setZoomDataCallback
+      setZoomData: setZoomDataCallback,
+      moveZoomRange,
+      zoomIn,
+      zoomOut
     }
   };
 };

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

@@ -1,7 +1,7 @@
-import { ChartRootSelector } from '@mui/x-charts/internals';
+import { AxisId, ChartRootSelector } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
 export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature>;
-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("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("./useChartProZoom.types").UseChartProZoomState & Partial<{}> & {
+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("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean) & {
   clearCache: () => void;
@@ -62,11 +62,11 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
     resultsCount: () => number;
     resetResultsCount: () => void;
   } & {
-    resultFunc: (resultFuncArgs_0: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>, resultFuncArgs_1: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) => {
+    resultFunc: (resultFuncArgs_0: Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>, resultFuncArgs_1: Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) => {
       [x: string]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
       [x: number]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
     };
-    memoizedResultFunc: ((resultFuncArgs_0: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>, resultFuncArgs_1: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) => {
+    memoizedResultFunc: ((resultFuncArgs_0: Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>, resultFuncArgs_1: Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) => {
       [x: string]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
       [x: number]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
     }) & {
@@ -80,41 +80,41 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
     };
     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("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
       cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-    }) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
+    }) => Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
       clearCache: () => void;
       resultsCount: () => number;
       resetResultsCount: () => void;
     } & {
-      resultFunc: (resultFuncArgs_0: import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
-      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
+      resultFunc: (resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedXAxis[] | undefined) => Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedXAxis[] | undefined) => Record<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>;
+      lastResult: () => Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
       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("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
         cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-      }) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined) & {
+      }) => import("@mui/x-charts/internals").DefaultedXAxis[] | undefined) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
       } & {
         resultFunc: (resultFuncArgs_0: {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
-        } | undefined) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined;
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
+        } | undefined) => import("@mui/x-charts/internals").DefaultedXAxis[] | undefined;
         memoizedResultFunc: ((resultFuncArgs_0: {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
-        } | undefined) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined) & {
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
+        } | undefined) => import("@mui/x-charts/internals").DefaultedXAxis[] | undefined) & {
           clearCache: () => void;
           resultsCount: () => number;
           resetResultsCount: () => void;
         };
-        lastResult: () => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined;
+        lastResult: () => import("@mui/x-charts/internals").DefaultedXAxis[] | undefined;
         dependencies: [(state: import("@mui/x-charts/internals").ChartState<[], [import("@mui/x-charts/internals").UseChartCartesianAxisSignature]>) => {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
         } | undefined];
         recomputations: () => number;
         resetRecomputations: () => void;
@@ -133,41 +133,41 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
       argsMemoize: typeof import("reselect").weakMapMemoize;
     }, ((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("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
       cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-    }) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
+    }) => Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
       clearCache: () => void;
       resultsCount: () => number;
       resetResultsCount: () => void;
     } & {
-      resultFunc: (resultFuncArgs_0: import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
-      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
+      resultFunc: (resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedYAxis[] | undefined) => Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedYAxis[] | undefined) => Record<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>;
+      lastResult: () => Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
       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("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
         cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-      }) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined) & {
+      }) => import("@mui/x-charts/internals").DefaultedYAxis[] | undefined) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
       } & {
         resultFunc: (resultFuncArgs_0: {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
-        } | undefined) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined;
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
+        } | undefined) => import("@mui/x-charts/internals").DefaultedYAxis[] | undefined;
         memoizedResultFunc: ((resultFuncArgs_0: {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
-        } | undefined) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined) & {
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
+        } | undefined) => import("@mui/x-charts/internals").DefaultedYAxis[] | undefined) & {
           clearCache: () => void;
           resultsCount: () => number;
           resetResultsCount: () => void;
         };
-        lastResult: () => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined;
+        lastResult: () => import("@mui/x-charts/internals").DefaultedYAxis[] | undefined;
         dependencies: [(state: import("@mui/x-charts/internals").ChartState<[], [import("@mui/x-charts/internals").UseChartCartesianAxisSignature]>) => {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
         } | undefined];
         recomputations: () => number;
         resetRecomputations: () => void;
@@ -200,4 +200,56 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
 } & {
   argsMemoize: typeof import("reselect").weakMapMemoize;
   memoize: typeof import("reselect").weakMapMemoize;
+};
+export declare const selectorChartAxisZoomData: ((state: any, axisId: AxisId) => import("@mui/x-charts/internals").ZoomData | undefined) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: Map<AxisId, import("@mui/x-charts/internals").ZoomData> | undefined, resultFuncArgs_1: AxisId) => import("@mui/x-charts/internals").ZoomData | undefined;
+  memoizedResultFunc: ((resultFuncArgs_0: Map<AxisId, import("@mui/x-charts/internals").ZoomData> | undefined, resultFuncArgs_1: AxisId) => import("@mui/x-charts/internals").ZoomData | undefined) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => import("@mui/x-charts/internals").ZoomData | undefined;
+  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("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+    cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+  }) => Map<AxisId, import("@mui/x-charts/internals").ZoomData> | undefined) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  } & {
+    resultFunc: (resultFuncArgs_0: {
+      isInteracting: boolean;
+      zoomData: readonly import("@mui/x-charts/internals").ZoomData[];
+    } | undefined) => Map<AxisId, import("@mui/x-charts/internals").ZoomData> | undefined;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+      isInteracting: boolean;
+      zoomData: readonly import("@mui/x-charts/internals").ZoomData[];
+    } | undefined) => Map<AxisId, import("@mui/x-charts/internals").ZoomData> | undefined) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    };
+    lastResult: () => Map<AxisId, import("@mui/x-charts/internals").ZoomData> | undefined;
+    dependencies: [(state: import("@mui/x-charts/internals").ChartState<[], [import("@mui/x-charts/internals").UseChartCartesianAxisSignature]>) => {
+      isInteracting: boolean;
+      zoomData: readonly import("@mui/x-charts/internals").ZoomData[];
+    } | undefined];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+  } & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+  }, (state: any, axisId: AxisId) => AxisId];
+  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

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartZoomState = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomIsEnabled = void 0;
+exports.selectorChartZoomState = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomIsEnabled = exports.selectorChartAxisZoomData = void 0;
 var _internals = require("@mui/x-charts/internals");
 const selectorChartZoomState = state => state.zoom;
 exports.selectorChartZoomState = selectorChartZoomState;
 const selectorChartZoomIsInteracting = exports.selectorChartZoomIsInteracting = (0, _internals.createSelector)(selectorChartZoomState, zoom => zoom.isInteracting);
-const selectorChartZoomIsEnabled = exports.selectorChartZoomIsEnabled = (0, _internals.createSelector)(_internals.selectorChartZoomOptionsLookup, optionsLookup => Object.keys(optionsLookup).length > 0);
+const selectorChartZoomIsEnabled = exports.selectorChartZoomIsEnabled = (0, _internals.createSelector)(_internals.selectorChartZoomOptionsLookup, optionsLookup => Object.keys(optionsLookup).length > 0);
+const selectorChartAxisZoomData = exports.selectorChartAxisZoomData = (0, _internals.createSelector)([_internals.selectorChartZoomMap, (state, axisId) => axisId], (zoomMap, axisId) => zoomMap?.get(axisId));

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

@@ -1,4 +1,4 @@
-import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData } from '@mui/x-charts/internals';
+import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData, AxisId } from '@mui/x-charts/internals';
 export interface UseChartProZoomParameters {
   /**
    * The list of zoom data related to each axis.
@@ -42,7 +42,22 @@ export interface UseChartProZoomPublicApi {
    */
   setZoomData: (value: ZoomData[] | ((prev: ZoomData[]) => ZoomData[])) => void;
 }
-export interface UseChartProZoomInstance extends UseChartProZoomPublicApi {}
+export interface UseChartProZoomInstance extends UseChartProZoomPublicApi {
+  /**
+   * Translate the zoom range (i.e., both start and end) for a specific axis.
+   * @param {AxisId} axisId The id of the axis to move the zoom range for.
+   * @param {number} by The amount to move the zoom range by. Ranges from 0 to 100.
+   */
+  moveZoomRange: (axisId: AxisId, by: number) => void;
+  /**
+   * Zoom in the chart.
+   */
+  zoomIn: () => void;
+  /**
+   * Zoom out the chart.
+   */
+  zoomOut: () => void;
+}
 export type UseChartProZoomSignature = ChartPluginSignature<{
   params: UseChartProZoomParameters;
   defaultizedParams: UseChartProZoomDefaultizedParameters;

package/internals/slots/chartBaseSlotProps.d.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+import { ChartBaseCommonProps } from '@mui/x-charts/models';
+export type ChartBaseTooltipProps = ChartBaseCommonProps & {
+  children: React.ReactElement<any, any>;
+  enterDelay?: number;
+  title: React.ReactNode;
+};
+export type ChartBaseIconButtonProps = ChartBaseCommonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+};

package/internals/slots/chartBaseSlotProps.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/slots/chartsBaseSlots.d.ts

@@ -0,0 +1,6 @@
+import { ChartsBaseSlots } from '@mui/x-charts/models';
+import * as React from 'react';
+import { ChartBaseTooltipProps } from "./chartBaseSlotProps.js";
+export interface ChartsBaseSlotsPro extends ChartsBaseSlots {
+  baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
+}

package/internals/slots/chartsBaseSlots.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/slots/chartsIconSlots.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ChartBaseIconProps, ChartsIconSlots } from '@mui/x-charts/models';
+export interface ChartsIconSlotsPro extends ChartsIconSlots {
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.ComponentType<ChartBaseIconProps>;
+}

package/internals/slots/chartsIconSlots.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.1.0",
-  "description": "The Pro plan edition of the Charts components (MUI X).",
+  "version": "8.3.0",
   "author": "MUI Team",
+  "description": "The Pro plan edition of the MUI X Charts components.",
   "main": "./index.js",
   "license": "SEE LICENSE IN LICENSE",
   "bugs": {
@@ -29,14 +29,14 @@
     "directory": "packages/x-charts-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.0",
+    "@babel/runtime": "^7.27.1",
     "@mui/utils": "^7.0.2",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts-vendor": "8.0.0",
-    "@mui/x-internals": "8.0.0",
-    "@mui/x-license": "8.0.0",
-    "@mui/x-charts": "8.1.0"
+    "@mui/x-internals": "8.3.0",
+    "@mui/x-license": "8.3.0",
+    "@mui/x-charts": "8.3.0",
+    "@mui/x-charts-vendor": "8.3.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -54,6 +54,9 @@
       "optional": true
     }
   },
+  "optionalDependencies": {
+    "rasterizehtml": "^1.3.1"
+  },
   "engines": {
     "node": ">=14.0.0"
   },

package/themeAugmentation/components.d.ts

@@ -1,19 +1,15 @@
 import { ComponentsProps, ComponentsOverrides } from '@mui/material/styles';
 export interface ChartsProComponents<Theme = unknown> {
-  // BarChartPro components
   MuiBarChartPro?: {
     defaultProps?: ComponentsProps['MuiBarChartPro'];
   };
-  // LineChartPro components
   MuiLineChartPro?: {
     defaultProps?: ComponentsProps['MuiLineChartPro'];
   };
-  // Heatmap components
   MuiHeatmap?: {
     defaultProps?: ComponentsProps['MuiHeatmap'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiHeatmap'];
   };
-  // ScatterChartPro components
   MuiScatterChartPro?: {
     defaultProps?: ComponentsProps['MuiScatterChartPro'];
   };

package/themeAugmentation/components.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/themeAugmentation/index.d.ts

@@ -1,4 +1,4 @@
 export type * from '@mui/x-charts/themeAugmentation';
-export type * from './overrides';
-export type * from './props';
-export type * from './components';
+export type * from "./overrides.js";
+export type * from "./props.js";
+export type * from "./components.js";

package/themeAugmentation/overrides.d.ts

@@ -1,11 +1,8 @@
 import { HeatmapClassKey } from "../Heatmap/index.js";
 export interface ChartsProComponentNameToClassKey {
-  // Heatmap components
   MuiHeatmap: HeatmapClassKey;
 }
 declare module '@mui/material/styles' {
   interface ComponentNameToClassKey extends ChartsProComponentNameToClassKey {}
 }
-
-// disable automatic export
 export {};

package/themeAugmentation/overrides.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/themeAugmentation/props.d.ts

@@ -3,18 +3,12 @@ import { BarChartProProps } from "../BarChartPro/index.js";
 import { HeatmapProps } from "../Heatmap/Heatmap.js";
 import { LineChartProProps } from "../LineChartPro/index.js";
 export interface ChartsProComponentsPropsList {
-  // BarChartPro components
   MuiBarChartPro: BarChartProProps;
-  // LineChartPro components
   MuiLineChartPro: LineChartProProps;
-  // Heatmap components
   MuiHeatmap: HeatmapProps;
-  // ScatterChartPro components
   MuiScatterChartPro: ScatterChartProProps;
 }
 declare module '@mui/material/styles' {
   interface ComponentsPropsList extends ChartsProComponentsPropsList {}
 }
-
-// disable automatic export
 export {};

package/themeAugmentation/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/typeOverloads/modules.d.ts

@@ -1,7 +1,7 @@
 import { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
 import { AxisId, ZoomOptions } from '@mui/x-charts/internals';
-import { HeatmapItemIdentifier, HeatmapSeriesType, DefaultizedHeatmapSeriesType, HeatmapValueType } from "../models/seriesType/heatmap.js";
 import { DefaultizedFunnelSeriesType, FunnelItemIdentifier, FunnelSeriesType, FunnelValueType } from "../FunnelChart/funnel.types.js";
+import { HeatmapItemIdentifier, HeatmapSeriesType, DefaultizedHeatmapSeriesType, HeatmapValueType } from "../models/seriesType/heatmap.js";
 declare module '@mui/x-charts/internals' {
   interface ChartsSeriesConfig {
     heatmap: {

package/FunnelChart/funnelStepCurve.d.ts

@@ -1,4 +0,0 @@
-import { CurveFactory } from '@mui/x-charts-vendor/d3-shape';
-declare const funnelHorizontalStepCurve: CurveFactory;
-declare const funnelVerticalStepCurve: CurveFactory;
-export { funnelHorizontalStepCurve, funnelVerticalStepCurve };