@mui/x-charts 8.11.3 → 8.12.0

package/LineChart/FocusedMark.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function FocusedMark(): React.JSX.Element | null;

package/LineChart/FocusedMark.js

@@ -0,0 +1,44 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FocusedMark = FocusedMark;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _useFocusedItem = require("../hooks/useFocusedItem");
+var _hooks = require("../hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+const RADIUS = 6;
+function FocusedMark() {
+  const theme = (0, _styles.useTheme)();
+  const focusedItem = (0, _useFocusedItem.useFocusedItem)();
+  const lineSeries = (0, _hooks.useLineSeriesContext)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
+  if (focusedItem === null || focusedItem.seriesType !== 'line' || !lineSeries) {
+    return null;
+  }
+  const series = lineSeries?.series[focusedItem.seriesId];
+  const xAxisId = series.xAxisId ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? yAxisIds[0];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+    fill: "none",
+    stroke: (theme.vars ?? theme).palette.text.primary,
+    strokeWidth: 2,
+    x: xAxis[xAxisId].scale(xAxis[xAxisId].data[focusedItem.dataIndex]) - RADIUS,
+    y: yAxis[yAxisId].scale(series.stackedData[focusedItem.dataIndex][1]) - RADIUS,
+    width: 2 * RADIUS,
+    height: 2 * RADIUS,
+    rx: 3,
+    ry: 3
+  });
+}

package/LineChart/LineChart.d.ts

@@ -14,12 +14,12 @@ import { ChartsAxisSlotProps, ChartsAxisSlots } from "../models/axis.js";
 import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from "./LineHighlightPlot.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/index.js";
-import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
+import { LineChartPluginSignatures } from "./LineChart.plugins.js";
 import { ChartsToolbarSlots, ChartsToolbarSlotProps } from "../Toolbar/index.js";
 export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type LineSeries = MakeOptional<LineSeriesType, 'type'>;
-export interface LineChartProps extends Omit<ChartContainerProps<'line', LineChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface LineChartProps extends Omit<ChartContainerProps<'line', LineChartPluginSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the line chart.
    * An array of [[LineSeries]] objects.

package/LineChart/LineChart.js

@@ -27,6 +27,7 @@ var _useChartContainerProps = require("../ChartContainer/useChartContainerProps"
 var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartsWrapper = require("../ChartsWrapper");
+var _FocusedMark = require("./FocusedMark");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -70,7 +71,7 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedMark.FocusedMark, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
@@ -118,6 +119,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
+  enableKeyboardNavigation: _propTypes.default.bool,
   /**
    * Options to enable features planned for the next major.
    */

package/LineChart/LineChart.plugins.d.ts

@@ -2,6 +2,7 @@ import { UseChartZAxisSignature } from "../internals/plugins/featurePlugins/useC
 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 { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-export type LineChartPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature];
-export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginsSignatures>;
+export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginSignatures>;

package/LineChart/LineChart.plugins.js

@@ -8,4 +8,5 @@ var _useChartZAxis = require("../internals/plugins/featurePlugins/useChartZAxis"
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
-const LINE_CHART_PLUGINS = exports.LINE_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight];
+var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
+const LINE_CHART_PLUGINS = exports.LINE_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/LineChart/index.d.ts

@@ -9,5 +9,6 @@ export * from "./LineElement.js";
 export * from "./AnimatedLine.js";
 export * from "./MarkElement.js";
 export * from "./LineHighlightElement.js";
+export * from "./LineChart.plugins.js";
 export type { MarkElementClasses, MarkElementClassKey } from "./markElementClasses.js";
 export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";

package/LineChart/index.js

@@ -151,4 +151,16 @@ Object.keys(_LineHighlightElement).forEach(function (key) {
     }
   });
 });
+var _LineChart2 = require("./LineChart.plugins");
+Object.keys(_LineChart2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _LineChart2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _LineChart2[key];
+    }
+  });
+});
 var _markElementClasses = require("./markElementClasses");

package/LineChart/useLineChartProps.d.ts

@@ -12,7 +12,7 @@ import { LineHighlightPlotProps } from "./LineHighlightPlot.js";
 import { LinePlotProps } from "./LinePlot.js";
 import { MarkPlotProps } from "./MarkPlot.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
