@mui/x-charts 8.8.0 → 8.9.2

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -16,7 +16,7 @@ var _useRadarSeriesData = require("./useRadarSeriesData");
 var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
 var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesId"];
+const _excluded = ["seriesId", "onItemClick"];
 function getCircleProps(params) {
   const {
     isHighlighted,
@@ -40,12 +40,14 @@ function getCircleProps(params) {
     fill: color,
     stroke: color,
     opacity: fillArea && isItemFaded ? 0.5 : 1,
-    pointerEvents: 'none',
     className: (0, _clsx.clsx)(classes.mark, isItemHighlighted && classes.highlighted || isItemFaded && classes.faded)
   };
 }
 function RadarSeriesMarks(props) {
-  const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+      onItemClick
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(props.seriesId);
   const classes = (0, _radarSeriesPlotClasses.useUtilityClasses)(props.classes);
   const {
@@ -72,7 +74,15 @@ function RadarSeriesMarks(props) {
           isFaded,
           isHighlighted,
           classes
-        }), other), index))
+        }), {
+          pointerEvents: onItemClick ? undefined : 'none',
+          onClick: event => onItemClick?.(event, {
+            type: 'radar',
+            seriesId: id,
+            dataIndex: index
+          }),
+          cursor: onItemClick ? 'pointer' : 'unset'
+        }, other), index))
       }, id);
     })
   });
@@ -86,6 +96,12 @@ process.env.NODE_ENV !== "production" ? RadarSeriesMarks.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
+  /**
+   * Callback fired when a mark is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
+   */
+  onItemClick: _propTypes.default.func,
   /**
    * The id of the series to display.
    * If undefined all series are displayed.

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -15,15 +15,23 @@ var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
 var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
 var _RadarSeriesArea = require("./RadarSeriesArea");
 var _RadarSeriesMarks = require("./RadarSeriesMarks");
+var _useRadarRotationIndex = require("./useRadarRotationIndex");
 var _jsxRuntime = require("react/jsx-runtime");
 function RadarSeriesPlot(props) {
-  const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(props.seriesId);
+  const {
+    seriesId: inSeriesId,
+    classes: inClasses,
+    onAreaClick,
+    onMarkClick
+  } = props;
+  const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(inSeriesId);
+  const getRotationIndex = (0, _useRadarRotationIndex.useRadarRotationIndex)();
   const interactionProps = (0, _useInteractionItemProps.useInteractionAllItemProps)(seriesCoordinates);
   const {
     isFaded,
     isHighlighted
   } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
-  const classes = (0, _radarSeriesPlotClasses.useUtilityClasses)(props.classes);
+  const classes = (0, _radarSeriesPlotClasses.useUtilityClasses)(inClasses);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     className: classes.root,
     children: seriesCoordinates?.map(({
@@ -42,7 +50,14 @@ function RadarSeriesPlot(props) {
           isFaded,
           isHighlighted,
           classes
-        }), interactionProps[seriesIndex]), seriesId), !hideMark && points.map((point, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({}, (0, _RadarSeriesMarks.getCircleProps)({
+        }), {
+          onClick: event => onAreaClick?.(event, {
+            type: 'radar',
+            seriesId,
+            dataIndex: getRotationIndex(event)
+          }),
+          cursor: onAreaClick ? 'pointer' : 'unset'
+        }, interactionProps[seriesIndex]), seriesId), !hideMark && points.map((point, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({}, (0, _RadarSeriesMarks.getCircleProps)({
           seriesId,
           point,
           color,
@@ -50,7 +65,14 @@ function RadarSeriesPlot(props) {
           isFaded,
           isHighlighted,
           classes
-        })), index))]
+        }), {
+          onClick: event => onMarkClick?.(event, {
+            type: 'radar',
+            seriesId,
+            dataIndex: index
+          }),
+          cursor: onMarkClick ? 'pointer' : 'unset'
+        }), index))]
       }, seriesId);
     })
   });
@@ -64,6 +86,18 @@ process.env.NODE_ENV !== "production" ? RadarSeriesPlot.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
+  /**
+   * Callback fired when an area is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
+   */
+  onAreaClick: _propTypes.default.func,
+  /**
+   * Callback fired when a mark is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
+   */
+  onMarkClick: _propTypes.default.func,
   /**
    * The id of the series to display.
    * If undefined all series are displayed.

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.types.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.js";
+import { RadarItemIdentifier } from "../../models/seriesType/radar.js";
 interface CommonRadarSeriesPlotProps {
   /**
    * The id of the series to display.
@@ -11,7 +12,35 @@ interface CommonRadarSeriesPlotProps {
    */
   classes?: Partial<RadarSeriesPlotClasses>;
 }
