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

package/ChartContainer/index.d.ts

@@ -6,4 +6,6 @@ import { CartesianContextProviderProps } from '../context/CartesianContextProvid
 export type ChartContainerProps = Omit<ChartsSurfaceProps & SeriesContextProviderProps & Omit<DrawingProviderProps, 'svgRef'> & CartesianContextProviderProps, 'children'> & {
     children?: React.ReactNode;
 };
-export declare function ChartContainer(props: ChartContainerProps): React.JSX.Element;
+export declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & SeriesContextProviderProps & Omit<DrawingProviderProps, "svgRef"> & CartesianContextProviderProps, "children"> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;

package/ChartContainer/index.js

@@ -1,10 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartContainer = ChartContainer;
+exports.ChartContainer = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _DrawingProvider = require("../context/DrawingProvider");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _InteractionProvider = require("../context/InteractionProvider");
@@ -14,7 +16,7 @@ var _HighlightProvider = require("../context/HighlightProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ChartContainer(props) {
+const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
     width,
     height,
@@ -29,12 +31,13 @@ function ChartContainer(props) {
     disableAxisListener,
     children
   } = props;
-  const ref = React.useRef(null);
+  const svgRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(ref, svgRef);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, {
     width: width,
     height: height,
     margin: margin,
-    svgRef: ref,
+    svgRef: svgRef,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesContextProvider.SeriesContextProvider, {
       series: series,
       colors: colors,
@@ -46,7 +49,7 @@ function ChartContainer(props) {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, {
               width: width,
               height: height,
-              ref: ref,
+              ref: handleRef,
               sx: sx,
               title: title,
               desc: desc,
@@ -58,4 +61,5 @@ function ChartContainer(props) {
       })
     })
   });
