@mui/x-charts-pro 8.5.0 → 8.5.2

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorFunnelGap = exports.selectorFunnel = exports.selectorChartYAxis = exports.selectorChartXAxis = void 0;
+var _internals = require("@mui/x-charts/internals");
+var _computeAxisValue = require("./computeAxisValue");
+const selectorFunnel = state => state.funnel;
+exports.selectorFunnel = selectorFunnel;
+const selectorFunnelGap = exports.selectorFunnelGap = (0, _internals.createSelector)([selectorFunnel], funnel => funnel?.gap ?? 0);
+const selectorChartXAxis = exports.selectorChartXAxis = (0, _internals.createSelector)([_internals.selectorChartRawXAxis, _internals.selectorChartDrawingArea, _internals.selectorChartSeriesProcessed, _internals.selectorChartSeriesConfig, selectorFunnelGap], (axis, drawingArea, formattedSeries, seriesConfig, gap) => (0, _computeAxisValue.computeAxisValue)({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'x',
+  gap
+}));
+const selectorChartYAxis = exports.selectorChartYAxis = (0, _internals.createSelector)([_internals.selectorChartRawYAxis, _internals.selectorChartDrawingArea, _internals.selectorChartSeriesProcessed, _internals.selectorChartSeriesConfig, selectorFunnelGap], (axis, drawingArea, formattedSeries, seriesConfig, gap) => (0, _computeAxisValue.computeAxisValue)({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'y',
+  gap
+}));

package/FunnelChart/funnelPlotSlots.types.d.ts

@@ -1,10 +1,21 @@
 import * as React from 'react';
 import type { FunnelSectionProps } from "./FunnelSection.js";
