@mui/x-charts 8.5.3 → 8.7.0

package/LineChart/LinePlot.js

@@ -7,23 +7,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LinePlot = LinePlot;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _warning = require("@mui/x-internals/warning");
-var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _LineElement = require("./LineElement");
-var _useScale = require("../hooks/useScale");
-var _getCurve = require("../internals/getCurve");
-var _isBandScale = require("../internals/isBandScale");
-var _constants = require("../constants");
-var _useLineSeries = require("../hooks/useLineSeries");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
-var _useChartGradientId = require("../hooks/useChartGradientId");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
+var _useLinePlotData = require("./useLinePlotData");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 const LinePlotRoot = (0, _styles.styled)('g', {
@@ -35,100 +28,13 @@ const LinePlotRoot = (0, _styles.styled)('g', {
   }
 });
 const useAggregatedData = () => {
-  const seriesData = (0, _useLineSeries.useLineSeriesContext)();
   const {
-    xAxis,
-    xAxisIds
+    xAxis: xAxes
   } = (0, _hooks.useXAxes)();
   const {
-    yAxis,
-    yAxisIds
+    yAxis: yAxes
   } = (0, _hooks.useYAxes)();
-  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
-
-  // This memo prevents odd line chart behavior when hydrating.
-  const allData = React.useMemo(() => {
-    if (seriesData === undefined) {
-      return [];
-    }
-    const {
-      series,
-      stackingGroups
-    } = seriesData;
-    const defaultXAxisId = xAxisIds[0];
-    const defaultYAxisId = yAxisIds[0];
-    return stackingGroups.flatMap(({
-      ids: groupIds
-    }) => {
-      return groupIds.flatMap(seriesId => {
-        const {
-          xAxisId = defaultXAxisId,
-          yAxisId = defaultYAxisId,
-          stackedData,
-          data,
-          connectNulls,
-          curve,
-          strictStepCurve
-        } = series[seriesId];
-        const xScale = xAxis[xAxisId].scale;
-        const xPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-        const yScale = yAxis[yAxisId].scale;
-        const xData = xAxis[xAxisId].data;
-        const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
-        if (process.env.NODE_ENV !== 'production') {
-          if (xData === undefined) {
-            throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
-          }
-          if (xData.length < stackedData.length) {
-            (0, _warning.warnOnce)(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
-          }
-        }
-        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);
-        const formattedData = xData?.flatMap((x, index) => {
-          const nullData = data[index] == null;
-          if (shouldExpand) {
-            const rep = [{
-              x,
-              y: stackedData[index],
-              nullData,
-              isExtension: false
-            }];
-            if (!nullData && (index === 0 || data[index - 1] == null)) {
-              rep.unshift({
-                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
-              rep.push({
-                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            return rep;
-          }
-          return {
-            x,
-            y: stackedData[index],
-            nullData
-          };
-        }) ?? [];
-        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
-        const linePath = (0, _d3Shape.line)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => yScale(d.y[1]));
-        const d = linePath.curve((0, _getCurve.getCurveFactory)(curve))(d3Data) || '';
-        return (0, _extends2.default)({}, series[seriesId], {
-          gradientId,
-          d,
-          seriesId
-        });
-      });
-    });
-  }, [seriesData, xAxisIds, yAxisIds, xAxis, yAxis, getGradientId]);
-  return allData;
+  return (0, _useLinePlotData.useLinePlotData)(xAxes, yAxes);
 };
 
 /**

package/LineChart/MarkElement.js

@@ -84,7 +84,10 @@ function MarkElement(props) {
     d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.getSymbol)(shape)])(),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset'
-  }, interactionProps));
+  }, interactionProps, {
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined
+  }));
 }
 process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
   // ----------------------------- Warning --------------------------------

package/LineChart/MarkPlot.js

@@ -109,6 +109,7 @@ function MarkPlot(props) {
         });
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           clipPath: `url(#${clipId})`,
+          "data-series": seriesId,
           children: xData?.map((x, index) => {
             const value = data[index] == null ? null : stackedData[index][1];
             return {

package/LineChart/useAreaPlotData.d.ts

@@ -0,0 +1,12 @@
+import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
+import { SeriesId } from "../models/seriesType/common.js";
+interface AreaPlotDataPoint {
+  d: string;
+  seriesId: SeriesId;
+  color: string;
+  area?: boolean;
+  gradientId?: string;
+}
+export declare function useAreaPlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): AreaPlotDataPoint[];
+export {};

package/LineChart/useAreaPlotData.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAreaPlotData = useAreaPlotData;
+var React = _interopRequireWildcard(require("react"));
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
+var _useChartGradientId = require("../hooks/useChartGradientId");
+var _isBandScale = require("../internals/isBandScale");
+var _getCurve = require("../internals/getCurve");
+var _hooks = require("../hooks");
+var _constants = require("../constants");
+function useAreaPlotData(xAxes, yAxes) {
+  const seriesData = (0, _hooks.useLineSeriesContext)();
+  const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
+  const defaultYAxisId = (0, _hooks.useYAxes)().yAxisIds[0];
+  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const areaPlotData = [];
+    for (const stackingGroup of stackingGroups) {
+      const groupIds = stackingGroup.ids;
+      for (let i = groupIds.length - 1; i >= 0; i -= 1) {
+        const seriesId = groupIds[i];
+        const {
+          xAxisId = defaultXAxisId,
+          yAxisId = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls,
+          baseline,
+          curve,
+          strictStepCurve
+        } = series[seriesId];
+        if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+          continue;
+        }
+        const xScale = xAxes[xAxisId].scale;
+        const xPosition = (0, _hooks.getValueToPositionMapper)(xScale);
+        const yScale = yAxes[yAxisId].scale;
+        const xData = xAxes[xAxisId].data;
+        const gradientId = yAxes[yAxisId].colorScale && getGradientId(yAxisId) || xAxes[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          }
+        }
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);
+        const formattedData = xData?.flatMap((x, index) => {
+          const nullData = data[index] == null;
+          if (shouldExpand) {
+            const rep = [{
+              x,
+              y: stackedData[index],
+              nullData,
+              isExtension: false
+            }];
+            if (!nullData && (index === 0 || data[index - 1] == null)) {
+              rep.unshift({
+                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+              rep.push({
+                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            return rep;
+          }
+          return {
+            x,
+            y: stackedData[index],
+            nullData
+          };
+        }) ?? [];
+        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
+        const areaPath = (0, _d3Shape.area)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y0(d => {
+          if (typeof baseline === 'number') {
+            return yScale(baseline);
+          }
+          if (baseline === 'max') {
+            return yScale.range()[1];
+          }
+          if (baseline === 'min') {
+            return yScale.range()[0];
+          }
+          const value = d.y && yScale(d.y[0]);
+          if (Number.isNaN(value)) {
+            return yScale.range()[0];
+          }
+          return value;
+        }).y1(d => d.y && yScale(d.y[1]));
+        const d = areaPath.curve((0, _getCurve.getCurveFactory)(curve))(d3Data) || '';
+        areaPlotData.push({
+          area: series[seriesId].area,
+          color: series[seriesId].color,
+          gradientId,
+          d,
+          seriesId
+        });
+      }
+    }
+    return areaPlotData;
+  }, [seriesData, defaultXAxisId, defaultYAxisId, xAxes, yAxes, getGradientId]);
+  return allData;
+}

package/LineChart/useLinePlotData.d.ts

@@ -0,0 +1,11 @@
+import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
+import { SeriesId } from "../models/seriesType/common.js";
+interface LinePlotDataPoint {
+  d: string;
+  seriesId: SeriesId;
+  color: string;
+  gradientId?: string;
+}
+export declare function useLinePlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): LinePlotDataPoint[];
+export {};

package/LineChart/useLinePlotData.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLinePlotData = useLinePlotData;
+var React = _interopRequireWildcard(require("react"));
+var _warning = require("@mui/x-internals/warning");
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
+var _useChartGradientId = require("../hooks/useChartGradientId");
+var _isBandScale = require("../internals/isBandScale");
+var _getCurve = require("../internals/getCurve");
+var _hooks = require("../hooks");
+var _constants = require("../constants");
+function useLinePlotData(xAxes, yAxes) {
+  const seriesData = (0, _hooks.useLineSeriesContext)();
+  const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
+  const defaultYAxisId = (0, _hooks.useYAxes)().yAxisIds[0];
+  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const linePlotData = [];
+    for (const stackingGroup of stackingGroups) {
+      const groupIds = stackingGroup.ids;
+      for (const seriesId of groupIds) {
+        const {
+          xAxisId = defaultXAxisId,
+          yAxisId = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls,
+          curve,
+          strictStepCurve
+        } = series[seriesId];
+        if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+          continue;
+        }
+        const xScale = xAxes[xAxisId].scale;
+        const xPosition = (0, _hooks.getValueToPositionMapper)(xScale);
+        const yScale = yAxes[yAxisId].scale;
+        const xData = xAxes[xAxisId].data;
+        const gradientId = yAxes[yAxisId].colorScale && getGradientId(yAxisId) || xAxes[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            (0, _warning.warnOnce)(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
+          }
+        }
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);
+        const formattedData = xData?.flatMap((x, index) => {
+          const nullData = data[index] == null;
+          if (shouldExpand) {
+            const rep = [{
+              x,
+              y: stackedData[index],
+              nullData,
+              isExtension: false
+            }];
+            if (!nullData && (index === 0 || data[index - 1] == null)) {
+              rep.unshift({
+                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+              rep.push({
+                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            return rep;
+          }
+          return {
+            x,
+            y: stackedData[index],
+            nullData
+          };
+        }) ?? [];
+        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
+        const linePath = (0, _d3Shape.line)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => yScale(d.y[1]));
+        const d = linePath.curve((0, _getCurve.getCurveFactory)(curve))(d3Data) || '';
+        linePlotData.push({
+          color: series[seriesId].color,
+          gradientId,
+          d,
+          seriesId
+        });
+      }
+    }
+    return linePlotData;
+  }, [seriesData, defaultXAxisId, defaultYAxisId, xAxes, yAxes, getGradientId]);
+  return allData;
+}

package/PieChart/PieArc.js

@@ -103,7 +103,9 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
     opacity: ownerState.isFaded ? 0.3 : 1,
     filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
     strokeWidth: 1,
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    "data-highlighted": ownerState.isHighlighted || undefined,
+    "data-faded": ownerState.isFaded || undefined
   }, other, interactionProps, animatedProps));
 });
 if (process.env.NODE_ENV !== "production") PieArc.displayName = "PieArc";

package/PieChart/PiePlot.js

@@ -16,6 +16,7 @@ var _getPieCoordinates = require("./getPieCoordinates");
 var _usePieSeries = require("../hooks/usePieSeries");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _hooks = require("../hooks");
+var _pieClasses = require("./pieClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -42,6 +43,7 @@ function PiePlot(props) {
     height
   } = (0, _hooks.useDrawingArea)();
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(inSkipAnimation);
+  const classes = (0, _pieClasses.useUtilityClasses)();
   if (seriesData === undefined) {
     return null;
   }
@@ -76,7 +78,9 @@ function PiePlot(props) {
       const outerRadius = (0, _getPercentageValue.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
       const innerRadius = (0, _getPercentageValue.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        className: classes.series,
         transform: `translate(${left + cx}, ${top + cy})`,
+        "data-series": seriesId,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcPlot.PieArcPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius,
@@ -120,7 +124,9 @@ function PiePlot(props) {
       const innerRadius = (0, _getPercentageValue.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
       const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : (0, _getPercentageValue.getPercentageValue)(arcLabelRadiusParam, availableRadius);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        className: classes.seriesLabels,
         transform: `translate(${left + cx}, ${top + cy})`,
+        "data-series": seriesId,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcLabelPlot.PieArcLabelPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius ?? availableRadius,

package/PieChart/index.d.ts

@@ -4,4 +4,6 @@ export * from "./PieArcPlot.js";
 export * from "./PieArcLabelPlot.js";
 export * from "./PieArc.js";
 export * from "./PieArcLabel.js";
-export * from "./getPieCoordinates.js";
+export * from "./getPieCoordinates.js";
+export { pieClasses } from "./pieClasses.js";
+export type { PieClasses, PieClassKey } from "./pieClasses.js";

package/PieChart/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  pieClasses: true
+};
+Object.defineProperty(exports, "pieClasses", {
+  enumerable: true,
+  get: function () {
+    return _pieClasses.pieClasses;
+  }
+});
 var _PieChart = require("./PieChart");
 Object.keys(_PieChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PieChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +27,7 @@ Object.keys(_PieChart).forEach(function (key) {
 var _PiePlot = require("./PiePlot");
 Object.keys(_PiePlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PiePlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +39,7 @@ Object.keys(_PiePlot).forEach(function (key) {
 var _PieArcPlot = require("./PieArcPlot");
 Object.keys(_PieArcPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PieArcPlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +51,7 @@ Object.keys(_PieArcPlot).forEach(function (key) {
 var _PieArcLabelPlot = require("./PieArcLabelPlot");
 Object.keys(_PieArcLabelPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PieArcLabelPlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -50,6 +63,7 @@ Object.keys(_PieArcLabelPlot).forEach(function (key) {
 var _PieArc = require("./PieArc");
 Object.keys(_PieArc).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PieArc[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -61,6 +75,7 @@ Object.keys(_PieArc).forEach(function (key) {
 var _PieArcLabel = require("./PieArcLabel");
 Object.keys(_PieArcLabel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PieArcLabel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -72,6 +87,7 @@ Object.keys(_PieArcLabel).forEach(function (key) {
 var _getPieCoordinates = require("./getPieCoordinates");
 Object.keys(_getPieCoordinates).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _getPieCoordinates[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -79,4 +95,5 @@ Object.keys(_getPieCoordinates).forEach(function (key) {
       return _getPieCoordinates[key];
     }
   });
-});
+});
+var _pieClasses = require("./pieClasses");

package/PieChart/pieClasses.d.ts

@@ -0,0 +1,12 @@
+export interface PieClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the `g` element that contains all pie arcs of a series. */
+  series: string;
+  /** Styles applied to the `g` element that contains all pie arc labels of a series. */
+  seriesLabels: string;
+}
+export type PieClassKey = keyof PieClasses;
+export declare function getPieUtilityClass(slot: string): string;
+export declare const pieClasses: PieClasses;
+export declare const useUtilityClasses: (classes?: Partial<PieClasses>) => Record<"root" | "series" | "seriesLabels", string>;

package/PieChart/pieClasses.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPieUtilityClass = getPieUtilityClass;
+exports.useUtilityClasses = exports.pieClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getPieUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiPieChart', slot);
+}
+const pieClasses = exports.pieClasses = (0, _generateUtilityClasses.default)('MuiPieChart', ['root', 'series', 'seriesLabels']);
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    series: ['series'],
+    seriesLabels: ['seriesLabels']
+  };
+  return (0, _composeClasses.default)(slots, getPieUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;