@mui/x-charts-pro 8.0.0-alpha.6 → 8.0.0-alpha.8

package/internals/plugins/useChartProZoom/useChartProZoom.utils.js

@@ -0,0 +1,126 @@
+/**
+ * Helper to get the range (in percents of a reference range) corresponding to a given scale.
+ * @param centerRatio {number} The ratio of the point that should not move between the previous and next range.
+ * @param scaleRatio {number} The target scale ratio.
+ * @returns The range to display.
+ */
+export const zoomAtPoint = (centerRatio, scaleRatio, currentZoomData, options) => {
+  const MIN_RANGE = options.minStart;
+  const MAX_RANGE = options.maxEnd;
+  const MIN_ALLOWED_SPAN = options.minSpan;
+  const minRange = currentZoomData.start;
+  const maxRange = currentZoomData.end;
+  const point = minRange + centerRatio * (maxRange - minRange);
+  let newMinRange = (minRange + point * (scaleRatio - 1)) / scaleRatio;
+  let newMaxRange = (maxRange + point * (scaleRatio - 1)) / scaleRatio;
+  let minSpillover = 0;
+  let maxSpillover = 0;
+  if (newMinRange < MIN_RANGE) {
+    minSpillover = Math.abs(newMinRange);
+    newMinRange = MIN_RANGE;
+  }
+  if (newMaxRange > MAX_RANGE) {
+    maxSpillover = Math.abs(newMaxRange - MAX_RANGE);
+    newMaxRange = MAX_RANGE;
+  }
+  if (minSpillover > 0 && maxSpillover > 0) {
+    return [MIN_RANGE, MAX_RANGE];
+  }
+  newMaxRange += minSpillover;
+  newMinRange -= maxSpillover;
+  newMinRange = Math.min(MAX_RANGE - MIN_ALLOWED_SPAN, Math.max(MIN_RANGE, newMinRange));
+  newMaxRange = Math.max(MIN_ALLOWED_SPAN, Math.min(MAX_RANGE, newMaxRange));
+  return [newMinRange, newMaxRange];
+};
+
+/**
+ * Checks if the new span is valid.
+ */
+export function isSpanValid(minRange, maxRange, isZoomIn, option) {
+  const newSpanPercent = maxRange - minRange;
+  if (isZoomIn && newSpanPercent < option.minSpan || !isZoomIn && newSpanPercent > option.maxSpan) {
+    return false;
+  }
+  if (minRange < option.minStart || maxRange > option.maxEnd) {
+    return false;
+  }
+  return true;
+}
+function getMultiplier(event) {
+  const ctrlMultiplier = event.ctrlKey ? 3 : 1;
+
+  // DeltaMode: 0 is pixel, 1 is line, 2 is page
+  // This is defined by the browser.
+  if (event.deltaMode === 1) {
+    return 1 * ctrlMultiplier;
+  }
+  if (event.deltaMode) {
+    return 10 * ctrlMultiplier;
+  }
+  return 0.2 * ctrlMultiplier;
+}
+
+/**
+ * Get the scale ratio and if it's a zoom in or out from a wheel event.
+ */
+export function getWheelScaleRatio(event, step) {
+  const deltaY = -event.deltaY;
+  const multiplier = getMultiplier(event);
+  const scaledStep = step * multiplier * deltaY / 1000;
+  // Clamp the scale ratio between 0.1 and 1.9 so that the zoom is not too big or too small.
+  const scaleRatio = Math.min(Math.max(1 + scaledStep, 0.1), 1.9);
+  const isZoomIn = deltaY > 0;
+  return {
+    scaleRatio,
+    isZoomIn
+  };
+}
+
+/**
+ * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
+ */
+export function getPinchScaleRatio(curDiff, prevDiff, step) {
+  const scaledStep = step / 1000;
+  let scaleRatio = 0;
+  let isZoomIn = false;
+  const hasMoved = prevDiff > 0;
+  if (hasMoved && curDiff > prevDiff) {
+    // The distance between the two pointers has increased
+    scaleRatio = 1 + scaledStep;
+    isZoomIn = true;
+  }
+  if (hasMoved && curDiff < prevDiff) {
+    // The distance between the two pointers has decreased
+    scaleRatio = 1 - scaledStep;
+    isZoomIn = false;
+  }
+  return {
+    scaleRatio,
+    isZoomIn
+  };
+}
+export function getDiff(eventCache) {
+  const [firstEvent, secondEvent] = eventCache;
+  return Math.hypot(firstEvent.pageX - secondEvent.pageX, firstEvent.pageY - secondEvent.pageY);
+}
+
+/**
+ * Get the ratio of the point in the horizontal center of the area.
+ */
+export function getHorizontalCenterRatio(point, area) {
+  const {
+    left,
+    width
+  } = area;
+  return (point.x - left) / width;
+}
+export function preventDefault(event) {
+  event.preventDefault();
+}
+export function getVerticalCenterRatio(point, area) {
+  const {
+    top,
+    height
+  } = area;
+  return (point.y - top) / height * -1 + 1;
+}

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

