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

package/legacy/BarChart/BarPlot.js

@@ -1,12 +1,15 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var _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)
@@ -16,7 +19,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(_ref) {
   var W = _ref.bandWidth,
     N = _ref.numberOfGroups,
@@ -34,12 +36,14 @@ function getBandSize(_ref) {
     offset: offset
   };
 }
-function BarPlot(props) {
-  var seriesData = React.useContext(SeriesContext).bar;
+var useCompletedData = function useCompletedData() {
+  var _React$useContext$bar;
+  var seriesData = (_React$useContext$bar = React.useContext(SeriesContext).bar) != null ? _React$useContext$bar : {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
   var axisData = React.useContext(CartesianContext);
-  if (seriesData === undefined) {
-    return null;
-  }
   var series = seriesData.series,
     stackingGroups = seriesData.stackingGroups;
   var xAxis = axisData.xAxis,
@@ -48,64 +52,143 @@ function BarPlot(props) {
     yAxisIds = axisData.yAxisIds;
   var defaultXAxisId = xAxisIds[0];
   var defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: stackingGroups.flatMap(function (_ref2, groupIndex) {
-      var groupIds = _ref2.ids;
-      return groupIds.flatMap(function (seriesId) {
-        var _series$seriesId$xAxi, _series$seriesId$yAxi;
-        var xAxisKey = (_series$seriesId$xAxi = series[seriesId].xAxisKey) != null ? _series$seriesId$xAxi : defaultXAxisId;
-        var yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
-        var xAxisConfig = xAxis[xAxisKey];
-        var yAxisConfig = yAxis[yAxisKey];
-        var verticalLayout = series[seriesId].layout === 'vertical';
-        var baseScaleConfig;
-        if (verticalLayout) {
-          if (!isBandScaleConfig(xAxisConfig)) {
-            throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
-          }
-          if (xAxis[xAxisKey].data === undefined) {
-            throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
-          }
-          baseScaleConfig = xAxisConfig;
-        } else {
-          if (!isBandScaleConfig(yAxisConfig)) {
-            throw new Error("Axis with id \"".concat(yAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
-          }
-          if (yAxis[yAxisKey].data === undefined) {
-            throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
-          }
-          baseScaleConfig = yAxisConfig;
+  var data = stackingGroups.flatMap(function (_ref2, groupIndex) {
+    var groupIds = _ref2.ids;
+    return groupIds.flatMap(function (seriesId) {
+      var _series$seriesId$xAxi, _series$seriesId$yAxi;
+      var xAxisKey = (_series$seriesId$xAxi = series[seriesId].xAxisKey) != null ? _series$seriesId$xAxi : defaultXAxisId;
+      var yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
+      var xAxisConfig = xAxis[xAxisKey];
+      var yAxisConfig = yAxis[yAxisKey];
+      var verticalLayout = series[seriesId].layout === 'vertical';
+      var baseScaleConfig;
+      if (verticalLayout) {
+        if (!isBandScaleConfig(xAxisConfig)) {
+          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
+        }
+        if (xAxis[xAxisKey].data === undefined) {
+          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
+        }
+        baseScaleConfig = xAxisConfig;
+      } else {
+        if (!isBandScaleConfig(yAxisConfig)) {
+          throw new Error("Axis with id \"".concat(yAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
         }
-        var xScale = xAxisConfig.scale;
-        var yScale = yAxisConfig.scale;
-        var bandWidth = baseScaleConfig.scale.bandwidth();
-        var _getBandSize = getBandSize({
-            bandWidth: bandWidth,
-            numberOfGroups: stackingGroups.length,
-            gapRatio: baseScaleConfig.barGapRatio
-          }),
-          barWidth = _getBandSize.barWidth,
-          offset = _getBandSize.offset;
-        var barOffset = groupIndex * (barWidth + offset);
-        var _series$seriesId = series[seriesId],
-          stackedData = _series$seriesId.stackedData,
-          color = _series$seriesId.color;
-        return stackedData.map(function (values, dataIndex) {
-          var _xAxis$xAxisKey$data, _yAxis$yAxisKey$data;
-          var baseline = Math.min.apply(Math, _toConsumableArray(values));
-          var value = Math.max.apply(Math, _toConsumableArray(values));
-          return /*#__PURE__*/_jsx(BarElement, _extends({
-            id: seriesId,
-            dataIndex: dataIndex,
-            x: verticalLayout ? xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + barOffset : xScale(baseline),
-            y: verticalLayout ? yScale(value) : yScale((_yAxis$yAxisKey$data = yAxis[yAxisKey].data) == null ? void 0 : _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), "".concat(seriesId, "-").concat(dataIndex));
-        });
+        if (yAxis[yAxisKey].data === undefined) {
+          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
+        }
+        baseScaleConfig = yAxisConfig;
+      }
+      var xScale = xAxisConfig.scale;
+      var yScale = yAxisConfig.scale;
+      var bandWidth = baseScaleConfig.scale.bandwidth();
+      var _getBandSize = getBandSize({
+          bandWidth: bandWidth,
+          numberOfGroups: stackingGroups.length,
+          gapRatio: baseScaleConfig.barGapRatio
+        }),
+        barWidth = _getBandSize.barWidth,
+        offset = _getBandSize.offset;
+      var barOffset = groupIndex * (barWidth + offset);
+      var _series$seriesId = series[seriesId],
+        stackedData = _series$seriesId.stackedData,
+        color = _series$seriesId.color;
+      return stackedData.map(function (values, dataIndex) {
+        var _xAxis$xAxisKey$data, _yAxis$yAxisKey$data;
+        var bottom = Math.min.apply(Math, _toConsumableArray(values));
+        var top = Math.max.apply(Math, _toConsumableArray(values));
+        return {
+          bottom: bottom,
+          top: top,
+          seriesId: seriesId,
+          dataIndex: dataIndex,
+          layout: series[seriesId].layout,
+          x: verticalLayout ? xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + barOffset : xScale(bottom),
+          y: verticalLayout ? yScale(top) : yScale((_yAxis$yAxisKey$data = yAxis[yAxisKey].data) == null ? void 0 : _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: color,
+          highlightScope: series[seriesId].highlightScope
+        };
       });
+    });
+  });
+  return data;
+};
+var getOutStyle = function getOutStyle(_ref3) {
+  var layout = _ref3.layout,
+    yOrigin = _ref3.yOrigin,
+    x = _ref3.x,
+    width = _ref3.width,
+    y = _ref3.y,
+    xOrigin = _ref3.xOrigin,
+    height = _ref3.height;
+  return _extends({}, layout === 'vertical' ? {
+    y: yOrigin,
+    x: x,
+    height: 0,
+    width: width
+  } : {
+    y: y,
+    x: xOrigin,
+    height: height,
+    width: 0
+  });
+};
+var getInStyle = function getInStyle(_ref4) {
+  var x = _ref4.x,
+    width = _ref4.width,
+    y = _ref4.y,
+    height = _ref4.height;
+  return {
+    y: y,
+    x: x,
+    height: height,
+    width: 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) {
+  var completedData = useCompletedData();
+  var skipAnimation = props.skipAnimation,
+    other = _objectWithoutProperties(props, _excluded);
+  var transition = useTransition(completedData, {
+    keys: function keys(bar) {
+      return "".concat(bar.seriesId, "-").concat(bar.dataIndex);
+    },
+    from: getOutStyle,
+    leave: getOutStyle,
+    enter: getInStyle,
+    update: getInStyle,
+    immediate: skipAnimation
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: transition(function (style, _ref5) {
+      var seriesId = _ref5.seriesId,
+        dataIndex = _ref5.dataIndex,
+        color = _ref5.color,
+        highlightScope = _ref5.highlightScope;
+      return /*#__PURE__*/_jsx(BarElement, _extends({
+        id: seriesId,
+        dataIndex: dataIndex,
+        highlightScope: highlightScope,
+        color: color
+      }, other, {
+        style: style
+      }));
     })
   });
 }
@@ -114,6 +197,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/legacy/BarChart/formatter.js

@@ -57,7 +57,7 @@ var formatter = function formatter(params, dataset) {
     seriesOrder: seriesOrder,
     stackingGroups: stackingGroups,
     series: defaultizeValueFormatter(completedSeries, function (v) {
-      return v.toLocaleString();
+      return v == null ? void 0 : v.toLocaleString();
     })
   };
 };

package/legacy/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';
@@ -23,6 +24,8 @@ export var ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContaine
     children = props.children;
   var svgRef = React.useRef(null);
   var 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/legacy/ChartsAxis/ChartsAxis.js

@@ -25,6 +25,16 @@ var mergeProps = function mergeProps(axisConfig, slots, slotProps) {
     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) {
   var topAxis = props.topAxis,
     leftAxis = props.leftAxis,
@@ -95,11 +105,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,
@@ -118,11 +132,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,
@@ -141,11 +159,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,
@@ -174,11 +196,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/legacy/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -1,11 +1,54 @@
+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 var chartsAxisHighlightClasses = generateUtilityClasses('MuiChartsAxisHighlight', ['root']);
+var useUtilityClasses = function useUtilityClasses() {
+  var slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getAxisHighlightUtilityClass);
+};
+export var ChartsAxisHighlightPath = styled('path', {
+  name: 'MuiChartsAxisHighlight',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.root;
+  }
+})(function (_ref) {
+  var ownerState = _ref.ownerState,
+    theme = _ref.theme;
+  return _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) {
   var xAxisHighlight = props.x,
     yAxisHighlight = props.y;
@@ -14,6 +57,7 @@ function ChartsAxisHighlight(props) {
     xAxis = _React$useContext.xAxis,
     yAxisIds = _React$useContext.yAxisIds,
     yAxis = _React$useContext.yAxis;
+  var classes = useUtilityClasses();
   var USED_X_AXIS_ID = xAxisIds[0];
   var USED_Y_AXIS_ID = yAxisIds[0];
   var xScale = xAxis[USED_X_AXIS_ID].scale;
@@ -23,33 +67,29 @@ function ChartsAxisHighlight(props) {
   var getXPosition = getValueToPositionMapper(xScale);
   var 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 ".concat(xScale(axis.x.value) - (xScale.step() - xScale.bandwidth()) / 2, " ").concat(yScale.range()[0], " l ").concat(xScale.step(), " 0 l 0 ").concat(yScale.range()[1] - yScale.range()[0], " l ").concat(-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 ".concat(xScale.range()[0], " ").concat(yScale(axis.y.value) - (yScale.step() - yScale.bandwidth()) / 2, " l 0 ").concat(yScale.step(), " l ").concat(xScale.range()[1] - xScale.range()[0], " 0 l 0 ").concat(-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 ".concat(getXPosition(axis.x.value), " ").concat(yScale.range()[0], " L ").concat(getXPosition(axis.x.value), " ").concat(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 ".concat(xScale.range()[0], " ").concat(getYPosition(axis.y.value), " L ").concat(xScale.range()[1], " ").concat(getYPosition(axis.y.value)),
-      stroke: "black",
-      strokeDasharray: "5 2",
-      style: {
-        pointerEvents: 'none'
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
       }
     })]
   });

package/legacy/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) {
   var id = props.id,
     offsetProps = props.offset;