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

package/modern/LineChart/MarkPlot.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { LineItemIdentifier } from "../models/seriesType/line.js";
+import { MarkElementProps } from "./MarkElement.js";
+export interface MarkPlotSlots {
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+}
+export interface MarkPlotSlotProps {
+  mark?: Partial<MarkElementProps>;
+}
+export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<MarkElementProps, 'skipAnimation'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MarkPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MarkPlotSlotProps;
+  /**
+   * Callback fired when a line mark item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+   */
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void;
+}
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+ */
+declare function MarkPlot(props: MarkPlotProps): React.JSX.Element | null;
+declare namespace MarkPlot {
+  var propTypes: any;
+}
+export { MarkPlot };

package/modern/LineChart/MarkPlot.js

@@ -9,13 +9,14 @@ import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
 import { useChartId } from "../hooks/useChartId.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { useLineSeries } from "../hooks/useSeries.js";
+import { useLineSeriesContext } from "../hooks/useLineSeries.js";
 import { cleanId } from "../internals/cleanId.js";
 import { CircleMarkElement } from "./CircleMarkElement.js";
-import getColor from "./getColor.js";
+import getColor from "./seriesConfig/getColor.js";
 import { MarkElement } from "./MarkElement.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { useXAxes, useYAxes } from "../hooks/index.js";
+import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -35,8 +36,9 @@ function MarkPlot(props) {
       onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const skipAnimation = useSkipAnimation(inSkipAnimation);
-  const seriesData = useLineSeries();
+  const isZoomInteracting = useInternalIsZoomInteracting();
+  const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
+  const seriesData = useLineSeriesContext();
   const {
     xAxis,
     xAxisIds

package/modern/LineChart/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./LineChart.js";
+export * from "./LinePlot.js";
+export * from "./AreaPlot.js";
+export * from "./MarkPlot.js";
+export * from "./LineHighlightPlot.js";
+export * from "./AreaElement.js";
+export * from "./AnimatedArea.js";
+export * from "./LineElement.js";
+export * from "./AnimatedLine.js";
+export * from "./MarkElement.js";
+export * from "./LineHighlightElement.js";
+export type { MarkElementClasses, MarkElementClassKey } from './markElementClasses';
+export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";

package/modern/LineChart/markElementClasses.d.ts

@@ -0,0 +1,20 @@
+import { SeriesId } from "../models/seriesType/common.js";
+export interface MarkElementClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when highlighted. */
+  highlighted: string;
+  /** Styles applied to the root element when faded. */
+  faded: string;
+}
+export type MarkElementClassKey = keyof MarkElementClasses;
+export interface MarkElementOwnerState {
+  id: SeriesId;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<MarkElementClasses>;
+}
+export declare function getMarkElementUtilityClass(slot: string): string;
+export declare const markElementClasses: MarkElementClasses;
+export declare const useUtilityClasses: (ownerState: MarkElementOwnerState) => Record<"root", string>;

package/modern/LineChart/seriesConfig/extremums.d.ts

@@ -0,0 +1,3 @@
+import { CartesianExtremumGetter } from "../../internals/plugins/models/seriesConfig/index.js";
+export declare const getExtremumX: CartesianExtremumGetter<'line'>;
+export declare const getExtremumY: CartesianExtremumGetter<'line'>;

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

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

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

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

package/modern/LineChart/seriesConfig/getSeriesWithDefaultValues.js

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

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

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

package/modern/LineChart/seriesConfig/index.js

@@ -0,0 +1,15 @@
+import { getExtremumX, getExtremumY } from "./extremums.js";
+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,
+  xExtremumGetter: getExtremumX,
+  yExtremumGetter: getExtremumY,
+  getSeriesWithDefaultValues
+};

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

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

package/modern/LineChart/seriesConfig/legend.js

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

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

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

package/modern/LineChart/seriesConfig/seriesProcessor.js

@@ -0,0 +1,77 @@
+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";
+// For now it's a copy past of bar charts formatter, but maybe will diverge later
+const seriesProcessor = (params, dataset) => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  const stackingGroups = getStackingGroups(_extends({}, params, {
+    defaultStrategy: {
+      stackOffset: 'none'
+    }
+  }));
+
+  // Create a data set with format adapted to d3
+  const d3Dataset = dataset ?? [];
+  seriesOrder.forEach(id => {
+    const data = series[id].data;
+    if (data !== undefined) {
+      data.forEach((value, index) => {
+        if (d3Dataset.length <= index) {
+          d3Dataset.push({
+            [id]: value
+          });
+        } else {
+          d3Dataset[index][id] = value;
+        }
+      });
+    } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
+      throw new Error([`MUI X: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+    }
+  });
+  const completedSeries = {};
+  stackingGroups.forEach(stackingGroup => {
+    // Get stacked values, and derive the domain
+    const {
+      ids,
+      stackingOrder,
+      stackingOffset
+    } = stackingGroup;
+    const stackedSeries = d3Stack().keys(ids.map(id => {
+      // Use dataKey if needed and available
+      const dataKey = series[id].dataKey;
+      return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
+    })).value((d, key) => d[key] ?? 0) // defaultize null value to 0
+    .order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    ids.forEach((id, index) => {
+      const dataKey = series[id].dataKey;
+      completedSeries[id] = _extends({
+        labelMarkType: 'line'
+      }, series[id], {
+        data: dataKey ? dataset.map(data => {
+          const value = data[dataKey];
+          if (typeof value !== 'number') {
+            if (process.env.NODE_ENV !== 'production') {
+              if (value !== null) {
+                warnOnce([`MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
+              }
+            }
+            return null;
+          }
+          return value;
+        }) : series[id].data,
+        stackedData: stackedSeries[index].map(([a, b]) => [a, b])
+      });
+    });
+  });
+  return {
+    seriesOrder,
+    stackingGroups,
+    series: defaultizeValueFormatter(completedSeries, v => v == null ? '' : v.toLocaleString())
+  };
+};
+export default seriesProcessor;

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

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

