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

package/node/ScatterChartPro/ScatterChartPro.js

@@ -0,0 +1,396 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScatterChartPro = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
+var _ScatterChart = require("@mui/x-charts/ScatterChart");
+var _context = require("@mui/x-charts/context");
+var _ChartsVoronoiHandler = require("@mui/x-charts/ChartsVoronoiHandler");
+var _ChartsAxis = require("@mui/x-charts/ChartsAxis");
+var _ChartsGrid = require("@mui/x-charts/ChartsGrid");
+var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
+var _ChartsAxisHighlight = require("@mui/x-charts/ChartsAxisHighlight");
+var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
+var _internals = require("@mui/x-charts/internals");
+var _ResponsiveChartContainerPro = require("../ResponsiveChartContainerPro");
+var _ZoomSetup = require("../context/ZoomProvider/ZoomSetup");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["zoom", "onZoomChange"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * 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 = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(props, ref) {
+  const {
+      zoom,
+      onZoomChange
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    chartContainerProps,
+    zAxisProps,
+    voronoiHandlerProps,
+    chartsAxisProps,
+    gridProps,
+    scatterPlotProps,
+    overlayProps,
+    legendProps,
+    axisHighlightProps,
+    tooltipProps,
+    children
+  } = (0, _internals.useScatterChartProps)(other);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveChartContainerPro.ResponsiveChartContainerPro, (0, _extends2.default)({
+    ref: ref
+  }, chartContainerProps, {
+    zoom: zoom,
+    onZoomChange: onZoomChange,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_context.ZAxisContextProvider, (0, _extends2.default)({}, zAxisProps, {
+      children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        "data-drawing-container": true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomSetup.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.default.shape({
+    x: _propTypes.default.oneOf(['band', 'line', 'none']),
+    y: _propTypes.default.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.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  /**
+   * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
+   */
+  colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  desc: _propTypes.default.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.default.bool,
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   */
+  disableVoronoi: _propTypes.default.bool,
+  /**
+   * Option to display a cartesian grid in the background.
+   */
+  grid: _propTypes.default.shape({
+    horizontal: _propTypes.default.bool,
+    vertical: _propTypes.default.bool
+  }),
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: _propTypes.default.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.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.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
+  legend: _propTypes.default.shape({
+    classes: _propTypes.default.object,
+    direction: _propTypes.default.oneOf(['column', 'row']),
+    hidden: _propTypes.default.bool,
+    position: _propTypes.default.shape({
+      horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
+      vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
+    }),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object
+  }),
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading: _propTypes.default.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.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
+  }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: _propTypes.default.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.default.func,
+  /**
+   * Callback fired when the zoom has changed.
+   *
+   * @param {ZoomData[]} zoomData Updated zoom data.
+   */
+  onZoomChange: _propTypes.default.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.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
+  /**
+   * The series to display in the scatter chart.
+   * An array of [[ScatterSeriesType]] objects.
+   */
+  series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  title: _propTypes.default.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.default.shape({
+    axisContent: _propTypes.default.elementType,
+    classes: _propTypes.default.object,
+    itemContent: _propTypes.default.elementType,
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
+    trigger: _propTypes.default.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.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
+  viewBox: _propTypes.default.shape({
+    height: _propTypes.default.number,
+    width: _propTypes.default.number,
+    x: _propTypes.default.number,
+    y: _propTypes.default.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.default.number,
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: _propTypes.default.number,
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    position: _propTypes.default.oneOf(['bottom', 'top']),
+    reverse: _propTypes.default.bool,
+    scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
+    tickLabelStyle: _propTypes.default.object,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func,
+    zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
+      maxEnd: _propTypes.default.number,
+      maxSpan: _propTypes.default.number,
+      minSpan: _propTypes.default.number,
+      minStart: _propTypes.default.number,
+      panning: _propTypes.default.bool,
+      step: _propTypes.default.number
+    }), _propTypes.default.bool])
+  })),
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    position: _propTypes.default.oneOf(['left', 'right']),
+    reverse: _propTypes.default.bool,
+    scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
+    tickLabelStyle: _propTypes.default.object,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func,
+    zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
+      maxEnd: _propTypes.default.number,
+      maxSpan: _propTypes.default.number,
+      minSpan: _propTypes.default.number,
+      minStart: _propTypes.default.number,
+      panning: _propTypes.default.bool,
+      step: _propTypes.default.number
+    }), _propTypes.default.bool])
+  })),
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    id: _propTypes.default.string,
+    max: _propTypes.default.number,
+    min: _propTypes.default.number
+  })),
+  /**
+   * The list of zoom data related to each axis.
+   */
+  zoom: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    end: _propTypes.default.number.isRequired,
+    start: _propTypes.default.number.isRequired
+  }))
+} : void 0;