+import { FunnelSectionLabelProps } from "./FunnelSectionLabel.js";
 export interface FunnelPlotSlots {
+  /**
+   * Custom component for funnel section.
+   * @default FunnelSection
+   */
   funnelSection?: React.ElementType<FunnelSectionProps>;
+  /**
+   * Custom component for funnel section label.
+   * @default FunnelSectionLabel
+   */
+  funnelSectionLabel?: React.ElementType<FunnelSectionLabelProps>;
 }
 export interface FunnelPlotSlotProps {
   funnelSection?: FunnelSectionProps;
+  funnelSectionLabel?: FunnelSectionLabelProps;
 }
 export interface FunnelPlotSlotExtension {
   /**

package/FunnelChart/funnelSectionClasses.d.ts

@@ -1,4 +1,5 @@
 import type { FunnelSectionProps } from "./FunnelSection.js";
+import type { FunnelSectionLabelProps } from "./FunnelSectionLabel.js";
 export interface FunnelSectionClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -19,4 +20,5 @@ export interface FunnelSectionClasses {
   series: string;
 }
 export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "filled" | "outlined" | "highlighted" | "faded" | "root", string>;
+export declare const useLabelUtilityClasses: (props: FunnelSectionLabelProps) => Record<"label", string>;
 export declare const funnelSectionClasses: FunnelSectionClasses;

package/FunnelChart/funnelSectionClasses.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useUtilityClasses = exports.funnelSectionClasses = void 0;
+exports.useUtilityClasses = exports.useLabelUtilityClasses = exports.funnelSectionClasses = void 0;
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -15,10 +15,11 @@ const useUtilityClasses = props => {
   const {
     classes,
     seriesId,
-    variant
+    variant,
+    dataIndex
   } = props;
   const slots = {
-    root: ['root', `series-${seriesId}`],
+    root: ['root', `series-${seriesId}`, `data-index-${dataIndex}`],
     highlighted: ['highlighted'],
     faded: ['faded'],
     outlined: variant === 'outlined' ? ['outlined'] : [],
@@ -28,4 +29,16 @@ const useUtilityClasses = props => {
   return (0, _composeClasses.default)(slots, getFunnelSectionUtilityClass, classes);
 };
 exports.useUtilityClasses = useUtilityClasses;
-const funnelSectionClasses = exports.funnelSectionClasses = (0, _generateUtilityClasses.default)('MuiFunnelSection', ['root', 'highlighted', 'faded', 'filled', 'outlined', 'label', 'series']);
+const useLabelUtilityClasses = props => {
+  const {
+    classes,
+    seriesId,
+    dataIndex
+  } = props;
+  const slots = {
+    label: ['label', `series-${seriesId}`, `data-index-${dataIndex}`]
+  };
+  return (0, _composeClasses.default)(slots, getFunnelSectionUtilityClass, classes);
+};
+exports.useLabelUtilityClasses = useLabelUtilityClasses;
+const funnelSectionClasses = exports.funnelSectionClasses = (0, _generateUtilityClasses.default)('MuiFunnelSection', ['root', 'highlighted', 'faded', 'filled', 'outlined', 'label', 'series', 'data-index']);

package/FunnelChart/index.d.ts

@@ -6,4 +6,6 @@ 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.js";
+export type { FunnelSectionClasses } from "./funnelSectionClasses.js";
+export { FunnelSection } from "./FunnelSection.js";
+export { FunnelSectionLabel } from "./FunnelSectionLabel.js";

package/FunnelChart/index.js

@@ -5,8 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Unstable_FunnelChart: true,
-  funnelSectionClasses: true
+  funnelSectionClasses: true,
+  FunnelSection: true,
+  FunnelSectionLabel: true
 };
+Object.defineProperty(exports, "FunnelSection", {
+  enumerable: true,
+  get: function () {
+    return _FunnelSection.FunnelSection;
+  }
+});
+Object.defineProperty(exports, "FunnelSectionLabel", {
+  enumerable: true,
+  get: function () {
+    return _FunnelSectionLabel.FunnelSectionLabel;
+  }
+});
 Object.defineProperty(exports, "Unstable_FunnelChart", {
   enumerable: true,
   get: function () {
@@ -68,4 +82,6 @@ Object.keys(_funnelSlots).forEach(function (key) {
     }
   });
 });
-var _funnelSectionClasses = require("./funnelSectionClasses");
+var _funnelSectionClasses = require("./funnelSectionClasses");
+var _FunnelSection = require("./FunnelSection");
+var _FunnelSectionLabel = require("./FunnelSectionLabel");

package/FunnelChart/labelUtils.d.ts

@@ -1,4 +1,5 @@
 import { FunnelDataPoints, FunnelLabelOptions } from "./funnel.types.js";
+import { PositionGetter } from "./positionGetter.js";
 /**
  * It tries to keep the label inside the bounds of the section based on the position.
  *
@@ -30,8 +31,8 @@ export declare const positionLabel: ({
   dataIndex,
   baseScaleData
 }: Omit<FunnelLabelOptions, "textAnchor" | "dominantBaseline"> & {
-  xPosition: (value: number, bandIndex: number, stackOffset?: number, useBand?: boolean) => number | undefined;
-  yPosition: (value: number, bandIndex: number, stackOffset?: number, useBand?: boolean) => number | undefined;
+  xPosition: PositionGetter;
+  yPosition: PositionGetter;
   isHorizontal: boolean;
   values: readonly FunnelDataPoints[];
   dataIndex: number;

package/FunnelChart/labelUtils.js

@@ -80,28 +80,28 @@ const positionLabel = ({
     minBottom = yPosition(values[2].y, baseScaleData[dataIndex], stackOffset) + mv;
     maxBottom = yPosition(values[3].y, baseScaleData[dataIndex], stackOffset) + mv;
     minRight = 0;
-    maxRight = xPosition(Math.min(...values.map(v => v.x)), baseScaleData[dataIndex], stackOffset, true) + mh;
+    maxRight = xPosition(Math.min(...values.map(v => v.x)), dataIndex, baseScaleData[dataIndex], stackOffset, true) + mh;
     minLeft = 0;
-    maxLeft = xPosition(Math.max(...values.map(v => v.x)), baseScaleData[dataIndex], stackOffset) + mh;
+    maxLeft = xPosition(Math.max(...values.map(v => v.x)), dataIndex, baseScaleData[dataIndex], stackOffset) + mh;
     center = maxRight - (maxRight - maxLeft) / 2;
     leftCenter = 0;
     rightCenter = 0;
-    middle = yPosition(0, baseScaleData[dataIndex], stackOffset) - mv;
-    topMiddle = yPosition(values[0].y - (values[0].y - values[1].y) / 2, baseScaleData[dataIndex], stackOffset) - mv;
-    bottomMiddle = yPosition(values[3].y - (values[3].y - values[2].y) / 2, baseScaleData[dataIndex], stackOffset) + mv;
+    middle = yPosition(0, dataIndex, baseScaleData[dataIndex], stackOffset) - mv;
+    topMiddle = yPosition(values[0].y - (values[0].y - values[1].y) / 2, dataIndex, baseScaleData[dataIndex], stackOffset) - mv;
+    bottomMiddle = yPosition(values[3].y - (values[3].y - values[2].y) / 2, dataIndex, baseScaleData[dataIndex], stackOffset) + mv;
   } else {
     minTop = 0;
-    maxTop = yPosition(Math.max(...values.map(v => v.y)), baseScaleData[dataIndex], stackOffset) - mv;
+    maxTop = yPosition(Math.max(...values.map(v => v.y)), dataIndex, baseScaleData[dataIndex], stackOffset) - mv;
     minBottom = 0;
-    maxBottom = yPosition(Math.min(...values.map(v => v.y)), baseScaleData[dataIndex], stackOffset, true) - mv;
-    maxRight = xPosition(values[0].x, baseScaleData[dataIndex], stackOffset) + mh;
-    minRight = xPosition(values[1].x, baseScaleData[dataIndex], stackOffset) + mh;
-    minLeft = xPosition(values[2].x, baseScaleData[dataIndex], stackOffset) - mh;
-    maxLeft = xPosition(values[3].x, baseScaleData[dataIndex], stackOffset) - mh;
-    center = xPosition(0, baseScaleData[dataIndex], stackOffset) - mh;
-    rightCenter = xPosition(values[0].x - (values[0].x - values[1].x) / 2, baseScaleData[dataIndex], stackOffset) + mh;
-    leftCenter = xPosition(values[3].x - (values[3].x - values[2].x) / 2, baseScaleData[dataIndex], stackOffset) - mh;
-    middle = yPosition(values[0].y - (values[0].y - values[1].y) / 2, baseScaleData[dataIndex], stackOffset);
+    maxBottom = yPosition(Math.min(...values.map(v => v.y)), dataIndex, baseScaleData[dataIndex], stackOffset, true) - mv;
+    maxRight = xPosition(values[0].x, dataIndex, baseScaleData[dataIndex], stackOffset) + mh;
+    minRight = xPosition(values[1].x, dataIndex, baseScaleData[dataIndex], stackOffset) + mh;
+    minLeft = xPosition(values[2].x, dataIndex, baseScaleData[dataIndex], stackOffset) - mh;
+    maxLeft = xPosition(values[3].x, dataIndex, baseScaleData[dataIndex], stackOffset) - mh;
+    center = xPosition(0, dataIndex, baseScaleData[dataIndex], stackOffset) - mh;
+    rightCenter = xPosition(values[0].x - (values[0].x - values[1].x) / 2, dataIndex, baseScaleData[dataIndex], stackOffset) + mh;
+    leftCenter = xPosition(values[3].x - (values[3].x - values[2].x) / 2, dataIndex, baseScaleData[dataIndex], stackOffset) - mh;
+    middle = yPosition(values[0].y - (values[0].y - values[1].y) / 2, dataIndex, baseScaleData[dataIndex], stackOffset);
     middle = maxTop - (maxTop - maxBottom) / 2;
     topMiddle = 0;
     bottomMiddle = 0;

package/FunnelChart/positionGetter.d.ts

@@ -0,0 +1 @@
+export type PositionGetter = (value: number, bandIndex: number, bandIdentifier: string | number, stackOffset?: number, useBand?: boolean) => number;

package/FunnelChart/positionGetter.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/FunnelChart/useFunnelChartProps.js

@@ -91,8 +91,7 @@ const useFunnelChartProps = props => {
       onHighlightChange,
       className,
       axisHighlight,
-      apiRef,
-      gap
+      apiRef
     } = props,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const margin = (0, _internals.defaultizeMargin)(marginProps, _constants.DEFAULT_MARGINS);
@@ -124,7 +123,6 @@ const useFunnelChartProps = props => {
     plugins: _FunnelChart.FUNNEL_CHART_PLUGINS
   });
   const funnelPlotProps = {
-    gap,
     onItemClick,
     slots,
     slotProps

package/Heatmap/Heatmap.d.ts

@@ -5,14 +5,14 @@ import { ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
 import { ChartsAxisSlots, ChartsAxisSlotProps, XAxis, YAxis } from '@mui/x-charts/internals';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { ChartsLegendSlotProps, ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
-import { ChartsToolbarSlotProps, ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { HeatmapSeriesType } from "../models/seriesType/heatmap.js";
 import { HeatmapTooltipProps } from "./HeatmapTooltip/index.js";
 import { HeatmapItemSlotProps, HeatmapItemSlots } from "./HeatmapItem.js";
 import { HeatmapPluginsSignatures } from "./Heatmap.plugins.js";
-export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots, ChartsToolbarSlots, Partial<ChartsSlotsPro> {
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
+export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {
   /**
    * Custom component for the tooltip.
    * @default ChartsTooltipRoot
@@ -24,7 +24,7 @@ export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, Heatm
    */
   legend?: ChartsLegendSlots['legend'];
 }