package/modern/LineChart/seriesConfig/tooltip.js

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

package/modern/LineChart/useLineChartProps.d.ts

@@ -0,0 +1,39 @@
+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 { LineChartProps } from './LineChart';
+import { LineHighlightPlotProps } from "./LineHighlightPlot.js";
+import { LinePlotProps } from "./LinePlot.js";
+import { MarkPlotProps } from "./MarkPlot.js";
+import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
+import { LineChartPluginsSignatures } 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.
+ *
+ * @param props The input props for LineChart
+ * @returns An object with props for the children components of LineChart
+ */
+export declare const useLineChartProps: (props: LineChartProps) => {
+  chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
+  chartContainerProps: ChartContainerProps<"line", LineChartPluginsSignatures>;
+  gridProps: ChartsGridProps;
+  clipPathProps: ChartsClipPathProps;
+  clipPathGroupProps: {
+    clipPath: string;
+  };
+  areaPlotProps: AreaPlotProps;
+  linePlotProps: LinePlotProps;
+  markPlotProps: MarkPlotProps;
+  overlayProps: ChartsOverlayProps;
+  chartsAxisProps: ChartsAxisProps;
+  axisHighlightProps: ChartsAxisHighlightProps;
+  lineHighlightPlotProps: LineHighlightPlotProps;
+  legendProps: ChartsLegendSlotExtension;
+  children: import("react").ReactNode;
+};

package/modern/LineChart/useLineChartProps.js

@@ -2,10 +2,10 @@
 
 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", "dataset", "sx", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
