@mui/x-charts-pro 8.0.0 → 8.2.0

package/esm/Heatmap/HeatmapItem.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const HeatmapCell = styled('rect', {
   name: 'MuiHeatmap',
   slot: 'Cell',
-  overridesResolver: (_, styles) => styles.arc
+  overridesResolver: (_, styles) => styles.arc // FIXME: Inconsistent naming with slot
 })(({
   ownerState
 }) => ({

package/esm/LineChartPro/LineChartPro.js

@@ -89,6 +89,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
+      exportAsImage: PropTypes.func.isRequired,
+      exportAsPrint: PropTypes.func.isRequired,
       setZoomData: PropTypes.func.isRequired
     })
   }),
@@ -165,6 +167,10 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * @default false
    */
   loading: PropTypes.bool,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: PropTypes.object,
   /**
    * 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.
@@ -185,7 +191,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
   /**

package/esm/LineChartPro/LineChartPro.plugins.d.ts

@@ -1,4 +1,5 @@
 import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type LineChartProPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature];
+export type LineChartProPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const LINE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<LineChartProPluginsSignatures>;

package/esm/LineChartPro/LineChartPro.plugins.js

@@ -1,3 +1,4 @@
 import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight } from '@mui/x-charts/internals';
+import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const LINE_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProZoom];
+export const LINE_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProZoom, useChartProExport];

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -83,6 +83,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
+      exportAsImage: PropTypes.func.isRequired,
+      exportAsPrint: PropTypes.func.isRequired,
       setZoomData: PropTypes.func.isRequired
     })
   }),
@@ -160,6 +162,10 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * @default false
    */
   loading: PropTypes.bool,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: PropTypes.object,
   /**
    * 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.
@@ -176,7 +182,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
   /**

package/esm/ScatterChartPro/ScatterChartPro.plugins.d.ts

@@ -1,4 +1,5 @@
 import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type ScatterChartProPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature, UseChartProZoomSignature];
+export type ScatterChartProPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginsSignatures>;

package/esm/ScatterChartPro/ScatterChartPro.plugins.js

@@ -1,3 +1,4 @@
 import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi } from '@mui/x-charts/internals';
+import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi, useChartProZoom];
+export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi, useChartProZoom, useChartProExport];

package/esm/index.d.ts

@@ -13,6 +13,7 @@ export * from '@mui/x-charts/ChartsGrid';
 export * from '@mui/x-charts/ChartsText';
 export * from '@mui/x-charts/ChartsTooltip';
 export * from '@mui/x-charts/ChartsLegend';
+export * from '@mui/x-charts/ChartsLocalizationProvider';
 export * from '@mui/x-charts/ChartsAxisHighlight';
 export * from '@mui/x-charts/BarChart';
 export * from '@mui/x-charts/LineChart';

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.0.0
+ * @mui/x-charts-pro v8.2.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -22,6 +22,7 @@ export * from '@mui/x-charts/ChartsGrid';
 export * from '@mui/x-charts/ChartsText';
 export * from '@mui/x-charts/ChartsTooltip';
 export * from '@mui/x-charts/ChartsLegend';
+export * from '@mui/x-charts/ChartsLocalizationProvider';
 export * from '@mui/x-charts/ChartsAxisHighlight';
 export * from '@mui/x-charts/BarChart';
 export * from '@mui/x-charts/LineChart';

package/esm/internals/plugins/allPlugins.d.ts

@@ -1,8 +1,9 @@
 import { ChartSeriesType, ConvertSignaturesIntoPlugins, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartZAxisSignature, UseChartHighlightSignature, UseChartPolarAxisSignature } from '@mui/x-charts/internals';
+import { UseChartProExportSignature } from "./useChartProExport/index.js";
 import { UseChartProZoomSignature } from "./useChartProZoom/index.js";
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature];
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
-export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>>)[];
-export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature];
+export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>>)[];
+export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export type DefaultPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<DefaultPluginSignatures<TSeries>>;
-export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>>)[];
+export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>>)[];

package/esm/internals/plugins/allPlugins.js

@@ -1,6 +1,7 @@
 // This file should be removed after creating all plugins in favor of a file per chart type.
 
 import { useChartCartesianAxis, useChartInteraction, useChartZAxis, useChartHighlight, useChartPolarAxis } from '@mui/x-charts/internals';
+import { useChartProExport } from "./useChartProExport/index.js";
 import { useChartProZoom } from "./useChartProZoom/index.js";
-export const ALL_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartPolarAxis, useChartInteraction, useChartHighlight, useChartProZoom];
-export const DEFAULT_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProZoom];
+export const ALL_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartPolarAxis, useChartInteraction, useChartHighlight, useChartProZoom, useChartProExport];
+export const DEFAULT_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProZoom, useChartProExport];

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

@@ -0,0 +1 @@
+export declare function createExportIframe(title?: string): HTMLIFrameElement;

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

@@ -0,0 +1,8 @@
+export function createExportIframe(title) {
+  const iframeEl = document.createElement('iframe');
+  iframeEl.style.position = 'absolute';
+  iframeEl.style.width = '0px';
+  iframeEl.style.height = '0px';
+  iframeEl.title = title || document.title;
+  return iframeEl;
+}

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

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

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

@@ -0,0 +1,85 @@
+import ownerDocument from '@mui/utils/ownerDocument';
+import { loadStyleSheets } from '@mui/x-internals/export';
+import { createExportIframe } from "./common.js";
+export const getDrawDocument = async () => {
+  try {
+    const module = await import('rasterizehtml');
+    return module.drawDocument;
+  } catch (error) {
+    throw new Error(`MUI X Charts: Failed to import 'rasterizehtml' module. This dependency is mandatory when exporting a chart as an image. Make sure you have it installed as a dependency.`, {
+      cause: error
+    });
+  }
+};
+export async function exportImage(element, params) {
+  const {
+    fileName,
+    type = 'image/png',
+    quality = 0.9
+  } = params ?? {};
+  const drawDocumentPromise = getDrawDocument();
+  const {
+    width,
+    height
+  } = element.getBoundingClientRect();
+  const doc = ownerDocument(element);
+  const canvas = document.createElement('canvas');
+  const ratio = window.devicePixelRatio || 1;
+  canvas.width = width * ratio;
+  canvas.height = height * ratio;
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  const iframe = createExportIframe(fileName);
+  let resolve;
+  const iframeLoadPromise = new Promise(res => {
+    resolve = res;
+  });
+  iframe.onload = async () => {
+    const exportDoc = iframe.contentDocument;
+    const elementClone = element.cloneNode(true);
+    const container = document.createElement('div');
+    container.appendChild(elementClone);
+    exportDoc.body.innerHTML = container.innerHTML;
+    exportDoc.body.style.margin = '0px';
+    const rootCandidate = element.getRootNode();
+    const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
+    await Promise.all(loadStyleSheets(exportDoc, root));
+    resolve();
+  };
+  doc.body.appendChild(iframe);
+  const [drawDocument] = await Promise.all([drawDocumentPromise, iframeLoadPromise]);
+  try {
+    await drawDocument(iframe.contentDocument, canvas, {
+      // Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71
+      zoom: ratio
+    });
+  } finally {
+    doc.body.removeChild(iframe);
+  }
+  let resolveBlobPromise;
+  const blobPromise = new Promise(res => {
+    resolveBlobPromise = res;
+  });
+  canvas.toBlob(blob => resolveBlobPromise(blob), type, quality);
+  let blob;
+  try {
+    blob = await blobPromise;
+  } catch (error) {
+    throw new Error('MUI X Charts: Failed to create blob from canvas.', {
+      cause: error
+    });
+  }
+  if (!blob) {
+    throw new Error('MUI X Charts: Failed to create blob from canvas.');
+    return;
+  }
+  const url = URL.createObjectURL(blob);
+  triggerDownload(url, fileName || document.title);
+  URL.revokeObjectURL(url);
+}
+function triggerDownload(url, name) {
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = name;
+  a.click();
+}

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

@@ -0,0 +1,2 @@
+export * from "./useChartProExport.js";
+export * from "./useChartProExport.types.js";

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

@@ -0,0 +1,2 @@
+export * from "./useChartProExport.js";
+export * from "./useChartProExport.types.js";

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

@@ -0,0 +1,4 @@
+import { ChartPrintExportOptions } from "./useChartProExport.types.js";
+export declare function printChart(element: HTMLElement | SVGElement, {
+  fileName
+}?: ChartPrintExportOptions): void;

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

@@ -0,0 +1,28 @@
+import ownerDocument from '@mui/utils/ownerDocument';
+import { loadStyleSheets } from '@mui/x-internals/export';
+import { createExportIframe } from "./common.js";
+export function printChart(element, {
+  fileName
+} = {}) {
+  const printWindow = createExportIframe(fileName);
+  const doc = ownerDocument(element);
+  printWindow.onload = async () => {
+    const printDoc = printWindow.contentDocument;
+    const elementClone = element.cloneNode(true);
+    const container = document.createElement('div');
+    container.appendChild(elementClone);
+    printDoc.body.innerHTML = container.innerHTML;
+    const rootCandidate = element.getRootNode();
+    const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
+    await Promise.all(loadStyleSheets(printDoc, root));
+    printWindow.contentWindow.print();
+    const mediaQueryList = printWindow.contentWindow.matchMedia('print');
+    mediaQueryList.addEventListener('change', mql => {
+      const isAfterPrint = mql.matches === false;
+      if (isAfterPrint) {
+        doc.body.removeChild(printWindow);
+      }
+    });
+  };
+  doc.body.appendChild(printWindow);
+}

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

@@ -0,0 +1,3 @@
+import { ChartPlugin } from '@mui/x-charts/internals';
+import { UseChartProExportSignature } from "./useChartProExport.types.js";
+export declare const useChartProExport: ChartPlugin<UseChartProExportSignature>;

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

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { printChart } from "./print.js";
+import { exportImage } from "./exportImage.js";
+function waitForAnimationFrame() {
+  let resolve;
+  const promise = new Promise(res => {
+    resolve = res;
+  });
+  window.requestAnimationFrame(() => {
+    resolve();
+  });
+  return promise;
+}
+export const useChartProExport = ({
+  chartRootRef,
+  instance
+}) => {
+  const exportAsPrint = async options => {
+    const chartRoot = chartRootRef.current;
+    if (chartRoot) {
+      const enableAnimation = instance.disableAnimation();
+      try {
+        // Wait for animation frame to ensure the animation finished
+        await waitForAnimationFrame();
+        printChart(chartRoot, options);
+      } catch (error) {
+        console.error('MUI X Charts: Error exporting chart as print:', error);
+      } finally {
+        enableAnimation();
+      }
+    }
+  };
+  const exportAsImage = async options => {
+    const chartRoot = chartRootRef.current;
+    if (chartRoot) {
+      const enableAnimation = instance.disableAnimation();
+      try {
+        // Wait for animation frame to ensure the animation finished
+        await waitForAnimationFrame();
+        await exportImage(chartRoot, options);
+      } catch (error) {
+        console.error('MUI X Charts: Error exporting chart as image:', error);
+      } finally {
+        enableAnimation();
+      }
+    }
+  };
+  return {
+    publicAPI: {
+      exportAsPrint,
+      exportAsImage
+    },
+    instance: {
+      exportAsPrint,
+      exportAsImage
+    }
+  };
+};
+useChartProExport.params = {};
+useChartProExport.getDefaultizedParams = ({
+  params
+}) => _extends({}, params);
+useChartProExport.getInitialState = () => ({
+  export: {}
+});

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

@@ -0,0 +1,67 @@
+import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature } from '@mui/x-charts/internals';
+export interface UseChartProExportParameters {}
+export type UseChartProExportDefaultizedParameters = UseChartProExportParameters;
+export interface UseChartProExportState {
+  export: {};
+}
+/**
+ * The options to apply on the Print export.
+ * @demos
+ *   - [Print export](/x/react-charts/export/#print-export-as-pdf)
+ */
+export interface ChartPrintExportOptions {
+  /**
+   * The value to be used as the print window title.
+   * @default The title of the page.
+   */
+  fileName?: string;
+}
+/**
+ * The options to apply on the image export.
+ * @demos
+ *   - [Image export](/x/react-charts/export/#export-as-image)
+ */
+export interface ChartImageExportOptions {
+  /**
+   * The value to be used as the print window title.
+   * @default The title of the page.
+   */
+  fileName?: string;
+  /**
+   * The format of the image to be exported.
+   * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
+   * @default 'image/png'
+   */
+  type?: 'image/png' | string;
+  /**
+   * The quality of the image to be exported between 0 and 1. This is only applicable for lossy formats, such as
+   * 'image/jpeg' and 'image/webp'. 'image/png' does not support this option.
+   * @default 0.9
+   */
+  quality?: number;
+}
+export interface UseChartProExportPublicApi {
+  /**
+   * Opens the browser's print dialog, which can be used to print the chart or export it as PDF.
+   * @param {ChartPrintExportOptions} options Options to customize the print export.
+   * @returns {void}
+   */
+  exportAsPrint: (options?: ChartPrintExportOptions) => void;
+  /**
+   * Exports the chart as an image.
+   * If the provided `type` is not supported by the browser, it will default to `image/png`.
+   *
+   * @param {ChartPrintExportOptions} options Options to customize the print export.
+   * @returns {void}
+   */
+  exportAsImage: (options?: ChartImageExportOptions) => void;
+}
+export interface UseChartProExportInstance extends UseChartProExportPublicApi {}
+export type UseChartProExportSignature = ChartPluginSignature<{
+  params: UseChartProExportParameters;
+  defaultizedParams: UseChartProExportDefaultizedParameters;
+  state: UseChartProExportState;
+  publicAPI: UseChartProExportPublicApi;
+  instance: UseChartProExportInstance;
+  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
+}>;

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

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

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

