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

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/AnimatedArea.js

@@ -99,7 +99,7 @@ process.env.NODE_ENV !== "production" ? AnimatedArea.propTypes = {
   ownerState: _propTypes.default.shape({
     classes: _propTypes.default.object,
     color: _propTypes.default.string.isRequired,
-    id: _propTypes.default.string.isRequired,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     isFaded: _propTypes.default.bool.isRequired,
     isHighlighted: _propTypes.default.bool.isRequired
   }).isRequired,

package/LineChart/AnimatedLine.js

@@ -101,7 +101,7 @@ process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
   ownerState: _propTypes.default.shape({
     classes: _propTypes.default.object,
     color: _propTypes.default.string.isRequired,
-    id: _propTypes.default.string.isRequired,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     isFaded: _propTypes.default.bool.isRequired,
     isHighlighted: _propTypes.default.bool.isRequired
   }).isRequired,

package/LineChart/AreaElement.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { HighlightScope } from '../context/HighlightProvider';
 import { AnimatedAreaProps } from './AnimatedArea';
+import { SeriesId } from '../models/seriesType/common';
 export interface AreaElementClasses {
     /** Styles applied to the root element. */
     root: string;
@@ -11,7 +12,7 @@ export interface AreaElementClasses {
 }
 export type AreaElementClassKey = keyof AreaElementClasses;
 export interface AreaElementOwnerState {
-    id: string;
+    id: SeriesId;
     color: string;
     isFaded: boolean;
     isHighlighted: boolean;

package/LineChart/AreaElement.js

@@ -107,7 +107,7 @@ process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
     faded: _propTypes.default.oneOf(['global', 'none', 'series']),
     highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
   }),
-  id: _propTypes.default.string.isRequired,
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * If `true`, animations are skipped.
    * @default false

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({
@@ -151,7 +153,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string,
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -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
@@ -205,7 +214,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string,
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -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.
@@ -268,7 +286,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default null
    */
   rightAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string,
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -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,
@@ -321,7 +347,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string,
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -358,7 +384,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.string,
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
@@ -366,13 +392,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableTicks: _propTypes.default.bool,
     fill: _propTypes.default.string,
     hideTooltip: _propTypes.default.bool,
-    id: _propTypes.default.string,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
@@ -392,7 +419,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.string,
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
@@ -400,13 +427,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableTicks: _propTypes.default.bool,
     fill: _propTypes.default.string,
     hideTooltip: _propTypes.default.bool,
-    id: _propTypes.default.string,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,

package/LineChart/LineElement.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { HighlightScope } from '../context/HighlightProvider';
 import { AnimatedLineProps } from './AnimatedLine';
+import { SeriesId } from '../models/seriesType/common';
 export interface LineElementClasses {
     /** Styles applied to the root element. */
     root: string;
@@ -11,7 +12,7 @@ export interface LineElementClasses {
 }
 export type LineElementClassKey = keyof LineElementClasses;
 export interface LineElementOwnerState {
-    id: string;
+    id: SeriesId;
     color: string;
     isFaded: boolean;
     isHighlighted: boolean;

package/LineChart/LineElement.js

@@ -107,7 +107,7 @@ process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
     faded: _propTypes.default.oneOf(['global', 'none', 'series']),
     highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
   }),
-  id: _propTypes.default.string.isRequired,
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * If `true`, animations are skipped.
    * @default false

package/LineChart/LineHighlightElement.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
+import { SeriesId } from '../models/seriesType/common';
 export interface LineHighlightElementClasses {
     /** Styles applied to the root element. */
     root: string;
 }
 export type HighlightElementClassKey = keyof LineHighlightElementClasses;
 interface LineHighlightElementOwnerState {
-    id: string;
+    id: SeriesId;
     color: string;
     x: number;
     y: number;
@@ -13,7 +14,7 @@ interface LineHighlightElementOwnerState {
 }
 export declare function getHighlightElementUtilityClass(slot: string): string;
 export declare const lineHighlightElementClasses: LineHighlightElementClasses;
-export type LineHighlightElementProps = LineHighlightElementOwnerState & React.ComponentPropsWithoutRef<'circle'> & {};
+export type LineHighlightElementProps = LineHighlightElementOwnerState & Omit<React.ComponentPropsWithoutRef<'circle'>, 'id'> & {};
 /**
  * Demos:
  *

package/LineChart/LineHighlightElement.js

@@ -85,5 +85,6 @@ process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  classes: _propTypes.default.object
+  classes: _propTypes.default.object,
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
 } : void 0;

package/LineChart/MarkElement.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { HighlightScope } from '../context/HighlightProvider';
+import { SeriesId } from '../models/seriesType/common';
 export interface MarkElementClasses {
     /** Styles applied to the root element. */
     root: string;
@@ -10,7 +11,7 @@ export interface MarkElementClasses {
 }
 export type MarkElementClassKey = keyof MarkElementClasses;
 interface MarkElementOwnerState {
-    id: string;
+    id: SeriesId;
     color: string;
     isFaded: boolean;
     isHighlighted: boolean;
@@ -18,7 +19,7 @@ interface MarkElementOwnerState {
 }
 export declare function getMarkElementUtilityClass(slot: string): string;
 export declare const markElementClasses: MarkElementClasses;
-export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & React.ComponentPropsWithoutRef<'path'> & {
+export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.ComponentPropsWithoutRef<'path'>, 'id'> & {
     /**
      * If `true`, animations are skipped.
      * @default false

package/LineChart/MarkElement.js

@@ -147,6 +147,7 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
     faded: _propTypes.default.oneOf(['global', 'none', 'series']),
     highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
   }),
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * The shape of the marker.
    */

package/PieChart/PieArc.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SpringValue } from '@react-spring/web';
 import { HighlightScope } from '../context/HighlightProvider';
+import { PieItemId } from '../models';
 export interface PieArcClasses {
     /** Styles applied to the root element. */
     root: string;
@@ -11,7 +12,7 @@ export interface PieArcClasses {
 }
 export type PieArcClassKey = keyof PieArcClasses;
 interface PieArcOwnerState {
-    id: string;
+    id: PieItemId;
     dataIndex: number;
     color: string;
     isFaded: boolean;
@@ -20,15 +21,15 @@ interface PieArcOwnerState {
 }
 export declare function getPieArcUtilityClass(slot: string): string;
 export declare const pieArcClasses: PieArcClasses;
-export type PieArcProps = PieArcOwnerState & React.ComponentPropsWithoutRef<'path'> & {
-    startAngle: SpringValue<number>;
+export type PieArcProps = Omit<React.ComponentPropsWithoutRef<'path'>, 'id'> & PieArcOwnerState & {
+    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 = {
@@ -106,6 +106,7 @@ process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
     faded: _propTypes.default.oneOf(['global', 'none', 'series']),
     highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
   }),
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   isFaded: _propTypes.default.bool.isRequired,
   isHighlighted: _propTypes.default.bool.isRequired
 } : void 0;