-export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps, ChartsLegendSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotPropsPro> {
+export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps, ChartsLegendSlotProps, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {
   tooltip?: Partial<HeatmapTooltipProps>;
 }
 export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginsSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation' | 'slots' | 'slotProps'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
@@ -55,6 +55,11 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
    * @default true
    */
   hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
   /**
    * Overridable component slots.
    * @default {}

package/Heatmap/Heatmap.js

@@ -25,6 +25,7 @@ var _seriesConfig = require("./seriesConfig");
 var _HeatmapTooltip = require("./HeatmapTooltip");
 var _Heatmap2 = require("./Heatmap.plugins");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
+var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _jsxRuntime = require("react/jsx-runtime");
 // The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
 const defaultColorMap = (0, _d3Interpolate.interpolateRgbBasis)(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
@@ -65,7 +66,8 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
     loading,
     highlightedItem,
     onHighlightChange,
-    hideLegend = true
+    hideLegend = true,
+    showToolbar = false
   } = props;
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
@@ -99,6 +101,7 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
     legendDirection: props.slotProps?.legend?.direction
   };
   const Tooltip = slots?.tooltip ?? _HeatmapTooltip.HeatmapTooltip;
+  const Toolbar = slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, {
     apiRef: apiRef,
     seriesConfig: seriesConfig,
@@ -119,7 +122,7 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
     onAxisClick: onAxisClick,
     plugins: _Heatmap2.HEATMAP_PLUGINS,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [!hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
         slots: (0, _extends2.default)({}, slots, {
           legend: slots?.legend ?? _ChartsLegend.ContinuousColorLegend
         }),
@@ -251,6 +254,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @ignore Unstable props for internal usage.
    */
   seriesConfig: _propTypes.default.object,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/Heatmap/HeatmapTooltip/HeatmapTooltipAxesValue.d.ts

@@ -1,4 +1,4 @@
 /**
  * @ignore - internal component.
  */
-export declare const HeatmapTooltipAxesValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").ClassAttributes<HTMLElement> | keyof import("react").HTMLAttributes<HTMLElement>>, {}>;
+export declare const HeatmapTooltipAxesValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").ClassAttributes<HTMLElement> | keyof import("react").HTMLAttributes<HTMLElement>>, {}>;

package/LineChartPro/LineChartPro.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { LineChartProps, LineChartSlots, LineChartSlotProps } from '@mui/x-charts/LineChart';
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { LineChartProPluginsSignatures } from "./LineChartPro.plugins.js";
-export interface LineChartProSlots extends LineChartSlots, Partial<ChartsSlotsPro> {}
-export interface LineChartProSlotProps extends LineChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface LineChartProSlots extends Omit<LineChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface LineChartProSlotProps extends Omit<LineChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
 export interface LineChartProProps extends Omit<LineChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'line', LineChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
    * Overridable component slots.

package/LineChartPro/LineChartPro.js

@@ -82,7 +82,7 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
   const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
         })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {

package/PieChartPro/PieChartPro.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { PieChartProps, PieChartSlotProps, PieChartSlots } from '@mui/x-charts/PieChart';
+import { ChartsSlotsPro, ChartsSlotPropsPro } from "../internals/material/index.js";
+import { ChartContainerProProps } from "../ChartContainerPro/index.js";
+import { PieChartProPluginSignatures } from "./PieChartPro.plugins.js";
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
+export interface PieChartProSlots extends Omit<PieChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface PieChartProSlotProps extends Omit<PieChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface PieChartProProps extends Omit<PieChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'pie', PieChartProPluginSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieChartProSlotProps;
+}
+declare const PieChartPro: React.ForwardRefExoticComponent<PieChartProProps & React.RefAttributes<SVGSVGElement>>;
+export { PieChartPro };

