@mui/x-charts 6.0.0-alpha.8 → 6.18.0

package/modern/BarChart/BarPlot.js

@@ -1,11 +1,14 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useTransition } from '@react-spring/web';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
 import { isBandScaleConfig } from '../models/axis';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -15,7 +18,6 @@ import { isBandScaleConfig } from '../models/axis';
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -34,12 +36,13 @@ function getBandSize({
     offset
   };
 }
-function BarPlot(props) {
-  const seriesData = React.useContext(SeriesContext).bar;
+const useCompletedData = () => {
+  const seriesData = React.useContext(SeriesContext).bar ?? {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
   const axisData = React.useContext(CartesianContext);
-  if (seriesData === undefined) {
-    return null;
-  }
   const {
     series,
     stackingGroups
@@ -52,66 +55,142 @@ function BarPlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: stackingGroups.flatMap(({
-      ids: groupIds
-    }, groupIndex) => {
-      return groupIds.flatMap(seriesId => {
-        const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId;
-        const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
-        const xAxisConfig = xAxis[xAxisKey];
-        const yAxisConfig = yAxis[yAxisKey];
-        const verticalLayout = series[seriesId].layout === 'vertical';
-        let baseScaleConfig;
-        if (verticalLayout) {
-          if (!isBandScaleConfig(xAxisConfig)) {
-            throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
-          }
-          if (xAxis[xAxisKey].data === undefined) {
-            throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
-          }
-          baseScaleConfig = xAxisConfig;
-        } else {
-          if (!isBandScaleConfig(yAxisConfig)) {
-            throw new Error(`Axis with id "${yAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
-          }
-          if (yAxis[yAxisKey].data === undefined) {
-            throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
-          }
-          baseScaleConfig = yAxisConfig;
+  const data = stackingGroups.flatMap(({
+    ids: groupIds
+  }, groupIndex) => {
+    return groupIds.flatMap(seriesId => {
+      const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId;
+      const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
+      const xAxisConfig = xAxis[xAxisKey];
+      const yAxisConfig = yAxis[yAxisKey];
+      const verticalLayout = series[seriesId].layout === 'vertical';
+      let baseScaleConfig;
+      if (verticalLayout) {
+        if (!isBandScaleConfig(xAxisConfig)) {
+          throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
+        }
+        if (xAxis[xAxisKey].data === undefined) {
+          throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+        }
+        baseScaleConfig = xAxisConfig;
+      } else {
+        if (!isBandScaleConfig(yAxisConfig)) {
+          throw new Error(`Axis with id "${yAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
         }
-        const xScale = xAxisConfig.scale;
-        const yScale = yAxisConfig.scale;
-        const bandWidth = baseScaleConfig.scale.bandwidth();
-        const {
-          barWidth,
-          offset
-        } = getBandSize({
-          bandWidth,
-          numberOfGroups: stackingGroups.length,
-          gapRatio: baseScaleConfig.barGapRatio
-        });
-        const barOffset = groupIndex * (barWidth + offset);
-        const {
-          stackedData,
-          color
-        } = series[seriesId];
-        return stackedData.map((values, dataIndex) => {
-          const baseline = Math.min(...values);
-          const value = Math.max(...values);
-          return /*#__PURE__*/_jsx(BarElement, _extends({
-            id: seriesId,
-            dataIndex: dataIndex,
-            x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex]) + barOffset : xScale(baseline),
-            y: verticalLayout ? yScale(value) : yScale(yAxis[yAxisKey].data?.[dataIndex]) + barOffset,
-            height: verticalLayout ? Math.abs(yScale(baseline) - yScale(value)) : barWidth,
-            width: verticalLayout ? barWidth : Math.abs(xScale(baseline) - xScale(value)),
-            color: color,
-            highlightScope: series[seriesId].highlightScope
-          }, props), `${seriesId}-${dataIndex}`);
-        });
+        if (yAxis[yAxisKey].data === undefined) {
+          throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+        }
+        baseScaleConfig = yAxisConfig;
+      }
+      const xScale = xAxisConfig.scale;
+      const yScale = yAxisConfig.scale;
+      const bandWidth = baseScaleConfig.scale.bandwidth();
+      const {
+        barWidth,
+        offset
+      } = getBandSize({
+        bandWidth,
+        numberOfGroups: stackingGroups.length,
+        gapRatio: baseScaleConfig.barGapRatio
+      });
+      const barOffset = groupIndex * (barWidth + offset);
+      const {
+        stackedData,
+        color
+      } = series[seriesId];
+      return stackedData.map((values, dataIndex) => {
+        const bottom = Math.min(...values);
+        const top = Math.max(...values);
+        return {
+          bottom,
+          top,
+          seriesId,
+          dataIndex,
+          layout: series[seriesId].layout,
+          x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex]) + barOffset : xScale(bottom),
+          y: verticalLayout ? yScale(top) : yScale(yAxis[yAxisKey].data?.[dataIndex]) + barOffset,
+          xOrigin: xScale(0),
+          yOrigin: yScale(0),
+          height: verticalLayout ? Math.abs(yScale(bottom) - yScale(top)) : barWidth,
+          width: verticalLayout ? barWidth : Math.abs(xScale(bottom) - xScale(top)),
+          color,
+          highlightScope: series[seriesId].highlightScope
+        };
       });
-    })
+    });
+  });
+  return data;
+};
+const getOutStyle = ({
+  layout,
+  yOrigin,
+  x,
+  width,
+  y,
+  xOrigin,
+  height
+}) => _extends({}, layout === 'vertical' ? {
+  y: yOrigin,
+  x,
+  height: 0,
+  width
+} : {
+  y,
+  x: xOrigin,
+  height,
+  width: 0
+});
+const getInStyle = ({
+  x,
+  width,
+  y,
+  height
+}) => ({
+  y,
+  x,
+  height,
+  width
+});
+
+/**
+ * Demos:
+ *
+ * - [Bars](https://mui.com/x/react-charts/bars/)
+ * - [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+ * - [Stacking](https://mui.com/x/react-charts/stacking/)
+ *
+ * API:
+ *
+ * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
+ */
+function BarPlot(props) {
+  const completedData = useCompletedData();
+  const {
+      skipAnimation
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const transition = useTransition(completedData, {
+    keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
+    from: getOutStyle,
+    leave: getOutStyle,
+    enter: getInStyle,
+    update: getInStyle,
+    immediate: skipAnimation
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: transition((style, {
+      seriesId,
+      dataIndex,
+      color,
+      highlightScope
+    }) => /*#__PURE__*/_jsx(BarElement, _extends({
+      id: seriesId,
+      dataIndex: dataIndex,
+      highlightScope: highlightScope,
+      color: color
+    }, other, {
+      style: style
+    })))
   });
 }
 process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
@@ -119,6 +198,11 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/modern/BarChart/formatter.js

@@ -53,7 +53,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v.toLocaleString())
+    series: defaultizeValueFormatter(completedSeries, v => v?.toLocaleString())
   };
 };
 export default formatter;

