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

package/BarChart/BarElement.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BarElement = BarElement;
-exports.BarElementPath = void 0;
+exports.barElementClasses = exports.BarElementPath = void 0;
 exports.getBarElementUtilityClass = getBarElementUtilityClass;
-exports.lineElementClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -17,17 +16,17 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 var _styles = require("@mui/material/styles");
 var _d3Color = require("d3-color");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _web = require("@react-spring/web");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getBarElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiBarElement', slot);
 }
-const lineElementClasses = (0, _generateUtilityClasses.default)('MuiBarElement', ['root']);
-exports.lineElementClasses = lineElementClasses;
+const barElementClasses = exports.barElementClasses = (0, _generateUtilityClasses.default)('MuiBarElement', ['root']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -38,7 +37,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, getBarElementUtilityClass, classes);
 };
-const BarElementPath = (0, _styles.styled)('rect', {
+const BarElementPath = exports.BarElementPath = (0, _styles.styled)(_web.animated.rect, {
   name: 'MuiBarElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -51,7 +50,6 @@ const BarElementPath = (0, _styles.styled)('rect', {
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
   opacity: ownerState.isFaded && 0.3 || 1
 }));
-exports.BarElementPath = BarElementPath;
 function BarElement(props) {
   const {
       id,
@@ -60,7 +58,8 @@ function BarElement(props) {
       color,
       highlightScope,
       slots,
-      slotProps
+      slotProps,
+      style
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
@@ -95,6 +94,7 @@ function BarElement(props) {
       seriesId: id,
       dataIndex
     }), {
+      style,
       className: classes.root
     }),
     ownerState

package/BarChart/BarPlot.d.ts

@@ -7,8 +7,24 @@ export interface BarPlotSlotComponentProps {
     bar?: Partial<BarElementProps>;
 }
 export interface BarPlotProps extends Pick<BarElementProps, 'slots' | 'slotProps'> {
+    /**
+     * If `true`, animations are skiped.
+     * @default false
+     */
+    skipAnimation?: boolean;
 }
-declare function BarPlot(props: BarPlotProps): React.JSX.Element | null;
+/**
+ * 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/)
+ */
+declare function BarPlot(props: BarPlotProps): React.JSX.Element;
 declare namespace BarPlot {
     var propTypes: any;
 }

package/BarChart/BarPlot.js

@@ -5,16 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BarPlot = BarPlot;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _web = require("@react-spring/web");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _BarElement = require("./BarElement");
 var _axis = require("../models/axis");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const _excluded = ["skipAnimation"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -23,7 +26,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @param numberOfGroups The number of bars to place in that space.
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
- */function getBandSize({
+ */
+function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
   gapRatio: r
@@ -41,12 +45,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     offset
   };
 }
-function BarPlot(props) {
-  const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).bar;
+const useCompletedData = () => {
+  const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).bar ?? {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
-  if (seriesData === undefined) {
-    return null;
-  }
   const {
     series,
     stackingGroups
@@ -59,66 +64,142 @@ function BarPlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/(0, _jsxRuntime.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 (!(0, _axis.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 (!(0, _axis.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 (!(0, _axis.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`);
         }
-        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__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
-            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}`);
-        });
+        baseScaleConfig = xAxisConfig;
+      } else {
+        if (!(0, _axis.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 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
+}) => (0, _extends2.default)({}, 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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const transition = (0, _web.useTransition)(completedData, {
+    keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
+    from: getOutStyle,
+    leave: getOutStyle,
+    enter: getInStyle,
+    update: getInStyle,
+    immediate: skipAnimation
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: transition((style, {
+      seriesId,
+      dataIndex,
+      color,
+      highlightScope
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
+      id: seriesId,
+      dataIndex: dataIndex,
+      highlightScope: highlightScope,
+      color: color
+    }, other, {
+      style: style
+    })))
   });
 }
 process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
@@ -126,6 +207,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.default.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/BarChart/formatter.js

@@ -60,8 +60,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v.toLocaleString())
+    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v?.toLocaleString())
   };
 };
-var _default = formatter;
-exports.default = _default;
+var _default = exports.default = formatter;

package/BarChart/legend.js

@@ -16,5 +16,4 @@ const legendGetter = params => {
   }));
   return data.filter(item => item.label !== undefined);
 };
-var _default = legendGetter;
-exports.default = _default;
+var _default = exports.default = legendGetter;