@mui/x-charts 6.0.0-alpha.9 → 6.18.0

package/legacy/LineChart/LineChart.js

@@ -16,6 +16,16 @@ import { ChartsClipPath } from '../ChartsClipPath';
 import { LineHighlightPlot } from './LineHighlightPlot';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
+ */
 var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   var xAxis = props.xAxis,
     yAxis = props.yAxis,
@@ -95,7 +105,10 @@ var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
+    })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -122,11 +135,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -159,33 +176,33 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
-    itemWidth: PropTypes.number,
-    markSize: PropTypes.number,
-    offset: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number
-    }),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    spacing: PropTypes.number
+    slots: PropTypes.object
   }),
   margin: PropTypes.shape({
     bottom: PropTypes.number,
@@ -206,11 +223,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -219,6 +240,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   series: PropTypes.arrayOf(PropTypes.shape({
     area: PropTypes.bool,
     color: PropTypes.string,
+    connectNulls: PropTypes.bool,
     curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
     data: PropTypes.arrayOf(PropTypes.number),
     dataKey: PropTypes.string,
@@ -254,6 +276,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
@@ -269,11 +293,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -298,6 +326,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -306,6 +335,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -324,6 +356,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -332,6 +365,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,

package/legacy/LineChart/LineElement.js

@@ -58,6 +58,16 @@ LineElementPath.propTypes = {
   }).isRequired,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineElement API](https://mui.com/x/api/charts/line-element/)
+ */
 function LineElement(props) {
   var _slots$line;
   var id = props.id,

package/legacy/LineChart/LineHighlightElement.js

@@ -34,6 +34,16 @@ var HighlightElement = styled('circle', {
     fill: ownerState.color
   };
 });
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
+ */
 function LineHighlightElement(props) {
   var x = props.x,
     y = props.y,

package/legacy/LineChart/LineHighlightPlot.js

@@ -9,6 +9,16 @@ import { LineHighlightElement } from './LineHighlightElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { InteractionContext } from '../context/InteractionProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
+ */
 function LineHighlightPlot(props) {
   var _axis$x, _slots$lineHighlight;
   var slots = props.slots,
@@ -44,8 +54,9 @@ function LineHighlightPlot(props) {
           _series$seriesId$yAxi = _series$seriesId.yAxisKey,
           yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
           stackedData = _series$seriesId.stackedData,
+          data = _series$seriesId.data,
           disableHighlight = _series$seriesId.disableHighlight;
-        if (disableHighlight) {
+        if (disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
         var xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);

package/legacy/LineChart/LinePlot.js

@@ -10,6 +10,16 @@ import { LineElement } from './LineElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LinePlot API](https://mui.com/x/api/charts/line-plot/)
+ */
 function LinePlot(props) {
   var slots = props.slots,
     slotProps = props.slotProps,
@@ -31,36 +41,43 @@ function LinePlot(props) {
     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;
+          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 (xData === undefined) {
-          throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot"));
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot"));
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error("MUI: 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]);
         });
-        if (process.env.NODE_ENV !== 'production') {
-          if (xData.length !== stackedData.length) {
-            throw new Error("MUI: data length of the x axis (".concat(xData.length, " items) does not match length of series (").concat(stackedData.length, " items)"));
-          }
-        }
         var curve = getCurveFactory(series[seriesId].curve);
-        var d3Data = xData == null ? void 0 : xData.map(function (x, index) {
-          var _stackedData$index;
+        var formattedData = (_xData$map = xData == null ? void 0 : xData.map(function (x, index) {
           return {
             x: x,
-            y: (_stackedData$index = stackedData[index]) != null ? _stackedData$index : [0, 0]
+            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,

package/legacy/LineChart/MarkElement.js

@@ -38,7 +38,7 @@ var MarkElementPath = styled('path', {
   return {
     transform: "translate(".concat(ownerState.x, "px, ").concat(ownerState.y, "px)"),
     transformOrigin: "".concat(ownerState.x, "px ").concat(ownerState.y, "px"),
-    fill: theme.palette.background.paper,
+    fill: (theme.vars || theme).palette.background.paper,
     stroke: ownerState.color,
     strokeWidth: 2
   };
@@ -60,6 +60,16 @@ MarkElementPath.propTypes = {
   }).isRequired,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [MarkElement API](https://mui.com/x/api/charts/mark-element/)
+ */
 function MarkElement(props) {
   var _axis$x;
   var x = props.x,

package/legacy/LineChart/MarkPlot.js

@@ -9,6 +9,16 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+ */
 function MarkPlot(props) {
   var _slots$mark;
   var slots = props.slots,
@@ -38,6 +48,7 @@ function MarkPlot(props) {
           _series$seriesId$yAxi = _series$seriesId.yAxisKey,
           yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
           stackedData = _series$seriesId.stackedData,
+          data = _series$seriesId.data,
           _series$seriesId$show = _series$seriesId.showMark,
           showMark = _series$seriesId$show === void 0 ? true : _series$seriesId$show;
         if (showMark === false) {
@@ -63,27 +74,46 @@ function MarkPlot(props) {
           throw new Error("Axis of 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 y = stackedData[index][1];
+          var value = data[index] == null ? null : stackedData[index][1];
           return {
             x: xScale(x),
-            y: yScale(y),
+            y: value === null ? null : yScale(value),
             position: x,
-            value: y,
+            value: value,
             index: index
           };
-        }).filter(isInRange).map(function (_ref3) {
+        }).filter(function (_ref3) {
           var x = _ref3.x,
             y = _ref3.y,
             index = _ref3.index,
             position = _ref3.position,
             value = _ref3.value;
-          return showMark === true || showMark({
+          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
-          }) ? /*#__PURE__*/_jsx(Mark, _extends({
+          });
+        }).map(function (_ref4) {
+          var x = _ref4.x,
+            y = _ref4.y,
+            index = _ref4.index;
+          return /*#__PURE__*/_jsx(Mark, _extends({
             id: seriesId,
             dataIndex: index,
             shape: "circle",
@@ -91,7 +121,7 @@ function MarkPlot(props) {
             x: x,
             y: y,
             highlightScope: series[seriesId].highlightScope
-          }, slotProps == null ? void 0 : slotProps.mark), "".concat(seriesId, "-").concat(index)) : null;
+          }, slotProps == null ? void 0 : slotProps.mark), "".concat(seriesId, "-").concat(index));
         });
       });
     })

package/legacy/LineChart/formatter.js

@@ -22,7 +22,7 @@ var formatter = function formatter(params, dataset) {
           d3Dataset[index][id] = value;
         }
       });
-    } else if (dataset === undefined) {
+    } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
       throw new Error(["MUI: line series with id='".concat(id, "' has no data."), 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
@@ -36,7 +36,11 @@ var formatter = function formatter(params, dataset) {
       // Use dataKey if needed and available
       var dataKey = series[id].dataKey;
       return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
-    })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    })).value(function (d, key) {
+      var _d$key;
+      return (_d$key = d[key]) != null ? _d$key : 0;
+    }) // defaultize null value to 0
+    .order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach(function (id, index) {
       var dataKey = series[id].dataKey;
       completedSeries[id] = _extends({}, series[id], {
@@ -56,7 +60,7 @@ var formatter = function formatter(params, dataset) {
     seriesOrder: seriesOrder,
     stackingGroups: stackingGroups,
     series: defaultizeValueFormatter(completedSeries, function (v) {
-      return v.toLocaleString();
+      return v == null ? void 0 : v.toLocaleString();
     })
   };
 };

package/legacy/PieChart/PieArc.js

@@ -1,15 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded"];
+var _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "onClick", "isFaded", "isHighlighted", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
 import * as React from 'react';
 import { arc as d3Arc } from 'd3-shape';
-import PropTypes from 'prop-types';
+import { animated, to } from '@react-spring/web';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { InteractionContext } from '../context/InteractionProvider';
-import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPieArcUtilityClass(slot) {
   return generateUtilityClass('MuiPieArc', slot);
@@ -25,54 +24,36 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getPieArcUtilityClass, classes);
 };
-var PieArcRoot = styled('path', {
+var PieArcRoot = styled(animated.path, {
   name: 'MuiPieArc',
   slot: 'Root',
   overridesResolver: function overridesResolver(_, styles) {
     return styles.arc;
   }
 })(function (_ref) {
-  var ownerState = _ref.ownerState,
-    theme = _ref.theme;
+  var theme = _ref.theme;
   return {
-    stroke: theme.palette.background.paper,
+    stroke: (theme.vars || theme).palette.background.paper,
     strokeWidth: 1,
-    strokeLinejoin: 'round',
-    fill: ownerState.color,
-    opacity: ownerState.isFaded ? 0.3 : 1
+    strokeLinejoin: 'round'
   };
 });
 export default function PieArc(props) {
-  var _attibuesOverride$inn, _attibuesOverride$out, _attibuesOverride$cor;
   var id = props.id,
     dataIndex = props.dataIndex,
     innerClasses = props.classes,
     color = props.color,
     highlightScope = props.highlightScope,
-    _props$innerRadius = props.innerRadius,
-    baseInnerRadius = _props$innerRadius === void 0 ? 0 : _props$innerRadius,
-    baseOuterRadius = props.outerRadius,
-    _props$cornerRadius = props.cornerRadius,
-    baseCornerRadius = _props$cornerRadius === void 0 ? 0 : _props$cornerRadius,
-    highlighted = props.highlighted,
-    _props$faded = props.faded,
-    faded = _props$faded === void 0 ? {
-      additionalRadius: -5
-    } : _props$faded,
+    onClick = props.onClick,
+    isFaded = props.isFaded,
+    isHighlighted = props.isHighlighted,
+    startAngle = props.startAngle,
+    endAngle = props.endAngle,
+    paddingAngle = props.paddingAngle,
+    innerRadius = props.innerRadius,
+    outerRadius = props.outerRadius,
+    cornerRadius = props.cornerRadius,
     other = _objectWithoutProperties(props, _excluded);
-  var getInteractionItemProps = useInteractionItemProps(highlightScope);
-  var _React$useContext = React.useContext(InteractionContext),
-    item = _React$useContext.item;
-  var isHighlighted = getIsHighlighted(item, {
-    type: 'pie',
-    seriesId: id,
-    dataIndex: dataIndex
-  }, highlightScope);
-  var isFaded = !isHighlighted && getIsFaded(item, {
-    type: 'pie',
-    seriesId: id,
-    dataIndex: dataIndex
-  }, highlightScope);
   var ownerState = {
     id: id,
     dataIndex: dataIndex,
@@ -82,37 +63,24 @@ export default function PieArc(props) {
     isHighlighted: isHighlighted
   };
   var classes = useUtilityClasses(ownerState);
-  var attibuesOverride = _extends({
-    additionalRadius: 0
-  }, isFaded && faded || isHighlighted && highlighted || {});
-  var innerRadius = Math.max(0, (_attibuesOverride$inn = attibuesOverride.innerRadius) != null ? _attibuesOverride$inn : baseInnerRadius);
-  var outerRadius = Math.max(0, (_attibuesOverride$out = attibuesOverride.outerRadius) != null ? _attibuesOverride$out : baseOuterRadius + attibuesOverride.additionalRadius);
-  var cornerRadius = (_attibuesOverride$cor = attibuesOverride.cornerRadius) != null ? _attibuesOverride$cor : baseCornerRadius;
+  var getInteractionItemProps = useInteractionItemProps(highlightScope);
   return /*#__PURE__*/_jsx(PieArcRoot, _extends({
-    d: d3Arc().cornerRadius(cornerRadius)(_extends({}, other, {
-      innerRadius: innerRadius,
-      outerRadius: outerRadius
-    })),
+    d: to([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], function (sA, eA, pA, iR, oR, cR) {
+      return d3Arc().cornerRadius(cR)({
+        padAngle: pA,
+        startAngle: sA,
+        endAngle: eA,
+        innerRadius: iR,
+        outerRadius: oR
+      });
+    }),
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
     className: classes.root
-  }, getInteractionItemProps({
+  }, other, getInteractionItemProps({
     type: 'pie',
     seriesId: id,
     dataIndex: dataIndex
   })));
-}
-process.env.NODE_ENV !== "production" ? PieArc.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,
-  cornerRadius: PropTypes.number,
-  dataIndex: PropTypes.number.isRequired,
-  highlightScope: PropTypes.shape({
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  }),
-  innerRadius: PropTypes.number,
-  outerRadius: PropTypes.number.isRequired
-} : void 0;
+}