@mui/x-charts 7.0.0-beta.2 → 7.0.0-beta.3

package/Gauge/GaugeValueArc.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GaugeValueArc = GaugeValueArc;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _d3Shape = require("d3-shape");
+var _styles = require("@mui/material/styles");
+var _GaugeProvider = require("./GaugeProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledPath = (0, _styles.styled)('path', {
+  name: 'MuiGauge',
+  slot: 'ReferenceArc',
+  overridesResolver: (props, styles) => styles.referenceArc
+})(({
+  theme
+}) => ({
+  fill: (theme.vars || theme).palette.primary.main
+}));
+function GaugeValueArc(props) {
+  const {
+    value,
+    valueMin,
+    valueMax,
+    startAngle,
+    endAngle,
+    outerRadius,
+    innerRadius,
+    cornerRadius,
+    cx,
+    cy
+  } = (0, _GaugeProvider.useGaugeState)();
+  if (value === null) {
+    return null;
+  }
+  const valueAngle = startAngle + (value - valueMin) / (valueMax - valueMin) * (endAngle - startAngle);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPath, (0, _extends2.default)({
+    transform: `translate(${cx}, ${cy})`,
+    d: (0, _d3Shape.arc)().cornerRadius(cornerRadius)({
+      startAngle,
+      endAngle: valueAngle,
+      innerRadius,
+      outerRadius
+    })
+  }, props));
+}

package/Gauge/GaugeValueText.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ChartsTextProps } from '../ChartsText';
+export interface GaugeFormatterParams {
+    value: number | null;
+    valueMin: number;
+    valueMax: number;
+}
+export interface GaugeValueTextProps extends Omit<ChartsTextProps, 'text'> {
+    text?: string | ((params: GaugeFormatterParams) => string | null);
+}
+declare function GaugeValueText(props: GaugeValueTextProps): React.JSX.Element | null;
+declare namespace GaugeValueText {
+    var propTypes: any;
+}
+export { GaugeValueText };

package/Gauge/GaugeValueText.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GaugeValueText = GaugeValueText;
+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 _GaugeProvider = require("./GaugeProvider");
+var _ChartsText = require("../ChartsText");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["text", "className"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function defaultFormatter({
+  value
+}) {
+  return value === null ? 'NaN' : value.toLocaleString();
+}
+function GaugeValueText(props) {
+  const {
+      text = defaultFormatter,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    value,
+    valueMin,
+    valueMax,
+    cx,
+    cy
+  } = (0, _GaugeProvider.useGaugeState)();
+  const formattedText = typeof text === 'function' ? text({
+    value,
+    valueMin,
+    valueMax
+  }) : text;
+  if (formattedText === null) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, (0, _extends2.default)({
+      x: cx,
+      y: cy,
+      text: formattedText,
+      style: {
+        textAnchor: 'middle',
+        dominantBaseline: 'central'
+      }
+    }, other))
+  });
+}
+process.env.NODE_ENV !== "production" ? GaugeValueText.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Height of a text line (in `em`).
+   */
+  lineHeight: _propTypes.default.number,
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation: _propTypes.default.bool,
+  ownerState: _propTypes.default.any,
+  /**
+   * Style applied to text elements.
+   */
+  style: _propTypes.default.object,
+  text: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
+} : void 0;

package/Gauge/gaugeClasses.d.ts

@@ -0,0 +1,14 @@
+export interface GaugeClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the arc diplaying the value. */
+    valueArc: string;
+    /** Styles applied to the arc diplaying the range of available values. */
+    referenceArc: string;
+    /** Styles applied to the value text. */
+    valueText: string;
+}
+export type GaugeClassKey = keyof GaugeClasses;
+export declare function getGaugeUtilityClass(slot: string): string;
+export declare const gaugeClasses: GaugeClasses;
+export default gaugeClasses;

package/Gauge/gaugeClasses.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gaugeClasses = exports.default = void 0;
+exports.getGaugeUtilityClass = getGaugeUtilityClass;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+function getGaugeUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiGauge', slot);
+}
+const gaugeClasses = exports.gaugeClasses = (0, _generateUtilityClasses.default)('MuiGauge', ['root', 'valueArc', 'referenceArc', 'valueText']);
+var _default = exports.default = gaugeClasses;

package/Gauge/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Gauge';
+export * from './GaugeContainer';
+export * from './GaugeValueText';
+export * from './GaugeValueArc';
+export * from './GaugeReferenceArc';
+export * from './gaugeClasses';
+export { useGaugeState } from './GaugeProvider';

