@mui/x-charts 6.0.0-alpha.1 → 6.0.0-alpha.3

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './constants';
 export * from './context';
+export * from './hooks';
 export * from './colorPalettes';
 export * from './models';
 export * from './ChartsClipPath';
@@ -10,6 +11,7 @@ export * from './ChartsTooltip';
 export * from './ChartsAxisHighlight';
 export * from './BarChart';
 export * from './LineChart';
+export * from './PieChart';
 export * from './ScatterChart';
 export * from './ChartContainer';
 export * from './ResponsiveChartContainer';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.1
+ * @mui/x-charts v6.0.0-alpha.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -32,6 +32,17 @@ Object.keys(_context).forEach(function (key) {
     }
   });
 });
+var _hooks = require("./hooks");
+Object.keys(_hooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _hooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _hooks[key];
+    }
+  });
+});
 var _colorPalettes = require("./colorPalettes");
 Object.keys(_colorPalettes).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -142,6 +153,17 @@ Object.keys(_LineChart).forEach(function (key) {
     }
   });
 });
+var _PieChart = require("./PieChart");
+Object.keys(_PieChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PieChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PieChart[key];
+    }
+  });
+});
 var _ScatterChart = require("./ScatterChart");
 Object.keys(_ScatterChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/defaultizeColor.d.ts

@@ -1,5 +1,40 @@
 import { AllSeriesType } from '../models/seriesType';
 export declare function defaultizeColor(series: AllSeriesType, seriesIndex: number, colors?: string[]): {
+    data: {
+        color: string;
+        label?: string | undefined;
+        value: number;
+        id?: string | number | undefined;
+    }[];
+    type: "pie";
+    innerRadius?: number | undefined;
+    outerRadius?: number | undefined;
+    cornerRadius?: number | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: import("../models/seriesType").ChartsPieSorting | undefined;
+    arcLabel?: "label" | "value" | "formattedValue" | ((item: import("../models/seriesType").DefaultizedPieValueType) => string) | undefined;
+    arcLabelMinAngle?: number | undefined;
+    cx?: number | undefined;
+    cy?: number | undefined;
+    highlighted?: {
+        additionalRadius?: number | undefined;
+        innerRadius?: number | undefined;
+        outerRadius?: number | undefined;
+        cornerRadius?: number | undefined;
+    } | undefined;
+    faded?: {
+        additionalRadius?: number | undefined;
+        innerRadius?: number | undefined;
+        outerRadius?: number | undefined;
+        cornerRadius?: number | undefined;
+    } | undefined;
+    id?: string | undefined;
+    color?: string | undefined;
+    valueFormatter?: ((value: import("../models/helpers").MakeOptional<import("../models/seriesType").PieValueType, "id">) => string) | undefined;
+    highlightScope?: Partial<import("..").HighlightScope> | undefined;
+} | {
     type: "bar";
     data: number[];
     label?: string | undefined;

package/internals/defaultizeColor.js

@@ -8,6 +8,13 @@ exports.defaultizeColor = defaultizeColor;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const DEFAULT_COLORS = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
 function defaultizeColor(series, seriesIndex, colors = DEFAULT_COLORS) {
+  if (series.type === 'pie') {
+    return (0, _extends2.default)({}, series, {
+      data: series.data.map((d, index) => (0, _extends2.default)({
+        color: colors[index % colors.length]
+      }, d))
+    });
+  }
   return (0, _extends2.default)({
     color: colors[seriesIndex % colors.length]
   }, series);

package/internals/getScale.d.ts

@@ -0,0 +1,2 @@
+import { ContinuouseScaleName, D3ContinuouseScale } from '../models/axis';
+export declare function getScale(scaleType: ContinuouseScaleName, domain: any[], range: any[]): D3ContinuouseScale;

package/internals/getScale.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getScale = getScale;
+var _d3Scale = require("d3-scale");
+function getScale(scaleType, domain, range) {
+  switch (scaleType) {
+    case 'log':
+      return (0, _d3Scale.scaleLog)(domain, range);
+    case 'pow':
+      return (0, _d3Scale.scalePow)(domain, range);
+    case 'sqrt':
+      return (0, _d3Scale.scaleSqrt)(domain, range);
+    case 'time':
+      return (0, _d3Scale.scaleTime)(domain, range);
+    case 'utc':
+      return (0, _d3Scale.scaleUtc)(domain, range);
+    default:
+      return (0, _d3Scale.scaleLinear)(domain, range);
+  }
+}

package/internals/isBandScale.d.ts

@@ -0,0 +1,3 @@
+import type { ScaleBand, ScalePoint } from 'd3-scale';
+import { D3Scale } from '../models/axis';
+export declare function isBandScale(scale: D3Scale): scale is ScaleBand<any> | ScalePoint<any>;

package/internals/isBandScale.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isBandScale = isBandScale;
+function isBandScale(scale) {
+  return scale.bandwidth !== undefined;
+}

package/legacy/BarChart/BarChart.js

@@ -13,7 +13,7 @@ import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function BarChart(props) {
+var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   var xAxis = props.xAxis,
     yAxis = props.yAxis,
     series = props.series,
@@ -33,6 +33,7 @@ function BarChart(props) {
   var id = useId();
   var clipPathId = "".concat(id, "-clip-path");
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(function (s) {
       return _extends({
         type: 'bar'
@@ -70,7 +71,7 @@ function BarChart(props) {
       id: clipPathId
     }), children]
   });
-}
+});
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -128,6 +129,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
+    hidden: PropTypes.bool,
     itemWidth: PropTypes.number,
     markSize: PropTypes.number,
     offset: PropTypes.shape({

package/legacy/BarChart/BarPlot.js

@@ -2,9 +2,36 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { isBandScale } from '../hooks/useScale';
 import { BarElement } from './BarElement';
+import { isBandScaleConfig } from '../models/axis';
+
+/**
+ * Solution of the equations
+ * W = barWidth * N + offset * (N-1)
+ * offset / (offset + barWidth) = r
+ * @param bandWidth The width available to place bars.
+ * @param numberOfGroups The number of bars to place in that space.
+ * @param gapRatio The ratio of the gap between bars over the bar width.
+ * @returns The bar width and the offset between bars.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+function getBandSize(_ref) {
+  var W = _ref.bandWidth,
+    N = _ref.numberOfGroups,
+    r = _ref.gapRatio;
+  if (r === 0) {
+    return {
+      barWidth: W / N,
+      offset: 0
+    };
+  }
+  var barWidth = W / (N + (N - 1) * r);
+  var offset = r * barWidth;
+  return {
+    barWidth: barWidth,
+    offset: offset
+  };
+}
 export function BarPlot() {
   var seriesData = React.useContext(SeriesContext).bar;
   var axisData = React.useContext(CartesianContext);
@@ -20,25 +47,32 @@ export function BarPlot() {
   var defaultXAxisId = xAxisIds[0];
   var defaultYAxisId = yAxisIds[0];
   return /*#__PURE__*/_jsx(React.Fragment, {
-    children: stackingGroups.flatMap(function (_ref, groupIndex) {
-      var groupIds = _ref.ids;
+    children: stackingGroups.flatMap(function (_ref2, groupIndex) {
+      var groupIds = _ref2.ids;
       return groupIds.flatMap(function (seriesId) {
         var _series$seriesId$xAxi, _series$seriesId$yAxi;
         var xAxisKey = (_series$seriesId$xAxi = series[seriesId].xAxisKey) != null ? _series$seriesId$xAxi : defaultXAxisId;
         var yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
-        var xScale = xAxis[xAxisKey].scale;
-        var yScale = yAxis[yAxisKey].scale;
-        if (!isBandScale(xScale)) {
-          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud be of type \"band\" to display the bar series ").concat(stackingGroups));
+        var xAxisConfig = xAxis[xAxisKey];
+        var yAxisConfig = yAxis[yAxisKey];
+        if (!isBandScaleConfig(xAxisConfig)) {
+          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
         }
         if (xAxis[xAxisKey].data === undefined) {
           throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
         }
+        var xScale = xAxisConfig.scale;
+        var yScale = yAxisConfig.scale;
 
         // Currently assuming all bars are vertical
         var bandWidth = xScale.bandwidth();
-        var barWidth = 0.9 * bandWidth / stackingGroups.length;
-        var offset = 0.05 * bandWidth;
+        var _getBandSize = getBandSize({
+            bandWidth: bandWidth,
+            numberOfGroups: stackingGroups.length,
+            gapRatio: xAxisConfig.barGapRatio
+          }),
+          barWidth = _getBandSize.barWidth,
+          offset = _getBandSize.offset;
 
         // @ts-ignore TODO: fix when adding a correct API for customisation
         var _series$seriesId = series[seriesId],
@@ -51,7 +85,7 @@ export function BarPlot() {
           return /*#__PURE__*/_jsx(BarElement, {
             id: seriesId,
             dataIndex: dataIndex,
-            x: xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + groupIndex * barWidth + offset,
+            x: xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + groupIndex * (barWidth + offset),
             y: yScale(value),
             height: yScale(baseline) - yScale(value),
             width: barWidth,

package/legacy/BarChart/legend.js

@@ -0,0 +1,15 @@
+var legendGetter = function legendGetter(params) {
+  var seriesOrder = params.seriesOrder,
+    series = params.series;
+  var data = seriesOrder.map(function (seriesId) {
+    return {
+      color: series[seriesId].color,
+      label: series[seriesId].label,
+      id: seriesId
+    };
+  });
+  return data.filter(function (item) {
+    return item.label !== undefined;
+  });
+};
+export default legendGetter;

package/legacy/ChartContainer/index.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
 import { DrawingProvider } from '../context/DrawingProvider';
 import { SeriesContextProvider } from '../context/SeriesContextProvider';
 import { InteractionProvider } from '../context/InteractionProvider';
@@ -6,7 +7,7 @@ import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianContextProvider';
 import { HighlightProvider } from '../context/HighlightProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function ChartContainer(props) {
+export var ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   var width = props.width,
     height = props.height,
     series = props.series,
@@ -19,12 +20,13 @@ export function ChartContainer(props) {
     desc = props.desc,
     disableAxisListener = props.disableAxisListener,
     children = props.children;
-  var ref = React.useRef(null);
+  var svgRef = React.useRef(null);
+  var handleRef = useForkRef(ref, svgRef);
   return /*#__PURE__*/_jsx(DrawingProvider, {
     width: width,
     height: height,
     margin: margin,
-    svgRef: ref,
+    svgRef: svgRef,
     children: /*#__PURE__*/_jsx(SeriesContextProvider, {
       series: series,
       colors: colors,
@@ -36,7 +38,7 @@ export function ChartContainer(props) {
             children: /*#__PURE__*/_jsx(ChartsSurface, {
               width: width,
               height: height,
-              ref: ref,
+              ref: handleRef,
               sx: sx,
               title: title,
               desc: desc,
@@ -48,4 +50,4 @@ export function ChartContainer(props) {
       })
     })
   });
-}
+});

package/legacy/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -2,7 +2,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { getValueToPositionMapper, isBandScale } from '../hooks/useScale';
+import { getValueToPositionMapper } from '../hooks/useScale';
+import { isBandScale } from '../internals/isBandScale';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function ChartsAxisHighlight(props) {
@@ -22,7 +23,7 @@ function ChartsAxisHighlight(props) {
   var getXPosition = getValueToPositionMapper(xScale);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [xAxisHighlight === 'band' && axis.x !== null && isBandScale(xScale) && /*#__PURE__*/_jsx("path", {
-      d: "M ".concat(xScale(axis.x.value), " ").concat(yScale.range()[0], " L ").concat(xScale(axis.x.value) + xScale.bandwidth(), " ").concat(yScale.range()[0], " L ").concat(xScale(axis.x.value) + xScale.bandwidth(), " ").concat(yScale.range()[1], " L ").concat(xScale(axis.x.value), " ").concat(yScale.range()[1], " Z"),
+      d: "M ".concat(xScale(axis.x.value) - (xScale.step() - xScale.bandwidth()) / 2, " ").concat(yScale.range()[0], " l ").concat(xScale.step(), " 0 l 0 ").concat(yScale.range()[1] - yScale.range()[0], " l ").concat(-xScale.step(), " 0 Z"),
       fill: "gray",
       fillOpacity: 0.1,
       style: {

package/legacy/ChartsLegend/ChartsLegend.js

@@ -143,13 +143,17 @@ export function ChartsLegend(inProps) {
   });
   var position = props.position,
     direction = props.direction,
-    offset = props.offset;
+    offset = props.offset,
+    hidden = props.hidden;
   var theme = useTheme();
   var classes = useUtilityClasses(_extends({}, props, {
     theme: theme
   }));
   var drawingArea = React.useContext(DrawingContext);
   var series = React.useContext(SeriesContext);
+  if (hidden) {
+    return null;
+  }
   var seriesToDisplay = getSeriesToDisplay(series);
   return /*#__PURE__*/_jsx(ChartsLegendRoot, {
     ownerState: {

package/legacy/ChartsLegend/utils.js

@@ -1,9 +1,15 @@
+import getBarLegend from '../BarChart/legend';
+import getScatterLegend from '../ScatterChart/legend';
+import getLineLegend from '../LineChart/legend';
+import getPieLegend from '../PieChart/legend';
+var legendGetter = {
+  bar: getBarLegend,
+  scatter: getScatterLegend,
+  line: getLineLegend,
+  pie: getPieLegend
+};
 export function getSeriesToDisplay(series) {
-  return Object.values(series).flatMap(function (s) {
-    return s.seriesOrder.map(function (seriesId) {
-      return s.series[seriesId];
-    });
-  }).filter(function (s) {
-    return s.label !== undefined;
+  return Object.keys(series).flatMap(function (seriesType) {
+    return legendGetter[seriesType](series[seriesType]);
   });
 }

package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -80,7 +80,9 @@ export function ChartsAxisTooltipContent(props) {
   var USED_X_AXIS_ID = xAxisIds[0];
   var relevantSeries = React.useMemo(function () {
     var rep = [];
-    Object.keys(series).forEach(function (seriesType) {
+    Object.keys(series).filter(function (seriesType) {
+      return ['bar', 'line', 'scatter'].includes(seriesType);
+    }).forEach(function (seriesType) {
       series[seriesType].seriesOrder.forEach(function (seriesId) {
         var axisKey = series[seriesType].series[seriesId].xAxisKey;
         if (axisKey === undefined || axisKey === USED_X_AXIS_ID) {

package/legacy/ChartsTooltip/ChartsItemTooltipContent.js

@@ -4,7 +4,6 @@ import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltip
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function DefaultChartsItemContent(props) {
-  var _series$label;
   var series = props.series,
     itemData = props.itemData,
     sx = props.sx,
@@ -12,8 +11,16 @@ export function DefaultChartsItemContent(props) {
   if (itemData.dataIndex === undefined) {
     return null;
   }
-  var displayedLabel = (_series$label = series.label) != null ? _series$label : null;
-  var color = series.color;
+  var _ref = series.type === 'pie' ? {
+      color: series.data[itemData.dataIndex].color,
+      displayedLabel: series.data[itemData.dataIndex].label
+    } : {
+      color: series.color,
+      displayedLabel: series.label
+    },
+    displayedLabel = _ref.displayedLabel,
+    color = _ref.color;
+
   // TODO: Manage to let TS understand series.data and series.valueFormatter are coherent
   // @ts-ignore
   var formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);

package/legacy/LineChart/LineChart.js

@@ -15,7 +15,7 @@ import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function LineChart(props) {
+var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   var xAxis = props.xAxis,
     yAxis = props.yAxis,
     series = props.series,
@@ -38,6 +38,7 @@ function LineChart(props) {
   var id = useId();
   var clipPathId = "".concat(id, "-clip-path");
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(function (s) {
       return _extends({
         type: 'line'
@@ -73,7 +74,7 @@ function LineChart(props) {
       id: clipPathId
     }), children]
   });
-}
+});
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -131,6 +132,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
+    hidden: PropTypes.bool,
     itemWidth: PropTypes.number,
     markSize: PropTypes.number,
     offset: PropTypes.shape({

package/legacy/LineChart/legend.js

@@ -0,0 +1,15 @@
+var legendGetter = function legendGetter(params) {
+  var seriesOrder = params.seriesOrder,
+    series = params.series;
+  var data = seriesOrder.map(function (seriesId) {
+    return {
+      color: series[seriesId].color,
+      label: series[seriesId].label,
+      id: seriesId
+    };
+  });
+  return data.filter(function (item) {
+    return item.label !== undefined;
+  });
+};
+export default legendGetter;

package/legacy/PieChart/PieArc.js

@@ -0,0 +1,118 @@
+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"];
+import * as React from 'react';
+import { arc as d3Arc } from 'd3-shape';
+import PropTypes from 'prop-types';
+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 { jsx as _jsx } from "react/jsx-runtime";
+export function getPieArcUtilityClass(slot) {
+  return generateUtilityClass('MuiPieArc', slot);
+}
+export var pieArcClasses = generateUtilityClasses('MuiPieArc', ['root', 'highlighted', 'faded']);
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes,
+    id = ownerState.id,
+    isFaded = ownerState.isFaded,
+    isHighlighted = ownerState.isHighlighted;
+  var slots = {
+    root: ['root', "series-".concat(id), isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return composeClasses(slots, getPieArcUtilityClass, classes);
+};
+var PieArcRoot = styled('path', {
+  name: 'MuiPieArc',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.arc;
+  }
+})(function (_ref) {
+  var ownerState = _ref.ownerState,
+    theme = _ref.theme;
+  return {
+    stroke: theme.palette.background.paper,
+    strokeWidth: 1,
+    strokeLinejoin: 'round',
+    fill: ownerState.color,
+    opacity: ownerState.isFaded ? 0.3 : 1
+  };
+});
+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,
+    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,
+    classes: innerClasses,
+    color: color,
+    isFaded: isFaded,
+    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;
+  return /*#__PURE__*/_jsx(PieArcRoot, _extends({
+    d: d3Arc().cornerRadius(cornerRadius)(_extends({}, other, {
+      innerRadius: innerRadius,
+      outerRadius: outerRadius
+    })),
+    ownerState: ownerState,
+    className: classes.root
+  }, 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;