@mui/x-charts 8.21.0 → 8.22.0

package/esm/LineChart/seriesConfig/seriesProcessor.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getStackingGroups } from "../../internals/stackSeries.js";
-import { defaultizeValueFormatter } from "../../internals/defaultizeValueFormatter.js";
 const seriesProcessor = (params, dataset) => {
   const {
     seriesOrder,
@@ -69,14 +68,15 @@ const seriesProcessor = (params, dataset) => {
           const value = data[dataKey];
           return typeof value === 'number' ? value : null;
         }) : series[id].data,
-        stackedData: stackedSeries[index].map(([a, b]) => [a, b])
+        stackedData: stackedSeries[index].map(([a, b]) => [a, b]),
+        valueFormatter: series[id]?.valueFormatter ?? (v => v == null ? '' : v.toLocaleString())
       });
     });
   });
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v == null ? '' : v.toLocaleString())
+    series: completedSeries
   };
 };
 export default seriesProcessor;

package/esm/LineChart/useAreaPlotData.d.ts

@@ -1,6 +1,6 @@
-import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
-import { SeriesId } from "../models/seriesType/common.js";
+import { type ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/index.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 interface AreaPlotDataPoint {
   d: string;
   seriesId: SeriesId;

package/esm/LineChart/useLineChartProps.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { ChartsAxisProps } from "../ChartsAxis/index.js";
-import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
-import { ChartsClipPathProps } from "../ChartsClipPath/index.js";
-import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
-import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
-import { ChartContainerProps } from "../ChartContainer/index.js";
-import { AreaPlotProps } from "./AreaPlot.js";
+import { type ChartsAxisProps } from "../ChartsAxis/index.js";
+import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
+import { type ChartsClipPathProps } from "../ChartsClipPath/index.js";
+import { type ChartsGridProps } from "../ChartsGrid/index.js";
+import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
+import { type ChartsOverlayProps } from "../ChartsOverlay/index.js";
+import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type AreaPlotProps } from "./AreaPlot.js";
 import type { LineChartProps } from "./LineChart.js";
-import { LineHighlightPlotProps } from "./LineHighlightPlot.js";
-import { LinePlotProps } from "./LinePlot.js";
-import { MarkPlotProps } from "./MarkPlot.js";
+import { type LineHighlightPlotProps } from "./LineHighlightPlot.js";
+import { type LinePlotProps } from "./LinePlot.js";
+import { type MarkPlotProps } from "./MarkPlot.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
-import { LineChartPluginSignatures } from "./LineChart.plugins.js";
+import { type LineChartPluginSignatures } from "./LineChart.plugins.js";
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.

package/esm/LineChart/useLinePlotData.d.ts

@@ -1,6 +1,6 @@
-import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
-import { SeriesId } from "../models/seriesType/common.js";
+import { type ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/index.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 interface LinePlotDataPoint {
   d: string;
   seriesId: SeriesId;

package/esm/LineChart/useMarkPlotData.d.ts

@@ -0,0 +1,18 @@
+import { type SeriesId } from "../models/seriesType/common.js";
+import { type ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/index.js";
+import { type AxisId } from "../models/axis.js";
+export interface MarkPlotDataPoint {
+  x: number;
+  y: number;
+  index: number;
+  color: string;
+}
+export interface MarkPlotSeriesData {
+  seriesId: SeriesId;
+  clipId: string;
+  shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+  xAxisId: AxisId;
+  marks: MarkPlotDataPoint[];
+}
+export declare function useMarkPlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): MarkPlotSeriesData[];

package/esm/LineChart/useMarkPlotData.js

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { useChartId } from "../hooks/useChartId.js";
+import { getValueToPositionMapper, useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
+import { cleanId } from "../internals/cleanId.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import getColor from "./seriesConfig/getColor.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
+export function useMarkPlotData(xAxes, yAxes) {
+  const seriesData = useLineSeriesContext();
+  const defaultXAxisId = useXAxes().xAxisIds[0];
+  const defaultYAxisId = useYAxes().yAxisIds[0];
+  const chartId = useChartId();
+  const {
+    instance
+  } = useChartContext();
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const markPlotData = [];
+    for (const stackingGroup of stackingGroups) {
+      const groupIds = stackingGroup.ids;
+      for (const seriesId of groupIds) {
+        const {
+          xAxisId = defaultXAxisId,
+          yAxisId = defaultYAxisId,
+          stackedData,
+          data,
+          showMark = true,
+          shape = 'circle'
+        } = series[seriesId];
+        if (showMark === false) {
+          continue;
+        }
+        if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+          continue;
+        }
+        const xScale = getValueToPositionMapper(xAxes[xAxisId].scale);
+        const yScale = yAxes[yAxisId].scale;
+        const xData = xAxes[xAxisId].data;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X Charts: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+        }
+        const clipId = cleanId(`${chartId}-${seriesId}-line-clip`);
+        const colorGetter = getColor(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
+        const marks = [];
+        if (xData) {
+          for (let index = 0; index < xData.length; index += 1) {
+            const x = xData[index];
+            const value = data[index] == null ? null : stackedData[index][1];
+            if (value === null) {
+              continue;
+            }
+            const y = yScale(value);
+            const xPos = xScale(x);
+            if (!instance.isPointInside(xPos, y)) {
+              continue;
+            }
+            if (showMark !== true) {
+              const shouldInclude = showMark({
+                x: xPos,
+                y,
+                index,
+                position: x,
+                value
+              });
+              if (!shouldInclude) {
+                continue;
+              }
+            }
+            marks.push({
+              x: xPos,
+              y,
+              index,
+              color: colorGetter(index)
+            });
+          }
+        }
+        markPlotData.push({
+          seriesId,
+          clipId,
+          shape,
+          xAxisId,
+          marks
+        });
+      }
+    }
+    return markPlotData;
+  }, [seriesData, defaultXAxisId, defaultYAxisId, chartId, xAxes, yAxes, instance]);
+  return allData;
+}

package/esm/PieChart/PieArc.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PieItemId } from "../models/index.js";
+import { type PieItemId } from "../models/index.js";
 export interface PieArcClasses {
   /** Styles applied to the root element. */
   root: string;

package/esm/PieChart/PieArcLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PieItemId } from "../models/seriesType/pie.js";
+import { type PieItemId } from "../models/seriesType/pie.js";
 export interface PieArcLabelClasses {
   /** Styles applied to the root element. */
   root: string;

package/esm/PieChart/PieArcLabel.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style", "skipAnimation"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -42,6 +42,9 @@ const PieArcLabelRoot = styled('text', {
   animationName: 'animate-opacity',
   animationDuration: '0s',
   animationTimingFunction: ANIMATION_TIMING_FUNCTION,
+  transitionDuration: `${ANIMATION_DURATION_MS}ms`,
+  transitionProperty: 'opacity',
+  transitionTimingFunction: ANIMATION_TIMING_FUNCTION,
   [`&.${pieArcLabelClasses.animate}`]: {
     animationDuration: `${ANIMATION_DURATION_MS}ms`
   },

package/esm/PieChart/PieArcLabelPlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ComputedPieRadius, DefaultizedPieSeriesType } from "../models/seriesType/pie.js";
-import { PieArcLabelProps } from "./PieArcLabel.js";
+import { type ComputedPieRadius, type DefaultizedPieSeriesType } from "../models/seriesType/pie.js";
+import { type PieArcLabelProps } from "./PieArcLabel.js";
 export interface PieArcLabelPlotSlots {
   pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
 }

