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

package/legacy/LineChart/LineHighlightElement.js

@@ -59,19 +59,21 @@ function LineHighlightElement(props) {
     y: y
   };
   var classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(HighlightElement, _extends({}, other, {
+  return /*#__PURE__*/_jsx(HighlightElement, _extends({
+    pointerEvents: "none",
     ownerState: ownerState,
     className: classes.root,
     cx: 0,
     cy: 0,
     r: other.r === undefined ? 5 : other.r
-  }));
+  }, other));
 }
 process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  classes: PropTypes.object
+  classes: PropTypes.object,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
 } : void 0;
 export { LineHighlightElement };

package/legacy/LineChart/LinePlot.js

@@ -1,6 +1,6 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["slots", "slotProps"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from 'd3-shape';
@@ -11,6 +11,68 @@ import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useAggregatedData = function useAggregatedData() {
+  var seriesData = React.useContext(SeriesContext).line;
+  var axisData = React.useContext(CartesianContext);
+  if (seriesData === undefined) {
+    return [];
+  }
+  var series = seriesData.series,
+    stackingGroups = seriesData.stackingGroups;
+  var xAxis = axisData.xAxis,
+    yAxis = axisData.yAxis,
+    xAxisIds = axisData.xAxisIds,
+    yAxisIds = axisData.yAxisIds;
+  var defaultXAxisId = xAxisIds[0];
+  var defaultYAxisId = yAxisIds[0];
+  return stackingGroups.flatMap(function (_ref) {
+    var groupIds = _ref.ids;
+    return groupIds.flatMap(function (seriesId) {
+      var _xData$map;
+      var _series$seriesId = series[seriesId],
+        _series$seriesId$xAxi = _series$seriesId.xAxisKey,
+        xAxisKey = _series$seriesId$xAxi === void 0 ? defaultXAxisId : _series$seriesId$xAxi,
+        _series$seriesId$yAxi = _series$seriesId.yAxisKey,
+        yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
+        stackedData = _series$seriesId.stackedData,
+        data = _series$seriesId.data,
+        connectNulls = _series$seriesId.connectNulls;
+      var xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
+      var yScale = yAxis[yAxisKey].scale;
+      var xData = xAxis[xAxisKey].data;
+      if (process.env.NODE_ENV !== 'production') {
+        if (xData === undefined) {
+          throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " 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 (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)."));
+        }
+      }
+      var linePath = d3Line().x(function (d) {
+        return xScale(d.x);
+      }).defined(function (_, i) {
+        return connectNulls || data[i] != null;
+      }).y(function (d) {
+        return yScale(d.y[1]);
+      });
+      var formattedData = (_xData$map = xData == null ? void 0 : xData.map(function (x, index) {
+        return {
+          x: x,
+          y: stackedData[index]
+        };
+      })) != null ? _xData$map : [];
+      var d3Data = connectNulls ? formattedData.filter(function (_, i) {
+        return data[i] != null;
+      }) : formattedData;
+      var d = linePath.curve(getCurveFactory(series[seriesId].curve))(d3Data) || '';
+      return _extends({}, series[seriesId], {
+        d: d,
+        seriesId: seriesId
+      });
+    });
+  });
+};
+
 /**
  * Demos:
  *
@@ -24,70 +86,31 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function LinePlot(props) {
   var slots = props.slots,
     slotProps = props.slotProps,
+    skipAnimation = props.skipAnimation,
+    onItemClick = props.onItemClick,
     other = _objectWithoutProperties(props, _excluded);
-  var seriesData = React.useContext(SeriesContext).line;
-  var axisData = React.useContext(CartesianContext);
-  if (seriesData === undefined) {
-    return null;
-  }
-  var series = seriesData.series,
-    stackingGroups = seriesData.stackingGroups;
-  var xAxis = axisData.xAxis,
-    yAxis = axisData.yAxis,
-    xAxisIds = axisData.xAxisIds,
-    yAxisIds = axisData.yAxisIds;
-  var defaultXAxisId = xAxisIds[0];
-  var defaultYAxisId = yAxisIds[0];
+  var completedData = useAggregatedData();
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: stackingGroups.flatMap(function (_ref) {
-      var groupIds = _ref.ids;
-      return groupIds.flatMap(function (seriesId) {
-        var _xData$map;
-        var _series$seriesId = series[seriesId],
-          _series$seriesId$xAxi = _series$seriesId.xAxisKey,
-          xAxisKey = _series$seriesId$xAxi === void 0 ? defaultXAxisId : _series$seriesId$xAxi,
-          _series$seriesId$yAxi = _series$seriesId.yAxisKey,
-          yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
-          stackedData = _series$seriesId.stackedData,
-          data = _series$seriesId.data,
-          connectNulls = _series$seriesId.connectNulls;
-        var xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
-        var yScale = yAxis[yAxisKey].scale;
-        var xData = xAxis[xAxisKey].data;
-        if (process.env.NODE_ENV !== 'production') {
-          if (xData === undefined) {
-            throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " 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 (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)."));
-          }
+    children: completedData.map(function (_ref2) {
+      var d = _ref2.d,
+        seriesId = _ref2.seriesId,
+        color = _ref2.color,
+        highlightScope = _ref2.highlightScope;
+      return /*#__PURE__*/_jsx(LineElement, {
+        id: seriesId,
+        d: d,
+        color: color,
+        highlightScope: highlightScope,
+        skipAnimation: skipAnimation,
+        slots: slots,
+        slotProps: slotProps,
+        onClick: onItemClick && function (event) {
+          return onItemClick(event, {
+            type: 'line',
+            seriesId: seriesId
+          });
         }
-        var linePath = d3Line().x(function (d) {
-          return xScale(d.x);
-        }).defined(function (_, i) {
-          return connectNulls || data[i] != null;
-        }).y(function (d) {
-          return yScale(d.y[1]);
-        });
-        var curve = getCurveFactory(series[seriesId].curve);
-        var formattedData = (_xData$map = xData == null ? void 0 : xData.map(function (x, index) {
-          return {
-            x: x,
-            y: stackedData[index]
-          };
-        })) != null ? _xData$map : [];
-        var d3Data = connectNulls ? formattedData.filter(function (_, i) {
-          return data[i] != null;
-        }) : formattedData;
-        return /*#__PURE__*/_jsx(LineElement, {
-          id: seriesId,
-          d: linePath.curve(curve)(d3Data) || undefined,
-          color: series[seriesId].color,
-          highlightScope: series[seriesId].highlightScope,
-          slots: slots,
-          slotProps: slotProps
-        }, seriesId);
-      });
+      }, seriesId);
     })
   }));
 }