-import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
+import { 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.
@@ -22,7 +22,7 @@ import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
  */
 export declare const useLineChartProps: (props: LineChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
-  chartContainerProps: ChartContainerProps<"line", LineChartPluginsSignatures>;
+  chartContainerProps: ChartContainerProps<"line", LineChartPluginSignatures>;
   gridProps: ChartsGridProps;
   clipPathProps: ChartsClipPathProps;
   clipPathGroupProps: {

package/PieChart/PieArc.d.ts

@@ -20,6 +20,7 @@ interface PieArcOwnerState {
   color: string;
   isFaded: boolean;
   isHighlighted: boolean;
+  isFocused: boolean;
   classes?: Partial<PieArcClasses>;
 }
 export declare function getPieArcUtilityClass(slot: string): string;

package/PieChart/PieArc.js

@@ -21,7 +21,7 @@ var _hooks = require("../hooks");
 var _animation = require("../internals/animation/animation");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation"];
+const _excluded = ["classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "isFocused", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation"];
 function getPieArcUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArc', slot);
 }
@@ -60,6 +60,7 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
       id,
       isFaded,
       isHighlighted,
+      isFocused,
       onClick,
       cornerRadius,
       startAngle,
@@ -76,7 +77,8 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
     classes: innerClasses,
     color,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    isFocused
   };
   const classes = useUtilityClasses(ownerState);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
@@ -105,7 +107,8 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
     strokeWidth: 1,
     strokeLinejoin: "round",
     "data-highlighted": ownerState.isHighlighted || undefined,
-    "data-faded": ownerState.isFaded || undefined
+    "data-faded": ownerState.isFaded || undefined,
+    "data-focused": isFocused || undefined
   }, other, interactionProps, animatedProps));
 });
 if (process.env.NODE_ENV !== "production") PieArc.displayName = "PieArc";
@@ -121,6 +124,7 @@ process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   innerRadius: _propTypes.default.number.isRequired,
   isFaded: _propTypes.default.bool.isRequired,
+  isFocused: _propTypes.default.bool.isRequired,
   isHighlighted: _propTypes.default.bool.isRequired,
   outerRadius: _propTypes.default.number.isRequired,
   paddingAngle: _propTypes.default.number.isRequired,

package/PieChart/PieArcPlot.js

@@ -61,6 +61,7 @@ function PieArcPlot(props) {
       dataIndex: index,
       isFaded: item.isFaded,
       isHighlighted: item.isHighlighted,
+      isFocused: item.isFocused,
       onClick: onItemClick && (event => {
         onItemClick(event, {
           type: 'pie',

package/PieChart/PieChart.js

@@ -127,6 +127,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
   desc: _propTypes.default.string,
+  enableKeyboardNavigation: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/PieChart/PieChart.plugins.d.ts

@@ -1,5 +1,6 @@
 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];
+export type PieChartPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const PIE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<PieChartPluginSignatures>;

package/PieChart/PieChart.plugins.js

@@ -6,4 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.PIE_CHART_PLUGINS = void 0;
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
-const PIE_CHART_PLUGINS = exports.PIE_CHART_PLUGINS = [_useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight];
+var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
+const PIE_CHART_PLUGINS = exports.PIE_CHART_PLUGINS = [_useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/PieChart/dataTransform/useTransformData.d.ts

@@ -12,5 +12,6 @@ export interface ValueWithHighlight extends DefaultizedPieValueType, AnimatedObj
   dataIndex: number;
   isFaded: boolean;
   isHighlighted: boolean;
+  isFocused: boolean;
 }
 export declare function useTransformData(series: Pick<DefaultizedPieSeriesType, 'cornerRadius' | 'paddingAngle' | 'id' | 'highlighted' | 'faded' | 'data'> & ComputedPieRadius): ValueWithHighlight[];

package/PieChart/dataTransform/useTransformData.js

@@ -10,6 +10,7 @@ exports.useTransformData = useTransformData;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
+var _useIsItemFocusedGetter = require("../../hooks/useIsItemFocusedGetter");
 var _angleConversion = require("../../internals/angleConversion");
 function useTransformData(series) {
   const {
@@ -27,6 +28,7 @@ function useTransformData(series) {
     isFaded: isItemFaded,
     isHighlighted: isItemHighlighted
   } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
+  const isItemFocused = (0, _useIsItemFocusedGetter.useIsItemFocusedGetter)();
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
     const currentItem = {
       seriesId,
@@ -34,6 +36,11 @@ function useTransformData(series) {
     };
     const isHighlighted = isItemHighlighted(currentItem);
     const isFaded = !isHighlighted && isItemFaded(currentItem);
+    const isFocused = isItemFocused({
+      seriesType: 'pie',
+      seriesId,
+      dataIndex: itemIndex
+    });
     const attributesOverride = (0, _extends2.default)({
       additionalRadius: 0
     }, isFaded && faded || isHighlighted && highlighted || {});
@@ -46,12 +53,13 @@ function useTransformData(series) {
       dataIndex: itemIndex,
       isFaded,
       isHighlighted,
+      isFocused,
       paddingAngle,
       innerRadius,
       outerRadius,
       cornerRadius,
       arcLabelRadius
     });
-  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, highlighted, isItemFaded, isItemHighlighted, seriesId]);
+  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, highlighted, isItemFaded, isItemHighlighted, isItemFocused, seriesId]);
   return dataWithHighlight;
 }

package/PieChart/index.d.ts

@@ -5,5 +5,6 @@ export * from "./PieArcLabelPlot.js";
 export * from "./PieArc.js";
 export * from "./PieArcLabel.js";
 export * from "./getPieCoordinates.js";
+export * from "./PieChart.plugins.js";
 export { pieClasses } from "./pieClasses.js";
 export type { PieClasses, PieClassKey } from "./pieClasses.js";

package/PieChart/index.js

@@ -96,4 +96,16 @@ Object.keys(_getPieCoordinates).forEach(function (key) {
     }
   });
 });