-import { calculateMargins } from "../internals/calculateMargins.js";
+import { LINE_CHART_PLUGINS } from "./LineChart.plugins.js";
 
 /**
  * A helper function that extracts LineChartProps from the input props
@@ -25,18 +25,12 @@ export const useLineChartProps = props => {
       colors,
       dataset,
       sx,
-      onAxisClick,
       onAreaClick,
       onLineClick,
       onMarkClick,
       axisHighlight,
       disableLineItemHighlight,
-      hideLegend,
       grid,
-      topAxis,
-      leftAxis,
-      rightAxis,
-      bottomAxis,
       children,
       slots,
       slotProps,
@@ -56,12 +50,7 @@ export const useLineChartProps = props => {
     }, s)),
     width,
     height,
-    margin: calculateMargins({
-      margin,
-      hideLegend,
-      slotProps,
-      series
-    }),
+    margin,
     colors,
     dataset,
     xAxis: xAxis ?? [{
@@ -74,13 +63,11 @@ export const useLineChartProps = props => {
     yAxis,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     className,
-    skipAnimation
+    skipAnimation,
+    plugins: LINE_CHART_PLUGINS
   });
-  const axisClickHandlerProps = {
-    onAxisClick
-  };
   const gridProps = {
     vertical: grid?.vertical,
     horizontal: grid?.horizontal
@@ -113,10 +100,6 @@ export const useLineChartProps = props => {
     loading
   };
   const chartsAxisProps = {
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
     slots,
     slotProps
   };
@@ -139,7 +122,6 @@ export const useLineChartProps = props => {
   return {
     chartsWrapperProps,
     chartContainerProps,
-    axisClickHandlerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,

package/modern/PieChart/PieArc.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { SpringValue } from '@react-spring/web';
+import { PieItemId } from "../models/index.js";
+export interface PieArcClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when highlighted. */
+  highlighted: string;
+  /** Styles applied to the root element when faded. */
+  faded: string;
+}
+export type PieArcClassKey = keyof PieArcClasses;
+interface PieArcOwnerState {
+  id: PieItemId;
+  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<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & PieArcOwnerState & {
+  cornerRadius: SpringValue<number>;
+  endAngle: SpringValue<number>;
+  innerRadius: SpringValue<number>;
+  onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
+  outerRadius: SpringValue<number>;
+  paddingAngle: SpringValue<number>;
+  startAngle: SpringValue<number>;
+};
+declare function PieArc(props: PieArcProps): React.JSX.Element;
+declare namespace PieArc {
+  var propTypes: any;
+}
+export { PieArc };

package/modern/PieChart/PieArc.js

@@ -67,7 +67,11 @@ function PieArc(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const getInteractionItemProps = useInteractionItemProps();
+  const interactionProps = useInteractionItemProps({
+    type: 'pie',
+    seriesId: id,
+    dataIndex
+  });
   return /*#__PURE__*/_jsx(PieArcRoot, _extends({
     d: to([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], (sA, eA, pA, iR, oR, cR) => d3Arc().cornerRadius(cR)({
       padAngle: pA,
@@ -88,11 +92,7 @@ function PieArc(props) {
     filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
     strokeWidth: 1,
     strokeLinejoin: "round"
-  }, other, getInteractionItemProps({
-    type: 'pie',
-    seriesId: id,
-    dataIndex
-  })));
+  }, other, interactionProps));
 }
 process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/PieChart/PieArcLabel.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { SpringValue } from '@react-spring/web';
+import { PieItemId } from "../models/seriesType/pie.js";
+export interface PieArcLabelClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when highlighted. */
+  highlighted: string;
+  /** Styles applied to the root element when faded. */
+  faded: string;
+}
+export type PieArcLabelClassKey = keyof PieArcLabelClasses;
+interface PieArcLabelOwnerState {
+  id: PieItemId;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<PieArcLabelClasses>;
+}
+export declare function getPieArcLabelUtilityClass(slot: string): string;
+export declare const pieArcLabelClasses: PieArcLabelClasses;
+export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, 'ref' | 'color' | 'id'> & {
+  startAngle: SpringValue<number>;
+  endAngle: SpringValue<number>;
+  innerRadius: SpringValue<number>;
+  outerRadius: SpringValue<number>;
+  arcLabelRadius: SpringValue<number>;
+  cornerRadius: SpringValue<number>;
+  paddingAngle: SpringValue<number>;
+} & {
+  formattedArcLabel?: string | null;
+};
+declare function PieArcLabel(props: PieArcLabelProps): React.JSX.Element;
+declare namespace PieArcLabel {
+  var propTypes: any;
+}
+export { PieArcLabel };

package/modern/PieChart/PieArcLabelPlot.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ComputedPieRadius, DefaultizedPieSeriesType } from "../models/seriesType/pie.js";
+import { PieArcLabelProps } from "./PieArcLabel.js";
+export interface PieArcLabelPlotSlots {
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+}
+export interface PieArcLabelPlotSlotProps {
+  pieArcLabel?: Partial<PieArcLabelProps>;
+}
+export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle' | 'id'>, ComputedPieRadius {
+  /**
+   * Override the arc attributes when it is faded.
+   * @default { additionalRadius: -5 }
+   */
+  faded?: DefaultizedPieSeriesType['faded'];
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieArcLabelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieArcLabelPlotSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+}
+declare function PieArcLabelPlot(props: PieArcLabelPlotProps): React.JSX.Element | null;
+declare namespace PieArcLabelPlot {
+  var propTypes: any;
+}
+export { PieArcLabelPlot };

package/modern/PieChart/PieArcLabelPlot.js

@@ -130,10 +130,10 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     color: PropTypes.string.isRequired,
     endAngle: PropTypes.number.isRequired,
     formattedValue: PropTypes.string.isRequired,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     index: PropTypes.number.isRequired,
     label: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    labelMarkType: PropTypes.oneOf(['circle', 'line', 'square']),
+    labelMarkType: PropTypes.oneOfType([PropTypes.oneOf(['circle', 'line', 'square']), PropTypes.func]),
     padAngle: PropTypes.number.isRequired,
     startAngle: PropTypes.number.isRequired,
     value: PropTypes.number.isRequired

package/modern/PieChart/PieArcPlot.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { PieArcProps } from "./PieArc.js";
+import { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType, PieItemIdentifier } from "../models/seriesType/pie.js";
+export interface PieArcPlotSlots {
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+}
+export interface PieArcPlotSlotProps {
+  pieArc?: Partial<PieArcProps>;
+}
+export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'id'>, ComputedPieRadius {
+  /**
+   * Override the arc attributes when it is faded.
+   * @default { additionalRadius: -5 }
+   */
+  faded?: DefaultizedPieSeriesType['faded'];
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieArcPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieArcPlotSlotProps;
+  /**
+   * Callback fired when a pie item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
+   * @param {DefaultizedPieValueType} item The pie item.
+   */
+  onItemClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+}
+declare function PieArcPlot(props: PieArcPlotProps): React.JSX.Element | null;
+declare namespace PieArcPlot {
+  var propTypes: any;
+}
+export { PieArcPlot };

package/modern/PieChart/PieArcPlot.js

@@ -96,10 +96,10 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     color: PropTypes.string.isRequired,
     endAngle: PropTypes.number.isRequired,
     formattedValue: PropTypes.string.isRequired,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     index: PropTypes.number.isRequired,
     label: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    labelMarkType: PropTypes.oneOf(['circle', 'line', 'square']),
+    labelMarkType: PropTypes.oneOfType([PropTypes.oneOf(['circle', 'line', 'square']), PropTypes.func]),
     padAngle: PropTypes.number.isRequired,
     startAngle: PropTypes.number.isRequired,
     value: PropTypes.number.isRequired