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

package/internals/index.d.ts

@@ -1,7 +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 { defaultSlotsMaterial } from "./material/index.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/internals/index.js

@@ -3,6 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  useChartsContainerProProps: true,
+  useChartContainerProProps: true,
+  seriesPreviewPlotMap: true,
+  defaultSeriesConfigPro: true,
+  useHeatmapProps: true,
+  defaultSlotsMaterial: true,
+  selectorHeatmapItemAtPosition: true
+};
 Object.defineProperty(exports, "defaultSeriesConfigPro", {
   enumerable: true,
   get: function () {
@@ -15,6 +24,12 @@ Object.defineProperty(exports, "defaultSlotsMaterial", {
     return _material.defaultSlotsMaterial;
   }
 });
+Object.defineProperty(exports, "selectorHeatmapItemAtPosition", {
+  enumerable: true,
+  get: function () {
+    return _useChartHeatmapPosition.selectorHeatmapItemAtPosition;
+  }
+});
 Object.defineProperty(exports, "seriesPreviewPlotMap", {
   enumerable: true,
   get: function () {
@@ -27,7 +42,34 @@ Object.defineProperty(exports, "useChartContainerProProps", {
     return _useChartContainerProProps.useChartContainerProProps;
   }
 });
+Object.defineProperty(exports, "useChartsContainerProProps", {
+  enumerable: true,
+  get: function () {
+    return _useChartsContainerProProps.useChartsContainerProProps;
+  }
+});
+Object.defineProperty(exports, "useHeatmapProps", {
+  enumerable: true,
+  get: function () {
+    return _useHeatmapProps.useHeatmapProps;
+  }
+});
+var _useChartsContainerProProps = require("../ChartsContainerPro/useChartsContainerProProps");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _seriesPreviewPlotMap = require("../ChartZoomSlider/internals/seriesPreviewPlotMap");
 var _ChartDataProviderPro = require("../ChartDataProviderPro/ChartDataProviderPro");
-var _material = require("./material");
+var _useHeatmapProps = require("../Heatmap/useHeatmapProps");
+var _material = require("./material");
+var _HeatmapSVGPlot = require("../Heatmap/HeatmapSVGPlot");
+Object.keys(_HeatmapSVGPlot).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _HeatmapSVGPlot[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HeatmapSVGPlot[key];
+    }
+  });
+});
+var _useChartHeatmapPosition = require("../plugins/selectors/useChartHeatmapPosition.selectors");

