@mui/x-charts-pro 8.26.0 → 9.0.0-alpha.0

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -96,6 +96,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       setZoomData: PropTypes.func.isRequired
     })
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: PropTypes.number,
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -170,7 +175,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['scatter']).isRequired
   })),
   /**
@@ -183,7 +188,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -213,7 +218,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['scatter']).isRequired
   })),
   /**
@@ -325,7 +330,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['scatter']).isRequired
   }),
   /**

package/esm/index.d.ts

@@ -29,8 +29,10 @@ export * from "./models/index.js";
 export * from "./plugins/index.js";
 export * from "./colorPalettes/index.js";
 export * from "./Heatmap/index.js";
+export { ChartsContainerPro } from "./ChartsContainerPro/index.js";
+export type { ChartsContainerProProps, ChartsContainerProSlots, ChartsContainerProSlotProps } from "./ChartsContainerPro/index.js";
 export { ChartContainerPro } from "./ChartContainerPro/index.js";
-export type { ChartContainerProProps } from "./ChartContainerPro/index.js";
+export type { ChartContainerProProps, ChartContainerProSlots, ChartContainerProSlotProps } from "./ChartContainerPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./SankeyChart/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.26.0
+ * @mui/x-charts-pro v9.0.0-alpha.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -44,6 +44,7 @@ export * from "./colorPalettes/index.js";
 
 // Pro components
 export * from "./Heatmap/index.js";
+export { ChartsContainerPro } from "./ChartsContainerPro/index.js";
 export { ChartContainerPro } from "./ChartContainerPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";

package/esm/internals/index.d.ts

@@ -1,6 +1,13 @@
+export { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.js";
+export type { UseChartsContainerProPropsReturnValue } from "../ChartsContainerPro/useChartsContainerProProps.js";
 export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.js";
 export { seriesPreviewPlotMap } from "../ChartZoomSlider/internals/seriesPreviewPlotMap.js";
 export type { PreviewPlotProps } from "../ChartZoomSlider/internals/previews/PreviewPlot.types.js";
 export { defaultSeriesConfigPro } from "../ChartDataProviderPro/ChartDataProviderPro.js";
-export type { ProPluginsPerSeriesType } from "../context/ChartProApi.js";
+export type { ProPluginsPerSeriesType } from "../context/ChartProApi.js";
+export { useHeatmapProps } from "../Heatmap/useHeatmapProps.js";
+export { defaultSlotsMaterial } from "./material/index.js";
+export * from "../Heatmap/HeatmapSVGPlot.js";
+export type * from "../Heatmap/Heatmap.types.js";
+export { selectorHeatmapItemAtPosition } from "../plugins/selectors/useChartHeatmapPosition.selectors.js";

package/esm/internals/index.js

@@ -1,3 +1,8 @@
+export { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.js";
 export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 export { seriesPreviewPlotMap } from "../ChartZoomSlider/internals/seriesPreviewPlotMap.js";
-export { defaultSeriesConfigPro } from "../ChartDataProviderPro/ChartDataProviderPro.js";
+export { defaultSeriesConfigPro } from "../ChartDataProviderPro/ChartDataProviderPro.js";
+export { useHeatmapProps } from "../Heatmap/useHeatmapProps.js";
+export { defaultSlotsMaterial } from "./material/index.js";
+export * from "../Heatmap/HeatmapSVGPlot.js";
+export { selectorHeatmapItemAtPosition } from "../plugins/selectors/useChartHeatmapPosition.selectors.js";

package/esm/internals/plugins/useChartProExport/common.d.ts

@@ -2,4 +2,8 @@ export declare function createExportIframe(title?: string): HTMLIFrameElement;
 /**
  * Applies styles to an element and returns the previous styles.
  */
-export declare function applyStyles(element: HTMLElement | SVGElement, styles: Record<string, string | null>): Record<string, string | null>;
+export declare function applyStyles(element: HTMLElement | SVGElement, styles: Record<string, string | null>): Record<string, string | null>;
+/**
+ * Copies the content of all canvases from the original element to the cloned element.
+ */
+export declare function copyCanvasesContent(original: Element, clone: Element): Promise<void[]>;

package/esm/internals/plugins/useChartProExport/common.js

@@ -18,4 +18,40 @@ export function applyStyles(element, styles) {
     element.style.setProperty(key, value);
   });
   return previousStyles;