package/esm/PieChart/PieArcPlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { PieArcProps } from "./PieArc.js";
-import { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType, PieItemIdentifier } from "../models/seriesType/pie.js";
+import { type PieArcProps } from "./PieArc.js";
+import { type ComputedPieRadius, type DefaultizedPieSeriesType, type DefaultizedPieValueType, type PieItemIdentifier } from "../models/seriesType/pie.js";
 export interface PieArcPlotSlots {
   pieArc?: React.JSXElementConstructor<PieArcProps>;
 }

package/esm/PieChart/PieChart.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { MakeOptional } from '@mui/x-internals/types';
-import { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
-import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
-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";
+import { type MakeOptional } from '@mui/x-internals/types';
+import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.js";
+import { type ChartsSlotProps, type ChartsSlots } from "../internals/material/index.js";
+import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type PieSeriesType } from "../models/seriesType/index.js";
+import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
+import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.js";
+import { type PiePlotProps, type PiePlotSlotProps, type PiePlotSlots } from "./PiePlot.js";
+import { type PieValueType } from "../models/seriesType/pie.js";
+import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from "../ChartsOverlay/index.js";
+import { type PieChartPluginSignatures } from "./PieChart.plugins.js";
 export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type PieSeries = MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>;

package/esm/PieChart/PieChart.plugins.d.ts

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