@@ -96,6 +119,17 @@ process.env.NODE_ENV !== "production" ? LinePlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a line item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
+   */
+  onItemClick: PropTypes.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/legacy/LineChart/MarkElement.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "highlightScope"];
+var _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "highlightScope", "onClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -8,6 +8,7 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from 'd3-shape';
+import { animated, to, useSpring } from '@react-spring/web';
 import { getSymbol } from '../internals/utils';
 import { InteractionContext } from '../context/InteractionProvider';
 import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
@@ -26,7 +27,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getMarkElementUtilityClass, classes);
 };
-var MarkElementPath = styled('path', {
+var MarkElementPath = styled(animated.path, {
   name: 'MuiMarkElement',
   slot: 'Root',
   overridesResolver: function overridesResolver(_, styles) {
@@ -36,8 +37,6 @@ var MarkElementPath = styled('path', {
   var ownerState = _ref.ownerState,
     theme = _ref.theme;
   return {
-    transform: "translate(".concat(ownerState.x, "px, ").concat(ownerState.y, "px)"),
-    transformOrigin: "".concat(ownerState.x, "px ").concat(ownerState.y, "px"),
     fill: (theme.vars || theme).palette.background.paper,
     stroke: ownerState.color,
     strokeWidth: 2
@@ -54,9 +53,7 @@ MarkElementPath.propTypes = {
     color: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired,
     isFaded: PropTypes.bool.isRequired,
-    isHighlighted: PropTypes.bool.isRequired,
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired
+    isHighlighted: PropTypes.bool.isRequired
   }).isRequired,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };
@@ -80,6 +77,8 @@ function MarkElement(props) {
     shape = props.shape,
     dataIndex = props.dataIndex,
     highlightScope = props.highlightScope,
+    onClick = props.onClick,
+    skipAnimation = props.skipAnimation,
     other = _objectWithoutProperties(props, _excluded);
   var getInteractionItemProps = useInteractionItemProps(highlightScope);
   var _React$useContext = React.useContext(InteractionContext),
@@ -93,20 +92,33 @@ function MarkElement(props) {
     type: 'line',
     seriesId: id
   }, highlightScope);
+  var position = useSpring({
+    x: x,
+    y: y,
+    immediate: skipAnimation
+  });
   var ownerState = {
     id: id,
     classes: innerClasses,
     isHighlighted: isHighlighted,
     isFaded: isFaded,
-    color: color,
-    x: x,
-    y: y
+    color: color
   };
   var classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, {
+    style: {
+      transform: to([position.x, position.y], function (pX, pY) {
+        return "translate(".concat(pX, "px, ").concat(pY, "px)");
+      }),
+      transformOrigin: to([position.x, position.y], function (pX, pY) {
+        return "".concat(pX, "px ").concat(pY, "px");
+      })
+    },
     ownerState: ownerState,
     className: classes.root,
-    d: d3Symbol(d3SymbolsFill[getSymbol(shape)])()
+    d: d3Symbol(d3SymbolsFill[getSymbol(shape)])(),
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset'
   }, getInteractionItemProps({
     type: 'line',
     seriesId: id,
@@ -127,9 +139,15 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
   }),
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The shape of the marker.
    */
-  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired
+  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool
 } : void 0;
 export { MarkElement };

package/legacy/LineChart/MarkPlot.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["slots", "slotProps"];
+var _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
@@ -9,6 +9,8 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
+import { DrawingContext } from '../context/DrawingProvider';
+import { cleanId } from '../internals/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -24,9 +26,13 @@ function MarkPlot(props) {
   var _slots$mark;
   var slots = props.slots,
     slotProps = props.slotProps,
+    skipAnimation = props.skipAnimation,
+    onItemClick = props.onItemClick,
     other = _objectWithoutProperties(props, _excluded);
   var seriesData = React.useContext(SeriesContext).line;
   var axisData = React.useContext(CartesianContext);
+  var _React$useContext = React.useContext(DrawingContext),
+    chartId = _React$useContext.chartId;
   var Mark = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : MarkElement;
   if (seriesData === undefined) {
     return null;
@@ -42,7 +48,7 @@ function MarkPlot(props) {
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
     children: stackingGroups.flatMap(function (_ref) {
       var groupIds = _ref.ids;
-      return groupIds.flatMap(function (seriesId) {
+      return groupIds.map(function (seriesId) {
         var _series$seriesId = series[seriesId],
           _series$seriesId$xAxi = _series$seriesId.xAxisKey,
           xAxisKey = _series$seriesId$xAxi === void 0 ? defaultXAxisId : _series$seriesId$xAxi,
@@ -74,57 +80,70 @@ function MarkPlot(props) {
         if (xData === undefined) {
           throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " should have data property to be able to display a line plot."));
         }
-        return xData == null ? void 0 : xData.map(function (x, index) {
-          var value = data[index] == null ? null : stackedData[index][1];
-          return {
-            x: xScale(x),
-            y: value === null ? null : yScale(value),
-            position: x,
-            value: value,
-            index: index
-          };
-        }).filter(function (_ref3) {
-          var x = _ref3.x,
-            y = _ref3.y,
-            index = _ref3.index,
-            position = _ref3.position,
-            value = _ref3.value;
-          if (value === null || y === null) {
-            // Remove missing data point
-            return false;
-          }
-          if (!isInRange({
-            x: x,
-            y: y
-          })) {
-            // Remove out of range
-            return false;
-          }
-          if (showMark === true) {
-            return true;
-          }
-          return showMark({
-            x: x,
-            y: y,
-            index: index,
-            position: position,
-            value: value
-          });
-        }).map(function (_ref4) {
-          var x = _ref4.x,
-            y = _ref4.y,
-            index = _ref4.index;
-          return /*#__PURE__*/_jsx(Mark, _extends({
-            id: seriesId,
-            dataIndex: index,
-            shape: "circle",
-            color: series[seriesId].color,
-            x: x,
-            y: y // Don't knwo why TS don't get from the filter that y can't be null
-            ,
-            highlightScope: series[seriesId].highlightScope
-          }, slotProps == null ? void 0 : slotProps.mark), "".concat(seriesId, "-").concat(index));
-        });
+        var clipId = cleanId("".concat(chartId, "-").concat(seriesId, "-line-clip")); // We assume that if displaying line mark, the line will also be rendered
+
+        return /*#__PURE__*/_jsx("g", {
+          clipPath: "url(#".concat(clipId, ")"),
+          children: xData == null ? void 0 : xData.map(function (x, index) {
+            var value = data[index] == null ? null : stackedData[index][1];
+            return {
+              x: xScale(x),
+              y: value === null ? null : yScale(value),
+              position: x,
+              value: value,
+              index: index
+            };
+          }).filter(function (_ref3) {
+            var x = _ref3.x,
+              y = _ref3.y,
+              index = _ref3.index,
+              position = _ref3.position,
+              value = _ref3.value;
+            if (value === null || y === null) {
+              // Remove missing data point
+              return false;
+            }
+            if (!isInRange({
+              x: x,
+              y: y
+            })) {
+              // Remove out of range
+              return false;
+            }
+            if (showMark === true) {
+              return true;
+            }
+            return showMark({
+              x: x,
+              y: y,
+              index: index,
+              position: position,
+              value: value
+            });
+          }).map(function (_ref4) {
+            var x = _ref4.x,
+              y = _ref4.y,
+              index = _ref4.index;
+            return /*#__PURE__*/_jsx(Mark, _extends({
+              id: seriesId,
+              dataIndex: index,
+              shape: "circle",
+              color: series[seriesId].color,
+              x: x,
+              y: y // Don't know why TS doesn't get from the filter that y can't be null
+              ,
+              highlightScope: series[seriesId].highlightScope,
+              skipAnimation: skipAnimation,
+              onClick: onItemClick && function (event) {
+                return onItemClick(event, {
+                  type: 'line',
+                  seriesId: seriesId,
+                  dataIndex: index
+                });
+              }
+            }, slotProps == null ? void 0 : slotProps.mark), "".concat(seriesId, "-").concat(index));
+          })
+        }, seriesId);
       });
     })
   }));
@@ -134,6 +153,17 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a line mark item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+   */
+  onItemClick: PropTypes.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/legacy/LineChart/formatter.js

@@ -75,7 +75,7 @@ var formatter = function formatter(params, dataset) {
     seriesOrder: seriesOrder,
     stackingGroups: stackingGroups,
     series: defaultizeValueFormatter(completedSeries, function (v) {
-      return v === null ? '' : v.toLocaleString();
+      return v == null ? '' : v.toLocaleString();
     })
   };
 };

package/legacy/LineChart/index.js

@@ -4,6 +4,8 @@ export * from './AreaPlot';
 export * from './MarkPlot';
 export * from './LineHighlightPlot';
 export * from './AreaElement';
+export * from './AnimatedArea';
 export * from './LineElement';
+export * from './AnimatedLine';
 export * from './MarkElement';
 export * from './LineHighlightElement';

package/legacy/PieChart/PieArc.js

@@ -96,6 +96,7 @@ process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
   }),
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   isFaded: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired
 } : void 0;

package/legacy/PieChart/PieArcLabel.js

@@ -105,6 +105,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   formattedArcLabel: PropTypes.string,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   isFaded: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired
 } : void 0;