@@ -0,0 +1,53 @@
+export interface 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;
+    /**
+     * Defines how to filter the axis data when it is outside of the zoomed range of this axis.
+     *
+     * - `keep`: The data outside the zoomed range is kept. And the other axes will stay the same.
+     * - `discard`: The data outside the zoomed range is discarded for the other axes.
+     *    The other axes will be adjusted to fit the zoomed range.
+     *
+     * @default 'keep'
+     */
+    filterMode?: 'discard' | 'keep';
+}

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import ponyfillGlobal from '@mui/utils/ponyfillGlobal';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczNTE2NDAwMDAwMA==";
+  const releaseInfo = "MTczNjk4MjAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/models/index.d.ts

@@ -1 +1,2 @@
+export type { ZoomData } from '@mui/x-charts/internals';
 export * from './seriesType';

package/models/index.js

@@ -1 +1,2 @@
-export * from "./seriesType/index.js";
+export * from "./seriesType/index.js";
+export {};

package/modern/BarChartPro/BarChartPro.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["zoom", "onZoomChange"];
+const _excluded = ["initialZoom", "onZoomChange", "apiRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
@@ -15,15 +15,14 @@ import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
 import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
-import { useBarChartProps } from '@mui/x-charts/internals';
-import { ChartContainerPro } from "../ChartContainerPro/index.js";
-import { ZoomSetup } from "../context/ZoomProvider/ZoomSetup.js";
-import { useZoom } from "../context/ZoomProvider/useZoom.js";
+import { useBarChartProps, ChartsWrapper } from '@mui/x-charts/internals';
+import { ChartDataProvider } from '@mui/x-charts/context';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { useIsZoomInteracting } from "../hooks/zoom/index.js";
+import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function BarChartPlotZoom(props) {
-  const {
-    isInteracting
-  } = useZoom();
+  const isInteracting = useIsZoomInteracting();
   return /*#__PURE__*/_jsx(BarPlot, _extends({}, props, {
     skipAnimation: isInteracting || undefined
   }));
@@ -84,11 +83,13 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
     name: 'MuiBarChartPro'
   });
   const {
-      zoom,
-      onZoomChange
+      initialZoom,
+      onZoomChange,
+      apiRef
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
+    chartsWrapperProps,
     chartContainerProps,
     barPlotProps,
     axisClickHandlerProps,
@@ -101,15 +102,24 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
     legendProps,
     children
   } = useBarChartProps(other);
