@mui/x-charts 8.0.0-beta.2 → 8.0.0-beta.3

package/BarChart/BarLabel/BarLabel.js

@@ -12,12 +12,12 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
-var _web = require("@react-spring/web");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useAnimateBarLabel = require("../../hooks/animation/useAnimateBarLabel");
 var _barLabelClasses = require("./barLabelClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes"];
-const BarLabelComponent = exports.BarLabelComponent = (0, _styles.styled)(_web.animated.text, {
+const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes", "skipAnimation", "layout", "xOrigin", "yOrigin"];
+const BarLabelComponent = exports.BarLabelComponent = (0, _styles.styled)('text', {
   name: 'MuiBarLabel',
   slot: 'Root',
   overridesResolver: (_, styles) => [{
@@ -45,7 +45,8 @@ function BarLabel(inProps) {
     name: 'MuiBarLabel'
   });
   const otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BarLabelComponent, (0, _extends2.default)({}, otherProps));
+  const animatedProps = (0, _useAnimateBarLabel.useAnimateBarLabel)(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BarLabelComponent, (0, _extends2.default)({}, otherProps, animatedProps));
 }
 process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -54,7 +55,33 @@ process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
   // ----------------------------------------------------------------------
   classes: _propTypes.default.object,
   dataIndex: _propTypes.default.number.isRequired,
+  /**
+   * Height of the bar this label belongs to.
+   */
+  height: _propTypes.default.number.isRequired,
   isFaded: _propTypes.default.bool.isRequired,
   isHighlighted: _propTypes.default.bool.isRequired,
-  seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+  layout: _propTypes.default.oneOf(['horizontal', 'vertical']).isRequired,
+  seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  skipAnimation: _propTypes.default.bool.isRequired,
+  /**
+   * Width of the bar this label belongs to.
+   */
+  width: _propTypes.default.number.isRequired,
+  /**
+   * Position in the x-axis of the bar this label belongs to.
+   */
+  x: _propTypes.default.number.isRequired,
+  /**
+   * The x-coordinate of the stack this bar label belongs to.
+   */
+  xOrigin: _propTypes.default.number.isRequired,
+  /**
+   * Position in the y-axis of the bar this label belongs to.
+   */
+  y: _propTypes.default.number.isRequired,
+  /**
+   * The y-coordinate of the stack this bar label belongs to.
+   */
+  yOrigin: _propTypes.default.number.isRequired
 } : void 0;

package/BarChart/BarLabel/BarLabel.types.d.ts

@@ -6,6 +6,8 @@ export interface BarLabelOwnerState {
   color: string;
   isFaded: boolean;
   isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
   classes?: Partial<BarLabelClasses>;
 }
 export type BarItem = {

package/BarChart/BarLabel/BarLabelItem.d.ts

@@ -23,6 +23,22 @@ export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighligh
    * @default {}
    */
   slots?: BarLabelSlots;
+  /**
+   * The position in the x-axis of the stack this bar label belongs to.
+   */
+  xOrigin: number;
+  /**
+   * The position in the y-axis of the stack this bar label belongs to.
+   */
+  yOrigin: number;
+  /**
+   * The position of the bar in the x-axis.
+   */
+  x: number;
+  /**
+   * The position of the bar in the y-axis.
+   */
+  y: number;
   /**
    * The height of the bar.
    */
@@ -31,10 +47,18 @@ export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighligh
    * The width of the bar.
    */
   width: number;
+  /**
+   * The orientation of the bar.
+   */
+  layout: 'vertical' | 'horizontal';
   /**
    * The value of the data point.
    */
   value: number | null;
+  /**
+   * If true, no animations should be applied.
+   */
+  skipAnimation: boolean;
   /**
    * If provided, the function will be used to format the label of the bar.
    * It can be set to 'value' to display the current value.

package/BarChart/BarLabel/BarLabelItem.js

@@ -16,7 +16,7 @@ var _getBarLabel = require("./getBarLabel");
 var _BarLabel = require("./BarLabel");
 var _useItemHighlighted = require("../../hooks/useItemHighlighted");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesId", "classes", "color", "style", "dataIndex", "barLabel", "slots", "slotProps", "height", "width", "value"],
+const _excluded = ["seriesId", "classes", "color", "dataIndex", "barLabel", "slots", "slotProps", "xOrigin", "yOrigin", "x", "y", "width", "height", "value", "skipAnimation", "layout"],
   _excluded2 = ["ownerState"];
 /**
  * @ignore - internal component.
@@ -26,14 +26,19 @@ function BarLabelItem(props) {
       seriesId,
       classes: innerClasses,
       color,
-      style,
       dataIndex,
       barLabel,
       slots,
       slotProps,
-      height,
+      xOrigin,
+      yOrigin,
+      x,
+      y,
       width,
-      value
+      height,
+      value,
+      skipAnimation,
+      layout
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -49,7 +54,9 @@ function BarLabelItem(props) {
     color,
     isFaded,
     isHighlighted,
-    dataIndex
+    dataIndex,
+    skipAnimation,
+    layout
   };
   const classes = (0, _barLabelClasses.useUtilityClasses)(ownerState);
   const Component = slots?.barLabel ?? _BarLabel.BarLabel;
@@ -57,7 +64,12 @@ function BarLabelItem(props) {
       elementType: Component,
       externalSlotProps: slotProps?.barLabel,
       additionalProps: (0, _extends2.default)({}, other, {
-        style,
+        xOrigin,
+        yOrigin,
+        x,
+        y,
+        width,
+        height,
         className: classes.root
       }),
       ownerState

package/BarChart/BarLabel/BarLabelPlot.js

@@ -6,43 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BarLabelPlot = BarLabelPlot;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _web = require("@react-spring/web");
 var _BarLabelItem = require("./BarLabelItem");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["bars", "skipAnimation"];
-const leaveStyle = ({
-  layout,
-  yOrigin,
-  x,
-  width,
-  y,
-  xOrigin,
-  height
-}) => (0, _extends2.default)({}, layout === 'vertical' ? {
-  y: yOrigin,
-  x: x + width / 2,
-  height: 0,
-  width
-} : {
-  y: y + height / 2,
-  x: xOrigin,
-  height,
-  width: 0
-});
-const enterStyle = ({
-  x,
-  width,
-  y,
-  height
-}) => ({
-  x: x + width / 2,
-  y: y + height / 2,
-  height,
-  width
-});
 /**
  * @ignore - internal component.
  */
@@ -52,31 +21,32 @@ function BarLabelPlot(props) {
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const barLabelTransition = (0, _web.useTransition)(bars, {
-    keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: skipAnimation ? undefined : leaveStyle,
-    leave: null,
-    enter: enterStyle,
-    update: enterStyle,
-    immediate: skipAnimation
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-    children: barLabelTransition((style, {
+    children: bars.map(({
+      xOrigin,
+      yOrigin,
+      x,
+      y,
       seriesId,
       dataIndex,
       color,
       value,
       width,
-      height
+      height,
+      layout
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarLabelItem.BarLabelItem, (0, _extends2.default)({
       seriesId: seriesId,
       dataIndex: dataIndex,
       value: value,
       color: color,
+      xOrigin: xOrigin,
+      yOrigin: yOrigin,
+      x: x,
+      y: y,
       width: width,
-      height: height
-    }, other, {
-      style: style
-    })))
+      height: height,
+      skipAnimation: skipAnimation ?? false,
+      layout: layout ?? 'vertical'
+    }, other), `${seriesId}-${dataIndex}`))
   });
 }

package/BarChart/BarLabel/barLabelClasses.d.ts

@@ -6,8 +6,10 @@ export interface BarLabelClasses {
   highlighted: string;
   /** Styles applied to the root element if it is faded. */
   faded: string;
+  /** Styles applied to the root element if it is animated. */
+  animate: string;
 }
 export type BarLabelClassKey = keyof BarLabelClasses;
 export declare function getBarLabelUtilityClass(slot: string): string;
-export declare const barLabelClasses: Record<"root" | "highlighted" | "faded", string>;
+export declare const barLabelClasses: Record<"root" | "animate" | "highlighted" | "faded", string>;
 export declare const useUtilityClasses: (ownerState: BarLabelOwnerState) => Record<"root", string>;

package/BarChart/BarLabel/barLabelClasses.js

@@ -13,16 +13,17 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 function getBarLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiBarLabel', slot);
 }
-const barLabelClasses = exports.barLabelClasses = (0, _generateUtilityClasses.default)('MuiBarLabel', ['root', 'highlighted', 'faded']);
+const barLabelClasses = exports.barLabelClasses = (0, _generateUtilityClasses.default)('MuiBarLabel', ['root', 'highlighted', 'faded', 'animate']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
     seriesId,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    skipAnimation
   } = ownerState;
   const slots = {
-    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded', !skipAnimation && 'animate']
   };
   return (0, _composeClasses.default)(slots, getBarLabelUtilityClass, classes);
 };

package/BarChart/BarPlot.js

@@ -7,12 +7,12 @@ 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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _web = require("@react-spring/web");
 var _styles = require("@mui/material/styles");
+var _barElementClasses = require("./barElementClasses");
 var _BarElement = require("./BarElement");
 var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
 var _hooks = require("../hooks");
@@ -119,8 +119,8 @@ const useAggregatedData = () => {
           layout,
           x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
           y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
-          xOrigin: xScale(0),
-          yOrigin: yScale(0),
+          xOrigin: xScale(0) ?? 0,
+          yOrigin: yScale(0) ?? 0,
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
           width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
           color: colorGetter(dataIndex),
@@ -160,42 +160,12 @@ const useAggregatedData = () => {
     masksData: Object.values(masks)
   };
 };
-const leaveStyle = ({
-  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 enterStyle = ({
-  x,
-  width,
-  y,
-  height
-}) => ({
-  y,
-  x,
-  height,
-  width
-});
 const BarPlotRoot = (0, _styles.styled)('g', {
   name: 'MuiBarPlot',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
 })({
-  [`& .${_BarElement.barElementClasses.root}`]: {
+  [`& .${_barElementClasses.barElementClasses.root}`]: {
     transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
   }
 });
@@ -226,25 +196,13 @@ function BarPlot(props) {
   const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
   const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
-  const transition = (0, _web.useTransition)(completedData, {
-    keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: skipAnimation ? undefined : leaveStyle,
-    leave: leaveStyle,
-    enter: enterStyle,
-    update: enterStyle,
-    immediate: skipAnimation
-  });
-  const maskTransition = (0, _web.useTransition)(withoutBorderRadius ? [] : masksData, {
-    keys: v => v.id,
-    from: skipAnimation ? undefined : leaveStyle,
-    leave: leaveStyle,
-    enter: enterStyle,
-    update: enterStyle,
-    immediate: skipAnimation
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BarPlotRoot, {
-    children: [!withoutBorderRadius && maskTransition((style, {
+    children: [!withoutBorderRadius && masksData.map(({
       id,
+      x,
+      y,
+      width,
+      height,
       hasPositive,
       hasNegative,
       layout
@@ -255,18 +213,37 @@ function BarPlot(props) {
         hasNegative: hasNegative,
         hasPositive: hasPositive,
         layout: layout,
-        style: style
-      });
-    }), transition((style, {
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        skipAnimation: skipAnimation ?? false
+      }, id);
+    }), completedData.map(({
       seriesId,
       dataIndex,
       color,
-      maskId
+      maskId,
+      layout,
+      x,
+      xOrigin,
+      y,
+      yOrigin,
+      width,
+      height
     }) => {
       const barElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
         id: seriesId,
         dataIndex: dataIndex,
-        color: color
+        color: color,
+        skipAnimation: skipAnimation ?? false,
+        layout: layout ?? 'vertical',
+        x: x,
+        xOrigin: xOrigin,
+        y: y,
+        yOrigin: yOrigin,
+        width: width,
+        height: height
       }, other, {
         onClick: onItemClick && (event => {
           onItemClick(event, {
@@ -274,16 +251,15 @@ function BarPlot(props) {
             seriesId,
             dataIndex
           });
-        }),
-        style: style
-      }));
+        })
+      }), `${seriesId}-${dataIndex}`);
       if (withoutBorderRadius) {
         return barElement;
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
         clipPath: `url(#${maskId})`,
         children: barElement
-      });
+      }, `${seriesId}-${dataIndex}`);
     }), barLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarLabelPlot.BarLabelPlot, (0, _extends2.default)({
       bars: completedData,
       skipAnimation: skipAnimation,

package/BarChart/barElementClasses.d.ts

@@ -0,0 +1,21 @@
+import { SeriesId } from "../models/seriesType/common.js";
+export interface BarElementClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if it is highlighted. */
+  highlighted: string;
+  /** Styles applied to the root element if it is faded. */
+  faded: string;
+}
+export type BarElementClassKey = keyof BarElementClasses;
+export interface BarElementOwnerState {
+  id: SeriesId;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<BarElementClasses>;
+}
+export declare function getBarElementUtilityClass(slot: string): string;
+export declare const barElementClasses: BarElementClasses;
+export declare const useUtilityClasses: (ownerState: BarElementOwnerState) => Record<"root", string>;

package/BarChart/barElementClasses.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.barElementClasses = void 0;
+exports.getBarElementUtilityClass = getBarElementUtilityClass;
+exports.useUtilityClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getBarElementUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiBarElement', slot);
+}
+const barElementClasses = exports.barElementClasses = (0, _generateUtilityClasses.default)('MuiBarElement', ['root', 'highlighted', 'faded']);
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isHighlighted,
+    isFaded
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return (0, _composeClasses.default)(slots, getBarElementUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/BarChart/getRadius.d.ts

@@ -1,4 +1,4 @@
-type GetRadiusData = {
+export type GetRadiusData = {
   hasNegative: boolean;
   hasPositive: boolean;
   borderRadius?: number;

package/BarChart/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./BarChart.js";
 export * from "./BarPlot.js";
 export * from "./BarElement.js";
-export * from "./BarLabel/index.js";
+export * from "./BarLabel/index.js";
+export * from "./barElementClasses.js";

package/BarChart/index.js

@@ -46,4 +46,15 @@ Object.keys(_BarLabel).forEach(function (key) {
       return _BarLabel[key];
     }
   });
+});
+var _barElementClasses = require("./barElementClasses");
+Object.keys(_barElementClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _barElementClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _barElementClasses[key];
+    }
+  });
 });

