@mui/x-charts 8.0.0-alpha.10 → 8.0.0-alpha.12

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/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/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,10 @@
+import seriesProcessor from "./seriesProcessor.js";
+import getColor from "./getColor.js";
+import legendGetter from "./legend.js";
+import tooltipGetter from "./tooltip.js";
+export const seriesConfig = {
+  colorProcessor: getColor,
+  seriesProcessor,
+  legendGetter,
+  tooltipGetter
+};

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/ScatterChart/Scatter.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { DefaultizedScatterSeriesType, ScatterItemIdentifier } from "../models/seriesType/scatter.js";
+import { D3Scale } from "../models/axis.js";
+export interface ScatterProps {
+  series: DefaultizedScatterSeriesType;
+  xScale: D3Scale;
+  yScale: D3Scale;
+  markerSize: number;
+  color: string;
+  colorGetter?: (dataIndex: number) => string;
+  /**
+   * Callback fired when clicking on a scatter item.
+   * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.
+   * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
+   */
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void;
+}
+/**
+ * Demos:
+ *
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+ *
+ * API:
+ *
+ * - [Scatter API](https://mui.com/x/api/charts/scatter/)
+ */
+declare function Scatter(props: ScatterProps): React.JSX.Element;
+declare namespace Scatter {
+  var propTypes: any;
+}
+export { Scatter };

package/modern/ScatterChart/Scatter.js

@@ -8,7 +8,7 @@ import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useStore } from "../internals/store/useStore.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useItemHighlightedGetter } from "../hooks/useItemHighlightedGetter.js";
-import { selectorChartsInteractionIsVoronoiEnabled } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { selectorChartsVoronoiIsVoronoiEnabled } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -35,7 +35,7 @@ function Scatter(props) {
     instance
   } = useChartContext();
   const store = useStore();
-  const isVoronoiEnabled = useSelector(store, selectorChartsInteractionIsVoronoiEnabled);
+  const isVoronoiEnabled = useSelector(store, selectorChartsVoronoiIsVoronoiEnabled);
   const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
   const getInteractionItemProps = useInteractionItemProps(skipInteractionHandlers);
   const {

package/modern/ScatterChart/ScatterChart.d.ts

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { MakeOptional } from '@mui/x-internals/types';
+import { ScatterPlotProps, ScatterPlotSlotProps, ScatterPlotSlots } from "./ScatterPlot.js";
+import { ChartContainerProps } from "../ChartContainer/index.js";
+import { ChartsAxisProps } from "../ChartsAxis/index.js";
+import { ScatterSeriesType } from "../models/seriesType/scatter.js";
+import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
+import { ChartsLegendSlotProps, ChartsLegendSlots } from "../ChartsLegend/index.js";
+import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/index.js";
+import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
+import { ChartsAxisSlots, ChartsAxisSlotProps } from "../models/axis.js";
+import { ChartsGridProps } from "../ChartsGrid/index.js";
+import { UseChartVoronoiSignature } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
+import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
+export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {}
+export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {}
+export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginsSignatures>, 'series' | 'plugins' | 'onItemClick'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+  /**
+   * The series to display in the scatter chart.
+   * An array of [[ScatterSeriesType]] objects.
+   */
+  series: MakeOptional<ScatterSeriesType, 'type'>[];
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
+   * @default { x: 'none', y: 'none' }
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * Option to display a cartesian grid in the background.
+   */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   */
+  disableVoronoi?: boolean;
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterChartSlotProps;
+  /**
+   * Callback fired when clicking on a scatter item.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.
+   * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
+   */
+  onItemClick?: ScatterPlotProps['onItemClick'] | UseChartVoronoiSignature['params']['onItemClick'];
+}
+/**
+ * Demos:
+ *
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+ *
+ * API:
+ *
+ * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+ */
+declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartProps & React.RefAttributes<SVGSVGElement>>;
+export { ScatterChart };

package/modern/ScatterChart/ScatterChart.js

@@ -10,7 +10,6 @@ import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
 import { ChartsOverlay } from "../ChartsOverlay/index.js";
 import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
-import { ChartsVoronoiHandler } from "../ChartsVoronoiHandler/ChartsVoronoiHandler.js";
 import { ChartsGrid } from "../ChartsGrid/index.js";
 import { useScatterChartProps } from "./useScatterChartProps.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
@@ -36,7 +35,6 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
   const {
     chartsWrapperProps,
     chartContainerProps,
-    voronoiHandlerProps,
     chartsAxisProps,
     gridProps,
     scatterPlotProps,
@@ -53,7 +51,7 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
+        children: [/*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
         }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({
@@ -90,7 +88,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**
@@ -159,6 +157,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/modern/ScatterChart/ScatterChart.plugins.d.ts

@@ -0,0 +1,8 @@
+import { UseChartZAxisSignature } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
+import { UseChartCartesianAxisSignature } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+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";
+import { UseChartVoronoiSignature } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
+export type ScatterChartPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
+export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginsSignatures>;

package/modern/ScatterChart/ScatterChart.plugins.js

@@ -0,0 +1,6 @@
+import { useChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
+import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { useChartVoronoi } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
+export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi];

package/modern/ScatterChart/ScatterPlot.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { ScatterProps } from "./Scatter.js";
+export interface ScatterPlotSlots {
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+}
+export interface ScatterPlotSlotProps {
+  scatter?: Partial<ScatterProps>;
+}
+export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterPlotSlotProps;
+}
+/**
+ * Demos:
+ *
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+ *
+ * API:
+ *
+ * - [ScatterPlot API](https://mui.com/x/api/charts/scatter-plot/)
+ */
+declare function ScatterPlot(props: ScatterPlotProps): React.JSX.Element | null;
+declare namespace ScatterPlot {
+  var propTypes: any;
+}
+export { ScatterPlot };

package/modern/ScatterChart/ScatterPlot.js

@@ -4,8 +4,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Scatter } from "./Scatter.js";
-import getColor from "./getColor.js";
-import { useScatterSeries } from "../hooks/useSeries.js";
+import { useScatterSeriesContext } from "../hooks/useScatterSeries.js";
+import getColor from "./seriesConfig/getColor.js";
 import { useXAxes, useYAxes } from "../hooks/index.js";
 import { useZAxes } from "../hooks/useZAxis.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,7 +25,7 @@ function ScatterPlot(props) {
     slotProps,
     onItemClick
   } = props;