@@ -1,3 +1,4 @@
-import { ChartPlugin } from '@mui/x-charts/internals';
+import { ChartPlugin, AxisId, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
+export declare function initializeZoomData(options: Record<AxisId, DefaultizedZoomOptions>, zoomData?: readonly ZoomData[]): ZoomData[];
 export declare const useChartProZoom: ChartPlugin<UseChartProZoomSignature>;

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

@@ -7,17 +7,30 @@ import { useEventCallback } from '@mui/material/utils';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import debounce from '@mui/utils/debounce';
 import { getDiff, getHorizontalCenterRatio, getPinchScaleRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, preventDefault, zoomAtPoint } from "./useChartProZoom.utils.js";
+
 // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
-function initializeZoomData(options) {
+export function initializeZoomData(options, zoomData) {
+  const zoomDataMap = new Map();
+  zoomData?.forEach(zoom => {
+    const option = options[zoom.axisId];
+    if (option) {
+      zoomDataMap.set(zoom.axisId, zoom);
+    }
+  });
   return Object.values(options).map(({
     axisId,
     minStart: start,
     maxEnd: end
-  }) => ({
-    axisId,
-    start,
-    end
-  }));
+  }) => {
+    if (zoomDataMap.has(axisId)) {
+      return zoomDataMap.get(axisId);
+    }
+    return {
+      axisId,
+      start,
+      end
+    };
+  });
 }
 export const useChartProZoom = ({
   store,
@@ -41,7 +54,7 @@ export const useChartProZoom = ({
     }
     store.update(prevState => {
       if (process.env.NODE_ENV !== 'production' && !prevState.zoom.isControlled) {
-        console.error([`MUI X: A chart component is changing the \`zoomData\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+        console.error([`MUI X Charts: A chart component is changing the \`zoomData\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
       }
       return _extends({}, prevState, {
         zoom: _extends({}, prevState.zoom, {
@@ -72,10 +85,7 @@ export const useChartProZoom = ({
       })
     });
   }), 166), [store]);
-
-  // This is throttled. We want to run it at most once per frame.
-  // By joining the two, we ensure that interacting and zooming are in sync.
-  const setZoomDataCallback = React.useMemo(() => rafThrottle(zoomData => {
+  const setZoomDataCallback = React.useCallback(zoomData => {
     store.update(prevState => {
       const newZoomData = typeof zoomData === 'function' ? zoomData([...prevState.zoom.zoomData]) : zoomData;
       onZoomChange?.(newZoomData);
@@ -90,10 +100,9 @@ export const useChartProZoom = ({
         })
       });
     });
-  }), [onZoomChange, store, removeIsInteracting]);
+  }, [onZoomChange, store, removeIsInteracting]);
   React.useEffect(() => {
     return () => {
-      setZoomDataCallback.clear();
       removeIsInteracting.clear();
     };
   }, [setZoomDataCallback, removeIsInteracting]);
@@ -112,17 +121,10 @@ export const useChartProZoom = ({
     if (element === null || !isPanEnabled) {
       return () => {};
     }
-    const handlePan = event => {
-      if (element === null || !isDraggingRef.current || panningEventCacheRef.current.length > 1) {
-        return;
-      }
-      if (touchStartRef.current == null) {
-        return;
-      }
-      const point = getSVGPoint(element, event);
-      const movementX = point.x - touchStartRef.current.x;
-      const movementY = (point.y - touchStartRef.current.y) * -1;
-      const newZoomData = touchStartRef.current.zoomData.map(zoom => {
+    const throttledHandlePan = rafThrottle((touchStart, point) => {
+      const movementX = point.x - touchStart.x;
+      const movementY = (point.y - touchStart.y) * -1;
+      const newZoomData = touchStart.zoomData.map(zoom => {
         const options = optionsLookup[zoom.axisId];
         if (!options || !options.panning) {
           return zoom;
@@ -153,6 +155,17 @@ export const useChartProZoom = ({
         });
       });
       setZoomDataCallback(newZoomData);
+    });
+    const handlePan = event => {
+      if (element === null || !isDraggingRef.current || panningEventCacheRef.current.length > 1) {
+        return;
+      }
+      if (touchStartRef.current == null) {
+        return;
+      }
+      const touchStart = touchStartRef.current;
+      const point = getSVGPoint(element, event);
+      throttledHandlePan(touchStart, point);
     };
     const handleDown = event => {
       panningEventCacheRef.current.push(event);
@@ -187,6 +200,7 @@ export const useChartProZoom = ({
       document.removeEventListener('pointerup', handleUp);
       document.removeEventListener('pointercancel', handleUp);
       document.removeEventListener('pointerleave', handleUp);
+      throttledHandlePan.clear();
     };
   }, [instance, svgRef, isDraggingRef, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
 
@@ -196,6 +210,7 @@ export const useChartProZoom = ({
     if (element === null || !isZoomEnabled) {
       return () => {};
     }
+    const rafThrottledSetZoomData = rafThrottle(setZoomDataCallback);
     const wheelHandler = event => {
       if (element === null) {
         return;
@@ -205,7 +220,13 @@ export const useChartProZoom = ({
         return;
       }
       event.preventDefault();
-      setZoomDataCallback(prevZoomData => {
+
+      /*
+       * Need to throttle `setZoomDataCallback` instead of `wheelHandler` because we're calling `event.preventDefault()`.
+       * If we throttle the event, then some events' default behavior won't be prevented and the page will scroll while
+       * the user is trying to zoom in.
+       */
+      rafThrottledSetZoomData(prevZoomData => {
         return prevZoomData.map(zoom => {
           const option = optionsLookup[zoom.axisId];
           if (!option) {
@@ -231,7 +252,7 @@ export const useChartProZoom = ({
     function pointerDownHandler(event) {
       zoomEventCacheRef.current.push(event);
     }
-    function pointerMoveHandler(event) {
+    const pointerMoveHandler = rafThrottle(function pointerMoveHandler(event) {
       if (element === null) {
         return;
       }
@@ -274,7 +295,7 @@ export const useChartProZoom = ({
         eventPrevDiff.current = curDiff;
         return newZoomData;
       });
-    }
+    });
     function pointerUpHandler(event) {
       zoomEventCacheRef.current.splice(zoomEventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
       if (zoomEventCacheRef.current.length < 2) {
@@ -302,6 +323,8 @@ export const useChartProZoom = ({
       element.removeEventListener('pointerleave', pointerUpHandler);
       element.removeEventListener('touchstart', preventDefault);
       element.removeEventListener('touchmove', preventDefault);
+      pointerMoveHandler.clear();
+      rafThrottledSetZoomData.clear();
     };
   }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback]);
   return {
@@ -331,11 +354,12 @@ useChartProZoom.getInitialState = params => {
     defaultizedYAxis
   } = params;
   const optionsLookup = _extends({}, createZoomLookup('x')(defaultizedXAxis), createZoomLookup('y')(defaultizedYAxis));
+  const userZoomData =
+  // eslint-disable-next-line no-nested-ternary
+  zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom : undefined;
   return {
     zoom: {
-      zoomData:
-      // eslint-disable-next-line no-nested-ternary
-      zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom : initializeZoomData(optionsLookup),
+      zoomData: initializeZoomData(optionsLookup, userZoomData),
       isInteracting: false,
       isControlled: zoomData !== undefined
     }