+}
+
+/**
+ * Copies the content of all canvases from the original element to the cloned element.
+ */
+export function copyCanvasesContent(original, clone) {
+  const originalCanvases = original.querySelectorAll('canvas');
+  const cloneCanvases = clone.querySelectorAll('canvas');
+  const promises = Array.from(originalCanvases).map(async (originalCanvas, index) => {
+    return new Promise((resolve, reject) => {
+      const cloneCanvas = cloneCanvases[index];
+      if (cloneCanvas) {
+        const dataURL = originalCanvas.toDataURL();
+        const img = cloneCanvas.ownerDocument.createElement('img');
+        img.src = dataURL;
+        img.width = cloneCanvas.width;
+        img.height = cloneCanvas.height;
+        for (const styleKey in cloneCanvas.style) {
+          if (!Object.hasOwn(img.style, styleKey) || !Object.hasOwn(cloneCanvas.style, styleKey)) {
+            continue;
+          }
+          img.style[styleKey] = cloneCanvas.style[styleKey];
+        }
+        cloneCanvas.replaceWith(img);
+        img.onload = () => {
+          resolve();
+        };
+        img.onerror = event => {
+          reject(event);
+        };
+      } else {
+        resolve();
+      }
+    });
+  });
+  return Promise.all(promises);
 }

package/esm/internals/plugins/useChartProExport/exportImage.d.ts

@@ -1,3 +1,3 @@
 import { type ChartImageExportOptions } from "./useChartProExport.types.js";
 export declare const getDrawDocument: () => Promise<typeof import("rasterizehtml").drawDocument>;
-export declare function exportImage(element: HTMLElement | SVGElement, svg: SVGElement, params?: ChartImageExportOptions): Promise<void>;
+export declare function exportImage(element: Element, svg: SVGElement, params?: ChartImageExportOptions): Promise<void>;

package/esm/internals/plugins/useChartProExport/exportImage.js

@@ -1,6 +1,6 @@
 import ownerDocument from '@mui/utils/ownerDocument';
 import { loadStyleSheets } from '@mui/x-internals/export';