-  const seriesData = useScatterSeries();
+  const seriesData = useScatterSeriesContext();
   const {
     xAxis,
     xAxisIds

package/modern/ScatterChart/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ScatterChart.js";
+export * from "./ScatterPlot.js";
+export * from "./Scatter.js";

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

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

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

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

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

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

package/modern/ScatterChart/seriesConfig/index.js

@@ -0,0 +1,13 @@
+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";
+export const seriesConfig = {
+  seriesProcessor,
+  colorProcessor: getColor,
+  legendGetter,
+  tooltipGetter,
+  xExtremumGetter: getExtremumX,
+  yExtremumGetter: getExtremumY
+};

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

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

package/modern/ScatterChart/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/ScatterChart/seriesConfig/seriesProcessor.d.ts

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

package/modern/ScatterChart/seriesConfig/seriesProcessor.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+const seriesProcessor = ({
+  series,
+  seriesOrder
+}, dataset) => {
+  const completeSeries = Object.fromEntries(Object.entries(series).map(([seriesId, seriesData]) => {
+    const datasetKeys = seriesData?.datasetKeys;
+    const missingKeys = ['x', 'y', 'id'].filter(key => typeof datasetKeys?.[key] !== 'string');
+    if (seriesData?.datasetKeys && missingKeys.length > 0) {
+      throw new Error([`MUI X: scatter series with id='${seriesId}' has incomplete datasetKeys.`, `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.`].join('\n'));
+    }
+    const data = !datasetKeys ? seriesData.data ?? [] : dataset?.map(d => {
+      return {
+        x: d[datasetKeys.x] ?? null,
+        y: d[datasetKeys.y] ?? null,
+        z: datasetKeys.z && d[datasetKeys.z],
+        id: datasetKeys.id && d[datasetKeys.id]
+      };
+    }) ?? [];
+    return [seriesId, _extends({
+      labelMarkType: 'circle'
+    }, seriesData, {
+      data,
+      valueFormatter: seriesData.valueFormatter ?? (v => v && `(${v.x}, ${v.y})`)
+    })];
+  }));
+  return {
+    series: completeSeries,
+    seriesOrder
+  };
+};
+export default seriesProcessor;

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

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

package/modern/ScatterChart/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/ScatterChart/useScatterChartProps.d.ts

@@ -0,0 +1,28 @@
+import { ChartsAxisProps } from "../ChartsAxis/index.js";
+import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/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 type { ScatterChartProps } from './ScatterChart';
+import type { ScatterPlotProps } from './ScatterPlot';
+import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
+import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
+/**
+ * A helper function that extracts ScatterChartProps from the input props
+ * and returns an object with props for the children components of ScatterChart.
+ *
+ * @param props The input props for ScatterChart
+ * @returns An object with props for the children components of ScatterChart
+ */
+export declare const useScatterChartProps: (props: ScatterChartProps) => {
+  chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
+  chartContainerProps: ChartContainerProps<"scatter", ScatterChartPluginsSignatures>;
+  chartsAxisProps: ChartsAxisProps;
+  gridProps: ChartsGridProps;
+  scatterPlotProps: ScatterPlotProps;
+  overlayProps: ChartsOverlayProps;
+  legendProps: ChartsLegendSlotExtension;
+  axisHighlightProps: ChartsAxisHighlightProps;
+  children: import("react").ReactNode;
+};

package/modern/ScatterChart/useScatterChartProps.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
 import { calculateMargins } from "../internals/calculateMargins.js";
-
+import { SCATTER_CHART_PLUGINS } from "./ScatterChart.plugins.js";
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -60,12 +60,12 @@ export const useScatterChartProps = props => {
     zAxis,
     highlightedItem,
     onHighlightChange,
-    className
-  });
-  const voronoiHandlerProps = {
+    disableVoronoi,
     voronoiMaxRadius,
-    onItemClick: onItemClick
-  };
+    onItemClick: disableVoronoi ? undefined : onItemClick,
+    className,
+    plugins: SCATTER_CHART_PLUGINS
+  });
   const chartsAxisProps = {
     topAxis,
     leftAxis,
@@ -104,7 +104,6 @@ export const useScatterChartProps = props => {
   return {
     chartsWrapperProps,
     chartContainerProps,
-    voronoiHandlerProps,
     chartsAxisProps,
     gridProps,
     scatterPlotProps,