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

package/models/seriesType/pie.d.ts

@@ -1,5 +1,105 @@
-import { CartesianSeriesType, CommonSeriesType } from './common';
-export interface PieSeriesType extends CommonSeriesType<number>, CartesianSeriesType {
+import { PieArcDatum as D3PieArcDatum } from 'd3-shape';
+import { DefaultizedProps } from '../helpers';
+import { CommonDefaultizedProps, CommonSeriesType } from './common';
+export type PieValueType = {
+    id: string | number;
+    value: number;
+    label?: string;
+    color?: string;
+};
+export type DefaultizedPieValueType = PieValueType & D3PieArcDatum<any> & {
+    color: string;
+    formattedValue: string;
+};
+export type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number);
+export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Tdata> {
     type: 'pie';
-    data: number[];
+    data: Tdata[];
+    /**
+     * The radius between circle center and the begining of the arc.
+     * @default 0
+     */
+    innerRadius?: number;
+    /**
+     * The radius between circle center and the end of the arc.
+     * @default R_max The maximal radius that fit into the drawing area.
+     */
+    outerRadius?: number;
+    /**
+     * The radius applied to arc corners (similar to border radius).
+     * @default 0
+     */
+    cornerRadius?: number;
+    /**
+     * The start angle (deg) of the first item.
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * The end angle (deg) of the last item.
+     * @default 360
+     */
+    endAngle?: number;
+    /**
+     * The padding angle (deg) between two arcs.
+     * @default 0
+     */
+    paddingAngle?: number;
+    sortingValues?: ChartsPieSorting;
+    /**
+     * The label displayed into the arc.
+     */
+    arcLabel?: 'formattedValue' | 'label' | 'value' | ((item: DefaultizedPieValueType) => string);
+    /**
+     * The minimal angle required to display the arc label.
+     */
+    arcLabelMinAngle?: number;
+    /**
+     * The x coordinate of the pie center.
+     * @default width/2 the center of the drawing area.
+     */
+    cx?: number;
+    /**
+     * The y coordinate of the pie center.
+     * @default height/2 the center of the drawing area.
+     */
+    cy?: number;
+    /**
+     * Override the arc attibutes when it is highlighted.
+     */
+    highlighted?: {
+        /**
+         * Value added to the default `outerRadius`.
+         * Can be negative. It is ignored if you provide a `highlighted.outerRadius` value.
+         */
+        additionalRadius?: number;
+        innerRadius?: number;
+        outerRadius?: number;
+        cornerRadius?: number;
+    };
+    /**
+     * Override the arc attibutes when it is faded.
+     */
+    faded?: {
+        /**
+         * Value added to the default `outerRadius`.
+         * Can be negative. It is ignored if you provide a `faded.outerRadius` value.
+         */
+        additionalRadius?: number;
+        innerRadius?: number;
+        outerRadius?: number;
+        cornerRadius?: number;
+    };
+}
+/**
+ * An object that allows to identify a single pie slice.
+ * Used for item interaction
+ */
+export type PieItemIdentifier = {
+    type: 'pie';
+    seriesId: DefaultizedPieSeriesType['id'];
+    dataIndex: number;
+};
+export interface DefaultizedPieSeriesType extends DefaultizedProps<PieSeriesType, CommonDefaultizedProps> {
+    data: DefaultizedPieValueType[];
 }

package/models/seriesType/scatter.d.ts

@@ -12,7 +12,7 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType>, C
     label?: string;
 }
 /**
- * An object that allows to identify a single line.
+ * An object that allows to identify a single scatter item.
  * Used for item interaction
  */
 export type ScatterItemIdentifier = {

package/modern/BarChart/BarChart.js

@@ -12,7 +12,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) {
+const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -34,6 +34,7 @@ function BarChart(props) {
   const id = useId();
   const clipPathId = `${id}-clip-path`;
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(s => _extends({
       type: 'bar'
     }, s)),
@@ -65,7 +66,7 @@ function BarChart(props) {
       id: clipPathId
     }), children]
   });
-}
+});
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -123,6 +124,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/modern/BarChart/BarPlot.js

