@mui/x-charts-pro 8.2.0 → 8.3.1

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

@@ -1,4 +1,4 @@
-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.js").UseChartProZoomState & Partial<{}> & {
@@ -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,18 +80,18 @@ 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/internals").DefaultedXAxis[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
-      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedXAxis[] | 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/internals").DefaultedXAxis[] | undefined) & {
@@ -133,18 +133,18 @@ 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/internals").DefaultedYAxis[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
-      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedYAxis[] | 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/internals").DefaultedYAxis[] | undefined) & {
@@ -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/esm/internals/plugins/useChartProZoom/useChartProZoom.selectors.js

@@ -1,4 +1,5 @@
-import { createSelector, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { createSelector, selectorChartZoomMap, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 export const selectorChartZoomState = state => state.zoom;
 export const selectorChartZoomIsInteracting = createSelector(selectorChartZoomState, zoom => zoom.isInteracting);
-export const selectorChartZoomIsEnabled = createSelector(selectorChartZoomOptionsLookup, optionsLookup => Object.keys(optionsLookup).length > 0);
+export const selectorChartZoomIsEnabled = createSelector(selectorChartZoomOptionsLookup, optionsLookup => Object.keys(optionsLookup).length > 0);
+export const selectorChartAxisZoomData = createSelector([selectorChartZoomMap, (state, axisId) => axisId], (zoomMap, axisId) => zoomMap?.get(axisId));

package/esm/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/esm/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/esm/internals/slots/chartBaseSlotProps.js

@@ -0,0 +1 @@
+export {};

package/esm/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/esm/internals/slots/chartsBaseSlots.js

@@ -0,0 +1 @@
+export {};

package/esm/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/esm/internals/slots/chartsIconSlots.js

@@ -0,0 +1 @@
+export {};

package/esm/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/index.d.ts

@@ -25,6 +25,7 @@ export * from '@mui/x-charts/RadarChart';
 export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
+export type { ZoomData, ZoomFilterMode, ZoomOptions, ZoomSliderOptions } from '@mui/x-charts/internals';
 export * from "./hooks/index.js";
 export * from "./Heatmap/index.js";
 export * from "./ChartContainerPro/index.js";
@@ -32,4 +33,6 @@ export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";
 export * from "./LineChartPro/index.js";
-export * from "./FunnelChart/index.js";
+export * from "./FunnelChart/index.js";
+export * from "./ChartZoomSlider/index.js";
+export * from "./ChartsToolbarPro/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.2.0
+ * @mui/x-charts-pro v8.3.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -384,4 +384,26 @@ Object.keys(_FunnelChart).forEach(function (key) {
       return _FunnelChart[key];
     }
   });
+});
+var _ChartZoomSlider = require("./ChartZoomSlider");
+Object.keys(_ChartZoomSlider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartZoomSlider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartZoomSlider[key];
+    }
+  });
+});
+var _ChartsToolbarPro = require("./ChartsToolbarPro");
+Object.keys(_ChartsToolbarPro).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsToolbarPro[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsToolbarPro[key];
+    }
+  });
 });

package/internals/material/icons.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const ChartsZoomInIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;
+export declare const ChartsZoomOutIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;

package/internals/material/icons.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsZoomOutIcon = exports.ChartsZoomInIcon = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _jsxRuntime = require("react/jsx-runtime");
+const ChartsZoomInIcon = exports.ChartsZoomInIcon = (0, _internals.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M12 10h-2v2H9v-2H7V9h2V7h1v2h2z"
+  })]
+}), 'ZoomIn');
+const ChartsZoomOutIcon = exports.ChartsZoomOutIcon = (0, _internals.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+  d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14M7 9h5v1H7z"
+}), 'ZoomOut');

package/internals/material/index.d.ts

@@ -0,0 +1,4 @@
+import { ChartsBaseSlotsPro } from "../slots/chartsBaseSlots.js";
+import { ChartsIconSlotsPro } from "../slots/chartsIconSlots.js";
+export type ChartsSlotsPro = ChartsBaseSlotsPro & ChartsIconSlotsPro;
+export declare const defaultSlotsMaterial: ChartsSlotsPro;

package/internals/material/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultSlotsMaterial = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _internals = require("@mui/x-charts/internals");
+var _icons = require("./icons");
+const baseSlots = {
+  baseTooltip: _Tooltip.default
+};
+const iconSlots = {
+  zoomInIcon: _icons.ChartsZoomInIcon,
+  zoomOutIcon: _icons.ChartsZoomOutIcon
+};
+const defaultSlotsMaterial = exports.defaultSlotsMaterial = (0, _extends2.default)({}, _internals.defaultSlotsMaterial, baseSlots, iconSlots);

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) {
@@ -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,4 +1,4 @@
-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.js").UseChartProZoomState & Partial<{}> & {
@@ -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,18 +80,18 @@ 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/internals").DefaultedXAxis[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
-      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedXAxis[] | 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/internals").DefaultedXAxis[] | undefined) & {
@@ -133,18 +133,18 @@ 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/internals").DefaultedYAxis[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
-      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedYAxis[] | 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/internals").DefaultedYAxis[] | undefined) & {
@@ -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));