package/esm/PieChart/PieChart.plugins.js

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

package/esm/PieChart/PiePlot.d.ts

@@ -1,5 +1,5 @@
-import { PieArcPlotProps, PieArcPlotSlotProps, PieArcPlotSlots } from "./PieArcPlot.js";
-import { PieArcLabelPlotSlots, PieArcLabelPlotSlotProps } from "./PieArcLabelPlot.js";
+import { type PieArcPlotProps, type PieArcPlotSlotProps, type PieArcPlotSlots } from "./PieArcPlot.js";
+import { type PieArcLabelPlotSlots, type PieArcLabelPlotSlotProps } from "./PieArcLabelPlot.js";
 export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {}
 export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {}
 export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onItemClick'> {

package/esm/PieChart/PiePlot.js

@@ -3,11 +3,8 @@
 import PropTypes from 'prop-types';
 import { PieArcPlot } from "./PieArcPlot.js";
 import { PieArcLabelPlot } from "./PieArcLabelPlot.js";
-import { getPercentageValue } from "../internals/getPercentageValue.js";
-import { getPieCoordinates } from "./getPieCoordinates.js";
-import { usePieSeriesContext } from "../hooks/usePieSeries.js";
+import { usePieSeriesContext, usePieSeriesLayout } from "../hooks/usePieSeries.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
-import { useDrawingArea } from "../hooks/index.js";
 import { useUtilityClasses } from "./pieClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -28,12 +25,7 @@ function PiePlot(props) {
     onItemClick
   } = props;
   const seriesData = usePieSeriesContext();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = useDrawingArea();
