@mui/x-charts 9.0.0-alpha.0 → 9.0.0-alpha.2

package/RadarChart/seriesConfig/seriesProcessor.d.mts

@@ -0,0 +1,3 @@
+import { type SeriesProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+declare const seriesProcessor: SeriesProcessor<'radar'>;
+export default seriesProcessor;

package/RadarChart/seriesConfig/tooltip.d.mts

@@ -0,0 +1,4 @@
+import type { AxisTooltipGetter, TooltipGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+declare const tooltipGetter: TooltipGetter<'radar'>;
+export declare const axisTooltipGetter: AxisTooltipGetter<'radar', 'rotation'>;
+export default tooltipGetter;

package/RadarChart/seriesConfig/tooltip.mjs

@@ -0,0 +1,39 @@
+import { getLabel } from "../../internals/getLabel.mjs";
+const tooltipGetter = params => {
+  const {
+    series,
+    axesConfig,
+    getColor,
+    identifier
+  } = params;
+  const rotationAxis = axesConfig.rotation;
+  if (!identifier || !rotationAxis) {
+    return null;
+  }
+  const label = getLabel(series.label, 'tooltip');
+  const formatter = v => rotationAxis.valueFormatter?.(v, {
+    location: 'tooltip',
+    scale: rotationAxis.scale
+  }) ?? (v == null ? '' : v.toLocaleString());
+  return {
+    identifier,
+    color: getColor(),
+    label,
+    markType: series.labelMarkType,
+    values: series.data.filter((_, index) => identifier.dataIndex == null || identifier.dataIndex === index).map((value, dataIndex) => ({
+      value,
+      formattedValue: series.valueFormatter(value, {
+        dataIndex
+      }),
+      markType: series.labelMarkType,
+      label: formatter(rotationAxis?.data?.[dataIndex])
+    }))
+  };
+};
+export const axisTooltipGetter = series => {
+  return Object.values(series).map(() => ({
+    direction: 'rotation',
+    axisId: undefined
+  }));
+};
+export default tooltipGetter;

package/RadarChart/seriesConfig/tooltipPosition.d.mts

@@ -0,0 +1,3 @@
+import type { TooltipItemPositionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'radar'>;
+export default tooltipItemPositionGetter;

package/RadarChart/seriesConfig/tooltipPosition.mjs

@@ -0,0 +1,100 @@
+import { generatePolar2svg } from "../../internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.mjs";
+import { getDrawingAreaCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
+const tooltipItemPositionGetter = params => {
+  const {
+    series,
+    identifier,
+    axesConfig,
+    drawingArea,
+    placement
+  } = params;
+  if (!identifier) {
+    return null;
+  }
+  const itemSeries = series.radar?.series[identifier.seriesId];
+  if (itemSeries == null) {
+    return null;
+  }
+  const {
+    radiusAxes,
+    rotationAxes
+  } = axesConfig;
+  if (radiusAxes === undefined || rotationAxes === undefined) {
+    return null;
+  }
+
+  // Only one rotation axis is supported for radar charts
+  const rotationAxis = rotationAxes.axis[rotationAxes.axisIds[0]];
+  const metrics = rotationAxis.scale.domain() ?? [];
+  const angles = metrics.map(key => rotationAxis.scale(key));
+  const {
+    cx,
+    cy
+  } = getDrawingAreaCenter(drawingArea);
+  const polar2svg = generatePolar2svg({
+    cx,
+    cy
+  });
+  const points = itemSeries.data.map((value, dataIndex) => {
+    const rId = radiusAxes.axisIds[dataIndex];
+    const r = radiusAxes.axis[rId].scale(value);
+    const angle = angles[dataIndex];
+    return polar2svg(r, angle);
+  });
+  if (points.length === 0) {
+    return null;
+  }
+  if (identifier.dataIndex != null) {
+    const point = points[identifier.dataIndex];
+    switch (placement) {
+      case 'right':
+        return {
+          x: point[0] + 4,
+          y: point[1]
+        };
+      case 'bottom':
+        return {
+          x: point[0],
+          y: point[1] + 4
+        };
+      case 'left':
+        return {
+          x: point[0] - 4,
+          y: point[1]
+        };
+      case 'top':
+      default:
+        return {
+          x: point[0],
+          y: point[1] - 4
+        };
+    }
+  }
+  const [top, right, bottom, left] = points.reduce((acc, [x, y]) => {
+    return [Math.min(y, acc[0]), Math.max(x, acc[1]), Math.max(y, acc[2]), Math.min(x, acc[3])];
+  }, [Infinity, -Infinity, -Infinity, Infinity]);
+  switch (placement) {
+    case 'right':
+      return {
+        x: right,
+        y: (top + bottom) / 2
+      };
+    case 'bottom':
+      return {
+        x: (left + right) / 2,
+        y: bottom
+      };
+    case 'left':
+      return {
+        x: left,
+        y: (top + bottom) / 2
+      };
+    case 'top':
+    default:
+      return {
+        x: (left + right) / 2,
+        y: top
+      };
+  }
+};
+export default tooltipItemPositionGetter;

package/RadarChart/useRadarChartProps.d.mts

@@ -0,0 +1,28 @@
+import type { RadarChartProps } from "./RadarChart.mjs";
+import { type ChartsOverlayProps } from "../ChartsOverlay/index.mjs";
+import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.mjs";
+import type { ChartsWrapperProps } from "../ChartsWrapper/index.mjs";
+import { type RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.mjs";
+import { type ChartsSurfaceProps } from "../ChartsSurface/index.mjs";
+import { type RadarGridProps } from "./RadarGrid/index.mjs";
+import { type RadarChartPluginSignatures } from "./RadarChart.plugins.mjs";
+import { type RadarSeriesAreaProps, type RadarSeriesMarksProps } from "./RadarSeriesPlot/index.mjs";
+/**
+ * A helper function that extracts RadarChartProps from the input props
+ * and returns an object with props for the children components of RadarChart.
+ *
+ * @param props The input props for RadarChart
+ * @returns An object with props for the children components of RadarChart
+ */
+export declare const useRadarChartProps: (props: RadarChartProps) => {
+  highlight: "none" | "series" | "axis";
+  chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
+  chartsSurfaceProps: ChartsSurfaceProps;
+  radarDataProviderProps: RadarDataProviderProps<RadarChartPluginSignatures>;
+  radarGrid: RadarGridProps;
+  radarSeriesAreaProps: RadarSeriesAreaProps;
+  radarSeriesMarksProps: RadarSeriesMarksProps;
+  overlayProps: ChartsOverlayProps;
+  legendProps: ChartsLegendSlotExtension;
+  children: import("react").ReactNode;
+};

package/RadarChart/useRadarChartProps.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useRadarChartProps = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _RadarChart = require("./RadarChart.plugins");
-const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "enableKeyboardNavigation"];
+const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "enableKeyboardNavigation", "className"];
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -40,7 +40,8 @@ const useRadarChartProps = props => {
       onAxisClick,
       onAreaClick,
       onMarkClick,
-      enableKeyboardNavigation
+      enableKeyboardNavigation,
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const radarDataProviderProps = {
@@ -70,7 +71,8 @@ const useRadarChartProps = props => {
   };
   const chartsWrapperProps = {
     sx,
-    hideLegend: props.hideLegend ?? false
+    hideLegend: props.hideLegend ?? false,
+    className
   };
   const radarGrid = {
     divisions,

package/RadarChart/useRadarChartProps.mjs

@@ -0,0 +1,95 @@
+'use client';
+
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "enableKeyboardNavigation", "className"];
+import { RADAR_PLUGINS } from "./RadarChart.plugins.mjs";
+/**
+ * A helper function that extracts RadarChartProps from the input props
+ * and returns an object with props for the children components of RadarChart.
+ *
+ * @param props The input props for RadarChart
+ * @returns An object with props for the children components of RadarChart
+ */
+export const useRadarChartProps = props => {
+  const {
+      apiRef,
+      series,
+      radar,
+      width,
+      height,
+      margin,
+      colors,
+      sx,
+      children,
+      slots,
+      slotProps,
+      skipAnimation,
+      loading,
+      highlightedItem,
+      onHighlightChange,
+      divisions,
+      shape,
+      stripeColor,
+      highlight = 'axis',
+      onAxisClick,
+      onAreaClick,
+      onMarkClick,
+      enableKeyboardNavigation,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const radarDataProviderProps = {
+    apiRef,
+    series,
+    radar,
+    highlight,
+    width,
+    height,
+    margin,
+    colors,
+    highlightedItem,
+    onHighlightChange,
+    skipAnimation,
+    onAxisClick,
+    enableKeyboardNavigation,
+    plugins: RADAR_PLUGINS
+  };
+  const overlayProps = {
+    slots,
+    slotProps,
+    loading
+  };
+  const legendProps = {
+    slots,
+    slotProps
+  };
+  const chartsWrapperProps = {
+    sx,
+    hideLegend: props.hideLegend ?? false,
+    className
+  };
+  const radarGrid = {
+    divisions,
+    shape,
+    stripeColor
+  };
+  const radarSeriesAreaProps = {
+    onItemClick: onAreaClick
+  };
+  const radarSeriesMarksProps = {
+    onItemClick: onMarkClick
+  };
+  const chartsSurfaceProps = other;
+  return {
+    highlight,
+    chartsWrapperProps,
+    chartsSurfaceProps,
+    radarDataProviderProps,
+    radarGrid,
+    radarSeriesAreaProps,
+    radarSeriesMarksProps,
+    overlayProps,
+    legendProps,
+    children
+  };
+};

package/ScatterChart/BatchScatter.d.mts

@@ -0,0 +1,31 @@
+import { type DefaultizedScatterSeriesType } from "../models/seriesType/scatter.mjs";
+import { type D3Scale } from "../models/axis.mjs";
+import { type ScatterClasses } from "./scatterClasses.mjs";
+import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+export interface BatchScatterProps {
+  series: DefaultizedScatterSeriesType;
+  xScale: D3Scale;
+  yScale: D3Scale;
+  color: string;
+  colorGetter?: ColorGetter<'scatter'>;
+  classes?: Partial<ScatterClasses>;
+}
+export interface BatchScatterPathsProps {
+  series: DefaultizedScatterSeriesType;
+  xScale: D3Scale;
+  yScale: D3Scale;
+  color: string;
+  colorGetter?: ColorGetter<'scatter'>;
+  markerSize: number;
+}
+/**
+ * @internal
+ * A batch version of the Scatter component that uses SVG paths to render points.
+ * This component is optimized for performance and is suitable for rendering large datasets, but has limitations. Some of the limitations include:
+ * - Limited CSS styling;
+ * - Overriding the `marker` slot is not supported;
+ * - Highlight style must not contain opacity.
+ *
+ * You can read about all the limitations [here](https://mui.com/x/react-charts/scatter/#performance).
+ */
+export declare function BatchScatter(props: BatchScatterProps): import("react/jsx-runtime").JSX.Element;

package/ScatterChart/BatchScatter.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _scatterClasses = require("./scatterClasses");
 var _ChartProvider = require("../context/ChartProvider");
-var _useScale = require("../hooks/useScale");
+var _getValueToPositionMapper = require("../hooks/getValueToPositionMapper");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _appendAtKey = require("../internals/appendAtKey");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,8 +25,8 @@ function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGett
   const {
     instance
   } = (0, _ChartProvider.useChartContext)();
-  const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-  const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+  const getXPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(xScale);
+  const getYPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(yScale);
   const paths = new Map();
   const temporaryPaths = new Map();
   for (let i = 0; i < seriesData.length; i += 1) {
@@ -128,8 +128,8 @@ function BatchScatter(props) {
   const siblings = [];
   if (seriesHighlightedItem != null) {
     const datum = series.data[seriesHighlightedItem];
-    const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-    const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+    const getXPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(xScale);
+    const getYPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(yScale);
     siblings.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
       fill: colorGetter ? colorGetter(seriesHighlightedItem) : color,
       "data-highlighted": true,
@@ -138,8 +138,8 @@ function BatchScatter(props) {
   }
   if (seriesUnfadedItem != null) {
     const datum = series.data[seriesUnfadedItem];
-    const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-    const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+    const getXPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(xScale);
+    const getYPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(yScale);
     siblings.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
       fill: colorGetter ? colorGetter(seriesUnfadedItem) : color,
       d: createPath(getXPosition(datum.x), getYPosition(datum.y), markerSize)

package/ScatterChart/BatchScatter.mjs

@@ -0,0 +1,158 @@
+'use client';
+
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { useUtilityClasses } from "./scatterClasses.mjs";
+import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.mjs";
+import { selectorChartIsSeriesFaded, selectorChartIsSeriesHighlighted, selectorChartSeriesUnfadedItem, selectorChartSeriesHighlightedItem } from "../internals/plugins/featurePlugins/useChartHighlight/index.mjs";
+import { appendAtKey } from "../internals/appendAtKey.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MAX_POINTS_PER_PATH = 1000;
+/* In an SVG arc, if the arc starts and ends at the same point, it is not rendered, so we add a tiny
+ * value to one of the coordinates to ensure that the arc is rendered. */
+const ALMOST_ZERO = 0.01;
+function createPath(x, y, markerSize) {
+  return `M${x - markerSize} ${y} a${markerSize} ${markerSize} 0 1 1 0 ${ALMOST_ZERO}`;
+}
+function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGetter) {
+  const {
+    instance
+  } = useChartContext();
+  const getXPosition = getValueToPositionMapper(xScale);
+  const getYPosition = getValueToPositionMapper(yScale);
+  const paths = new Map();
+  const temporaryPaths = new Map();
+  for (let i = 0; i < seriesData.length; i += 1) {
+    const scatterPoint = seriesData[i];
+    const x = getXPosition(scatterPoint.x);
+    const y = getYPosition(scatterPoint.y);
+    if (!instance.isPointInside(x, y)) {
+      continue;
+    }
+    const path = createPath(x, y, markerSize);
+    const fill = colorGetter ? colorGetter(i) : color;
+    const tempPath = appendAtKey(temporaryPaths, fill, path);
+    if (tempPath.length >= MAX_POINTS_PER_PATH) {
+      appendAtKey(paths, fill, tempPath.join(''));
+      temporaryPaths.delete(fill);
+    }
+  }
+  for (const [fill, tempPath] of temporaryPaths.entries()) {
+    if (tempPath.length > 0) {
+      appendAtKey(paths, fill, tempPath.join(''));
+    }
+  }
+  return paths;
+}
+function BatchScatterPaths(props) {
+  const {
+    series,
+    xScale,
+    yScale,
+    color,
+    colorGetter,
+    markerSize
+  } = props;
+  const paths = useCreatePaths(series.data, markerSize, xScale, yScale, color, colorGetter);
+  const children = [];
+  let i = 0;
+  for (const [fill, dArray] of paths.entries()) {
+    for (const d of dArray) {
+      children.push(/*#__PURE__*/_jsx("path", {
+        fill: fill,
+        d: d
+      }, i));
+      i += 1;
+    }
+  }
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: children
+  });
+}
+const MemoBatchScatterPaths = /*#__PURE__*/React.memo(BatchScatterPaths);
+if (process.env.NODE_ENV !== "production") MemoBatchScatterPaths.displayName = "MemoBatchScatterPaths";
+const Group = styled('g', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
+  '&[data-faded="true"]': {
+    opacity: 0.3
+  },
+  '& path': {
+    /* The browser must do hit testing to know which element a pointer is interacting with.
+     * With many data points, we create many paths causing significant time to be spent in the hit test phase.
+     * To fix this issue, we disable pointer events for the descendant paths.
+     *
+     * Ideally, users should be able to override this in case they need pointer events to be enabled,
+     * but it can affect performance negatively, especially with many data points. */
+    pointerEvents: 'none'
+  }
+});
+
+/**
+ * @internal
+ * A batch version of the Scatter component that uses SVG paths to render points.
+ * This component is optimized for performance and is suitable for rendering large datasets, but has limitations. Some of the limitations include:
+ * - Limited CSS styling;
+ * - Overriding the `marker` slot is not supported;
+ * - Highlight style must not contain opacity.
+ *
+ * You can read about all the limitations [here](https://mui.com/x/react-charts/scatter/#performance).
+ */
+export function BatchScatter(props) {
+  const {
+    series,
+    xScale,
+    yScale,
+    color,
+    colorGetter,
+    classes: inClasses
+  } = props;
+  const {
+    store
+  } = useChartContext();
+  const isSeriesHighlighted = store.use(selectorChartIsSeriesHighlighted, series.id);
+  const isSeriesFaded = store.use(selectorChartIsSeriesFaded, series.id);
+  const seriesHighlightedItem = store.use(selectorChartSeriesHighlightedItem, series.id);
+  const seriesUnfadedItem = store.use(selectorChartSeriesUnfadedItem, series.id);
+  const highlightedModifier = 1.2;
+  const markerSize = series.markerSize * (isSeriesHighlighted ? highlightedModifier : 1);
+  const classes = useUtilityClasses(inClasses);
+  const siblings = [];
+  if (seriesHighlightedItem != null) {
+    const datum = series.data[seriesHighlightedItem];
+    const getXPosition = getValueToPositionMapper(xScale);
+    const getYPosition = getValueToPositionMapper(yScale);
+    siblings.push(/*#__PURE__*/_jsx("path", {
+      fill: colorGetter ? colorGetter(seriesHighlightedItem) : color,
+      "data-highlighted": true,
+      d: createPath(getXPosition(datum.x), getYPosition(datum.y), markerSize * highlightedModifier)
+    }, `highlighted-${series.id}`));
+  }
+  if (seriesUnfadedItem != null) {
+    const datum = series.data[seriesUnfadedItem];
+    const getXPosition = getValueToPositionMapper(xScale);
+    const getYPosition = getValueToPositionMapper(yScale);
+    siblings.push(/*#__PURE__*/_jsx("path", {
+      fill: colorGetter ? colorGetter(seriesUnfadedItem) : color,
+      d: createPath(getXPosition(datum.x), getYPosition(datum.y), markerSize)
+    }, `unfaded-${series.id}`));
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(Group, {
+      className: classes.root,
+      "data-series": series.id,
+      "data-faded": isSeriesFaded || undefined,
+      "data-highlighted": isSeriesHighlighted || undefined,
+      children: /*#__PURE__*/_jsx(MemoBatchScatterPaths, {
+        series: series,
+        xScale: xScale,
+        yScale: yScale,
+        color: color,
+        colorGetter: colorGetter,
+        markerSize: markerSize
+      })
+    }), siblings]
+  });
+}

package/ScatterChart/FocusedScatterMark.mjs

@@ -0,0 +1,44 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useFocusedItem } from "../hooks/useFocusedItem.mjs";
+import { getValueToPositionMapper, useScatterSeriesContext, useXAxes, useYAxes } from "../hooks/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FocusedScatterMark(props) {
+  const theme = useTheme();
+  const focusedItem = useFocusedItem();
+  const scatterSeries = useScatterSeriesContext();
+  const {
+    xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
+    yAxis,
+    yAxisIds
+  } = useYAxes();
+  if (focusedItem === null || focusedItem.type !== 'scatter' || !scatterSeries) {
+    return null;
+  }
+  const series = scatterSeries?.series[focusedItem.seriesId];
+  const xAxisId = series.xAxisId ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? yAxisIds[0];
+  const getXPosition = getValueToPositionMapper(xAxis[xAxisId].scale);
+  const getYPosition = getValueToPositionMapper(yAxis[yAxisId].scale);
+  const scatterPoint = series.data[focusedItem.dataIndex];
+  const x = getXPosition(scatterPoint.x);
+  const y = getYPosition(scatterPoint.y);
+  const size = series.markerSize + 3;
+  return /*#__PURE__*/_jsx("rect", _extends({
+    fill: "none",
+    stroke: (theme.vars ?? theme).palette.text.primary,
+    strokeWidth: 2,
+    x: x - size,
+    y: y - size,
+    width: 2 * size,
+    height: 2 * size,
+    rx: 3,
+    ry: 3
+  }, props));
+}

package/ScatterChart/Scatter.d.mts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { type ScatterMarkerSlotProps, type ScatterMarkerSlots } from "./ScatterMarker.types.mjs";
+import { type DefaultizedScatterSeriesType, type ScatterItemIdentifier } from "../models/seriesType/scatter.mjs";
+import { type D3Scale } from "../models/axis.mjs";
+import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+import { type ScatterClasses } from "./scatterClasses.mjs";
+export interface ScatterProps {
+  series: DefaultizedScatterSeriesType;
+  xScale: D3Scale;
+  yScale: D3Scale;
+  color: string;
+  /**
+   * Function to get the color of a scatter item given its data index.
+   * The data index argument is optional. If not provided, the color for the entire series is returned.
+   * If provided, the color for the specific scatter item is returned.
+   */
+  colorGetter: ColorGetter<'scatter'>;
+  /**
+   * 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;
+  classes?: Partial<ScatterClasses>;
+  slots?: ScatterSlots;
+  slotProps?: ScatterSlotProps;
+}
+export interface ScatterSlots extends ScatterMarkerSlots {}
+export interface ScatterSlotProps extends ScatterMarkerSlotProps {}
+/**
+ * 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): import("react/jsx-runtime").JSX.Element;
+declare namespace Scatter {
+  var propTypes: any;
+}
+export { Scatter };