package/PieChartPro/PieChartPro.js

@@ -0,0 +1,204 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PieChartPro = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _internals = require("@mui/x-charts/internals");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
+var React = _interopRequireWildcard(require("react"));
+var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
+var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
+var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
+var _PieChart = require("@mui/x-charts/PieChart");
+var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
+var _ChartDataProviderPro = require("../ChartDataProviderPro");
+var _ChartsToolbarPro = require("../ChartsToolbarPro");
+var _PieChartPro2 = require("./PieChartPro.plugins");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
+const PieChartPro = exports.PieChartPro = /*#__PURE__*/React.forwardRef(function PieChartPro(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiPieChartPro'
+  });
+  const {
+      series,
+      width,
+      height,
+      margin: marginProps,
+      colors,
+      sx,
+      skipAnimation,
+      hideLegend,
+      children,
+      slots,
+      slotProps,
+      onItemClick,
+      loading,
+      highlightedItem,
+      onHighlightChange,
+      className,
+      showToolbar
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const margin = (0, _internals.defaultizeMargin)(marginProps, _internals.DEFAULT_PIE_CHART_MARGIN);
+  const {
+    chartDataProviderProProps,
+    chartsSurfaceProps
+  } = (0, _useChartContainerProProps.useChartContainerProProps)((0, _extends2.default)({}, other, {
+    series: series.map(s => (0, _extends2.default)({
+      type: 'pie'
+    }, s)),
+    width,
+    height,
+    margin,
+    colors,
+    highlightedItem,
+    onHighlightChange,
+    className,
+    skipAnimation,
+    plugins: _PieChartPro2.PIE_CHART_PRO_PLUGINS
+  }), ref);
+  const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, {
+      legendPosition: props.slotProps?.legend?.position,
+      legendDirection: props?.slotProps?.legend?.direction ?? 'vertical',
+      sx: sx,
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
+        direction: props?.slotProps?.legend?.direction ?? 'vertical',
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PieChart.PiePlot, {
+          slots: slots,
+          slotProps: slotProps,
+          onItemClick: onItemClick
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+          loading: loading,
+          slots: slots,
+          slotProps: slotProps
+        }), children]
+      })), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
+        trigger: "item"
+      }, slotProps?.tooltip))]
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") PieChartPro.displayName = "PieChartPro";
+process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      exportAsImage: _propTypes.default.func.isRequired,
+      exportAsPrint: _propTypes.default.func.isRequired
+    })
+  }),
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  desc: _propTypes.default.string,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: _propTypes.default.number,
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend: _propTypes.default.bool,
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem: _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+  }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @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.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
+  })]),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: _propTypes.default.func,
+  /**
+   * Callback fired when a pie arc is clicked.
+   */
+  onItemClick: _propTypes.default.func,
+  /**
+   * The series to display in the pie chart.
+   * An array of [[PieSeriesType]] objects.
+   */
+  series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: _propTypes.default.bool,
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: _propTypes.default.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  theme: _propTypes.default.oneOf(['dark', 'light']),
+  title: _propTypes.default.string,
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: _propTypes.default.number
+} : void 0;

package/PieChartPro/PieChartPro.plugins.d.ts

@@ -0,0 +1,4 @@
+import { ConvertSignaturesIntoPlugins, UseChartHighlightSignature, UseChartInteractionSignature } from '@mui/x-charts/internals';
+import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
+export type PieChartProPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
+export declare const PIE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<PieChartProPluginSignatures>;

package/PieChartPro/PieChartPro.plugins.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PIE_CHART_PRO_PLUGINS = void 0;
+var _internals = require("@mui/x-charts/internals");
+var _useChartProExport = require("../internals/plugins/useChartProExport");
+const PIE_CHART_PRO_PLUGINS = exports.PIE_CHART_PRO_PLUGINS = [..._internals.PIE_CHART_PLUGINS, _useChartProExport.useChartProExport];

package/PieChartPro/index.d.ts

@@ -0,0 +1 @@
+export * from "./PieChartPro.js";

package/PieChartPro/index.js

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