@mui/x-charts 8.0.0-alpha.9 → 8.0.0-beta.1

package/modern/PieChart/PieChart.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { MakeOptional } from '@mui/x-internals/types';
+import { ChartContainerProps } from "../ChartContainer/index.js";
+import { PieSeriesType } from "../models/seriesType/index.js";
+import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
+import { ChartsLegendSlotProps, ChartsLegendSlots } from "../ChartsLegend/index.js";
+import { PiePlotProps, PiePlotSlotProps, PiePlotSlots } from "./PiePlot.js";
+import { PieValueType } from "../models/seriesType/pie.js";
+import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/index.js";
+import { PieChartPluginSignatures } from "./PieChart.plugins.js";
+export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {}
+export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {}
+export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartPluginSignatures>, 'series'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+  /**
+   * The series to display in the pie chart.
+   * An array of [[PieSeriesType]] objects.
+   */
+  series: Readonly<MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[]>;
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend?: boolean;
+  /**
+   * Callback fired when a pie arc is clicked.
+   */
+  onItemClick?: PiePlotProps['onItemClick'];
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieChartSlotProps;
+}
+/**
+ * Demos:
+ *
+ * - [Pie](https://mui.com/x/react-charts/pie/)
+ * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+ *
+ * API:
+ *
+ * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
+ */
+declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<SVGSVGElement>>;
+export { PieChart };

package/modern/PieChart/PieChart.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
@@ -14,6 +14,8 @@ import { ChartsSurface } from "../ChartsSurface/index.js";
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
+import { PIE_CHART_PLUGINS } from "./PieChart.plugins.js";
+import { defaultizeMargin } from "../internals/defaultizeMargin.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
   top: 5,
@@ -56,7 +58,7 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const margin = _extends({}, defaultMargin, marginProps);
+  const margin = defaultizeMargin(marginProps, defaultMargin);
   const {
     chartDataProviderProps,
     chartsSurfaceProps
@@ -68,11 +70,11 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     height,
     margin,
     colors,
-    disableAxisListener: true,
     highlightedItem,
     onHighlightChange,
     className,
-    skipAnimation
+    skipAnimation,
+    plugins: PIE_CHART_PLUGINS
   }), ref);
   const Tooltip = slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
@@ -112,7 +114,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**
@@ -120,12 +122,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -135,11 +131,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   hideLegend: PropTypes.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -154,14 +151,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: PropTypes.shape({
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
     right: PropTypes.number,
     top: PropTypes.number
-  }),
+  })]),
   /**
    * The callback fired when the highlighted item changes.
    *
@@ -198,110 +196,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
-  width: PropTypes.number,
-  /**
-   * The configuration of the x-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  xAxis: PropTypes.arrayOf(PropTypes.shape({
-    classes: PropTypes.object,
-    colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
-      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      type: PropTypes.oneOf(['continuous']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
-      type: PropTypes.oneOf(['piecewise']).isRequired
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    fill: PropTypes.string,
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string,
-    labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'top']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
-  })),
-  /**
-   * The configuration of the y-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  yAxis: PropTypes.arrayOf(PropTypes.shape({
-    classes: PropTypes.object,
-    colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
-      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      type: PropTypes.oneOf(['continuous']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
-      type: PropTypes.oneOf(['piecewise']).isRequired
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    fill: PropTypes.string,
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string,
-    labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['left', 'right']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
-  }))
+  width: PropTypes.number
 } : void 0;
 export { PieChart };

package/modern/PieChart/PieChart.plugins.d.ts

@@ -0,0 +1,5 @@
+import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
+export type PieChartPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature];
+export declare const PIE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<PieChartPluginSignatures>;

package/modern/PieChart/PieChart.plugins.js

@@ -0,0 +1,3 @@
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export const PIE_CHART_PLUGINS = [useChartInteraction, useChartHighlight];

package/modern/PieChart/PiePlot.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { PieArcPlotProps, PieArcPlotSlotProps, PieArcPlotSlots } from "./PieArcPlot.js";
+import { PieArcLabelPlotSlots, PieArcLabelPlotSlotProps } from "./PieArcLabelPlot.js";
+export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {}
+export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {}
+export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onItemClick'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PiePlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PiePlotSlotProps;
+}
+/**
+ * Demos:
+ *
+ * - [Pie](https://mui.com/x/react-charts/pie/)
+ * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+ *
+ * API:
+ *
+ * - [PiePlot API](https://mui.com/x/api/charts/pie-plot/)
+ */
+declare function PiePlot(props: PiePlotProps): React.JSX.Element | null;
+declare namespace PiePlot {
+  var propTypes: any;
+}
+export { PiePlot };