+var _PieChart2 = require("./PieChart.plugins");
+Object.keys(_PieChart2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PieChart2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PieChart2[key];
+    }
+  });
+});
 var _pieClasses = require("./pieClasses");

package/RadarChart/RadarChart.plugins.d.ts

@@ -2,4 +2,4 @@ import { UseChartPolarAxisSignature } from "../internals/plugins/featurePlugins/
 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<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>];
-export type RadarChartPluginsSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature];
+export type RadarChartPluginSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature];

package/RadarChart/RadarDataProvider/RadarDataProvider.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
-import { RadarChartPluginsSignatures } from "../RadarChart.plugins.js";
+import { RadarChartPluginSignatures } from "../RadarChart.plugins.js";
 import { RadarSeriesType } from "../../models/seriesType/radar.js";
 import { ChartDataProviderProps } from "../../ChartDataProvider/index.js";
 import { RadarConfig } from "./radar.types.js";
 import { ChartAnyPluginSignature } from "../../internals/plugins/models/plugin.js";
 export type RadarSeries = MakeOptional<RadarSeriesType, 'type'>;
-export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginsSignatures> = Omit<ChartDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset' | 'experimentalFeatures'> & {
+export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginSignatures> = Omit<ChartDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset' | 'experimentalFeatures'> & {
   /**
    * The series to display in the bar chart.
    * An array of [[RadarSeries]] objects.
@@ -22,5 +22,5 @@ export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSi
    */
   highlight?: 'axis' | 'series' | 'none';
 };
-declare function RadarDataProvider<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginsSignatures>(props: RadarDataProviderProps<TSignatures>): React.JSX.Element;
+declare function RadarDataProvider<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginSignatures>(props: RadarDataProviderProps<TSignatures>): React.JSX.Element;
 export { RadarDataProvider };

package/RadarChart/index.d.ts

@@ -15,4 +15,5 @@ export * from "./RadarGrid/index.js";
 export * from "./RadarAxis/index.js";
 export * from "./RadarAxisHighlight/index.js";
 export * from "./RadarMetricLabels/index.js";
-export * from "./RadarSeriesPlot/index.js";
+export * from "./RadarSeriesPlot/index.js";
+export * from "./RadarChart.plugins.js";

package/RadarChart/index.js

@@ -84,6 +84,18 @@ Object.keys(_RadarSeriesPlot).forEach(function (key) {
     }
   });
 });
+var _RadarChart2 = require("./RadarChart.plugins");
+Object.keys(_RadarChart2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RadarChart2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RadarChart2[key];
+    }
+  });
+});
 /**
  * @deprecated radar chart is now stable, import `RadarChart` instead
  */