-export interface RadarSeriesPlotProps extends CommonRadarSeriesPlotProps {}
-export interface RadarSeriesMarksProps extends CommonRadarSeriesPlotProps, React.SVGAttributes<SVGCircleElement> {}
-export interface RadarSeriesAreaProps extends CommonRadarSeriesPlotProps, React.SVGAttributes<SVGPathElement> {}
+export interface RadarSeriesPlotProps extends CommonRadarSeriesPlotProps {
+  /**
+   * Callback fired when an area is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
+   */
+  onAreaClick?: RadarSeriesAreaProps['onItemClick'];
+  /**
+   * Callback fired when a mark is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
+   */
+  onMarkClick?: RadarSeriesMarksProps['onItemClick'];
+}
+type RadarClickIdentifier = Required<RadarItemIdentifier>;
+export interface RadarSeriesMarksProps extends CommonRadarSeriesPlotProps, React.SVGAttributes<SVGCircleElement> {
+  /**
+   * Callback fired when a mark is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
+   */
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void;
+}
+export interface RadarSeriesAreaProps extends CommonRadarSeriesPlotProps, React.SVGAttributes<SVGPathElement> {
+  /**
+   * Callback fired when an area is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
+   */
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void;
+}
 export {};

package/RadarChart/RadarSeriesPlot/useRadarRotationIndex.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This hook provides a function that from pointer event returns the rotation index.
+ * @return {(event: { clientX: number; clientY: number }) => number | null} rotationIndexGetter Returns the rotation data index.
+ */
+export declare function useRadarRotationIndex(): (event: {
+  clientX: number;
+  clientY: number;
+}) => number;

package/RadarChart/RadarSeriesPlot/useRadarRotationIndex.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRadarRotationIndex = useRadarRotationIndex;
+var React = _interopRequireWildcard(require("react"));
+var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
+var _getSVGPoint = require("../../internals/getSVGPoint");
+var _coordinateTransformation = require("../../internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation");
+var _useSelector = require("../../internals/store/useSelector");
+var _getAxisIndex = require("../../internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex");
+var _useStore = require("../../internals/store/useStore");
+var _useSvgRef = require("../../hooks/useSvgRef");
+var _useAxis = require("../../hooks/useAxis");
+/**
+ * This hook provides a function that from pointer event returns the rotation index.
+ * @return {(event: { clientX: number; clientY: number }) => number | null} rotationIndexGetter Returns the rotation data index.
+ */
+function useRadarRotationIndex() {
+  const svgRef = (0, _useSvgRef.useSvgRef)();
+  const store = (0, _useStore.useStore)();
+  const rotationAxis = (0, _useAxis.useRotationAxis)();
+  const center = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartPolarCenter);
+  const rotationIndexGetter = React.useCallback(function rotationIndexGetter(event) {
+    const element = svgRef.current;
+    if (!element || !rotationAxis) {
+      // Should never append
+      throw new Error(`MUI X Charts: The ${!element ? 'SVG' : 'rotation axis'} was not found to compute radar dataIndex.`);
+    }
+    const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
+    const rotation = (0, _coordinateTransformation.generateSvg2rotation)(center)(svgPoint.x, svgPoint.y);
+    const rotationIndex = (0, _getAxisIndex.getAxisIndex)(rotationAxis, rotation);
+    return rotationIndex;
+  }, [center, rotationAxis, svgRef]);
+  return rotationIndexGetter;
+}

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.d.ts

@@ -17,8 +17,8 @@ export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
   }[];
   type: "radar";
   label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-  highlightScope?: Partial<import("../../index.js").HighlightScope> | undefined;
-  labelMarkType?: "line" | "square" | "circle" | import("react").ComponentType<import("../../index.js").ChartsLabelCustomMarkProps> | undefined;
+  highlightScope?: import("../../index.js").HighlightScope | undefined;
+  labelMarkType?: import("../../internals/index.js").ChartsLabelMarkType | undefined;
   hideMark?: boolean | undefined;
   fillArea?: boolean | undefined;
   data: number[];

package/RadarChart/index.d.ts

@@ -3,7 +3,7 @@ export { RadarChart } from "./RadarChart.js";
 export { RadarDataProvider as Unstable_RadarDataProvider } from "./RadarDataProvider/index.js";
 export { RadarDataProvider } from "./RadarDataProvider/index.js";
 export type { RadarChartProps, RadarChartSlots, RadarChartSlotProps } from "./RadarChart.js";