package/node/ScatterChartPro/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ScatterChartPro = require("./ScatterChartPro");
+Object.keys(_ScatterChartPro).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ScatterChartPro[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ScatterChartPro[key];
+    }
+  });
+});

package/node/context/CartesianProviderPro/CartesianProviderPro.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CartesianContextProviderPro = CartesianContextProviderPro;
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _useZoom = require("../ZoomProvider/useZoom");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const {
+  computeValue
+} = _internals.cartesianProviderUtils;
+function CartesianContextProviderPro(props) {
+  const {
+    xAxis,
+    yAxis,
+    dataset,
+    children
+  } = props;
+  const formattedSeries = (0, _internals.useSeries)();
+  const drawingArea = (0, _internals.useDrawingArea)();
+  const {
+    zoomData
+  } = (0, _useZoom.useZoom)();
+  const xExtremumGetters = (0, _internals.useXExtremumGetter)();
+  const yExtremumGetters = (0, _internals.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__*/(0, _jsxRuntime.jsx)(_internals.CartesianContext.Provider, {
+    value: value,
+    children: children
+  });
+}

package/node/context/CartesianProviderPro/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _CartesianProviderPro = require("./CartesianProviderPro");
+Object.keys(_CartesianProviderPro).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CartesianProviderPro[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CartesianProviderPro[key];
+    }
+  });
+});

package/node/context/ZoomProvider/Zoom.types.js

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

package/node/context/ZoomProvider/ZoomContext.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZoomContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ZoomContext = exports.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/node/context/ZoomProvider/ZoomProvider.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZoomProvider = ZoomProvider;
+var React = _interopRequireWildcard(require("react"));
+var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
+var _ZoomContext = require("./ZoomContext");
+var _defaultizeZoom = require("./defaultizeZoom");
+var _initializeZoomData = require("./initializeZoomData");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ZoomProvider({
+  children,
+  xAxis,
+  yAxis,
+  zoom,
+  onZoomChange
+}) {
+  const [isInteracting, setIsInteracting] = React.useState(false);
+  const options = React.useMemo(() => [...(0, _defaultizeZoom.defaultizeZoom)(xAxis, 'x'), ...(0, _defaultizeZoom.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((0, _initializeZoomData.initializeZoomData)(options));
+  const [zoomData, setZoomData] = (0, _useControlled.default)({
+    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__*/(0, _jsxRuntime.jsx)(_ZoomContext.ZoomContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+function isPanEnabled(options) {
+  return Object.values(options).some(v => v.panning) || false;
+}

package/node/context/ZoomProvider/ZoomSetup.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZoomSetup = ZoomSetup;
+var _useSetupPan = require("./useSetupPan");
+var _useSetupZoom = require("./useSetupZoom");
+/**
+ * Sets up the zoom functionality if using composition or a custom chart.
+ *
+ * Simply add this component at the same level as the chart component to enable zooming and panning.
+ *
+ * See: [Composition](https://mui.com/x/react-charts/composition/)
+ */
+function ZoomSetup() {
+  (0, _useSetupZoom.useSetupZoom)();
+  (0, _useSetupPan.useSetupPan)();
+  return null;
+}

package/node/context/ZoomProvider/defaultizeZoom.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultizeZoom = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _internals = require("@mui/x-charts/internals");
+const defaultZoomOptions = {
+  minStart: 0,
+  maxEnd: 100,
+  step: 5,
+  minSpan: 10,
+  maxSpan: 100,
+  panning: true
+};
+const defaultizeZoom = (axis, axisDirection) => {
+  if (!axis) {
+    return [];
+  }
+  const defaultized = axis.map(v => {
+    if (!v.zoom) {
+      return undefined;
+    }
+    if (v.zoom === true) {
+      return (0, _extends2.default)({
+        axisId: v.id,
+        axisDirection
+      }, defaultZoomOptions);
+    }
+    return (0, _extends2.default)({
+      axisId: v.id,
+      axisDirection
+    }, defaultZoomOptions, v.zoom);
+  }).filter(_internals.isDefined);
+  return defaultized;
+};
+exports.defaultizeZoom = defaultizeZoom;