@@ -1,9 +1,37 @@
 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({
+  bandWidth: W,
+  numberOfGroups: N,
+  gapRatio: r
+}) {
+  if (r === 0) {
+    return {
+      barWidth: W / N,
+      offset: 0
+    };
+  }
+  const barWidth = W / (N + (N - 1) * r);
+  const offset = r * barWidth;
+  return {
+    barWidth,
+    offset
+  };
+}
 export function BarPlot() {
   const seriesData = React.useContext(SeriesContext).bar;
   const axisData = React.useContext(CartesianContext);
@@ -29,19 +57,27 @@ export function BarPlot() {
       return groupIds.flatMap(seriesId => {
         const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId;
         const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
-        const xScale = xAxis[xAxisKey].scale;
-        const yScale = yAxis[yAxisKey].scale;
-        if (!isBandScale(xScale)) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series ${stackingGroups}`);
+        const xAxisConfig = xAxis[xAxisKey];
+        const yAxisConfig = yAxis[yAxisKey];
+        if (!isBandScaleConfig(xAxisConfig)) {
+          throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
         }
         if (xAxis[xAxisKey].data === undefined) {
           throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
         }
+        const xScale = xAxisConfig.scale;
+        const yScale = yAxisConfig.scale;
 
         // Currently assuming all bars are vertical
         const bandWidth = xScale.bandwidth();
-        const barWidth = 0.9 * bandWidth / stackingGroups.length;
-        const offset = 0.05 * bandWidth;
+        const {
+          barWidth,
+          offset
+        } = getBandSize({
+          bandWidth,
+          numberOfGroups: stackingGroups.length,
+          gapRatio: xAxisConfig.barGapRatio
+        });
 
         // @ts-ignore TODO: fix when adding a correct API for customisation
         const {
@@ -54,7 +90,7 @@ export function BarPlot() {
           return /*#__PURE__*/_jsx(BarElement, {
             id: seriesId,
             dataIndex: dataIndex,
-            x: xScale(xAxis[xAxisKey].data?.[dataIndex]) + groupIndex * barWidth + offset,
+            x: xScale(xAxis[xAxisKey].data?.[dataIndex]) + groupIndex * (barWidth + offset),
             y: yScale(value),
             height: yScale(baseline) - yScale(value),
             width: barWidth,

package/modern/BarChart/legend.js

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

package/modern/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 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
     width,
     height,
@@ -21,12 +22,13 @@ export function ChartContainer(props) {
     disableAxisListener,
     children
   } = props;
-  const ref = React.useRef(null);
+  const svgRef = React.useRef(null);
+  const 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,
@@ -38,7 +40,7 @@ export function ChartContainer(props) {
             children: /*#__PURE__*/_jsx(ChartsSurface, {
               width: width,
               height: height,
-              ref: ref,
+              ref: handleRef,
               sx: sx,
               title: title,
               desc: desc,
@@ -50,4 +52,4 @@ export function ChartContainer(props) {
       })
     })
   });
-}
+});

package/modern/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) {
@@ -26,7 +27,7 @@ function ChartsAxisHighlight(props) {
   const getXPosition = getValueToPositionMapper(xScale);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [xAxisHighlight === 'band' && axis.x !== null && isBandScale(xScale) && /*#__PURE__*/_jsx("path", {
-      d: `M ${xScale(axis.x.value)} ${yScale.range()[0]} L ${xScale(axis.x.value) + xScale.bandwidth()} ${yScale.range()[0]} L ${xScale(axis.x.value) + xScale.bandwidth()} ${yScale.range()[1]} L ${xScale(axis.x.value)} ${yScale.range()[1]} Z`,
+      d: `M ${xScale(axis.x.value) - (xScale.step() - xScale.bandwidth()) / 2} ${yScale.range()[0]} l ${xScale.step()} 0 l 0 ${yScale.range()[1] - yScale.range()[0]} l ${-xScale.step()} 0 Z`,
       fill: "gray",
       fillOpacity: 0.1,
       style: {

package/modern/ChartsLegend/ChartsLegend.js

@@ -146,7 +146,8 @@ export function ChartsLegend(inProps) {
   const {
     position,
     direction,
-    offset
+    offset,
+    hidden
   } = props;
   const theme = useTheme();
   const classes = useUtilityClasses(_extends({}, props, {
@@ -154,6 +155,9 @@ export function ChartsLegend(inProps) {
   }));
   const drawingArea = React.useContext(DrawingContext);
   const series = React.useContext(SeriesContext);
+  if (hidden) {
+    return null;
+  }
   const seriesToDisplay = getSeriesToDisplay(series);
   return /*#__PURE__*/_jsx(ChartsLegendRoot, {
     ownerState: {

package/modern/ChartsLegend/utils.js

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

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

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

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -13,8 +13,17 @@ export function DefaultChartsItemContent(props) {
   if (itemData.dataIndex === undefined) {
     return null;
   }
-  const displayedLabel = series.label ?? null;
-  const color = series.color;
+  const {
+    displayedLabel,
+    color
+  } = series.type === 'pie' ? {
+    color: series.data[itemData.dataIndex].color,
+    displayedLabel: series.data[itemData.dataIndex].label
+  } : {
+    color: series.color,
+    displayedLabel: series.label
+  };
+
   // TODO: Manage to let TS understand series.data and series.valueFormatter are coherent
   // @ts-ignore
   const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);

package/modern/LineChart/LineChart.js

@@ -14,7 +14,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) {
+const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -38,6 +38,7 @@ function LineChart(props) {
   const id = useId();
   const clipPathId = `${id}-clip-path`;
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(s => _extends({
       type: 'line'
     }, s)),
@@ -67,7 +68,7 @@ function LineChart(props) {
       id: clipPathId
     }), children]
   });
-}
+});
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -125,6 +126,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/modern/LineChart/legend.js

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

package/modern/PieChart/PieArc.js

@@ -0,0 +1,116 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _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 const pieArcClasses = generateUtilityClasses('MuiPieArc', ['root', 'highlighted', 'faded']);
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return composeClasses(slots, getPieArcUtilityClass, classes);
+};
+const PieArcRoot = styled('path', {
+  name: 'MuiPieArc',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.arc
+})(({
+  ownerState,
+  theme
+}) => ({
+  stroke: theme.palette.background.paper,
+  strokeWidth: 1,
+  strokeLinejoin: 'round',
+  fill: ownerState.color,
+  opacity: ownerState.isFaded ? 0.3 : 1
+}));
+export default function PieArc(props) {
+  const {
+      id,
+      dataIndex,
+      classes: innerClasses,
+      color,
+      highlightScope,
+      innerRadius: baseInnerRadius = 0,
+      outerRadius: baseOuterRadius,
+      cornerRadius: baseCornerRadius = 0,
+      highlighted,
+      faded = {
+        additionalRadius: -5
+      }
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const getInteractionItemProps = useInteractionItemProps(highlightScope);
+  const {
+    item
+  } = React.useContext(InteractionContext);
+  const isHighlighted = getIsHighlighted(item, {
+    type: 'pie',
+    seriesId: id,
+    dataIndex
+  }, highlightScope);
+  const isFaded = !isHighlighted && getIsFaded(item, {
+    type: 'pie',
+    seriesId: id,
+    dataIndex
+  }, highlightScope);
+  const ownerState = {
+    id,
+    dataIndex,
+    classes: innerClasses,
+    color,
+    isFaded,
+    isHighlighted
+  };
+  const classes = useUtilityClasses(ownerState);
+  const attibuesOverride = _extends({
+    additionalRadius: 0
+  }, isFaded && faded || isHighlighted && highlighted || {});
+  const innerRadius = Math.max(0, attibuesOverride.innerRadius ?? baseInnerRadius);
+  const outerRadius = Math.max(0, attibuesOverride.outerRadius ?? baseOuterRadius + attibuesOverride.additionalRadius);
+  const cornerRadius = attibuesOverride.cornerRadius ?? baseCornerRadius;
+  return /*#__PURE__*/_jsx(PieArcRoot, _extends({
+    d: d3Arc().cornerRadius(cornerRadius)(_extends({}, other, {
+      innerRadius,
+      outerRadius
+    })),
+    ownerState: ownerState,
+    className: classes.root
+  }, getInteractionItemProps({
+    type: 'pie',
+    seriesId: id,
+    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;

package/modern/PieChart/PieArcLabel.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel"];
+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 } from '../hooks/useInteractionItemProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function getPieArcLabelUtilityClass(slot) {
+  return generateUtilityClass('MuiPieArcLabel', slot);
+}
+export const pieArcLabelClasses = generateUtilityClasses('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return composeClasses(slots, getPieArcLabelUtilityClass, classes);
+};
+const PieArcLabelRoot = styled('text', {
+  name: 'MuiPieArcLabel',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme
+}) => ({
+  fill: theme.palette.text.primary,
+  alignmentBaseline: 'baseline',
+  textAnchor: 'middle'
+}));
+export default function PieArcLabel(props) {
+  const {
+      id,
+      dataIndex,
+      classes: innerClasses,
+      color,
+      highlightScope,
+      innerRadius = 0,
+      outerRadius,
+      cornerRadius = 0,
+      formattedArcLabel
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    item
+  } = React.useContext(InteractionContext);
+  const isHighlighted = getIsHighlighted(item, {
+    type: 'pie',
+    seriesId: id,
+    dataIndex
+  }, highlightScope);
+  const isFaded = !isHighlighted && getIsFaded(item, {
+    type: 'pie',
+    seriesId: id,
+    dataIndex
+  }, highlightScope);
+  const ownerState = {
+    id,
+    dataIndex,
+    classes: innerClasses,
+    color,
+    isFaded,
+    isHighlighted
+  };
+  const classes = useUtilityClasses(ownerState);
+  const arcLabelPosition = formattedArcLabel ? d3Arc().cornerRadius(cornerRadius).centroid(_extends({}, other, {
+    innerRadius,
+    outerRadius
+  })) : [0, 0];
+  return /*#__PURE__*/_jsx(PieArcLabelRoot, {
+    className: classes.root,
+    x: arcLabelPosition[0],
+    y: arcLabelPosition[1],
+    children: formattedArcLabel
+  });
+}
+process.env.NODE_ENV !== "production" ? PieArcLabel.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;