@mui/x-charts-pro 8.0.0 → 8.2.0

package/FunnelChart/curves/funnelStep.d.ts

@@ -0,0 +1,25 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+/**
+ * This is a custom "step" curve generator for the funnel chart.
+ * It is used to draw the funnel using "rectangles" without having to rework the rendering logic.
+ *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape step curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
+ */
+export declare class FunnelStep implements CurveGenerator {
+  private context;
+  private line;
+  private x;
+  private y;
+  private currentPoint;
+  private isHorizontal;
+  private gap;
+  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  point(x: number, y: number): void;
+}

package/FunnelChart/{funnelStepCurve.js → curves/funnelStep.js}

@@ -3,24 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.funnelVerticalStepCurve = exports.funnelHorizontalStepCurve = void 0;
+exports.FunnelStep = void 0;
 /**
  * This is a custom "step" curve generator for the funnel chart.
  * It is used to draw the funnel using "rectangles" without having to rework the rendering logic.
  *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
  * It is based on the d3-shape step curve generator.
  * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
  */
 class FunnelStep {
-  constructor(context, isHorizontal) {
+  constructor(context, isHorizontal, gap = 0) {
     this.context = void 0;
     this.line = NaN;
     this.x = NaN;
     this.y = NaN;
     this.currentPoint = 0;
     this.isHorizontal = false;
+    this.gap = 0;
     this.context = context;
     this.isHorizontal = isHorizontal;
+    this.gap = gap / 2;
   }
   areaStart() {
     this.line = 0;
@@ -47,28 +51,37 @@ class FunnelStep {
   point(x, y) {
     x = +x;
     y = +y;
+
+    // 0 is the top-left corner.
+    if (this.isHorizontal) {
+      if (this.currentPoint === 0) {
+        this.context.moveTo(x + this.gap, y);
+      } else if (this.currentPoint === 1 || this.currentPoint === 2) {
+        this.context.lineTo(x - this.gap, this.y);
+        this.context.lineTo(x - this.gap, y);
+      } else {
+        this.context.lineTo(this.x - this.gap, y);
+        this.context.lineTo(x + this.gap, y);
+      }
+      this.currentPoint += 1;
+      this.x = x;
+      this.y = y;
+      return;
+    }
+
+    // 0 is the top-right corner.
     if (this.currentPoint === 0) {
-      this.context.moveTo(x, y);
-    } else if (this.isHorizontal && (this.currentPoint === 2 || this.currentPoint === 1)) {
-      this.context.lineTo(x, this.y);
-      this.context.lineTo(x, y);
-    } else if (this.currentPoint === 3 && !this.isHorizontal) {
-      this.context.lineTo(x, this.y);
-      this.context.lineTo(x, y);
+      this.context.moveTo(x, y + this.gap);
+    } else if (this.currentPoint === 3) {
+      this.context.lineTo(x, this.y - this.gap);
+      this.context.lineTo(x, y + this.gap);
     } else {
-      this.context.lineTo(this.x, y);
-      this.context.lineTo(x, y);
+      this.context.lineTo(this.x, y - this.gap);
+      this.context.lineTo(x, y - this.gap);
     }
     this.currentPoint += 1;
     this.x = x;
     this.y = y;
   }
 }
-const funnelHorizontalStepCurve = context => {
-  return new FunnelStep(context, true);
-};
-exports.funnelHorizontalStepCurve = funnelHorizontalStepCurve;
-const funnelVerticalStepCurve = context => {
-  return new FunnelStep(context, false);
-};
-exports.funnelVerticalStepCurve = funnelVerticalStepCurve;
+exports.FunnelStep = FunnelStep;

package/FunnelChart/curves/getFunnelCurve.d.ts

@@ -0,0 +1,3 @@
+import { CurveFactory } from '@mui/x-charts-vendor/d3-shape';
+import { FunnelCurveType } from "./curve.types.js";
+export declare const getFunnelCurve: (curve: FunnelCurveType | undefined, isHorizontal: boolean, gap?: number) => CurveFactory;

package/FunnelChart/curves/getFunnelCurve.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFunnelCurve = void 0;
+var _funnelStep = require("./funnelStep");
+var _linear = require("./linear");
+var _bump = require("./bump");
+const curveConstructor = curve => {
+  if (curve === 'step') {
+    return _funnelStep.FunnelStep;
+  }
+  if (curve === 'bump') {
+    return _bump.Bump;
+  }
+  return _linear.Linear;
+};
+const getFunnelCurve = (curve, isHorizontal, gap = 0) => {
+  return context => new (curveConstructor(curve))(context, isHorizontal, gap);
+};
+exports.getFunnelCurve = getFunnelCurve;

package/FunnelChart/curves/index.d.ts

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

package/FunnelChart/curves/index.js

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

package/FunnelChart/curves/linear.d.ts

@@ -0,0 +1,24 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+/**
+ * This is a custom "linear" curve generator.
+ *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape linear curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/linear.js
+ */
+export declare class Linear implements CurveGenerator {
+  private context;
+  private line;
+  private x;
+  private y;
+  private currentPoint;
+  private isHorizontal;
+  private gap;
+  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  point(x: number, y: number): void;
+}

package/FunnelChart/curves/linear.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Linear = void 0;
+// From point1 to point2, get the x value from y
+const xFromY = (x1, y1, x2, y2) => y => {
+  if (y1 === y2) {
+    return x1;
+  }
+  const result = (x2 - x1) * (y - y1) / (y2 - y1) + x1;
+  return Number.isNaN(result) ? 0 : result;
+};
+
+// From point1 to point2, get the y value from x
+const yFromX = (x1, y1, x2, y2) => x => {
+  if (x1 === x2) {
+    return y1;
+  }
+  const result = (y2 - y1) * (x - x1) / (x2 - x1) + y1;
+  return Number.isNaN(result) ? 0 : result;
+};
+
+/**
+ * This is a custom "linear" curve generator.
+ *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape linear curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/linear.js
+ */
+class Linear {
+  constructor(context, isHorizontal, gap = 0) {
+    this.context = void 0;
+    this.line = NaN;
+    this.x = NaN;
+    this.y = NaN;
+    this.currentPoint = 0;
+    this.isHorizontal = false;
+    this.gap = 0;
+    this.context = context;
+    this.isHorizontal = isHorizontal;
+    this.gap = gap / 2;
+  }
+  areaStart() {
+    this.line = 0;
+  }
+  areaEnd() {
+    this.line = NaN;
+  }
+  lineStart() {
+    this.currentPoint = 0;
+  }
+  lineEnd() {
+    if (this.line || this.line !== 0 && this.currentPoint === 1) {
+      this.context.closePath();
+    }
+    this.line = 1 - this.line;
+  }
+  point(x, y) {
+    x = +x;
+    y = +y;
+
+    // We draw the lines only at currentPoint 1 & 3 because we need
+    // The data of a pair of points to draw the lines.
+    // Hence currentPoint 1 draws a line from point 0 to point 1 and point 1 to point 2.
+    // currentPoint 3 draws a line from point 2 to point 3 and point 3 to point 0.
+
+    if (this.isHorizontal) {
+      const yGetter = yFromX(this.x, this.y, x, y);
+      let xGap = 0;
+
+      // 0 is the top-left corner.
+      if (this.currentPoint === 1) {
+        xGap = this.x + this.gap;
+        this.context.moveTo(xGap, yGetter(xGap));
+        this.context.lineTo(xGap, yGetter(xGap));
+        xGap = x - this.gap;
+        this.context.lineTo(xGap, yGetter(xGap));
+      } else if (this.currentPoint === 3) {
+        xGap = this.x - this.gap;
+        this.context.lineTo(xGap, yGetter(xGap));
+        xGap = x + this.gap;
+        this.context.lineTo(xGap, yGetter(xGap));
+      }
+    }
+    if (!this.isHorizontal) {
+      const xGetter = xFromY(this.x, this.y, x, y);
+      let yGap = 0;
+
+      // 0 is the top-right corner.
+      if (this.currentPoint === 1) {
+        yGap = this.y + this.gap;
+        this.context.moveTo(xGetter(yGap), yGap);
+        this.context.lineTo(xGetter(yGap), yGap);
+        yGap = y - this.gap;
+        this.context.lineTo(xGetter(yGap), yGap);
+      } else if (this.currentPoint === 3) {
+        yGap = this.y - this.gap;
+        this.context.lineTo(xGetter(yGap), yGap);
+        yGap = y + this.gap;
+        this.context.lineTo(xGetter(yGap), yGap);
+      }
+    }
+
+    // Increment the values
+    this.currentPoint += 1;
+    this.x = x;
+    this.y = y;
+  }
+}
+exports.Linear = Linear;

package/FunnelChart/funnel.types.d.ts

@@ -1,9 +1,9 @@
 import { ChartsLabelMarkProps } from '@mui/x-charts/ChartsLabel';
 import { CommonSeriesType, CartesianSeriesType, CommonDefaultizedProps, SeriesId } from '@mui/x-charts/internals';
-import { CurveType, Position } from '@mui/x-charts/models';
+import { Position } from '@mui/x-charts/models';
 import { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
+import { FunnelCurveType } from "./curves/index.js";
 export type FunnelItemId = string | number;
-export type FunnelCurveType = Extract<CurveType, 'linear' | 'step'> | 'bump';
 export type FunnelValueType = {
   /**
    * A unique identifier of the funnel section.

package/FunnelChart/funnelPlotSlots.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FunnelSectionProps } from './FunnelSection';
+import type { FunnelSectionProps } from "./FunnelSection.js";
 export interface FunnelPlotSlots {
   funnelSection?: React.ElementType<FunnelSectionProps>;
 }

package/FunnelChart/funnelSectionClasses.d.ts

@@ -1,4 +1,4 @@
-import type { FunnelSectionProps } from './FunnelSection';
+import type { FunnelSectionProps } from "./FunnelSection.js";
 export interface FunnelSectionClasses {
   /** Styles applied to the root element. */
   root: string;

package/FunnelChart/index.d.ts

@@ -1,8 +1,9 @@
 export { FunnelChart as Unstable_FunnelChart } from "./FunnelChart.js";
-export type { FunnelChartProps } from './FunnelChart';
+export type { FunnelChartProps } from "./FunnelChart.js";
 export * from "./FunnelPlot.js";
 export * from "./funnel.types.js";
 export * from "./categoryAxis.types.js";
 export * from "./funnelSlots.types.js";
+export type { FunnelCurveType } from "./curves/index.js";
 export { funnelSectionClasses } from "./funnelSectionClasses.js";
-export type { FunnelSectionClasses } from './funnelSectionClasses';
+export type { FunnelSectionClasses } from "./funnelSectionClasses.js";

package/FunnelChart/useFunnelChartProps.d.ts

@@ -5,7 +5,7 @@ import { ChartsClipPathProps } from '@mui/x-charts/ChartsClipPath';
 import { ChartsWrapperProps } from '@mui/x-charts/internals';
 import { ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
 import { FunnelPlotProps } from "./FunnelPlot.js";
-import type { FunnelChartProps } from './FunnelChart';
+import type { FunnelChartProps } from "./FunnelChart.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 /**
  * A helper function that extracts FunnelChartProps from the input props

package/FunnelChart/useFunnelChartProps.js

@@ -12,7 +12,8 @@ var _constants = require("@mui/x-charts/constants");
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _internals = require("@mui/x-charts/internals");
 var _warning = require("@mui/x-internals/warning");
-const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef"];
+var _colorPalettes = require("@mui/x-charts/colorPalettes");
+const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef", "gap"];
 function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   const maxSeriesLength = Math.max(...series.map(s => (s.data ?? []).length), 0);
   const maxSeriesValue = Array.from({
@@ -20,7 +21,7 @@ function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   }, (_, index) => series.reduce((a, s) => a + (s.data?.[index]?.value ?? 0), 0));
   if (process.env.NODE_ENV !== 'production') {
     if ((categoryAxis?.position === 'left' || categoryAxis?.position === 'right') && isHorizontal || (categoryAxis?.position === 'top' || categoryAxis?.position === 'bottom') && !isHorizontal) {
-      (0, _warning.warnOnce)([`MUI X: the categoryAxis position is set to '${categoryAxis.position}' but the series layout is ${isHorizontal ? 'horizontal' : 'vertical'}.`, `Ensure that the categoryAxis position is set to '${isHorizontal ? 'top' : 'left'}' or '${isHorizontal ? 'bottom' : 'right'}' for ${isHorizontal ? 'horizontal' : 'vertical'} layout.\n`], 'warning');
+      (0, _warning.warnOnce)([`MUI X Charts: the categoryAxis position is set to '${categoryAxis.position}' but the series layout is ${isHorizontal ? 'horizontal' : 'vertical'}.`, `Ensure that the categoryAxis position is set to '${isHorizontal ? 'top' : 'left'}' or '${isHorizontal ? 'bottom' : 'right'}' for ${isHorizontal ? 'horizontal' : 'vertical'} layout.\n`], 'warning');
     }
   }
   const side = isHorizontal ? 'bottom' : 'left';
@@ -90,7 +91,8 @@ const useFunnelChartProps = props => {
       onHighlightChange,
       className,
       axisHighlight,
-      apiRef
+      apiRef,
+      gap
     } = props,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const margin = (0, _internals.defaultizeMargin)(marginProps, _constants.DEFAULT_MARGINS);
@@ -113,7 +115,7 @@ const useFunnelChartProps = props => {
     width,
     height,
     margin,
-    colors,
+    colors: colors ?? _colorPalettes.strawberrySkyPalette,
     xAxis: [xAxis],
     yAxis: [yAxis],
     sx,
@@ -123,6 +125,7 @@ const useFunnelChartProps = props => {
     apiRef
   });
   const funnelPlotProps = {
+    gap,
     onItemClick,
     slots,
     slotProps

package/Heatmap/Heatmap.js

@@ -174,6 +174,10 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @default false
    */
   loading: _propTypes.default.bool,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: _propTypes.default.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.
@@ -190,7 +194,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.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.default.func,
   /**

package/Heatmap/HeatmapItem.js

@@ -21,7 +21,7 @@ const _excluded = ["seriesId", "dataIndex", "color", "value", "slotProps", "slot
 const HeatmapCell = (0, _styles.styled)('rect', {
   name: 'MuiHeatmap',
   slot: 'Cell',
-  overridesResolver: (_, styles) => styles.arc
+  overridesResolver: (_, styles) => styles.arc // FIXME: Inconsistent naming with slot
 })(({
   ownerState
 }) => ({

package/LineChartPro/LineChartPro.js

@@ -96,6 +96,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
+      exportAsImage: _propTypes.default.func.isRequired,
+      exportAsPrint: _propTypes.default.func.isRequired,
       setZoomData: _propTypes.default.func.isRequired
     })
   }),
@@ -172,6 +174,10 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * @default false
    */
   loading: _propTypes.default.bool,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: _propTypes.default.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.
@@ -192,7 +198,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.default.func,
   /**

package/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/LineChartPro/LineChartPro.plugins.js

@@ -5,5 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LINE_CHART_PRO_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
+var _useChartProExport = require("../internals/plugins/useChartProExport");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-const LINE_CHART_PRO_PLUGINS = exports.LINE_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProZoom.useChartProZoom];
+const LINE_CHART_PRO_PLUGINS = exports.LINE_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];

package/ScatterChartPro/ScatterChartPro.js

@@ -90,6 +90,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
+      exportAsImage: _propTypes.default.func.isRequired,
+      exportAsPrint: _propTypes.default.func.isRequired,
       setZoomData: _propTypes.default.func.isRequired
     })
   }),
@@ -167,6 +169,10 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * @default false
    */
   loading: _propTypes.default.bool,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: _propTypes.default.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.
@@ -183,7 +189,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.default.func,
   /**

package/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/ScatterChartPro/ScatterChartPro.plugins.js

@@ -5,5 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SCATTER_CHART_PRO_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
+var _useChartProExport = require("../internals/plugins/useChartProExport");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-const SCATTER_CHART_PRO_PLUGINS = exports.SCATTER_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _internals.useChartVoronoi, _useChartProZoom.useChartProZoom];
+const SCATTER_CHART_PRO_PLUGINS = exports.SCATTER_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _internals.useChartVoronoi, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];

package/esm/BarChartPro/BarChartPro.js

@@ -84,6 +84,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
+      exportAsImage: PropTypes.func.isRequired,
+      exportAsPrint: PropTypes.func.isRequired,
       setZoomData: PropTypes.func.isRequired
     })
   }),
@@ -174,6 +176,10 @@ process.env.NODE_ENV !== "production" ? BarChartPro.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.
@@ -190,7 +196,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.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/BarChartPro/BarChartPro.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 BarChartProPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature];
+export type BarChartProPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const BAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<BarChartProPluginsSignatures>;

package/esm/BarChartPro/BarChartPro.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 BAR_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProZoom];
+export const BAR_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProZoom, useChartProExport];

package/esm/ChartContainerPro/ChartContainerPro.d.ts

@@ -7,6 +7,7 @@ export type ChartContainerProProps<TSeries extends ChartSeriesType = ChartSeries
 type ChartContainerProComponent = <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProProps<TSeries, TSignatures> & {
   ref?: React.ForwardedRef<SVGSVGElement>;
 }) => React.JSX.Element;
+export type ChartProApi = NonNullable<NonNullable<ChartContainerProProps['apiRef']>['current']>;
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
  *

package/esm/ChartContainerPro/useChartContainerProProps.d.ts

@@ -1,7 +1,7 @@
 import { ChartAnyPluginSignature, ChartSeriesType, UseChartContainerPropsReturnValue } from '@mui/x-charts/internals';
 import * as React from 'react';
 import { ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider';
-import type { ChartContainerProProps } from './ChartContainerPro';
+import type { ChartContainerProProps } from "./ChartContainerPro.js";
 import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export type UseChartContainerProPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = Pick<UseChartContainerPropsReturnValue<TSeries, TSignatures>, 'chartsSurfaceProps' | 'children'> & {
   chartDataProviderProProps: ChartDataProviderProps<TSeries, TSignatures>;

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -5,11 +5,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Watermark } from '@mui/x-license/Watermark';
 import { ChartProvider } from '@mui/x-charts/internals';
+import { ChartsLocalizationProvider } from '@mui/x-charts/ChartsLocalizationProvider';
 import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc0NDg0MDgwMDAwMA==";
+const releaseInfo = "MTc0NjA0NjgwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.
@@ -41,13 +42,17 @@ const packageIdentifier = 'x-charts-pro';
 function ChartDataProviderPro(props) {
   const {
     children,
+    localeText,
     chartProviderProps
   } = useChartDataProviderProProps(_extends({}, props, {
     plugins: props.plugins ?? DEFAULT_PLUGINS
   }));
   useLicenseVerifier(packageIdentifier, releaseInfo);
   return /*#__PURE__*/_jsxs(ChartProvider, _extends({}, chartProviderProps, {
-    children: [children, /*#__PURE__*/_jsx(Watermark, {
+    children: [/*#__PURE__*/_jsx(ChartsLocalizationProvider, {
+      localeText: localeText,
+      children: children
+    }), /*#__PURE__*/_jsx(Watermark, {
       packageName: packageIdentifier,
       releaseInfo: releaseInfo
     })]
@@ -79,6 +84,10 @@ process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: PropTypes.string,
+  /**
+   * 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.