+  const {
+    chartDataProviderProProps,
+    chartsSurfaceProps
+  } = useChartContainerProProps(_extends({}, chartContainerProps, {
+    apiRef
+  }), ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
-  return /*#__PURE__*/_jsxs(ChartContainerPro, _extends({
-    ref: ref
-  }, chartContainerProps, {
-    zoom: zoom,
+  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProProps, {
+    apiRef: apiRef,
+    initialZoom: initialZoom,
     onZoomChange: onZoomChange,
-    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
-      children: [/*#__PURE__*/_jsx(BarChartPlotZoom, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), /*#__PURE__*/_jsx(ZoomSetup, {}), children]
+    children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+          children: [/*#__PURE__*/_jsx(BarChartPlotZoom, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+      }))]
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
@@ -117,6 +127,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      setZoomData: PropTypes.func.isRequired
+    })
+  }),
   /**
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
@@ -185,6 +200,19 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     dataIndex: PropTypes.number,
     seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  })),
   /**
    * The direction of the bar elements.
    * @default 'vertical'
@@ -205,7 +233,6 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * 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,
@@ -265,6 +292,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    */
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
    * Indicate which axis to display the top of the charts.
@@ -399,12 +427,29 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     }), PropTypes.bool])
   })),
   /**
-   * The list of zoom data related to each axis.
+   * The configuration of the z-axes.
    */
-  zoom: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    end: PropTypes.number.isRequired,
-    start: PropTypes.number.isRequired
+  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
   }))
 } : void 0;
 export { BarChartPro };

package/modern/ChartContainerPro/ChartContainerPro.js

@@ -4,19 +4,46 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Watermark } from '@mui/x-license/Watermark';
+import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { ChartDataProvider } from '@mui/x-charts/context';
 import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
-import { ChartDataProviderPro } from "../context/ChartDataProviderPro/index.js";
 import { useChartContainerProProps } from "./useChartContainerProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
-const ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainerPro(props, ref) {
+
+/**
+ * It sets up the data providers as well as the `<svg>` for the chart.
+ *
+ * This is a combination of both the `ChartDataProvider` and `ChartsSurface` components.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartContainer API](https://mui.com/x/api/charts/chart-container/)
+ *
+ * @example
+ * ```jsx
+ * <ChartContainerPro
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis position="bottom" axisId="x-axis" />
+ * </ChartContainerPro>
+ * ```
+ */
+const ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainerProInner(props, ref) {
   const {
     chartDataProviderProProps,
     children,
     chartsSurfaceProps
   } = useChartContainerProProps(props, ref);
-  return /*#__PURE__*/_jsxs(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
+  useLicenseVerifier('x-charts-pro', releaseInfo);
+  return /*#__PURE__*/_jsxs(ChartDataProvider, _extends({}, chartDataProviderProProps, {
     children: [/*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
       children: children
     })), /*#__PURE__*/_jsx(Watermark, {
@@ -25,11 +52,19 @@ const ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainerP
     })]
   }));
 });
+
+// @ts-ignore
+
 process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      setZoomData: PropTypes.func.isRequired
+    })
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**
@@ -59,11 +94,23 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
     dataIndex: PropTypes.number,
     seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  })),
   /**
    * 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,
@@ -83,23 +130,19 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
    * @param {ZoomData[]} zoomData Updated zoom data.
    */
   onZoomChange: PropTypes.func,
-  /**
-   * An array of plugins defining how to preprocess data.
-   * If not provided, the container supports line, bar, scatter and pie charts.
-   */
-  plugins: PropTypes.arrayOf(PropTypes.object),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
    * Please refer to the appropriate docs page to learn more about it.
    */
-  series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  series: PropTypes.arrayOf(PropTypes.object),
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
@@ -251,14 +294,6 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
     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 { ChartContainerPro };

package/modern/ChartContainerPro/useChartContainerProProps.js

@@ -2,16 +2,19 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["zoom", "onZoomChange"];
+const _excluded = ["initialZoom", "onZoomChange", "plugins", "apiRef"];
 import { useChartContainerProps } from '@mui/x-charts/internals';