package/RadarChart/useRadarChartProps.d.ts

@@ -5,7 +5,7 @@ import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { RadarGridProps } from "./RadarGrid/index.js";
-import { RadarChartPluginsSignatures } from "./RadarChart.plugins.js";
+import { RadarChartPluginSignatures } from "./RadarChart.plugins.js";
 import { RadarSeriesAreaProps, RadarSeriesMarksProps } from "./RadarSeriesPlot/index.js";
 /**
  * A helper function that extracts RadarChartProps from the input props
@@ -18,7 +18,7 @@ export declare const useRadarChartProps: (props: RadarChartProps) => {
   highlight: "none" | "series" | "axis";
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   chartsSurfaceProps: ChartsSurfaceProps;
-  radarDataProviderProps: RadarDataProviderProps<RadarChartPluginsSignatures>;
+  radarDataProviderProps: RadarDataProviderProps<RadarChartPluginSignatures>;
   radarGrid: RadarGridProps;
   radarSeriesAreaProps: RadarSeriesAreaProps;
   radarSeriesMarksProps: RadarSeriesMarksProps;

package/ScatterChart/BatchScatter.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { DefaultizedScatterSeriesType } from "../models/seriesType/scatter.js";
+import { D3Scale } from "../models/axis.js";
+import { ScatterClasses } from "./scatterClasses.js";
+import { ColorGetter } from "../internals/plugins/models/seriesConfig/index.js";
+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): React.JSX.Element;

package/ScatterChart/BatchScatter.js

@@ -0,0 +1,171 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BatchScatter = BatchScatter;
+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 _useSelector = require("../internals/store/useSelector");
+var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
+var _jsxRuntime = require("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 appendAtKey(map, key, value) {
+  let bucket = map.get(key);
+  if (!bucket) {
+    bucket = [value];
+    map.set(key, bucket);
+  } else {
+    bucket.push(value);
+  }
+  return bucket;
+}
+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
+  } = (0, _ChartProvider.useChartContext)();
+  const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
+  const getYPosition = (0, _useScale.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__*/(0, _jsxRuntime.jsx)("path", {
+        fill: fill,
+        d: d
+      }, i));
+      i += 1;
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: children
+  });
+}
+const MemoBatchScatterPaths = /*#__PURE__*/React.memo(BatchScatterPaths);
+if (process.env.NODE_ENV !== "production") MemoBatchScatterPaths.displayName = "MemoBatchScatterPaths";
+const Group = (0, _styles.styled)('g')({
+  '&[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).
+ */
+function BatchScatter(props) {
+  const {
+    series,
+    xScale,
+    yScale,
+    color,
+    colorGetter,
+    classes: inClasses
+  } = props;
+  const {
+    store
+  } = (0, _ChartProvider.useChartContext)();
+  const isSeriesHighlighted = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartIsSeriesHighlighted, [series.id]);
+  const isSeriesFaded = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartIsSeriesFaded, [series.id]);
+  const seriesHighlightedItem = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartSeriesHighlightedItem, [series.id]);
+  const seriesUnfadedItem = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartSeriesUnfadedItem, [series.id]);
+  const highlightedModifier = 1.2;
+  const markerSize = series.markerSize * (isSeriesHighlighted ? highlightedModifier : 1);
+  const classes = (0, _scatterClasses.useUtilityClasses)(inClasses);
+  const siblings = [];
+  if (seriesHighlightedItem != null) {
+    const datum = series.data[seriesHighlightedItem];
+    const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
+    const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+    siblings.push(/*#__PURE__*/(0, _jsxRuntime.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 = (0, _useScale.getValueToPositionMapper)(xScale);
+    const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+    siblings.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: colorGetter ? colorGetter(seriesUnfadedItem) : color,
+      d: createPath(getXPosition(datum.x), getYPosition(datum.y), markerSize)
+    }, `unfaded-${series.id}`));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Group, {
+      className: classes.root,
+      "data-series": series.id,
+      "data-faded": isSeriesFaded || undefined,
+      "data-highlighted": isSeriesHighlighted || undefined,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MemoBatchScatterPaths, {
+        series: series,
+        xScale: xScale,
+        yScale: yScale,
+        color: color,
+        colorGetter: colorGetter,
+        markerSize: markerSize
+      })
+    }), siblings]
+  });
+}