-import { applyStyles, createExportIframe } from "./common.js";
+import { applyStyles, copyCanvasesContent, createExportIframe } from "./common.js";
 import { defaultOnBeforeExport } from "./defaults.js";
 export const getDrawDocument = async () => {
   try {
@@ -40,6 +40,10 @@ export async function exportImage(element, svg, params) {
     applyStyles(svg, previousStyles);
     exportDoc.body.replaceChildren(elementClone);
     exportDoc.body.style.margin = '0px';
+    /* Set display block through styles to ensure that CSS rules that target `body` don't accidentally target this
+     * iframe's body, which might cause the body to have no intrinsic width or height, leading to the canvas having a
+     * size of 0px, which causes the `toBlob` call to return null. */
+    exportDoc.body.style.display = 'block';
     /* The body's parent has a width of 0, so we use fit-content to ensure that the body adjusts its width to the width
      * of its children. */
     exportDoc.body.style.width = 'fit-content';
@@ -48,6 +52,7 @@ export async function exportImage(element, svg, params) {
     if (copyStyles) {
       await Promise.all(loadStyleSheets(exportDoc, root, nonce));
     }
+    await copyCanvasesContent(element, elementClone);
     resolve();
   };
   doc.body.appendChild(iframe);
@@ -63,6 +68,10 @@ export async function exportImage(element, svg, params) {
   canvas.height = exportDocBodySize.height * ratio;
   canvas.style.width = `${exportDocBodySize.width}px`;
   canvas.style.height = `${exportDocBodySize.height}px`;
+  if (canvas.width === 0 || canvas.height === 0) {
+    doc.body.removeChild(iframe);
+    throw new Error(`MUI X Charts: Cannot export an image with zero width or height. Width: ${canvas.width}px. Height: ${canvas.height}px.`);
+  }
   try {
     await drawDocument(iframe.contentDocument, canvas, {
       // Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71

package/esm/internals/plugins/useChartProExport/print.d.ts

@@ -1,5 +1,5 @@
 import { type ChartPrintExportOptions } from "./useChartProExport.types.js";
-export declare function printChart(element: HTMLElement | SVGElement, {
+export declare function printChart(element: Element, {
   fileName,
   onBeforeExport,
   copyStyles,

package/esm/internals/plugins/useChartProExport/print.js

@@ -1,6 +1,6 @@
 import ownerDocument from '@mui/utils/ownerDocument';
 import { loadStyleSheets } from '@mui/x-internals/export';
-import { createExportIframe } from "./common.js";
+import { copyCanvasesContent, createExportIframe } from "./common.js";
 import { defaultOnBeforeExport } from "./defaults.js";
 export function printChart(element, {
   fileName,
@@ -20,6 +20,7 @@ export function printChart(element, {
     if (copyStyles) {
       await Promise.all(loadStyleSheets(printDoc, root, nonce));
     }
+    await copyCanvasesContent(element, elementClone);
     const mediaQueryList = printWindow.contentWindow.matchMedia('print');
     mediaQueryList.addEventListener('change', mql => {
       const isAfterPrint = mql.matches === false;

package/esm/internals/plugins/useChartProExport/useChartProExport.js

@@ -12,10 +12,12 @@ function waitForAnimationFrame() {
   return promise;
 }
 export const useChartProExport = ({
-  chartRootRef,
-  svgRef,
   instance
 }) => {
+  const {
+    chartRootRef,
+    svgRef
+  } = instance;
   const exportAsPrint = async options => {
     const chartRoot = chartRootRef.current;
     if (chartRoot) {

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

@@ -1,4 +1,4 @@
-export declare const selectorZoomInteractionConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorZoomInteractionConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, interactionName: "wheel" | "pinch" | "tapAndDrag" | "doubleTapReset" | "brush") => (Omit<import("./ZoomInteractionConfig.types.js").ZoomInteraction, "pointerMode"> & {
   mouse: {
@@ -10,7 +10,7 @@ export declare const selectorZoomInteractionConfig: (args_0: import("@mui/x-char
   pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
   allowedDirection?: "x" | "y" | "xy";
 }) | null;
-export declare const selectorPanInteractionConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorPanInteractionConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, interactionName: "wheel" | "drag" | "pressAndDrag") => (Omit<import("./ZoomInteractionConfig.types.js").PanInteraction, "pointerMode"> & {
   mouse: {

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const usePanOnDrag: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.js

@@ -7,9 +7,11 @@ import { translateZoom } from "./useZoom.utils.js";
 import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const usePanOnDrag = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const config = store.use(selectorPanInteractionConfig, 'drag');

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const usePanOnPressAndDrag: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.js

@@ -7,9 +7,11 @@ import { translateZoom } from "./useZoom.utils.js";
 import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const usePanOnPressAndDrag = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const isInteracting = React.useRef(false);

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const usePanOnWheel: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.js

@@ -1,15 +1,17 @@
 'use client';
 
 import * as React from 'react';
-import { getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { getChartPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { translateZoom } from "./useZoom.utils.js";
 import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const usePanOnWheel = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const startedOutsideRef = React.useRef(false);
@@ -37,7 +39,7 @@ export const usePanOnWheel = ({
     }
     const rafThrottledSetZoomData = rafThrottle(setZoomDataCallback);
     const wheelHandler = instance.addInteractionListener('panTurnWheel', event => {
-      const point = getSVGPoint(element, {
+      const point = getChartPoint(element, {
         clientX: event.detail.centroid.x,
         clientY: event.detail.centroid.y
       });

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnBrush: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<(prev: ZoomData[]) => ZoomData[]>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<(prev: ZoomData[]) => ZoomData[]>) => void;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.js

@@ -1,14 +1,16 @@
 'use client';
 
 import * as React from 'react';
-import { getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { getChartPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid } from "./useZoom.utils.js";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const useZoomOnBrush = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const config = store.use(selectorZoomInteractionConfig, 'brush');
@@ -26,11 +28,11 @@ export const useZoomOnBrush = ({
     const handleBrushEnd = event => {
       // Convert the brush rectangle to zoom percentages for each axis
       setZoomDataCallback(prev => {
-        const startPoint = getSVGPoint(element, {
+        const startPoint = getChartPoint(element, {
           clientX: event.detail.initialCentroid.x,
           clientY: event.detail.initialCentroid.y
         });
-        const endPoint = getSVGPoint(element, {
+        const endPoint = getChartPoint(element, {
           clientX: event.detail.centroid.x,
           clientY: event.detail.centroid.y
         });

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnDoubleTapReset.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnDoubleTapReset: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnDoubleTapReset.js

@@ -5,9 +5,11 @@ import { selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const useZoomOnDoubleTapReset = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const config = store.use(selectorZoomInteractionConfig, 'doubleTapReset');
   const isZoomOnDoubleTapResetEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnPinch: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.js

@@ -1,15 +1,17 @@
 'use client';
 
 import * as React from 'react';
-import { getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { getChartPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.js";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const useZoomOnPinch = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const config = store.use(selectorZoomInteractionConfig, 'pinch');
@@ -42,7 +44,7 @@ export const useZoomOnPinch = ({
           }
           const isZoomIn = event.detail.direction > 0;
           const scaleRatio = 1 + event.detail.deltaScale;
-          const point = getSVGPoint(element, {
+          const point = getChartPoint(element, {
             clientX: event.detail.centroid.x,
             clientY: event.detail.centroid.y
           });

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnTapAndDrag: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.js

@@ -1,15 +1,17 @@
 'use client';
 
 import * as React from 'react';
-import { getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { getChartPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.js";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const useZoomOnTapAndDrag = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const config = store.use(selectorZoomInteractionConfig, 'tapAndDrag');
@@ -47,7 +49,7 @@ export const useZoomOnTapAndDrag = ({
           }
           const isZoomIn = event.detail.deltaY > 0;
           const scaleRatio = 1 + event.detail.deltaY / 100;
-          const point = getSVGPoint(element, {
+          const point = getChartPoint(element, {
             clientX: event.detail.initialCentroid.x,
             clientY: event.detail.initialCentroid.y
           });

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnWheel: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.js

@@ -1,15 +1,17 @@
 'use client';
 
 import * as React from 'react';
-import { getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { getChartPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { getHorizontalCenterRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.js";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const useZoomOnWheel = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const startedOutsideRef = React.useRef(false);
@@ -33,7 +35,7 @@ export const useZoomOnWheel = ({
     }
     const rafThrottledSetZoomData = rafThrottle(setZoomDataCallback);
     const zoomOnWheelHandler = instance.addInteractionListener('zoomTurnWheel', event => {
-      const point = getSVGPoint(element, {
+      const point = getChartPoint(element, {
         clientX: event.detail.centroid.x,
         clientY: event.detail.centroid.y
       });

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

@@ -1,18 +1,18 @@
 import { type AxisId, type ChartRootSelector } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "./useChartProZoom.types.js";
 export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature, 'zoom'>;
-export declare const selectorChartZoomIsInteracting: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartZoomIsInteracting: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;
-export declare const selectorChartZoomIsEnabled: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomIsEnabled: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;
-export declare const selectorChartAxisZoomData: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartAxisZoomData: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, axisId: AxisId) => import("@mui/x-charts/internals").ZoomData | undefined;
-export declare const selectorChartCanZoomOut: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartCanZoomOut: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;
-export declare const selectorChartCanZoomIn: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartCanZoomIn: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & 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("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;

package/esm/models/seriesType/heatmap.d.ts

@@ -1,7 +1,7 @@
 import { type DefaultizedProps } from '@mui/x-internals/types';
 import { type CommonDefaultizedProps, type CommonSeriesType, type CartesianSeriesType } from '@mui/x-charts/internals';
 export type HeatmapValueType = readonly [number, number, number];
-export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType>, 'color' | 'colorGetter'>, CartesianSeriesType {
+export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType, 'heatmap'>, 'color' | 'colorGetter'>, CartesianSeriesType {
   type: 'heatmap';
   /**
    * Data associated to each bar.
@@ -34,10 +34,10 @@ export type HeatmapItemIdentifier = {
   /**
    * The x index of the cell. Useful to identify the cell position in the heatmap even if there is no data.
    */
-  xIndex?: number;
+  xIndex: number;
   /**
    * The y index of the cell. Useful to identify the cell position in the heatmap even if there is no data.
    */
-  yIndex?: number;
+  yIndex: number;
 };
 export interface DefaultizedHeatmapSeriesType extends DefaultizedProps<HeatmapSeriesType, CommonDefaultizedProps> {}