package/modern/ChartContainer/index.js

@@ -3,6 +3,7 @@ import useForkRef from '@mui/utils/useForkRef';
 import { DrawingProvider } from '../context/DrawingProvider';
 import { SeriesContextProvider } from '../context/SeriesContextProvider';
 import { InteractionProvider } from '../context/InteractionProvider';
+import { useReducedMotion } from '../hooks/useReducedMotion';
 import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianContextProvider';
 import { HighlightProvider } from '../context/HighlightProvider';
@@ -25,6 +26,8 @@ export const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContai
   } = props;
   const svgRef = React.useRef(null);
   const handleRef = useForkRef(ref, svgRef);
+  useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
+
   return /*#__PURE__*/_jsx(DrawingProvider, {
     width: width,
     height: height,

package/modern/ChartsAxis/ChartsAxis.js

@@ -24,6 +24,16 @@ const mergeProps = (axisConfig, slots, slotProps) => {
     slotProps
   };
 };
+
+/**
+ * Demos:
+ *
+ * - [Axis](https://mui.com/x/react-charts/axis/)
+ *
+ * API:
+ *
+ * - [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
+ */
 function ChartsAxis(props) {
   const {
     topAxis,
@@ -97,11 +107,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -120,11 +134,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -143,11 +161,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -176,11 +198,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -1,11 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { styled } from '@mui/material/styles';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { isBandScale } from '../internals/isBandScale';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export function getAxisHighlightUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsAxisHighlight', slot);
+}
+export const chartsAxisHighlightClasses = generateUtilityClasses('MuiChartsAxisHighlight', ['root']);
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getAxisHighlightUtilityClass);
+};
+export const ChartsAxisHighlightPath = styled('path', {
+  name: 'MuiChartsAxisHighlight',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState,
+  theme
+}) => _extends({
+  pointerEvents: 'none'
+}, ownerState.axisHighlight === 'band' && {
+  fill: theme.palette.mode === 'light' ? 'gray' : 'white',
+  fillOpacity: 0.1
+}, ownerState.axisHighlight === 'line' && {
+  strokeDasharray: '5 2',
+  stroke: theme.palette.mode === 'light' ? '#000000' : '#ffffff'
+}));
+/**
+ * Demos:
+ *
+ * - [Custom components](https://mui.com/x/react-charts/components/)
+ *
+ * API:
+ *
+ * - [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
+ */
 function ChartsAxisHighlight(props) {
   const {
     x: xAxisHighlight,
@@ -17,6 +57,7 @@ function ChartsAxisHighlight(props) {
     yAxisIds,
     yAxis
   } = React.useContext(CartesianContext);
+  const classes = useUtilityClasses();
   const USED_X_AXIS_ID = xAxisIds[0];
   const USED_Y_AXIS_ID = yAxisIds[0];
   const xScale = xAxis[USED_X_AXIS_ID].scale;
@@ -27,33 +68,29 @@ function ChartsAxisHighlight(props) {
   const getXPosition = getValueToPositionMapper(xScale);
   const getYPosition = getValueToPositionMapper(yScale);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [xAxisHighlight === 'band' && axis.x !== null && isBandScale(xScale) && /*#__PURE__*/_jsx("path", {
+    children: [xAxisHighlight === 'band' && axis.x !== null && isBandScale(xScale) && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
       d: `M ${xScale(axis.x.value) - (xScale.step() - xScale.bandwidth()) / 2} ${yScale.range()[0]} l ${xScale.step()} 0 l 0 ${yScale.range()[1] - yScale.range()[0]} l ${-xScale.step()} 0 Z`,
-      fill: "gray",
-      fillOpacity: 0.1,
-      style: {
-        pointerEvents: 'none'
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'band'
       }
-    }), yAxisHighlight === 'band' && axis.y !== null && isBandScale(yScale) && /*#__PURE__*/_jsx("path", {
+    }), yAxisHighlight === 'band' && axis.y !== null && isBandScale(yScale) && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
       d: `M ${xScale.range()[0]} ${yScale(axis.y.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${xScale.range()[1] - xScale.range()[0]} 0 l 0 ${-yScale.step()} Z`,
-      fill: "gray",
-      fillOpacity: 0.1,
-      style: {
-        pointerEvents: 'none'
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'band'
       }
-    }), xAxisHighlight === 'line' && axis.x !== null && /*#__PURE__*/_jsx("path", {
+    }), xAxisHighlight === 'line' && axis.x !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
       d: `M ${getXPosition(axis.x.value)} ${yScale.range()[0]} L ${getXPosition(axis.x.value)} ${yScale.range()[1]}`,
-      stroke: "black",
-      strokeDasharray: "5 2",
-      style: {
-        pointerEvents: 'none'
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
       }
-    }), yAxisHighlight === 'line' && axis.y !== null && /*#__PURE__*/_jsx("path", {
+    }), yAxisHighlight === 'line' && axis.y !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
       d: `M ${xScale.range()[0]} ${getYPosition(axis.y.value)} L ${xScale.range()[1]} ${getYPosition(axis.y.value)}`,
-      stroke: "black",
-      strokeDasharray: "5 2",
-      style: {
-        pointerEvents: 'none'
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
       }
     })]
   });

package/modern/ChartsClipPath/ChartsClipPath.js

@@ -3,6 +3,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DrawingContext } from '../context/DrawingProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * API:
+ *
+ * - [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
+ */
 function ChartsClipPath(props) {
   const {
     id,