@mui/x-charts-pro 7.0.0-alpha.0

package/ScatterChartPro/ScatterChartPro.js

@@ -0,0 +1,388 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["zoom", "onZoomChange"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
+import { ScatterPlot } from '@mui/x-charts/ScatterChart';
+import { ZAxisContextProvider } from '@mui/x-charts/context';
+import { ChartsVoronoiHandler } from '@mui/x-charts/ChartsVoronoiHandler';
+import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
+import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
+import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
+import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+import { useScatterChartProps } from '@mui/x-charts/internals';
+import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro';
+import { ZoomSetup } from '../context/ZoomProvider/ZoomSetup';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+ *
+ * API:
+ *
+ * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+ */
+const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(props, ref) {
+  const {
+      zoom,
+      onZoomChange
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    chartContainerProps,
+    zAxisProps,
+    voronoiHandlerProps,
+    chartsAxisProps,
+    gridProps,
+    scatterPlotProps,
+    overlayProps,
+    legendProps,
+    axisHighlightProps,
+    tooltipProps,
+    children
+  } = useScatterChartProps(other);
+  return /*#__PURE__*/_jsx(ResponsiveChartContainerPro, _extends({
+    ref: ref
+  }, chartContainerProps, {
+    zoom: zoom,
+    onZoomChange: onZoomChange,
+    children: /*#__PURE__*/_jsxs(ZAxisContextProvider, _extends({}, zAxisProps, {
+      children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
+        "data-drawing-container": true,
+        children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
+      }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ZoomSetup, {}), children]
+    }))
+  }));
+});
+process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @default { x: 'none', y: 'none' }
+   */
+  axisHighlight: PropTypes.shape({
+    x: PropTypes.oneOf(['band', 'line', 'none']),
+    y: PropTypes.oneOf(['band', 'line', 'none'])
+  }),
+  /**
+   * Indicate which axis to display the bottom of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
+   * @default xAxisIds[0] The id of the first provided axis
+   */
+  bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
+   */
+  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset: PropTypes.arrayOf(PropTypes.object),
+  desc: PropTypes.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener: PropTypes.bool,
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   */
+  disableVoronoi: PropTypes.bool,
+  /**
+   * Option to display a cartesian grid in the background.
+   */
+  grid: PropTypes.shape({
+    horizontal: PropTypes.bool,
+    vertical: PropTypes.bool
+  }),
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: PropTypes.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
+  /**
+   * Indicate which axis to display the left of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
+   * @default yAxisIds[0] The id of the first provided axis
+   */
+  leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
+  legend: PropTypes.shape({
+    classes: PropTypes.object,
+    direction: PropTypes.oneOf(['column', 'row']),
+    hidden: PropTypes.bool,
+    position: PropTypes.shape({
+      horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
+      vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
+    }),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object
+  }),
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading: PropTypes.bool,
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default object Depends on the charts type.
+   */
+  margin: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
+  /**
+   * Callback fired when clicking on a scatter item.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.
+   * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
+   */
+  onItemClick: PropTypes.func,
+  /**
+   * Callback fired when the zoom has changed.
+   *
+   * @param {ZoomData[]} zoomData Updated zoom data.
+   */
+  onZoomChange: PropTypes.func,
+  /**
+   * Indicate which axis to display the right of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
+   * @default null
+   */
+  rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  /**
+   * The series to display in the scatter chart.
+   * An array of [[ScatterSeriesType]] objects.
+   */
+  series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  title: PropTypes.string,
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   * @default { trigger: 'item' }
+   */
+  tooltip: PropTypes.shape({
+    axisContent: PropTypes.elementType,
+    classes: PropTypes.object,
+    itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
+  }),
+  /**
+   * Indicate which axis to display the top of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
+   * @default null
+   */
+  topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  viewBox: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+  }),
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  voronoiMaxRadius: PropTypes.number,
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: PropTypes.number,
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: PropTypes.arrayOf(PropTypes.shape({
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    position: PropTypes.oneOf(['bottom', 'top']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func,
+    zoom: PropTypes.oneOfType([PropTypes.shape({
+      maxEnd: PropTypes.number,
+      maxSpan: PropTypes.number,
+      minSpan: PropTypes.number,
+      minStart: PropTypes.number,
+      panning: PropTypes.bool,
+      step: PropTypes.number
+    }), PropTypes.bool])
+  })),
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: PropTypes.arrayOf(PropTypes.shape({
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    position: PropTypes.oneOf(['left', 'right']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func,
+    zoom: PropTypes.oneOfType([PropTypes.shape({
+      maxEnd: PropTypes.number,
+      maxSpan: PropTypes.number,
+      minSpan: PropTypes.number,
+      minStart: PropTypes.number,
+      panning: PropTypes.bool,
+      step: PropTypes.number
+    }), PropTypes.bool])
+  })),
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: PropTypes.arrayOf(PropTypes.shape({
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    id: PropTypes.string,
+    max: PropTypes.number,
+    min: PropTypes.number
+  })),
+  /**
+   * The list of zoom data related to each axis.
+   */
+  zoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  }))
+} : void 0;
+export { ScatterChartPro };