-export type { RadarDataProviderProps } from "./RadarDataProvider/index.js";
+export type { RadarDataProviderProps, RadarSeries } from "./RadarDataProvider/index.js";
 export * from "./RadarGrid/index.js";
 export * from "./RadarAxisHighlight/index.js";
 export * from "./RadarMetricLabels/index.js";

package/RadarChart/useRadarChartProps.d.ts

@@ -1,11 +1,12 @@
 import type { RadarChartProps } from "./RadarChart.js";
 import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
 import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
-import type { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
+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 { RadarSeriesAreaProps, RadarSeriesMarksProps } from "./RadarSeriesPlot/index.js";
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -19,6 +20,8 @@ export declare const useRadarChartProps: (props: RadarChartProps) => {
   chartsSurfaceProps: ChartsSurfaceProps;
   radarDataProviderProps: RadarDataProviderProps<RadarChartPluginsSignatures>;
   radarGrid: RadarGridProps;
+  radarSeriesAreaProps: RadarSeriesAreaProps;
+  radarSeriesMarksProps: RadarSeriesMarksProps;
   overlayProps: ChartsOverlayProps;
   legendProps: ChartsLegendSlotExtension;
   children: import("react").ReactNode;

package/RadarChart/useRadarChartProps.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useRadarChartProps = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar"];
+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"];
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -35,7 +35,10 @@ const useRadarChartProps = props => {
       divisions,
       shape,
       stripeColor,
-      highlight = 'axis'
+      highlight = 'axis',
+      onAxisClick,
+      onAreaClick,
+      onMarkClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const radarDataProviderProps = {
@@ -49,7 +52,8 @@ const useRadarChartProps = props => {
     colors,
     highlightedItem,
     onHighlightChange,
-    skipAnimation
+    skipAnimation,
+    onAxisClick
   };
   const overlayProps = {
     slots,
@@ -68,6 +72,12 @@ const useRadarChartProps = props => {
     shape,
     stripeColor
   };
+  const radarSeriesAreaProps = {
+    onItemClick: onAreaClick
+  };
+  const radarSeriesMarksProps = {
+    onItemClick: onMarkClick
+  };
   const chartsSurfaceProps = other;
   return {
     highlight,
@@ -75,6 +85,8 @@ const useRadarChartProps = props => {
     chartsSurfaceProps,
     radarDataProviderProps,
     radarGrid,
+    radarSeriesAreaProps,
+    radarSeriesMarksProps,
     overlayProps,
     legendProps,
     children

package/ScatterChart/ScatterChart.d.ts

@@ -16,12 +16,13 @@ import { UseChartVoronoiSignature } from "../internals/plugins/featurePlugins/us
 import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
 export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
 export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginsSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the scatter chart.
-   * An array of [[ScatterSeriesType]] objects.
+   * An array of [[ScatterSeries]] objects.
    */
-  series: Readonly<MakeOptional<ScatterSeriesType, 'type'>[]>;
+  series: Readonly<ScatterSeries[]>;
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.

package/ScatterChart/ScatterChart.js

@@ -22,7 +22,7 @@ var _useScatterChartProps = require("./useScatterChartProps");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
-var _ChartsWrapper = require("../internals/components/ChartsWrapper");
+var _ChartsWrapper = require("../ChartsWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -180,7 +180,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   onItemClick: _propTypes.default.func,
   /**
    * The series to display in the scatter chart.
-   * An array of [[ScatterSeriesType]] objects.
+   * An array of [[ScatterSeries]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
@@ -370,6 +370,53 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
+  }), _propTypes.default.shape({
+    axis: _propTypes.default.oneOf(['x']),
+    classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    constant: _propTypes.default.number,
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
+    fill: _propTypes.default.string,
+    height: _propTypes.default.number,
+    hideTooltip: _propTypes.default.bool,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
+    label: _propTypes.default.string,
+    labelStyle: _propTypes.default.object,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    offset: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
+    reverse: _propTypes.default.bool,
+    scaleType: _propTypes.default.oneOf(['symlog']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
+    stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelMinGap: _propTypes.default.number,
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
+    tickLabelStyle: _propTypes.default.object,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
@@ -753,6 +800,52 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
+  }), _propTypes.default.shape({
+    axis: _propTypes.default.oneOf(['y']),
+    classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    constant: _propTypes.default.number,
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
+    fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
+    label: _propTypes.default.string,
+    labelStyle: _propTypes.default.object,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    offset: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['left', 'none', 'right']),
+    reverse: _propTypes.default.bool,
+    scaleType: _propTypes.default.oneOf(['symlog']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
+    stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
+    tickLabelStyle: _propTypes.default.object,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func,
+    width: _propTypes.default.number
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,

package/ScatterChart/seriesConfig/extremums.js

@@ -4,9 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getExtremumY = exports.getExtremumX = void 0;
-const mergeMinMax = (acc, val) => {
-  return [val[0] === null ? acc[0] : Math.min(acc[0], val[0]), val[1] === null ? acc[1] : Math.max(acc[1], val[1])];
-};
 const getExtremumX = params => {
   const {
     series,
@@ -14,24 +11,39 @@ const getExtremumX = params => {
     isDefaultAxis,
     getFilters
   } = params;
-  return Object.keys(series).filter(seriesId => {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const seriesId in series) {
+    if (!Object.hasOwn(series, seriesId)) {
+      continue;
+    }
     const axisId = series[seriesId].xAxisId;
-    return axisId === axis.id || axisId === undefined && isDefaultAxis;
-  }).reduce((acc, seriesId) => {
+    if (!(axisId === axis.id || axisId === undefined && isDefaultAxis)) {
+      continue;
+    }
     const filter = getFilters?.({
       currentAxisId: axis.id,
       isDefaultAxis,
       seriesXAxisId: series[seriesId].xAxisId,
       seriesYAxisId: series[seriesId].yAxisId
     });
-    const seriesMinMax = series[seriesId].data?.reduce((accSeries, d, dataIndex) => {
-      if (filter && !filter(d, dataIndex)) {
-        return accSeries;
+    const seriesData = series[seriesId].data ?? [];
+    for (let i = 0; i < seriesData.length; i += 1) {
+      const d = seriesData[i];
+      if (filter && !filter(d, i)) {
+        continue;
+      }
+      if (d.x !== null) {
+        if (d.x < min) {
+          min = d.x;
+        }
+        if (d.x > max) {
+          max = d.x;
+        }
       }
-      return mergeMinMax(accSeries, [d.x, d.x]);
-    }, [Infinity, -Infinity]);
-    return mergeMinMax(acc, seriesMinMax ?? [Infinity, -Infinity]);
-  }, [Infinity, -Infinity]);
+    }
+  }
+  return [min, max];
 };
 exports.getExtremumX = getExtremumX;
 const getExtremumY = params => {
@@ -41,23 +53,38 @@ const getExtremumY = params => {
     isDefaultAxis,
     getFilters
   } = params;
-  return Object.keys(series).filter(seriesId => {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const seriesId in series) {
+    if (!Object.hasOwn(series, seriesId)) {
+      continue;
+    }
     const axisId = series[seriesId].yAxisId;
-    return axisId === axis.id || axisId === undefined && isDefaultAxis;
-  }).reduce((acc, seriesId) => {
+    if (!(axisId === axis.id || axisId === undefined && isDefaultAxis)) {
+      continue;
+    }
     const filter = getFilters?.({
       currentAxisId: axis.id,
       isDefaultAxis,
       seriesXAxisId: series[seriesId].xAxisId,
       seriesYAxisId: series[seriesId].yAxisId
     });
-    const seriesMinMax = series[seriesId].data?.reduce((accSeries, d, dataIndex) => {
-      if (filter && !filter(d, dataIndex)) {
-        return accSeries;
+    const seriesData = series[seriesId].data ?? [];
+    for (let i = 0; i < seriesData.length; i += 1) {
+      const d = seriesData[i];
+      if (filter && !filter(d, i)) {
+        continue;
+      }
+      if (d.y !== null) {
+        if (d.y < min) {
+          min = d.y;
+        }
+        if (d.y > max) {
+          max = d.y;
+        }
       }
-      return mergeMinMax(accSeries, [d.y, d.y]);
-    }, [Infinity, -Infinity]);
-    return mergeMinMax(acc, seriesMinMax ?? [Infinity, -Infinity]);
-  }, [Infinity, -Infinity]);
+    }
+  }
+  return [min, max];
 };
 exports.getExtremumY = getExtremumY;

package/ScatterChart/useScatterChartProps.d.ts

@@ -7,7 +7,7 @@ import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
 import { ChartContainerProps } from "../ChartContainer/index.js";
 import type { ScatterChartProps } from "./ScatterChart.js";
 import type { ScatterPlotProps } from "./ScatterPlot.js";
-import type { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
+import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
 /**
  * A helper function that extracts ScatterChartProps from the input props