package/legacy/PieChart/PieArcLabelPlot.js

@@ -159,7 +159,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
   }),
-  id: PropTypes.string.isRequired,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The radius between circle center and the begining of the arc.
    * @default 0
@@ -175,7 +175,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   paddingAngle: PropTypes.number,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: PropTypes.bool,

package/legacy/PieChart/PieArcPlot.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onClick", "skipAnimation"],
+var _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "arcLabelRadius", "outerRadius", "cornerRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -28,7 +28,7 @@ function PieArcPlot(props) {
       additionalRadius: -5
     } : _props$faded,
     data = props.data,
-    onClick = props.onClick,
+    onItemClick = props.onItemClick,
     skipAnimation = props.skipAnimation,
     other = _objectWithoutProperties(props, _excluded);
   var transformedData = useTransformData({
@@ -73,8 +73,8 @@ function PieArcPlot(props) {
         highlightScope: highlightScope,
         isFaded: item.isFaded,
         isHighlighted: item.isHighlighted,
-        onClick: onClick && function (event) {
-          onClick(event, {
+        onClick: onItemClick && function (event) {
+          onItemClick(event, {
             type: 'pie',
             seriesId: id,
             dataIndex: index
@@ -139,7 +139,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
   }),
-  id: PropTypes.string.isRequired,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The radius between circle center and the begining of the arc.
    * @default 0
@@ -151,7 +151,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
    * @param {DefaultizedPieValueType} item The pie item.
    */
-  onClick: PropTypes.func,
+  onItemClick: PropTypes.func,
   /**
    * The radius between circle center and the end of the arc.
    */
@@ -162,7 +162,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   paddingAngle: PropTypes.number,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: PropTypes.bool,