+  const seriesLayout = usePieSeriesLayout();
   const skipAnimation = useSkipAnimation(inSkipAnimation);
   const classes = useUtilityClasses();
   if (seriesData === undefined) {
@@ -46,36 +38,19 @@ function PiePlot(props) {
   return /*#__PURE__*/_jsxs("g", {
     children: [seriesOrder.map(seriesId => {
       const {
-        innerRadius: innerRadiusParam,
-        outerRadius: outerRadiusParam,
         cornerRadius,
         paddingAngle,
         data,
-        cx: cxParam,
-        cy: cyParam,
         highlighted,
         faded
       } = series[seriesId];
-      const {
-        cx,
-        cy,
-        availableRadius
-      } = getPieCoordinates({
-        cx: cxParam,
-        cy: cyParam
-      }, {
-        width,
-        height
-      });
-      const outerRadius = getPercentageValue(outerRadiusParam ?? availableRadius, availableRadius);
-      const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
       return /*#__PURE__*/_jsx("g", {
         className: classes.series,
-        transform: `translate(${left + cx}, ${top + cy})`,
+        transform: `translate(${seriesLayout[seriesId].center.x}, ${seriesLayout[seriesId].center.y})`,
         "data-series": seriesId,
         children: /*#__PURE__*/_jsx(PieArcPlot, {
-          innerRadius: innerRadius,
-          outerRadius: outerRadius,
+          innerRadius: seriesLayout[seriesId].radius.inner,
+          outerRadius: seriesLayout[seriesId].radius.outer,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,
@@ -90,39 +65,20 @@ function PiePlot(props) {
       }, seriesId);
     }), seriesOrder.map(seriesId => {
       const {
-        innerRadius: innerRadiusParam,
-        outerRadius: outerRadiusParam,
-        arcLabelRadius: arcLabelRadiusParam,
         cornerRadius,
         paddingAngle,
         arcLabel,
         arcLabelMinAngle,
-        data,
-        cx: cxParam,
-        cy: cyParam
+        data
       } = series[seriesId];
-      const {
-        cx,
-        cy,
-        availableRadius
-      } = getPieCoordinates({
-        cx: cxParam,
-        cy: cyParam
-      }, {
-        width,
-        height
-      });
-      const outerRadius = getPercentageValue(outerRadiusParam ?? availableRadius, availableRadius);
-      const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
-      const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : getPercentageValue(arcLabelRadiusParam, availableRadius);
       return /*#__PURE__*/_jsx("g", {
         className: classes.seriesLabels,
-        transform: `translate(${left + cx}, ${top + cy})`,
+        transform: `translate(${seriesLayout[seriesId].center.x}, ${seriesLayout[seriesId].center.y})`,
         "data-series": seriesId,
         children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
-          innerRadius: innerRadius,
-          outerRadius: outerRadius ?? availableRadius,
-          arcLabelRadius: arcLabelRadius,
+          innerRadius: seriesLayout[seriesId].radius.inner,
+          outerRadius: seriesLayout[seriesId].radius.outer,
+          arcLabelRadius: seriesLayout[seriesId].radius.label,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,

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

@@ -1,4 +1,4 @@
-import { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType } from "../../models/seriesType/pie.js";
+import { type ComputedPieRadius, type DefaultizedPieSeriesType, type DefaultizedPieValueType } from "../../models/seriesType/pie.js";
 export interface AnimatedObject {
   innerRadius: number;
   outerRadius: number;

package/esm/PieChart/getPieCoordinates.d.ts

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

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

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

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

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

package/esm/PieChart/seriesConfig/index.js

@@ -2,11 +2,13 @@ import seriesProcessor from "./seriesProcessor.js";
 import getColor from "./getColor.js";
 import legendGetter from "./legend.js";
 import tooltipGetter from "./tooltip.js";
+import seriesLayout from "./seriesLayout.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
 export const pieSeriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
+  seriesLayout,
   legendGetter,
   tooltipGetter,
   tooltipItemPositionGetter,

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

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

package/esm/PieChart/seriesConfig/seriesLayout.d.ts

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

package/esm/PieChart/seriesConfig/seriesLayout.js

@@ -0,0 +1,42 @@
+import { getPercentageValue } from "../../internals/getPercentageValue.js";
+import { getPieCoordinates } from "../getPieCoordinates.js";
+const seriesLayout = (series, drawingArea) => {
+  const seriesLayoutRecord = {};
+  for (const seriesId of series.seriesOrder) {
+    const {
+      innerRadius,
+      outerRadius,
+      arcLabelRadius,
+      cx: cxParam,
+      cy: cyParam
+    } = series.series[seriesId];
+    const {
+      cx,
+      cy,
+      availableRadius
+    } = getPieCoordinates({
+      cx: cxParam,
+      cy: cyParam
+    }, {
+      width: drawingArea.width,
+      height: drawingArea.height
+    });
+    const outer = getPercentageValue(outerRadius ?? availableRadius, availableRadius);
+    const inner = getPercentageValue(innerRadius ?? 0, availableRadius);
+    const label = arcLabelRadius === undefined ? (inner + outer) / 2 : getPercentageValue(arcLabelRadius, availableRadius);
+    seriesLayoutRecord[seriesId] = {
+      radius: {
+        available: availableRadius,
+        inner,
+        outer,
+        label
+      },
+      center: {
+        x: drawingArea.left + cx,
+        y: drawingArea.top + cy
+      }
+    };
+  }
+  return seriesLayoutRecord;
+};
+export default seriesLayout;

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

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

package/esm/RadarChart/RadarAxis/RadarAxis.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { UseRadarAxisParams } from "./useRadarAxis.js";
-import { RadarAxisClasses } from "./radarAxisClasses.js";
+import { type UseRadarAxisParams } from "./useRadarAxis.js";
+import { type RadarAxisClasses } from "./radarAxisClasses.js";
 export interface RadarAxisProps extends UseRadarAxisParams {
   /**
    * Defines how label align with the axis.

package/esm/RadarChart/RadarAxis/RadarAxis.utils.d.ts

@@ -1,4 +1,4 @@
-import { RadarAxisProps } from "./RadarAxis.js";
+import { type RadarAxisProps } from "./RadarAxis.js";
 interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelOrientation'>>, Partial<Pick<RadarAxisProps, 'textAnchor' | 'dominantBaseline'>> {
   x: number;
   y: number;

package/esm/RadarChart/RadarAxisHighlight/RadarAxisHighlight.d.ts

@@ -1,4 +1,4 @@
-import { RadarAxisHighlightClasses } from "./radarAxisHighlightClasses.js";
+import { type RadarAxisHighlightClasses } from "./radarAxisHighlightClasses.js";
 export interface RadarAxisHighlightProps {
   /**
    * Override or extend the styles applied to the component.

package/esm/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.d.ts

@@ -1,7 +1,7 @@
-import { UseChartPolarAxisSignature } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
-import { AxisId } from "../../models/axis.js";
-import { DefaultizedRadarSeriesType } from "../../models/seriesType/radar.js";
-import { ChartInstance } from "../../internals/plugins/models/index.js";
+import { type UseChartPolarAxisSignature } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
+import { type AxisId } from "../../models/axis.js";
+import { type DefaultizedRadarSeriesType } from "../../models/seriesType/radar.js";
+import { type ChartInstance } from "../../internals/plugins/models/index.js";
 interface UseRadarAxisHighlightReturnValue {
   /**
    * The radar center.

package/esm/RadarChart/RadarChart.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { ChartsLegendSlotProps, ChartsLegendSlots } from "../ChartsLegend/index.js";
-import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.js";
-import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { ChartsWrapperProps } from "../ChartsWrapper/index.js";
-import { RadarGridProps } from "./RadarGrid/index.js";
-import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
-import { RadarSeriesPlotProps } from "./RadarSeriesPlot/index.js";
-import { RadarAxisHighlightProps } from "./RadarAxisHighlight/index.js";
-import { ChartsTooltipSlotProps, ChartsTooltipSlots } from "../ChartsTooltip/index.js";
-import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
-import { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
+import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.js";
+import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.js";
+import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
+import { type ChartsWrapperProps } from "../ChartsWrapper/index.js";
+import { type RadarGridProps } from "./RadarGrid/index.js";
+import { type RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
+import { type RadarSeriesPlotProps } from "./RadarSeriesPlot/index.js";
+import { type RadarAxisHighlightProps } from "./RadarAxisHighlight/index.js";
+import { type ChartsTooltipSlotProps, type ChartsTooltipSlots } from "../ChartsTooltip/index.js";
+import { type ChartsSlotProps, type ChartsSlots } from "../internals/material/index.js";
+import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.js";
 export interface RadarChartSlots extends ChartsTooltipSlots, ChartsOverlaySlots, ChartsLegendSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface RadarChartSlotProps extends ChartsTooltipSlotProps, ChartsOverlaySlotProps, ChartsLegendSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface RadarChartProps extends RadarDataProviderProps, Omit<RadarGridProps, 'classes'>, Omit<Partial<RadarAxisHighlightProps>, 'classes'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ChartsWrapperProps, 'sx'>, Omit<ChartsSurfaceProps, 'sx'>, Pick<RadarSeriesPlotProps, 'onAreaClick' | 'onMarkClick'> {

package/esm/RadarChart/RadarChart.plugins.d.ts

@@ -1,5 +1,6 @@
-import { UseChartPolarAxisSignature } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
-import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
-import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>];
-export type RadarChartPluginSignatures = [UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature];
+import { type UseChartPolarAxisSignature } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
+import { type UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
+import { type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartTooltipSignature>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>];
+export type RadarChartPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature];

package/esm/RadarChart/RadarChart.plugins.js

@@ -1,4 +1,5 @@
 import { useChartPolarAxis } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
+import { useChartTooltip } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export const RADAR_PLUGINS = [useChartInteraction, useChartPolarAxis, useChartHighlight];
+export const RADAR_PLUGINS = [useChartTooltip, useChartInteraction, useChartPolarAxis, useChartHighlight];