package/Gauge/index.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useGaugeState: true
+};
+Object.defineProperty(exports, "useGaugeState", {
+  enumerable: true,
+  get: function () {
+    return _GaugeProvider.useGaugeState;
+  }
+});
+var _Gauge = require("./Gauge");
+Object.keys(_Gauge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Gauge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Gauge[key];
+    }
+  });
+});
+var _GaugeContainer = require("./GaugeContainer");
+Object.keys(_GaugeContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GaugeContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GaugeContainer[key];
+    }
+  });
+});
+var _GaugeValueText = require("./GaugeValueText");
+Object.keys(_GaugeValueText).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GaugeValueText[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GaugeValueText[key];
+    }
+  });
+});
+var _GaugeValueArc = require("./GaugeValueArc");
+Object.keys(_GaugeValueArc).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GaugeValueArc[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GaugeValueArc[key];
+    }
+  });
+});
+var _GaugeReferenceArc = require("./GaugeReferenceArc");
+Object.keys(_GaugeReferenceArc).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GaugeReferenceArc[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GaugeReferenceArc[key];
+    }
+  });
+});
+var _gaugeClasses = require("./gaugeClasses");
+Object.keys(_gaugeClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _gaugeClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gaugeClasses[key];
+    }
+  });
+});
+var _GaugeProvider = require("./GaugeProvider");

package/Gauge/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Gauge/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Gauge/utils.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Retruns the ratio of the arc bounding box and its center.
+ * @param startAngle The start angle (in deg)
+ * @param endAngle The end angle (in deg)
+ */
+export declare function getArcRatios(startAngle: number, endAngle: number): {
+    cx: number;
+    cy: number;
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+};
+export declare function getAvailableRadius(cx: number, cy: number, width: number, height: number, { minX, maxX, minY, maxY, }: {
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+}): number;

package/Gauge/utils.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getArcRatios = getArcRatios;
+exports.getAvailableRadius = getAvailableRadius;
+function deg2rad(angle) {
+  return Math.PI * angle / 180;
+}
+function getPoint(angle) {
+  const radAngle = deg2rad(angle);
+  return [Math.sin(radAngle), -Math.cos(radAngle)];
+}
+
+/**
+ * Retruns the ratio of the arc bounding box and its center.
+ * @param startAngle The start angle (in deg)
+ * @param endAngle The end angle (in deg)
+ */
+function getArcRatios(startAngle, endAngle) {
+  // Set the start, end and center point.
+  const points = [[0, 0], getPoint(startAngle), getPoint(endAngle)];
+
+  // Add cardinal points included in the arc
+  const minAngle = Math.min(startAngle, endAngle);
+  const maxAngle = Math.max(startAngle, endAngle);
+  const initialAngle = Math.floor(minAngle / 90) * 90;
+  for (let step = 1; step <= 4; step += 1) {
+    const cartinalAngle = initialAngle + step * 90;
+    if (cartinalAngle < maxAngle) {
+      points.push(getPoint(cartinalAngle));
+    }
+  }
+  const minX = Math.min(...points.map(([x]) => x));
+  const maxX = Math.max(...points.map(([x]) => x));
+  const minY = Math.min(...points.map(([, y]) => y));
+  const maxY = Math.max(...points.map(([, y]) => y));
+  return {
+    cx: -minX / (maxX - minX),
+    cy: -minY / (maxY - minY),
+    minX,
+    maxX,
+    minY,
+    maxY
+  };
+}
+function getAvailableRadius(cx, cy, width, height, {
+  minX,
+  maxX,
+  minY,
+  maxY
+}) {
+  return Math.min(...[{
+    ratio: Math.abs(minX),
+    space: cx
+  }, {
+    ratio: Math.abs(maxX),
+    space: width - cx
+  }, {
+    ratio: Math.abs(minY),
+    space: cy
+  }, {
+    ratio: Math.abs(maxY),
+    space: height - cy
+  }].map(({
+    ratio,
+    space
+  }) => {
+    if (ratio < 0.00001) {
+      return Infinity;
+    }
+    return space / ratio;
+  }));
+}

package/LineChart/LineChart.d.ts

@@ -11,20 +11,30 @@ import { ChartsLegendProps, ChartsLegendSlotProps, ChartsLegendSlots } from '../
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlotProps, ChartsAxisSlots } from '../models/axis';
 import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from './LineHighlightPlot';
+import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
 export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
 }
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
 }
 export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
+    /**
+     * The series to display in the line chart.
+     */
     series: MakeOptional<LineSeriesType, 'type'>[];
+    /**
+     * The configuration of the tooltip.
+     * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+     * @default { trigger: 'item' }
+     */
     tooltip?: ChartsTooltipProps;
     /**
-     * Object `{ x, y }` that defines how the charts highlight the mouse position along the x- and y-axes.
-     * The two properties accept the following values:
-     * - 'none': display nothing.
-     * - 'line': display a line at the current mouse position.
-     * - 'band': display a band at the current mouse position. Only available with band scale.
+     * Option to display a cartesian grid in the background.
+     */
+    grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+    /**
+     * The configuration of axes highlight.
+     * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
      * @default { x: 'line' }
      */
     axisHighlight?: ChartsAxisHighlightProps;
@@ -46,8 +56,17 @@ export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'ser
      * @default {}
      */
     slotProps?: LineChartSlotProps;
+    /**
+     * Callback fired when an area element is clicked.
+     */
     onAreaClick?: AreaPlotProps['onItemClick'];
+    /**
+     * Callback fired when a line element is clicked.
+     */
     onLineClick?: LinePlotProps['onItemClick'];