package/BarChart/seriesConfig/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,13 +10,14 @@ var _extremums = require("./extremums");
 var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
 var _legend = _interopRequireDefault(require("./legend"));
 var _getColor = _interopRequireDefault(require("./getColor"));
-var _tooltip = _interopRequireDefault(require("./tooltip"));
+var _tooltip = _interopRequireWildcard(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 const seriesConfig = exports.seriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   colorProcessor: _getColor.default,
   legendGetter: _legend.default,
   tooltipGetter: _tooltip.default,
+  axisTooltipGetter: _tooltip.axisTooltipGetter,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default

package/BarChart/seriesConfig/tooltip.d.ts

@@ -1,3 +1,4 @@
-import type { TooltipGetter } from '../../internals/plugins/models';
+import type { AxisTooltipGetter, TooltipGetter } from '../../internals/plugins/models';
 declare const tooltipGetter: TooltipGetter<'bar'>;
+export declare const axisTooltipGetter: AxisTooltipGetter<'bar', 'x' | 'y'>;
 export default tooltipGetter;

package/BarChart/seriesConfig/tooltip.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.axisTooltipGetter = void 0;
 var _getLabel = require("../../internals/getLabel");
 const tooltipGetter = params => {
   const {
@@ -16,6 +16,9 @@ const tooltipGetter = params => {
   }
   const label = (0, _getLabel.getLabel)(series.label, 'tooltip');
   const value = series.data[identifier.dataIndex];
+  if (value == null) {
+    return null;
+  }
   const formattedValue = series.valueFormatter(value, {
     dataIndex: identifier.dataIndex
   });
@@ -28,4 +31,14 @@ const tooltipGetter = params => {
     markType: series.labelMarkType
   };
 };
+const axisTooltipGetter = series => {
+  return Object.values(series).map(s => s.layout === 'horizontal' ? {
+    direction: 'y',
+    axisId: s.yAxisId
+  } : {
+    direction: 'x',
+    axisId: s.xAxisId
+  });
+};
+exports.axisTooltipGetter = axisTooltipGetter;
 var _default = exports.default = tooltipGetter;

package/BarChart/types.d.ts

@@ -5,8 +5,8 @@ export type AnimationData = {
   y: number;
   width: number;
   height: number;
-  yOrigin?: number;
-  xOrigin?: number;
+  yOrigin: number;
+  xOrigin: number;
   layout: BarSeriesType['layout'];
 };
 export interface CompletedBarData extends AnimationData {