package/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/internals/plugins/useChartProExport/common.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.applyStyles = applyStyles;
+exports.copyCanvasesContent = copyCanvasesContent;
 exports.createExportIframe = createExportIframe;
 function createExportIframe(title) {
   const iframeEl = document.createElement('iframe');
@@ -25,4 +26,40 @@ 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.
+ */
+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/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/internals/plugins/useChartProExport/exportImage.js

@@ -50,6 +50,10 @@ async function exportImage(element, svg, params) {
     (0, _common.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';
@@ -58,6 +62,7 @@ async function exportImage(element, svg, params) {
     if (copyStyles) {
       await Promise.all((0, _export.loadStyleSheets)(exportDoc, root, nonce));
     }
+    await (0, _common.copyCanvasesContent)(element, elementClone);
     resolve();
   };
   doc.body.appendChild(iframe);
@@ -73,6 +78,10 @@ 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/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/internals/plugins/useChartProExport/print.js

@@ -27,6 +27,7 @@ function printChart(element, {
     if (copyStyles) {
       await Promise.all((0, _export.loadStyleSheets)(printDoc, root, nonce));
     }
+    await (0, _common.copyCanvasesContent)(element, elementClone);
     const mediaQueryList = printWindow.contentWindow.matchMedia('print');
     mediaQueryList.addEventListener('change', mql => {
       const isAfterPrint = mql.matches === false;

package/internals/plugins/useChartProExport/useChartProExport.js

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

package/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/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/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.js

@@ -13,9 +13,11 @@ var _useZoom = require("./useZoom.utils");
 var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const usePanOnDrag = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const config = store.use(_ZoomInteractionConfig.selectorPanInteractionConfig, 'drag');

package/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/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.js

@@ -13,9 +13,11 @@ var _useZoom = require("./useZoom.utils");
 var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const usePanOnPressAndDrag = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const isInteracting = React.useRef(false);

package/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/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.js

@@ -13,9 +13,11 @@ var _useZoom = require("./useZoom.utils");
 var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const usePanOnWheel = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const startedOutsideRef = React.useRef(false);
@@ -43,7 +45,7 @@ const usePanOnWheel = ({
     }
     const rafThrottledSetZoomData = (0, _rafThrottle.rafThrottle)(setZoomDataCallback);
     const wheelHandler = instance.addInteractionListener('panTurnWheel', event => {
-      const point = (0, _internals.getSVGPoint)(element, {
+      const point = (0, _internals.getChartPoint)(element, {
         clientX: event.detail.centroid.x,
         clientY: event.detail.centroid.y
       });

package/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/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.js

@@ -12,9 +12,11 @@ var _useZoom = require("./useZoom.utils");
 var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const useZoomOnBrush = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'brush');
@@ -32,11 +34,11 @@ const useZoomOnBrush = ({
     const handleBrushEnd = event => {
       // Convert the brush rectangle to zoom percentages for each axis
       setZoomDataCallback(prev => {
-        const startPoint = (0, _internals.getSVGPoint)(element, {
+        const startPoint = (0, _internals.getChartPoint)(element, {
           clientX: event.detail.initialCentroid.x,
           clientY: event.detail.initialCentroid.y
         });
-        const endPoint = (0, _internals.getSVGPoint)(element, {
+        const endPoint = (0, _internals.getChartPoint)(element, {
           clientX: event.detail.centroid.x,
           clientY: event.detail.centroid.y
         });

package/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/internals/plugins/useChartProZoom/gestureHooks/useZoomOnDoubleTapReset.js

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

package/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/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.js

@@ -13,9 +13,11 @@ var _useZoom = require("./useZoom.utils");
 var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const useZoomOnPinch = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'pinch');
@@ -48,7 +50,7 @@ const useZoomOnPinch = ({
           }
           const isZoomIn = event.detail.direction > 0;
           const scaleRatio = 1 + event.detail.deltaScale;
-          const point = (0, _internals.getSVGPoint)(element, {
+          const point = (0, _internals.getChartPoint)(element, {
             clientX: event.detail.centroid.x,
             clientY: event.detail.centroid.y
           });

package/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/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.js

@@ -13,9 +13,11 @@ var _useZoom = require("./useZoom.utils");
 var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const useZoomOnTapAndDrag = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'tapAndDrag');
@@ -53,7 +55,7 @@ const useZoomOnTapAndDrag = ({
           }
           const isZoomIn = event.detail.deltaY > 0;
           const scaleRatio = 1 + event.detail.deltaY / 100;
-          const point = (0, _internals.getSVGPoint)(element, {
+          const point = (0, _internals.getChartPoint)(element, {
             clientX: event.detail.initialCentroid.x,
             clientY: event.detail.initialCentroid.y
           });

package/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/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.js

@@ -13,9 +13,11 @@ var _useZoom = require("./useZoom.utils");
 var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const useZoomOnWheel = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const startedOutsideRef = React.useRef(false);
@@ -39,7 +41,7 @@ const useZoomOnWheel = ({
     }
     const rafThrottledSetZoomData = (0, _rafThrottle.rafThrottle)(setZoomDataCallback);
     const zoomOnWheelHandler = instance.addInteractionListener('zoomTurnWheel', event => {
-      const point = (0, _internals.getSVGPoint)(element, {
+      const point = (0, _internals.getChartPoint)(element, {
         clientX: event.detail.centroid.x,
         clientY: event.detail.centroid.y
       });

package/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/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> {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.27.0",
+  "version": "9.0.0-alpha.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -27,15 +27,15 @@
     "directory": "packages/x-charts-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.4",
-    "@mui/utils": "^7.3.5",
+    "@babel/runtime": "^7.28.6",
+    "@mui/utils": "^7.3.7",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts-vendor": "8.26.0",
+    "@mui/x-charts": "9.0.0-alpha.0",
+    "@mui/x-charts-vendor": "9.0.0-alpha.0",
     "@mui/x-internal-gestures": "0.4.0",
-    "@mui/x-charts": "8.27.0",
-    "@mui/x-internals": "8.26.0",
-    "@mui/x-license": "8.26.0"
+    "@mui/x-internals": "9.0.0-alpha.0",
+    "@mui/x-license": "9.0.0-alpha.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -54,7 +54,7 @@
     }
   },
   "optionalDependencies": {
-    "rasterizehtml": "^1.4.0"
+    "rasterizehtml": "^1.4.1"
   },
   "engines": {
     "node": ">=14.0.0"

package/plugins/selectors/useChartHeatmapPosition.selectors.d.ts

@@ -1,4 +1,4 @@
 import { type HeatmapItemIdentifier } from "../../models/index.js";
-export declare const selectorHeatmapItemAtPosition: (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<{}> & {
+export declare const selectorHeatmapItemAtPosition: (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<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, svgPoint: Pick<DOMPoint, "x" | "y">) => HeatmapItemIdentifier | undefined;

package/plugins/selectors/useChartHeatmapPosition.selectors.js

@@ -37,7 +37,9 @@ const selectorHeatmapItemAtPosition = exports.selectorHeatmapItemAtPosition = (0
       return {
         type: 'heatmap',
         seriesId,
-        dataIndex
+        dataIndex,
+        xIndex,
+        yIndex
       };
     }
   }