+    /**
+     * Callback fired when a mark element is clicked.
+     */
     onMarkClick?: MarkPlotProps['onItemClick'];
     /**
      * If `true`, animations are skipped.

package/LineChart/LineChart.js

@@ -20,6 +20,7 @@ var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsClipPath = require("../ChartsClipPath");
 var _LineHighlightPlot = require("./LineHighlightPlot");
+var _ChartsGrid = require("../ChartsGrid");
 var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -55,6 +56,7 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     },
     disableLineItemHighlight,
     legend,
+    grid,
     topAxis,
     leftAxis,
     rightAxis,
@@ -89,6 +91,9 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
     children: [onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
+    }), grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, {
+      vertical: grid.vertical,
+      horizontal: grid.horizontal
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
       clipPath: `url(#${clipPathId})`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, {
@@ -134,11 +139,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Object `{ x, y }` that defines how the charts highlight the mouse position along the x- and y-axes.
-   * The two properties accept the following values:
-   * - 'none': display nothing.
-   * - 'line': display a line at the current mouse position.
-   * - 'band': display a band at the current mouse position. Only available with band scale.
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
    * @default { x: 'line' }
    */
   axisHighlight: _propTypes.default.shape({
@@ -194,6 +196,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
+  /**
+   * Option to display a cartesian grid in the background.
+   */
+  grid: _propTypes.default.shape({
+    horizontal: _propTypes.default.bool,
+    vertical: _propTypes.default.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    * @default undefined
@@ -252,6 +261,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
+  /**
+   * Callback fired when an area element is clicked.
+   */
   onAreaClick: _propTypes.default.func,
   /**
    * The function called for onClick events.
@@ -260,7 +272,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @param {null | AxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
+  /**
+   * Callback fired when a line element is clicked.
+   */
   onLineClick: _propTypes.default.func,
+  /**
+   * Callback fired when a mark element is clicked.
+   */
   onMarkClick: _propTypes.default.func,
   /**
    * Indicate which axis to display the right of the charts.
@@ -289,6 +307,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
+  /**
+   * The series to display in the line chart.
+   */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
    * If `true`, animations are skipped.
@@ -307,6 +328,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   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]),
   title: _propTypes.default.string,
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   * @default { trigger: 'item' }
+   */
   tooltip: _propTypes.default.shape({
     axisContent: _propTypes.default.elementType,
     classes: _propTypes.default.object,

package/PieChart/PieArc.d.ts

@@ -22,14 +22,14 @@ interface PieArcOwnerState {
 export declare function getPieArcUtilityClass(slot: string): string;
 export declare const pieArcClasses: PieArcClasses;
 export type PieArcProps = Omit<React.ComponentPropsWithoutRef<'path'>, 'id'> & PieArcOwnerState & {
-    startAngle: SpringValue<number>;
+    cornerRadius: SpringValue<number>;
     endAngle: SpringValue<number>;
+    highlightScope?: Partial<HighlightScope>;
     innerRadius: SpringValue<number>;
+    onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
     outerRadius: SpringValue<number>;
-    cornerRadius: SpringValue<number>;
     paddingAngle: SpringValue<number>;
-    highlightScope?: Partial<HighlightScope>;
-    onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
+    startAngle: SpringValue<number>;
 };
 declare function PieArc(props: PieArcProps): React.JSX.Element;
 declare namespace PieArc {

package/PieChart/PieArc.js

@@ -19,7 +19,7 @@ var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "onClick", "isFaded", "isHighlighted", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "highlightScope", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getPieArcUtilityClass(slot) {
@@ -51,20 +51,20 @@ const PieArcRoot = (0, _styles.styled)(_web.animated.path, {
 }));
 function PieArc(props) {
   const {
-      id,
-      dataIndex,
       classes: innerClasses,
       color,
+      cornerRadius,
+      dataIndex,
+      endAngle,
       highlightScope,
-      onClick,
+      id,
+      innerRadius,
       isFaded,
       isHighlighted,
-      startAngle,
-      endAngle,
-      paddingAngle,
-      innerRadius,
+      onClick,
       outerRadius,
-      cornerRadius
+      paddingAngle,
+      startAngle
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = {

package/PieChart/PieArcLabelPlot.js

@@ -14,7 +14,7 @@ var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _PieArcLabel = require("./PieArcLabel");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
+const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "highlightScope", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -34,23 +34,23 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
 }
 function PieArcLabelPlot(props) {
   const {
-      slots,
-      slotProps,
-      innerRadius,
-      outerRadius,
+      arcLabel,
+      arcLabelMinAngle = 0,
       arcLabelRadius,
       cornerRadius = 0,
-      paddingAngle = 0,
-      id,
-      highlightScope,
-      highlighted,
+      data,
       faded = {
         additionalRadius: -5
       },
-      data,
-      arcLabel,
-      arcLabelMinAngle = 0,
-      skipAnimation
+      highlighted,
+      highlightScope,
+      id,
+      innerRadius,
+      outerRadius,
+      paddingAngle = 0,
+      skipAnimation,
+      slotProps,
+      slots
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const transformedData = (0, _useTransformData.useTransformData)({