@mui/x-charts 7.19.0 → 7.21.0

package/ChartContainer/ChartContainer.js

@@ -12,6 +12,7 @@ import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients
 import { HighlightedProvider, ZAxisContextProvider } from "../context/index.js";
 import { PluginProvider } from "../context/PluginProvider/index.js";
 import { useChartContainerProps } from "./useChartContainerProps.js";
+import { AnimationProvider } from "../context/AnimationProvider/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
@@ -22,7 +23,8 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     zAxisContextProps,
     highlightedProviderProps,
     chartsSurfaceProps,
-    pluginProviderProps
+    pluginProviderProps,
+    animationProviderProps
   } = useChartContainerProps(props, ref);
   return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
     children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
@@ -32,7 +34,9 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
             children: /*#__PURE__*/_jsx(InteractionProvider, {
               children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
                 children: /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-                  children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), children]
+                  children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
+                    children: children
+                  }))]
                 }))
               }))
             })
@@ -105,6 +109,11 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * Please refer to the appropriate docs page to learn more about it.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
   viewBox: PropTypes.shape({

package/ChartContainer/useChartContainerProps.d.ts

@@ -7,6 +7,7 @@ import type { ChartContainerProps } from './ChartContainer';
 import { HighlightedProviderProps } from '../context';
 import { ChartsSurfaceProps } from '../ChartsSurface';
 import { PluginProviderProps } from '../context/PluginProvider';
+import { AnimationProviderProps } from '../context/AnimationProvider';
 export declare const useChartContainerProps: (props: ChartContainerProps, ref: React.ForwardedRef<unknown>) => {
     children: React.ReactNode;
     drawingProviderProps: Omit<DrawingProviderProps, "children">;
@@ -18,6 +19,7 @@ export declare const useChartContainerProps: (props: ChartContainerProps, ref: R
         ref: any;
     };
     pluginProviderProps: Omit<PluginProviderProps, "children">;
+    animationProviderProps: Omit<AnimationProviderProps, "children">;
     xAxis: {
         reverse?: boolean | undefined;
         fill?: string | undefined;

package/ChartContainer/useChartContainerProps.js

@@ -2,11 +2,10 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children"];
+const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children", "skipAnimation"];
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { useDefaultizeAxis } from "./useDefaultizeAxis.js";
-import { useReducedMotion } from "../hooks/useReducedMotion.js";
 export const useChartContainerProps = (props, ref) => {
   const {
       width,
@@ -25,13 +24,12 @@ export const useChartContainerProps = (props, ref) => {
       highlightedItem,
       onHighlightChange,
       plugins,
-      children
+      children,
+      skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const svgRef = React.useRef(null);
   const chartSurfaceRef = useForkRef(ref, svgRef);
-  useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
-
   const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis, dataset);
   const drawingProviderProps = {
     width,
@@ -39,6 +37,9 @@ export const useChartContainerProps = (props, ref) => {
     margin,
     svgRef
   };
+  const animationProviderProps = {
+    skipAnimation
+  };
   const pluginProviderProps = {
     plugins
   };
@@ -78,6 +79,7 @@ export const useChartContainerProps = (props, ref) => {
     highlightedProviderProps,
     chartsSurfaceProps,
     pluginProviderProps,
+    animationProviderProps,
     xAxis: defaultizedXAxis,
     yAxis: defaultizedYAxis
   };

package/LineChart/AreaPlot.js

@@ -13,6 +13,7 @@ import getCurveFactory from "../internals/getCurve.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useChartGradient } from "../internals/components/ChartsAxesGradients/index.js";
 import { useLineSeries } from "../hooks/useSeries.js";
+import { useSkipAnimation } from "../context/AnimationProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useAggregatedData = () => {
   const seriesData = useLineSeries();
@@ -114,9 +115,10 @@ function AreaPlot(props) {
       slots,
       slotProps,
       onItemClick,
-      skipAnimation
+      skipAnimation: inSkipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const skipAnimation = useSkipAnimation(inSkipAnimation);
   const getGradientId = useChartGradient();
   const completedData = useAggregatedData();
   return /*#__PURE__*/_jsx("g", _extends({}, other, {

package/LineChart/LineChart.d.ts

@@ -36,7 +36,7 @@ export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'ser
     grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
     /**
      * The configuration of axes highlight.
-     * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+     * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
      * @default { x: 'line' }
      */
     axisHighlight?: ChartsAxisHighlightProps;

package/LineChart/LineChart.js

@@ -69,7 +69,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    * @default { x: 'line' }
    */
   axisHighlight: PropTypes.shape({

package/LineChart/LinePlot.js

@@ -13,6 +13,7 @@ import getCurveFactory from "../internals/getCurve.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useChartGradient } from "../internals/components/ChartsAxesGradients/index.js";
 import { useLineSeries } from "../hooks/useSeries.js";
+import { useSkipAnimation } from "../context/AnimationProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useAggregatedData = () => {
   const seriesData = useLineSeries();
@@ -94,10 +95,11 @@ function LinePlot(props) {
   const {
       slots,
       slotProps,
-      skipAnimation,
+      skipAnimation: inSkipAnimation,
       onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const skipAnimation = useSkipAnimation(inSkipAnimation);
   const getGradientId = useChartGradient();
   const completedData = useAggregatedData();
   return /*#__PURE__*/_jsx("g", _extends({}, other, {

package/LineChart/MarkPlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { MarkElementProps } from './MarkElement';
 import { LineItemIdentifier } from '../models/seriesType/line';
+import { MarkElementProps } from './MarkElement';
 export interface MarkPlotSlots {
     mark?: React.JSXElementConstructor<MarkElementProps>;
 }

package/LineChart/MarkPlot.js

@@ -3,18 +3,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "experimentalRendering"];
-import * as React from 'react';
 import PropTypes from 'prop-types';
+import * as React from 'react';
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import { useSkipAnimation } from "../context/AnimationProvider/index.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { MarkElement } from "./MarkElement.js";
-import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { useChartId } from "../hooks/useChartId.js";
-import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
-import { cleanId } from "../internals/cleanId.js";
-import getColor from "./getColor.js";
-import { useLineSeries } from "../hooks/useSeries.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { useLineSeries } from "../hooks/useSeries.js";
+import { cleanId } from "../internals/cleanId.js";
 import { CircleMarkElement } from "./CircleMarkElement.js";
+import getColor from "./getColor.js";
+import { MarkElement } from "./MarkElement.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -30,11 +31,12 @@ function MarkPlot(props) {
   const {
       slots,
       slotProps,
-      skipAnimation,
+      skipAnimation: inSkipAnimation,
       onItemClick,
       experimentalRendering
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const skipAnimation = useSkipAnimation(inSkipAnimation);
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
   const chartId = useChartId();

package/LineChart/useLineChartProps.d.ts

@@ -1,17 +1,17 @@
-import type { LineChartProps } from './LineChart';
-import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
-import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
-import { ChartsGridProps } from '../ChartsGrid';
-import { ChartsClipPathProps } from '../ChartsClipPath';
-import { AreaPlotProps } from './AreaPlot';
-import { LinePlotProps } from './LinePlot';
-import { MarkPlotProps } from './MarkPlot';
-import { ChartsOverlayProps } from '../ChartsOverlay';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
-import { LineHighlightPlotProps } from './LineHighlightPlot';
+import { ChartsClipPathProps } from '../ChartsClipPath';
+import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
+import { ChartsOverlayProps } from '../ChartsOverlay';
 import { ChartsTooltipProps } from '../ChartsTooltip';
+import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { AreaPlotProps } from './AreaPlot';
+import type { LineChartProps } from './LineChart';
+import { LineHighlightPlotProps } from './LineHighlightPlot';
+import { LinePlotProps } from './LinePlot';
+import { MarkPlotProps } from './MarkPlot';
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.

package/LineChart/useLineChartProps.js

@@ -71,7 +71,8 @@ export const useLineChartProps = props => {
     highlightedItem,
     onHighlightChange,
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
-    className
+    className,
+    skipAnimation
   });
   const axisClickHandlerProps = {
     onAxisClick
@@ -89,14 +90,12 @@ export const useLineChartProps = props => {
   const areaPlotProps = {
     slots,
     slotProps,
-    onItemClick: onAreaClick,
-    skipAnimation
+    onItemClick: onAreaClick
   };
   const linePlotProps = {
     slots,
     slotProps,
-    onItemClick: onLineClick,
-    skipAnimation
+    onItemClick: onLineClick
   };
   const markPlotProps = {
     slots,

package/PieChart/PieChart.d.ts

@@ -40,7 +40,7 @@ export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'seri
     tooltip?: ChartsTooltipProps<'pie'>;
     /**
      * The configuration of axes highlight.
-     * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+     * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
      * @default { x: 'none', y: 'none' }
      */
     axisHighlight?: ChartsAxisHighlightProps;

package/PieChart/PieChart.js

@@ -105,6 +105,7 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     highlightedItem: highlightedItem,
     onHighlightChange: onHighlightChange,
     className: className,
+    skipAnimation: skipAnimation,
     children: [/*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
@@ -115,8 +116,7 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     }), /*#__PURE__*/_jsx(PiePlot, {
       slots: slots,
       slotProps: slotProps,
-      onItemClick: onItemClick,
-      skipAnimation: skipAnimation
+      onItemClick: onItemClick
     }), /*#__PURE__*/_jsx(ChartsOverlay, {
       loading: loading,
       slots: slots,
@@ -137,7 +137,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    * @default { x: 'none', y: 'none' }
    */
   axisHighlight: PropTypes.shape({
@@ -263,7 +263,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * If `true`, animations are skipped.
-   * @default false
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: PropTypes.bool,
   /**

package/PieChart/PiePlot.js

@@ -8,6 +8,7 @@ import { PieArcLabelPlot } from "./PieArcLabelPlot.js";
 import { getPercentageValue } from "../internals/getPercentageValue.js";
 import { getPieCoordinates } from "./getPieCoordinates.js";
 import { usePieSeries } from "../hooks/useSeries.js";
+import { useSkipAnimation } from "../context/AnimationProvider/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -21,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 function PiePlot(props) {
   const {
-    skipAnimation,
+    skipAnimation: inSkipAnimation,
     slots,
     slotProps,
     onItemClick
@@ -33,6 +34,7 @@ function PiePlot(props) {
     width,
     height
   } = React.useContext(DrawingContext);
+  const skipAnimation = useSkipAnimation(inSkipAnimation);
   if (seriesData === undefined) {
     return null;
   }

package/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -90,6 +90,11 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * Please refer to the appropriate docs page to learn more about it.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
   viewBox: PropTypes.shape({

package/ResponsiveChartContainer/useResponsiveChartContainerProps.d.ts

@@ -1,7 +1,7 @@
 import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
 export declare const useResponsiveChartContainerProps: (props: ResponsiveChartContainerProps, ref: React.ForwardedRef<unknown>) => {
     hasIntrinsicSize: number;
-    chartContainerProps: Omit<import("..").ChartsSurfaceProps & Omit<import("../internals").SeriesProviderProps, "seriesFormatters"> & Omit<import("../internals").DrawingProviderProps, "svgRef"> & Pick<import("../internals").CartesianProviderProps, "dataset"> & import("..").ZAxisContextProviderProps & import("..").HighlightedProviderProps & import("../internals").PluginProviderProps, "children"> & {
+    chartContainerProps: Omit<import("..").ChartsSurfaceProps & Omit<import("../internals").SeriesProviderProps, "seriesFormatters"> & Omit<import("../internals").DrawingProviderProps, "svgRef"> & Pick<import("../internals").CartesianProviderProps, "dataset"> & import("..").ZAxisContextProviderProps & import("..").HighlightedProviderProps & import("../internals").PluginProviderProps & import("../internals").AnimationProviderProps, "children"> & {
         xAxis?: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsXAxisProps>, "id">[];
         yAxis?: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsYAxisProps>, "id">[];
         children?: React.ReactNode;

package/ResponsiveChartContainer/useResponsiveChartContainerProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "resolveSizeBeforeRender", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];
+const _excluded = ["width", "height", "resolveSizeBeforeRender", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis", "skipAnimation"];
 import { useChartContainerDimensions } from "./useChartContainerDimensions.js";
 export const useResponsiveChartContainerProps = (props, ref) => {
   const {
@@ -24,7 +24,8 @@ export const useResponsiveChartContainerProps = (props, ref) => {
       viewBox,
       xAxis,
       yAxis,
-      zAxis
+      zAxis,
+      skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -56,6 +57,7 @@ export const useResponsiveChartContainerProps = (props, ref) => {
     xAxis,
     yAxis,
     zAxis,
+    skipAnimation,
     width: dWidth,
     height: dHeight,
     ref

package/ScatterChart/ScatterChart.d.ts

@@ -30,7 +30,7 @@ export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, '
     tooltip?: ChartsTooltipProps<'scatter'>;
     /**
      * The configuration of axes highlight.
-     * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+     * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
      * @default { x: 'none', y: 'none' }
      */
     axisHighlight?: ChartsAxisHighlightProps;

package/ScatterChart/ScatterChart.js

@@ -62,7 +62,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    * @default { x: 'none', y: 'none' }
    */
   axisHighlight: PropTypes.shape({
@@ -198,6 +198,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * An array of [[ScatterSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/ScatterChart/extremums.js

@@ -18,13 +18,13 @@ export const getExtremumX = params => {
       seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
       seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
     });
-    const seriesMinMax = series[seriesId].data.reduce((accSeries, d, dataIndex) => {
+    const seriesMinMax = series[seriesId].data?.reduce((accSeries, d, dataIndex) => {
       if (filter && !filter(d, dataIndex)) {
         return accSeries;
       }
       return mergeMinMax(accSeries, [d.x, d.x]);
     }, [Infinity, -Infinity]);
-    return mergeMinMax(acc, seriesMinMax);
+    return mergeMinMax(acc, seriesMinMax ?? [Infinity, -Infinity]);
   }, [Infinity, -Infinity]);
 };
 export const getExtremumY = params => {
@@ -44,12 +44,12 @@ export const getExtremumY = params => {
       seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
       seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
     });
-    const seriesMinMax = series[seriesId].data.reduce((accSeries, d, dataIndex) => {
+    const seriesMinMax = series[seriesId].data?.reduce((accSeries, d, dataIndex) => {
       if (filter && !filter(d, dataIndex)) {
         return accSeries;
       }
       return mergeMinMax(accSeries, [d.y, d.y]);
     }, [Infinity, -Infinity]);
-    return mergeMinMax(acc, seriesMinMax);
+    return mergeMinMax(acc, seriesMinMax ?? [Infinity, -Infinity]);
   }, [Infinity, -Infinity]);
 };

package/ScatterChart/formatter.js

@@ -1,10 +1,29 @@
-import { defaultizeValueFormatter } from "../internals/defaultizeValueFormatter.js";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const formatter = ({
   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],
+        y: d[datasetKeys.y],
+        z: datasetKeys.z && d[datasetKeys.z],
+        id: d[datasetKeys.id]
+      };
+    }) ?? [];
+    return [seriesId, _extends({}, seriesData, {
+      data,
+      valueFormatter: seriesData.valueFormatter ?? (v => `(${v.x}, ${v.y})`)
+    })];
+  }));
   return {
-    series: defaultizeValueFormatter(series, v => `(${v.x}, ${v.y})`),
+    series: completeSeries,
     seriesOrder
   };
 };

package/SparkLineChart/SparkLineChart.js

@@ -215,6 +215,11 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default false
    */
   showTooltip: PropTypes.bool,
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/context/AnimationProvider/Animation.types.d.ts

@@ -0,0 +1,15 @@
+export type AnimationProviderProps = {
+    /**
+     * If `true`, animations are skipped.
+     * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+     */
+    skipAnimation?: boolean;
+    children: React.ReactNode;
+};
+export type AnimationState = {
+    /**
+     * If `true`, animations are skipped.
+     * @default undefined
+     */
+    skipAnimation?: boolean;
+};

package/context/AnimationProvider/Animation.types.js

@@ -0,0 +1 @@
+export {};

package/context/AnimationProvider/AnimationContext.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Initializable } from '../context.types';
+import { AnimationState } from './Animation.types';
+export declare const AnimationContext: React.Context<Initializable<AnimationState>>;

package/context/AnimationProvider/AnimationContext.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export const AnimationContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    skipAnimation: undefined
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  AnimationContext.displayName = 'AnimationContext';
+}

package/context/AnimationProvider/AnimationProvider.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { AnimationProviderProps } from './Animation.types';
+declare function AnimationProvider(props: AnimationProviderProps): React.JSX.Element;
+export { AnimationProvider };

package/context/AnimationProvider/AnimationProvider.js

@@ -0,0 +1,55 @@
+'use client';
+
+import { Globals, useIsomorphicLayoutEffect } from '@react-spring/web';
+import * as React from 'react';
+import { AnimationContext } from "./AnimationContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function AnimationProvider(props) {
+  // Part of the behavior was taken from:
+  // https://github.com/pmndrs/react-spring/blob/fd65b605b85c3a24143c4ce9dd322fdfca9c66be/packages/shared/src/hooks/useReducedMotion.ts
+  const {
+    children,
+    skipAnimation: inSkipAnimation
+  } = props;
+
+  // Skip animation test/jsdom
+  const isAnimationDisabledEnvironment = typeof window === 'undefined' || !window?.matchMedia;
+
+  // We use the value of `isAnimationDisabledEnvironment` as the initial value of `skipAnimation` to avoid
+  // re-rendering the component on environments where matchMedia is not supported, hence skipAnimation will always be true.
+  const [skipAnimation, setSkipAnimation] = React.useState(isAnimationDisabledEnvironment || undefined);
+  useIsomorphicLayoutEffect(() => {
+    if (isAnimationDisabledEnvironment) {
+      return undefined;
+    }
+    const handleMediaChange = event => {
+      // This hook can remove animation but never activate it.
+      const inputValue = event.matches || undefined;
+      setSkipAnimation(inputValue);
+      Globals.assign({
+        skipAnimation: inputValue
+      });
+    };
+    const mql = window.matchMedia('(prefers-reduced-motion)');
+    handleMediaChange(mql);
+
+    // MatchMedia is not fully supported in all environments, so we need to check if it exists before calling addEventListener
+    mql?.addEventListener?.('change', handleMediaChange);
+    return () => {
+      mql?.removeEventListener?.('change', handleMediaChange);
+    };
+  }, []);
+  const value = React.useMemo(() => ({
+    isInitialized: true,
+    data: {
+      // If dev sets `skipAnimation` to true, it will skip all animations.
+      // If dev sets `skipAnimation` to false, it will use user's preference.
+      skipAnimation: inSkipAnimation || skipAnimation
+    }
+  }), [skipAnimation, inSkipAnimation]);
+  return /*#__PURE__*/_jsx(AnimationContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+export { AnimationProvider };

package/context/AnimationProvider/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Animation.types';
+export * from './AnimationContext';
+export * from './AnimationProvider';
+export * from './useSkipAnimation';

package/context/AnimationProvider/index.js

@@ -0,0 +1,4 @@
+export * from "./Animation.types.js";
+export * from "./AnimationContext.js";
+export * from "./AnimationProvider.js";
+export * from "./useSkipAnimation.js";

package/context/AnimationProvider/useSkipAnimation.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A hook to get if chart animations should be skipped.
+ *
+ * @returns {boolean|undefined} whether to skip animations
+ */
+export declare function useSkipAnimation(skipAnimation?: boolean): boolean | undefined;