+import { ALL_PLUGINS } from "../internals/plugins/allPlugins.js";
 export const useChartContainerProProps = (props, ref) => {
   const {
-      zoom,
-      onZoomChange
+      initialZoom,
+      onZoomChange,
+      plugins,
+      apiRef
     } = props,
     baseProps = _objectWithoutPropertiesLoose(props, _excluded);
   const chartDataProviderProProps = {
-    zoom,
+    initialZoom,
     onZoomChange
   };
   const {
@@ -20,7 +23,10 @@ export const useChartContainerProProps = (props, ref) => {
     children
   } = useChartContainerProps(baseProps, ref);
   return {
-    chartDataProviderProProps: _extends({}, chartDataProviderProps, chartDataProviderProProps),
+    chartDataProviderProProps: _extends({}, chartDataProviderProps, chartDataProviderProProps, {
+      apiRef,
+      plugins: plugins ?? ALL_PLUGINS
+    }),
     chartsSurfaceProps,
     children
   };

package/modern/Heatmap/Heatmap.js

@@ -17,6 +17,9 @@ import { HeatmapTooltip } from "./HeatmapTooltip.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
 const defaultColorMap = interpolateRgbBasis(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
+const seriesConfig = {
+  heatmap: heatmapPlugin
+};
 const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -66,7 +69,7 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
   const Tooltip = props.slots?.tooltip ?? HeatmapTooltip;
   return /*#__PURE__*/_jsxs(ChartContainerPro, {
     ref: ref,
-    plugins: [heatmapPlugin],
+    seriesConfig: seriesConfig,
     series: series.map(s => _extends({
       type: 'heatmap'
     }, s)),
@@ -111,6 +114,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      setZoomData: PropTypes.func.isRequired
+    })
+  }),
   /**
    * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
@@ -146,6 +154,19 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     dataIndex: PropTypes.number,
     seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  })),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -161,7 +182,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * 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,
@@ -193,6 +213,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * An array of [[HeatmapSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * The configuration helpers used to compute attributes according to the serries type.
+   * @ignore Unstable props for internal usage.
+   */
+  seriesConfig: PropTypes.object,
   /**
    * The props used for each component slot.
    * @default {}
@@ -204,6 +229,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    */
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
    * The configuration of the tooltip.

package/modern/Heatmap/HeatmapTooltip.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import composeClasses from '@mui/utils/composeClasses';
-import { ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, ChartsTooltipMark, useItemTooltip, getChartsTooltipUtilityClass, ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
+import { ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, useItemTooltip, getChartsTooltipUtilityClass, ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
 import { useXAxis, useYAxis } from '@mui/x-charts/hooks';
-import { getLabel } from '@mui/x-charts/internals';
+import { getLabel, ChartsLabelMark } from '@mui/x-charts/internals';
 import { useHeatmapSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -47,7 +47,8 @@ function DefaultHeatmapTooltipContent(props) {
   const {
     color,
     value,
-    identifier
+    identifier,
+    markType
   } = tooltipData;
   const [xIndex, yIndex] = value;
   const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
@@ -80,7 +81,8 @@ function DefaultHeatmapTooltipContent(props) {
           className: classes?.row,
           children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
             className: clsx(classes?.markCell, classes?.cell),
-            children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
+            children: /*#__PURE__*/_jsx(ChartsLabelMark, {
+              type: markType,
               color: color,
               className: classes?.mark
             })

package/modern/Heatmap/formatter.js

@@ -9,7 +9,8 @@ const formatter = params => {
     defaultizedSeries[seriesId] = _extends({
       // Defaultize the data and the value formatter.
       valueFormatter: v => v[2].toString(),
-      data: []
+      data: [],
+      labelMarkType: 'square'
     }, series[seriesId]);
   });
   return {

package/modern/Heatmap/plugin.js

@@ -2,8 +2,7 @@ import { getBaseExtremum } from "./extremums.js";
 import formatter from "./formatter.js";
 import getColor from "./getColor.js";
 export const plugin = {
-  seriesType: 'heatmap',
-  seriesFormatter: formatter,
+  seriesProcessor: formatter,
   colorProcessor: getColor,
   xExtremumGetter: getBaseExtremum,
   yExtremumGetter: getBaseExtremum