-}
+});
+exports.ChartContainer = ChartContainer;

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -10,6 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _InteractionProvider = require("../context/InteractionProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _useScale = require("../hooks/useScale");
+var _isBandScale = require("../internals/isBandScale");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -33,8 +34,8 @@ function ChartsAxisHighlight(props) {
   } = React.useContext(_InteractionProvider.InteractionContext);
   const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [xAxisHighlight === 'band' && axis.x !== null && (0, _useScale.isBandScale)(xScale) && /*#__PURE__*/(0, _jsxRuntime.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`,
+    children: [xAxisHighlight === 'band' && axis.x !== null && (0, _isBandScale.isBandScale)(xScale) && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      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/ChartsLegend/ChartsLegend.d.ts

@@ -15,6 +15,10 @@ export type ChartsLegendProps = {
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<ChartsLegendClasses>;
+    /**
+     * Set to true to hide the legend.
+     */
+    hidden?: boolean;
 } & SizingParams;
 type DefaultizedChartsLegendProps = DefaultizedProps<ChartsLegendProps, 'direction' | 'position'>;
 type SeriesLegendOwnerState = ChartSeriesDefaultized<any> & Pick<DefaultizedChartsLegendProps, 'direction'> & {
@@ -40,5 +44,5 @@ export declare const ChartsLegendMark: import("@emotion/styled").StyledComponent
     };
 }, Pick<React.SVGProps<SVGRectElement>, keyof React.SVGProps<SVGRectElement>>, {}>;
 export declare const ChartsLegendLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, Pick<React.SVGTextElementAttributes<SVGTextElement>, keyof React.SVGTextElementAttributes<SVGTextElement>>, {}>;
-export declare function ChartsLegend(inProps: ChartsLegendProps): React.JSX.Element;
+export declare function ChartsLegend(inProps: ChartsLegendProps): React.JSX.Element | null;
 export {};

package/ChartsLegend/ChartsLegend.js

@@ -159,7 +159,8 @@ function ChartsLegend(inProps) {
   const {
     position,
     direction,
-    offset
+    offset,
+    hidden
   } = props;
   const theme = (0, _styles.useTheme)();
   const classes = useUtilityClasses((0, _extends2.default)({}, props, {
@@ -167,6 +168,9 @@ function ChartsLegend(inProps) {
   }));
   const drawingArea = React.useContext(_DrawingProvider.DrawingContext);
   const series = React.useContext(_SeriesContextProvider.SeriesContext);
+  if (hidden) {
+    return null;
+  }
   const seriesToDisplay = (0, _utils2.getSeriesToDisplay)(series);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLegendRoot, {
     ownerState: {

package/ChartsLegend/utils.d.ts

@@ -11,4 +11,4 @@ export type SizingParams = {
     itemWidth?: number;
     spacing?: number;
 };
-export declare function getSeriesToDisplay(series: FormattedSeries): (import("../models/seriesType/config").ChartSeriesDefaultized<"bar"> | import("../models/seriesType/config").ChartSeriesDefaultized<"scatter"> | import("../models/seriesType/config").ChartSeriesDefaultized<"line">)[];
+export declare function getSeriesToDisplay(series: FormattedSeries): import("../models/seriesType/config").LegendParams[];

package/ChartsLegend/utils.js

@@ -1,9 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSeriesToDisplay = getSeriesToDisplay;
+var _legend = _interopRequireDefault(require("../BarChart/legend"));
+var _legend2 = _interopRequireDefault(require("../ScatterChart/legend"));
+var _legend3 = _interopRequireDefault(require("../LineChart/legend"));
+var _legend4 = _interopRequireDefault(require("../PieChart/legend"));
+const legendGetter = {
+  bar: _legend.default,
+  scatter: _legend2.default,
+  line: _legend3.default,
+  pie: _legend4.default
+};
 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/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -90,7 +90,7 @@ 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/ChartsTooltip/ChartsItemTooltipContent.js

@@ -21,8 +21,17 @@ 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/LineChart/LineChart.d.ts

@@ -12,8 +12,5 @@ export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'ser
     axisHighlight?: ChartsAxisHighlightProps;
     legend?: ChartsLegendProps;
 }
-declare function LineChart(props: LineChartProps): React.JSX.Element;
-declare namespace LineChart {
-    var propTypes: any;
-}
+declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<unknown>>;
 export { LineChart };

package/LineChart/LineChart.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LineChart = LineChart;
+exports.LineChart = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
@@ -22,7 +22,7 @@ var _ChartsClipPath = require("../ChartsClipPath");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function LineChart(props) {
+const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -46,6 +46,7 @@ function LineChart(props) {
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(s => (0, _extends2.default)({
       type: 'line'
     }, s)),
@@ -75,7 +76,8 @@ function LineChart(props) {
       id: clipPathId
     }), children]
   });
-}
+});
+exports.LineChart = LineChart;
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -133,6 +135,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   legend: _propTypes.default.shape({
     classes: _propTypes.default.object,
     direction: _propTypes.default.oneOf(['column', 'row']),
+    hidden: _propTypes.default.bool,
     itemWidth: _propTypes.default.number,
     markSize: _propTypes.default.number,
     offset: _propTypes.default.shape({

package/LineChart/legend.d.ts

@@ -0,0 +1,3 @@
+import { LegendGetter } from '../models/seriesType/config';
+declare const legendGetter: LegendGetter<'line'>;
+export default legendGetter;

package/LineChart/legend.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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);
+};
+var _default = legendGetter;
+exports.default = _default;

package/PieChart/PieArc.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { PieArcDatum as D3PieArcDatum } from 'd3-shape';
+import { HighlightScope } from '../context/HighlightProvider';
+import { PieSeriesType } from '../models/seriesType/pie';
+export interface PieArcClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element when higlighted. */
+    highlighted: string;
+    /** Styles applied to the root element when faded. */
+    faded: string;
+}
+export type PieArcClassKey = keyof PieArcClasses;
+export interface PieArcOwnerState {
+    id: string;
+    dataIndex: number;
+    color: string;
+    isFaded: boolean;
+    isHighlighted: boolean;
+    classes?: Partial<PieArcClasses>;
+}
+export declare function getPieArcUtilityClass(slot: string): string;
+export declare const pieArcClasses: PieArcClasses;
+export type PieArcProps = Omit<PieArcOwnerState, 'isFaded' | 'isHighlighted'> & React.ComponentPropsWithoutRef<'path'> & D3PieArcDatum<any> & {
+    highlightScope?: Partial<HighlightScope>;
+    innerRadius: PieSeriesType['innerRadius'];
+    outerRadius: number;
+    cornerRadius: PieSeriesType['cornerRadius'];
+    highlighted: PieSeriesType['highlighted'];
+    faded: PieSeriesType['faded'];
+};
+declare function PieArc(props: PieArcProps): React.JSX.Element;
+declare namespace PieArc {
+    var propTypes: any;
+}
+export default PieArc;

package/PieChart/PieArc.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PieArc;
+exports.getPieArcUtilityClass = getPieArcUtilityClass;
+exports.pieArcClasses = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _d3Shape = require("d3-shape");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _styles = require("@mui/material/styles");
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _InteractionProvider = require("../context/InteractionProvider");
+var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function getPieArcUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiPieArc', slot);
+}
+const pieArcClasses = (0, _generateUtilityClasses.default)('MuiPieArc', ['root', 'highlighted', 'faded']);
+exports.pieArcClasses = pieArcClasses;
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return (0, _composeClasses.default)(slots, getPieArcUtilityClass, classes);
+};
+const PieArcRoot = (0, _styles.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
+}));
+function PieArc(props) {
+  const {
+      id,
+      dataIndex,
+      classes: innerClasses,
+      color,
+      highlightScope,
+      innerRadius: baseInnerRadius = 0,
+      outerRadius: baseOuterRadius,
+      cornerRadius: baseCornerRadius = 0,
+      highlighted,
+      faded = {
+        additionalRadius: -5
+      }
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
+  const {
+    item
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, {
+    type: 'pie',
+    seriesId: id,
+    dataIndex
+  }, highlightScope);
+  const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
+    type: 'pie',
+    seriesId: id,
+    dataIndex
+  }, highlightScope);
+  const ownerState = {
+    id,
+    dataIndex,
+    classes: innerClasses,
+    color,
+    isFaded,
+    isHighlighted
+  };
+  const classes = useUtilityClasses(ownerState);
+  const attibuesOverride = (0, _extends2.default)({
+    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__*/(0, _jsxRuntime.jsx)(PieArcRoot, (0, _extends2.default)({
+    d: (0, _d3Shape.arc)().cornerRadius(cornerRadius)((0, _extends2.default)({}, 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.default.object,
+  cornerRadius: _propTypes.default.number,
+  dataIndex: _propTypes.default.number.isRequired,
+  highlightScope: _propTypes.default.shape({
+    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
+    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
+  }),
+  innerRadius: _propTypes.default.number,
+  outerRadius: _propTypes.default.number.isRequired
+} : void 0;

package/PieChart/PieArcLabel.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { PieArcDatum as D3PieArcDatum } from 'd3-shape';
+import { HighlightScope } from '../context/HighlightProvider';
+import { PieSeriesType } from '../models/seriesType/pie';
+export interface PieArcLabelClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element when higlighted. */
+    highlighted: string;
+    /** Styles applied to the root element when faded. */
+    faded: string;
+}
+export type PieArcLabelClassKey = keyof PieArcLabelClasses;
+export interface PieArcLabelOwnerState {
+    id: string;
+    dataIndex: number;
+    color: string;
+    isFaded: boolean;
+    isHighlighted: boolean;
+    classes?: Partial<PieArcLabelClasses>;
+}
+export declare function getPieArcLabelUtilityClass(slot: string): string;
+export declare const pieArcLabelClasses: PieArcLabelClasses;
+export type PieArcLabelProps = Omit<PieArcLabelOwnerState, 'isFaded' | 'isHighlighted'> & React.ComponentPropsWithoutRef<'path'> & D3PieArcDatum<any> & {
+    highlightScope?: Partial<HighlightScope>;
+    innerRadius: PieSeriesType['innerRadius'];
+    outerRadius: number;
+    cornerRadius: PieSeriesType['cornerRadius'];
+} & {
+    formattedArcLabel?: string | null;
+};
+declare function PieArcLabel(props: PieArcLabelProps): React.JSX.Element;
+declare namespace PieArcLabel {
+    var propTypes: any;
+}
+export default PieArcLabel;

package/PieChart/PieArcLabel.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PieArcLabel;
+exports.getPieArcLabelUtilityClass = getPieArcLabelUtilityClass;
+exports.pieArcLabelClasses = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _d3Shape = require("d3-shape");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _styles = require("@mui/material/styles");
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _InteractionProvider = require("../context/InteractionProvider");
+var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function getPieArcLabelUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiPieArcLabel', slot);
+}
+const pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
+exports.pieArcLabelClasses = pieArcLabelClasses;
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return (0, _composeClasses.default)(slots, getPieArcLabelUtilityClass, classes);
+};
+const PieArcLabelRoot = (0, _styles.styled)('text', {
+  name: 'MuiPieArcLabel',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme
+}) => ({
+  fill: theme.palette.text.primary,
+  alignmentBaseline: 'baseline',
+  textAnchor: 'middle'
+}));
+function PieArcLabel(props) {
+  const {
+      id,
+      dataIndex,
+      classes: innerClasses,
+      color,
+      highlightScope,
+      innerRadius = 0,
+      outerRadius,
+      cornerRadius = 0,
+      formattedArcLabel
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    item
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, {
+    type: 'pie',
+    seriesId: id,
+    dataIndex
+  }, highlightScope);
+  const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
+    type: 'pie',
+    seriesId: id,
+    dataIndex
+  }, highlightScope);
+  const ownerState = {
+    id,
+    dataIndex,
+    classes: innerClasses,
+    color,
+    isFaded,
+    isHighlighted
+  };
+  const classes = useUtilityClasses(ownerState);
+  const arcLabelPosition = formattedArcLabel ? (0, _d3Shape.arc)().cornerRadius(cornerRadius).centroid((0, _extends2.default)({}, other, {
+    innerRadius,
+    outerRadius
+  })) : [0, 0];
+  return /*#__PURE__*/(0, _jsxRuntime.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.default.object,
+  cornerRadius: _propTypes.default.number,
+  dataIndex: _propTypes.default.number.isRequired,
+  highlightScope: _propTypes.default.shape({
+    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
+    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
+  }),
+  innerRadius: _propTypes.default.number,
+  outerRadius: _propTypes.default.number.isRequired
+} : void 0;

package/PieChart/PieChart.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ChartsAxisProps } from '../ChartsAxis/ChartsAxis';
+import { PieSeriesType } from '../models/seriesType';
+import { MakeOptional } from '../models/helpers';
+import { ChartsTooltipProps } from '../ChartsTooltip';
+import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { PieValueType } from '../models/seriesType/pie';
+export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, ChartsAxisProps {
+    series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[];
+    tooltip?: ChartsTooltipProps;
+    axisHighlight?: ChartsAxisHighlightProps;
+    legend?: ChartsLegendProps;
+}
+declare function PieChart(props: PieChartProps): React.JSX.Element;
+declare namespace PieChart {
+    var propTypes: any;
+}
+export { PieChart };