package/ScatterChartPro/index.d.ts

@@ -0,0 +1 @@
+export * from './ScatterChartPro';

package/ScatterChartPro/index.js

@@ -0,0 +1 @@
+export * from './ScatterChartPro';

package/ScatterChartPro/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/ScatterChartPro/index.js",
+  "types": "./index.d.ts"
+}

package/context/CartesianProviderPro/CartesianProviderPro.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { CartesianContextProviderProps } from '@mui/x-charts/internals';
+export interface CartesianContextProviderProProps extends CartesianContextProviderProps {
+}
+declare function CartesianContextProviderPro(props: CartesianContextProviderProProps): React.JSX.Element;
+export { CartesianContextProviderPro };

package/context/CartesianProviderPro/CartesianProviderPro.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { useDrawingArea, useSeries, CartesianContext, cartesianProviderUtils, useXExtremumGetter, useYExtremumGetter } from '@mui/x-charts/internals';
+import { useZoom } from '../ZoomProvider/useZoom';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  computeValue
+} = cartesianProviderUtils;
+function CartesianContextProviderPro(props) {
+  const {
+    xAxis,
+    yAxis,
+    dataset,
+    children
+  } = props;
+  const formattedSeries = useSeries();
+  const drawingArea = useDrawingArea();
+  const {
+    zoomData
+  } = useZoom();
+  const xExtremumGetters = useXExtremumGetter();
+  const yExtremumGetters = useYExtremumGetter();
+  const xValues = React.useMemo(() => computeValue({
+    drawingArea,
+    formattedSeries,
+    axis: xAxis,
+    extremumGetters: xExtremumGetters,
+    dataset,
+    axisDirection: 'x',
+    zoomData
+  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, dataset, zoomData]);
+  const yValues = React.useMemo(() => computeValue({
+    drawingArea,
+    formattedSeries,
+    axis: yAxis,
+    extremumGetters: yExtremumGetters,
+    dataset,
+    axisDirection: 'y',
+    zoomData
+  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, dataset, zoomData]);
+  const value = React.useMemo(() => ({
+    isInitialized: true,
+    data: {
+      xAxis: xValues.axis,
+      yAxis: yValues.axis,
+      xAxisIds: xValues.axisIds,
+      yAxisIds: yValues.axisIds
+    }
+  }), [xValues, yValues]);
+  return /*#__PURE__*/_jsx(CartesianContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+export { CartesianContextProviderPro };

package/context/CartesianProviderPro/index.d.ts

@@ -0,0 +1 @@
+export * from './CartesianProviderPro';

package/context/CartesianProviderPro/index.js

@@ -0,0 +1 @@
+export * from './CartesianProviderPro';

package/context/ZoomProvider/Zoom.types.d.ts

@@ -0,0 +1,134 @@
+import { AxisId } from '@mui/x-charts/internals';
+export type ZoomProviderProps = {
+    children: React.ReactNode;
+    /**
+     * The configuration of the x-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    xAxis?: AxisConfigForZoom[];
+    /**
+     * The configuration of the y-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    yAxis?: AxisConfigForZoom[];
+} & ZoomProps;
+/**
+ * Represents the state of the ZoomProvider.
+ */
+export type ZoomState = {
+    /**
+     * Whether zooming is enabled.
+     */
+    isZoomEnabled: boolean;
+    /**
+     * Whether panning is enabled.
+     */
+    isPanEnabled: boolean;
+    /**
+     * The zoom options for each axis.
+     */
+    options: Record<AxisId, DefaultizedZoomOptions>;
+    /**
+     * The zoom data for each axis
+     * @default []
+     */
+    zoomData: ZoomData[];
+    /**
+     * Set the zoom data for each axis.
+     * @param {ZoomData[]} zoomData The new zoom data.
+     */
+    setZoomData: (zoomData: ZoomData[] | ((zoomData: ZoomData[]) => ZoomData[])) => void;
+    /**
+     * Whether the user is currently interacting with the chart.
+     * This is useful to prevent animations from running while the user is interacting.
+     */
+    isInteracting: boolean;
+    /**
+     * Set the interaction state of the chart.
+     * @param {boolean} isInteracting The new interaction state.
+     */
+    setIsInteracting: (isInteracting: boolean) => void;
+};
+export type ZoomOptions = {
+    /**
+     * The starting percentage of the zoom range. In the range of 0 to 100.
+     *
+     * @default 0
+     */
+    minStart?: number;
+    /**
+     * The ending percentage of the zoom range. In the range of 0 to 100.
+     *
+     * @default 100
+     */
+    maxEnd?: number;
+    /**
+     * The step size of the zooming function. Defines the granularity of the zoom.
+     *
+     * @default 5
+     */
+    step?: number;
+    /**
+     * Restricts the minimum span size in the range of 0 to 100.
+     *
+     * If the span size is smaller than the minSpan, the span will be resized to the minSpan.
+     *
+     * @default 10
+     */
+    minSpan?: number;
+    /**
+     * Restricts the maximum span size in the range of 0 to 100.
+     *
+     * If the span size is larger than the maxSpan, the span will be resized to the maxSpan.
+     *
+     * @default 100
+     */
+    maxSpan?: number;
+    /**
+     * Set to `false` to disable panning. Useful when you want to pan programmatically,
+     * or to show only a specific section of the chart.
+     *
+     * @default true
+     */
+    panning?: boolean;
+};
+export type ZoomData = {
+    /**
+     * The starting percentage of the zoom range. In the range of 0 to 100.
+     *
+     * @default 0
+     */
+    start: number;
+    /**
+     * The ending percentage of the zoom range. In the range of 0 to 100.
+     *
+     * @default 100
+     */
+    end: number;
+    /**
+     * The axis id that the zoom data belongs to.
+     */
+    axisId: AxisId;
+};
+export type ZoomProps = {
+    /**
+     * The list of zoom data related to each axis.
+     */
+    zoom?: ZoomData[];
+    /**
+     * Callback fired when the zoom has changed.
+     *
+     * @param {ZoomData[]} zoomData Updated zoom data.
+     */
+    onZoomChange?: (zoomData: ZoomData[] | ((zoomData: ZoomData[]) => ZoomData[])) => void;
+};
+export type DefaultizedZoomOptions = Required<ZoomOptions> & {
+    axisId: AxisId;
+    axisDirection: 'x' | 'y';
+};
+export type AxisConfigForZoom = {
+    id: AxisId;
+    zoom?: ZoomOptions | boolean;
+};

package/context/ZoomProvider/Zoom.types.js

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

package/context/ZoomProvider/ZoomContext.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Initializable } from '@mui/x-charts/internals';
+import { ZoomState } from './Zoom.types';
+export declare const ZoomContext: React.Context<Initializable<ZoomState>>;

package/context/ZoomProvider/ZoomContext.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export const ZoomContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    isZoomEnabled: false,
+    isPanEnabled: false,
+    options: {},
+    zoomData: [],
+    setZoomData: () => {},
+    isInteracting: false,
+    setIsInteracting: () => {}
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  ZoomContext.displayName = 'ZoomContext';
+}

package/context/ZoomProvider/ZoomProvider.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ZoomProviderProps } from './Zoom.types';
+export declare function ZoomProvider({ children, xAxis, yAxis, zoom, onZoomChange }: ZoomProviderProps): React.JSX.Element;

package/context/ZoomProvider/ZoomProvider.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import useControlled from '@mui/utils/useControlled';
+import { ZoomContext } from './ZoomContext';
+import { defaultizeZoom } from './defaultizeZoom';
+import { initializeZoomData } from './initializeZoomData';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ZoomProvider({
+  children,
+  xAxis,
+  yAxis,
+  zoom,
+  onZoomChange
+}) {
+  const [isInteracting, setIsInteracting] = React.useState(false);
+  const options = React.useMemo(() => [...defaultizeZoom(xAxis, 'x'), ...defaultizeZoom(yAxis, 'y')].reduce((acc, v) => {
+    acc[v.axisId] = v;
+    return acc;
+  }, {}), [xAxis, yAxis]);
+
+  // Default zoom data is initialized only once when uncontrolled. If the user changes the options
+  // after the initial render, the zoom data will not be updated until the next zoom interaction.
+  // This is required to avoid warnings about controlled/uncontrolled components.
+  const defaultZoomData = React.useRef(initializeZoomData(options));
+  const [zoomData, setZoomData] = useControlled({
+    controlled: zoom,
+    default: defaultZoomData.current,
+    name: 'ZoomProvider',
+    state: 'zoom'
+  });
+  const setZoomDataCallback = React.useCallback(newZoomData => {
+    setZoomData(newZoomData);
+    onZoomChange?.(newZoomData);
+  }, [setZoomData, onZoomChange]);
+  const value = React.useMemo(() => ({
+    isInitialized: true,
+    data: {
+      isZoomEnabled: Object.keys(options).length > 0,
+      isPanEnabled: isPanEnabled(options),
+      options,
+      zoomData,
+      setZoomData: setZoomDataCallback,
+      isInteracting,
+      setIsInteracting
+    }
+  }), [zoomData, isInteracting, setIsInteracting, options, setZoomDataCallback]);
+  return /*#__PURE__*/_jsx(ZoomContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+function isPanEnabled(options) {
+  return Object.values(options).some(v => v.panning) || false;
+}