package/modern/PieChart/PiePlot.js

@@ -6,7 +6,7 @@ import { PieArcPlot } from "./PieArcPlot.js";
 import { PieArcLabelPlot } from "./PieArcLabelPlot.js";
 import { getPercentageValue } from "../internals/getPercentageValue.js";
 import { getPieCoordinates } from "./getPieCoordinates.js";
-import { usePieSeries } from "../hooks/useSeries.js";
+import { usePieSeriesContext } from "../hooks/usePieSeries.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
 import { useDrawingArea } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,7 +27,7 @@ function PiePlot(props) {
     slotProps,
     onItemClick
   } = props;
-  const seriesData = usePieSeries();
+  const seriesData = usePieSeriesContext();
   const {
     left,
     top,

package/modern/PieChart/dataTransform/transition.d.ts

@@ -0,0 +1,4 @@
+import { UseTransitionProps } from '@react-spring/web';
+import { ValueWithHighlight } from "./useTransformData.js";
+export declare const getDefaultTransitionConfig: (skipAnimation?: boolean) => UseTransitionProps<ValueWithHighlight>;
+export declare const getDefaultLabelTransitionConfig: (skipAnimation?: boolean) => UseTransitionProps<ValueWithHighlight>;

package/modern/PieChart/dataTransform/transition.js

@@ -1,5 +1,5 @@
 export const getDefaultTransitionConfig = skipAnimation => ({
-  keys: item => item.id,
+  keys: item => item.id ?? item.dataIndex,
   from: skipAnimation ? undefined : ({
     innerRadius,
     outerRadius,
@@ -66,7 +66,7 @@ export const getDefaultTransitionConfig = skipAnimation => ({
   }
 });
 export const getDefaultLabelTransitionConfig = skipAnimation => ({
-  keys: item => item.id,
+  keys: item => item.id ?? item.dataIndex,
   from: skipAnimation ? undefined : ({
     innerRadius,
     outerRadius,

package/modern/PieChart/dataTransform/useTransformData.d.ts

@@ -0,0 +1,16 @@
+import { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType } from "../../models/seriesType/pie.js";
+export interface AnimatedObject {
+  innerRadius: number;
+  outerRadius: number;
+  arcLabelRadius: number;
+  cornerRadius: number;
+  startAngle: number;
+  endAngle: number;
+  paddingAngle: number;
+}
+export interface ValueWithHighlight extends DefaultizedPieValueType, AnimatedObject {
+  dataIndex: number;
+  isFaded: boolean;
+  isHighlighted: boolean;
+}
+export declare function useTransformData(series: Pick<DefaultizedPieSeriesType, 'cornerRadius' | 'paddingAngle' | 'id' | 'highlighted' | 'faded' | 'data'> & ComputedPieRadius): ValueWithHighlight[];

package/modern/PieChart/dataTransform/useTransformData.js

@@ -2,7 +2,8 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useHighlighted } from "../../context/index.js";
+import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
+import { deg2rad } from "../../internals/angleConversion.js";
 export function useTransformData(series) {
   const {
     id: seriesId,
@@ -18,7 +19,7 @@ export function useTransformData(series) {
   const {
     isFaded: isItemFaded,
     isHighlighted: isItemHighlighted
-  } = useHighlighted();
+  } = useItemHighlightedGetter();
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
     const currentItem = {
       seriesId,
@@ -29,12 +30,13 @@ export function useTransformData(series) {
     const attributesOverride = _extends({
       additionalRadius: 0
     }, isFaded && faded || isHighlighted && highlighted || {});
-    const paddingAngle = Math.max(0, Math.PI * (attributesOverride.paddingAngle ?? basePaddingAngle) / 180);
+    const paddingAngle = Math.max(0, deg2rad(attributesOverride.paddingAngle ?? basePaddingAngle));
     const innerRadius = Math.max(0, attributesOverride.innerRadius ?? baseInnerRadius);
     const outerRadius = Math.max(0, attributesOverride.outerRadius ?? baseOuterRadius + attributesOverride.additionalRadius);
     const cornerRadius = attributesOverride.cornerRadius ?? baseCornerRadius;
     const arcLabelRadius = attributesOverride.arcLabelRadius ?? baseArcLabelRadius ?? (innerRadius + outerRadius) / 2;
     return _extends({}, item, attributesOverride, {
+      dataIndex: itemIndex,
       isFaded,
       isHighlighted,
       paddingAngle,

package/modern/PieChart/getPieCoordinates.d.ts

@@ -0,0 +1,7 @@
+import { ChartDrawingArea } from "../hooks/index.js";
+import { DefaultizedPieSeriesType } from "../models/seriesType/pie.js";
+export declare function getPieCoordinates(series: Pick<DefaultizedPieSeriesType, 'cx' | 'cy'>, drawing: Pick<ChartDrawingArea, 'width' | 'height'>): {
+  cx: number;
+  cy: number;
+  availableRadius: number;
+};

package/modern/PieChart/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./PieChart.js";
+export * from "./PiePlot.js";
+export * from "./PieArcPlot.js";
+export * from "./PieArcLabelPlot.js";
+export * from "./PieArc.js";
+export * from "./PieArcLabel.js";
+export * from "./getPieCoordinates.js";

package/modern/PieChart/seriesConfig/getColor.d.ts

@@ -0,0 +1,3 @@
+import { ColorProcessor } from "../../internals/plugins/models/index.js";
+declare const getColor: ColorProcessor<'pie'>;
+export default getColor;

package/modern/PieChart/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -0,0 +1,3 @@
+import type { GetSeriesWithDefaultValues } from '../../internals/plugins/models/seriesConfig';
+declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+export default getSeriesWithDefaultValues;

package/modern/PieChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
+  return _extends({
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
+  }, seriesData, {
+    data: seriesData.data.map((d, index) => _extends({
+      color: colors[index % colors.length]
+    }, d))
+  });
+};
+export default getSeriesWithDefaultValues;

package/modern/PieChart/seriesConfig/index.d.ts

@@ -0,0 +1,2 @@
+import { ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+export declare const seriesConfig: ChartSeriesTypeConfig<'pie'>;

package/modern/PieChart/seriesConfig/index.js

@@ -0,0 +1,12 @@
+import seriesProcessor from "./seriesProcessor.js";
+import getColor from "./getColor.js";
+import legendGetter from "./legend.js";
+import tooltipGetter from "./tooltip.js";
+import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
+export const seriesConfig = {
+  colorProcessor: getColor,
+  seriesProcessor,
+  legendGetter,
+  tooltipGetter,
+  getSeriesWithDefaultValues
+};

package/modern/PieChart/seriesConfig/legend.d.ts

@@ -0,0 +1,3 @@
+import { LegendGetter } from "../../internals/plugins/models/index.js";
+declare const legendGetter: LegendGetter<'pie'>;
+export default legendGetter;

package/modern/PieChart/seriesConfig/legend.js

@@ -0,0 +1,25 @@
+import { getLabel } from "../../internals/getLabel.js";
+const legendGetter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  return seriesOrder.reduce((acc, seriesId) => {
+    series[seriesId].data.forEach((item, dataIndex) => {
+      const formattedLabel = getLabel(item.label, 'legend');
+      if (formattedLabel === undefined) {
+        return;
+      }
+      acc.push({
+        markType: item.labelMarkType ?? series[seriesId].labelMarkType,
+        id: item.id ?? dataIndex,
+        seriesId,
+        color: item.color,
+        label: formattedLabel,
+        itemId: item.id ?? dataIndex
+      });
+    });
+    return acc;
+  }, []);
+};
+export default legendGetter;

package/modern/PieChart/seriesConfig/seriesProcessor.d.ts

@@ -0,0 +1,3 @@
+import { SeriesProcessor } from "../../internals/plugins/models/index.js";
+declare const seriesProcessor: SeriesProcessor<'pie'>;
+export default seriesProcessor;

package/modern/PieChart/seriesConfig/seriesProcessor.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { pie as d3Pie } from '@mui/x-charts-vendor/d3-shape';
+import { getLabel } from "../../internals/getLabel.js";
+const getSortingComparator = (comparator = 'none') => {
+  if (typeof comparator === 'function') {
+    return comparator;
+  }
+  switch (comparator) {
+    case 'none':
+      return null;
+    case 'desc':
+      return (a, b) => b - a;
+    case 'asc':
+      return (a, b) => a - b;
+    default:
+      return null;
+  }
+};
+const seriesProcessor = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  const defaultizedSeries = {};
+  seriesOrder.forEach(seriesId => {
+    const arcs = d3Pie().startAngle(2 * Math.PI * (series[seriesId].startAngle ?? 0) / 360).endAngle(2 * Math.PI * (series[seriesId].endAngle ?? 360) / 360).padAngle(2 * Math.PI * (series[seriesId].paddingAngle ?? 0) / 360).sortValues(getSortingComparator(series[seriesId].sortingValues ?? 'none'))(series[seriesId].data.map(piePoint => piePoint.value));
+    defaultizedSeries[seriesId] = _extends({
+      labelMarkType: 'circle',
+      valueFormatter: item => item.value.toLocaleString()
+    }, series[seriesId], {
+      data: series[seriesId].data.map((item, index) => _extends({}, item, {
+        id: item.id ?? `auto-generated-pie-id-${seriesId}-${index}`
+      }, arcs[index])).map((item, index) => _extends({
+        labelMarkType: 'circle'
+      }, item, {
+        formattedValue: series[seriesId].valueFormatter?.(_extends({}, item, {
+          label: getLabel(item.label, 'arc')
+        }), {
+          dataIndex: index
+        }) ?? item.value.toLocaleString()
+      }))
+    });
+  });
+  return {
+    seriesOrder,
+    series: defaultizedSeries
+  };
+};
+export default seriesProcessor;

package/modern/PieChart/seriesConfig/tooltip.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipGetter } from '../../internals/plugins/models';
+declare const tooltipGetter: TooltipGetter<'pie'>;
+export default tooltipGetter;

package/modern/PieChart/seriesConfig/tooltip.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { getLabel } from "../../internals/getLabel.js";
+const tooltipGetter = params => {
+  const {
+    series,
+    getColor,
+    identifier
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const point = series.data[identifier.dataIndex];
+  const label = getLabel(point.label, 'tooltip');
+  const value = _extends({}, point, {
+    label
+  });
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex: identifier.dataIndex
+  });
+  return {
+    identifier,
+    color: getColor(identifier.dataIndex),
+    label,
+    value,
+    formattedValue,
+    markType: point.labelMarkType ?? series.labelMarkType
+  };
+};
+export default tooltipGetter;

package/modern/RadarChart/RadarAxisHighlight/RadarAxisHighlight.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { RadarAxisHighlightClasses } from "./radarAxisHighlightClasses.js";
+export interface RadarAxisHighlightProps {
+  /**
+   * Switch between different axis highlight visualization.
+   * - points: display points on each highlighted value. Recommended for radar with multiple series.
+   * - slice: display a slice around the highlighted value. Recommended for radar with a single series.
+   * The default value is computed depending on the number of series provided.
+   */
+  axisHighlightShape: 'points' | 'slice';
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<RadarAxisHighlightClasses>;
+}
+declare function RadarAxisHighlight(props: RadarAxisHighlightProps): React.JSX.Element;
+declare namespace RadarAxisHighlight {
+  var propTypes: any;
+}
+export { RadarAxisHighlight };

package/modern/RadarChart/RadarAxisHighlight/RadarAxisHighlight.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import { RadarAxisSliceHighlight } from "./RadarAxisSliceHighlight.js";
+import { RadarAxisPointsHighlight } from "./RadarAxisPointsHighlight.js";
+import { getRadarAxisHighlightUtilityClass } from "./radarAxisHighlightClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    line: ['line'],
+    slice: ['slice'],
+    dot: ['dot']
+  };
+  return composeClasses(slots, getRadarAxisHighlightUtilityClass, classes);
+};
+function RadarAxisHighlight(props) {
+  const classes = useUtilityClasses(props.classes);
+  return props.axisHighlightShape === 'slice' ? /*#__PURE__*/_jsx(RadarAxisSliceHighlight, {
+    classes: classes
+  }) : /*#__PURE__*/_jsx(RadarAxisPointsHighlight, {
+    classes: classes
+  });
+}
+process.env.NODE_ENV !== "production" ? RadarAxisHighlight.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Switch between different axis highlight visualization.
+   * - points: display points on each highlighted value. Recommended for radar with multiple series.
+   * - slice: display a slice around the highlighted value. Recommended for radar with a single series.
+   * The default value is computed depending on the number of series provided.
+   */
+  axisHighlightShape: PropTypes.oneOf(['points', 'slice']).isRequired,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object
+} : void 0;
+export { RadarAxisHighlight };

package/modern/RadarChart/RadarAxisHighlight/RadarAxisPointsHighlight.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { RadarAxisHighlightClasses } from "./radarAxisHighlightClasses.js";
+interface RadarAxisPointsHighlightProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<RadarAxisHighlightClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function RadarAxisPointsHighlight(props: RadarAxisPointsHighlightProps): React.JSX.Element | null;
+export {};