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

package/esm/BarChart/BarLabel/BarLabel.js

@@ -2,14 +2,14 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes"];
+const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes", "skipAnimation", "layout", "xOrigin", "yOrigin"];
 import * as React from 'react';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { animated } from '@react-spring/web';
 import PropTypes from 'prop-types';
+import { useAnimateBarLabel } from "../../hooks/animation/useAnimateBarLabel.js";
 import { barLabelClasses } from "./barLabelClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const BarLabelComponent = styled(animated.text, {
+export const BarLabelComponent = styled('text', {
   name: 'MuiBarLabel',
   slot: 'Root',
   overridesResolver: (_, styles) => [{
@@ -37,7 +37,8 @@ function BarLabel(inProps) {
     name: 'MuiBarLabel'
   });
   const otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx(BarLabelComponent, _extends({}, otherProps));
+  const animatedProps = useAnimateBarLabel(props);
+  return /*#__PURE__*/_jsx(BarLabelComponent, _extends({}, otherProps, animatedProps));
 }
 process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -46,8 +47,34 @@ process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   dataIndex: PropTypes.number.isRequired,
+  /**
+   * Height of the bar this label belongs to.
+   */
+  height: PropTypes.number.isRequired,
   isFaded: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired,
-  seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+  layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
+  seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  skipAnimation: PropTypes.bool.isRequired,
+  /**
+   * Width of the bar this label belongs to.
+   */
+  width: PropTypes.number.isRequired,
+  /**
+   * Position in the x-axis of the bar this label belongs to.
+   */
+  x: PropTypes.number.isRequired,
+  /**
+   * The x-coordinate of the stack this bar label belongs to.
+   */
+  xOrigin: PropTypes.number.isRequired,
+  /**
+   * Position in the y-axis of the bar this label belongs to.
+   */
+  y: PropTypes.number.isRequired,
+  /**
+   * The y-coordinate of the stack this bar label belongs to.
+   */
+  yOrigin: PropTypes.number.isRequired
 } : void 0;
 export { BarLabel };

package/esm/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/esm/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/esm/BarChart/BarLabel/BarLabelItem.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
@@ -18,14 +18,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 = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -41,7 +46,9 @@ function BarLabelItem(props) {
     color,
     isFaded,
     isHighlighted,
-    dataIndex
+    dataIndex,
+    skipAnimation,
+    layout
   };
   const classes = useUtilityClasses(ownerState);
   const Component = slots?.barLabel ?? BarLabel;
@@ -49,7 +56,12 @@ function BarLabelItem(props) {
       elementType: Component,
       externalSlotProps: slotProps?.barLabel,
       additionalProps: _extends({}, other, {
-        style,
+        xOrigin,
+        yOrigin,
+        x,
+        y,
+        width,
+        height,
         className: classes.root
       }),
       ownerState

package/esm/BarChart/BarLabel/BarLabelPlot.js

@@ -1,40 +1,9 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["bars", "skipAnimation"];
 import * as React from 'react';
-import { useTransition } from '@react-spring/web';
 import { BarLabelItem } from "./BarLabelItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const leaveStyle = ({
-  layout,
-  yOrigin,
-  x,
-  width,
-  y,
-  xOrigin,
-  height
-}) => _extends({}, 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.
  */
@@ -44,32 +13,33 @@ function BarLabelPlot(props) {
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const barLabelTransition = useTransition(bars, {
-    keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: skipAnimation ? undefined : leaveStyle,
-    leave: null,
-    enter: enterStyle,
-    update: enterStyle,
-    immediate: skipAnimation
-  });
   return /*#__PURE__*/_jsx(React.Fragment, {
-    children: barLabelTransition((style, {
+    children: bars.map(({
+      xOrigin,
+      yOrigin,
+      x,
+      y,
       seriesId,
       dataIndex,
       color,
       value,
       width,
-      height
+      height,
+      layout
     }) => /*#__PURE__*/_jsx(BarLabelItem, _extends({
       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}`))
   });
 }
 export { BarLabelPlot };

package/esm/BarChart/BarLabel/barLabelClasses.d.ts

@@ -6,8 +6,15 @@ 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;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${barLabelClasses.series}-${seriesId}`.
+   */
+  series: 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/esm/BarChart/BarLabel/barLabelClasses.js

@@ -4,16 +4,17 @@ import composeClasses from '@mui/utils/composeClasses';
 export function getBarLabelUtilityClass(slot) {
   return generateUtilityClass('MuiBarLabel', slot);
 }
-export const barLabelClasses = generateUtilityClasses('MuiBarLabel', ['root', 'highlighted', 'faded']);
+export const barLabelClasses = generateUtilityClasses('MuiBarLabel', ['root', 'highlighted', 'faded', 'animate']);
 export 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 composeClasses(slots, getBarLabelUtilityClass, classes);
 };

package/esm/BarChart/BarPlot.js

@@ -1,20 +1,20 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTransition } from '@react-spring/web';
 import { styled } from '@mui/material/styles';
-import { BarElement, barElementClasses } from "./BarElement.js";
+import { barElementClasses } from "./barElementClasses.js";
+import { BarElement } from "./BarElement.js";
 import getColor from "./seriesConfig/getColor.js";
 import { useChartId, useDrawingArea, useXAxes, useYAxes } from "../hooks/index.js";
 import { BarClipPath } from "./BarClipPath.js";
 import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
 import { checkScaleErrors } from "./checkScaleErrors.js";
 import { useBarSeriesContext } from "../hooks/useBarSeries.js";
-import { useSkipAnimation } from "../context/AnimationProvider/index.js";
+import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
 
 /**
@@ -102,6 +102,9 @@ const useAggregatedData = () => {
         layout
       } = series[seriesId];
       return baseScaleConfig.data.map((baseValue, dataIndex) => {
+        if (currentSeriesData[dataIndex] == null) {
+          return null;
+        }
         const values = stackedData[dataIndex];
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
@@ -113,8 +116,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),
@@ -154,36 +157,6 @@ const useAggregatedData = () => {
     masksData: Object.values(masks)
   };
 };
-const leaveStyle = ({
-  layout,
-  yOrigin,
-  x,
-  width,
-  y,
-  xOrigin,
-  height
-}) => _extends({}, 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 = styled('g', {
   name: 'MuiBarPlot',
   slot: 'Root',
@@ -220,25 +193,13 @@ function BarPlot(props) {
   const isZoomInteracting = useInternalIsZoomInteracting();
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
-  const transition = useTransition(completedData, {
-    keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: skipAnimation ? undefined : leaveStyle,
-    leave: leaveStyle,
-    enter: enterStyle,
-    update: enterStyle,
-    immediate: skipAnimation
-  });
-  const maskTransition = useTransition(withoutBorderRadius ? [] : masksData, {
-    keys: v => v.id,
-    from: skipAnimation ? undefined : leaveStyle,
-    leave: leaveStyle,
-    enter: enterStyle,
-    update: enterStyle,
-    immediate: skipAnimation
-  });
   return /*#__PURE__*/_jsxs(BarPlotRoot, {
-    children: [!withoutBorderRadius && maskTransition((style, {
+    children: [!withoutBorderRadius && masksData.map(({
       id,
+      x,
+      y,
+      width,
+      height,
       hasPositive,
       hasNegative,
       layout
@@ -249,18 +210,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__*/_jsx(BarElement, _extends({
         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, {
@@ -268,16 +248,15 @@ function BarPlot(props) {
             seriesId,
             dataIndex
           });
-        }),
-        style: style
-      }));
+        })
+      }), `${seriesId}-${dataIndex}`);
       if (withoutBorderRadius) {
         return barElement;
       }
       return /*#__PURE__*/_jsx("g", {
         clipPath: `url(#${maskId})`,
         children: barElement
-      });
+      }, `${seriesId}-${dataIndex}`);
     }), barLabel && /*#__PURE__*/_jsx(BarLabelPlot, _extends({
       bars: completedData,
       skipAnimation: skipAnimation,

package/esm/BarChart/barElementClasses.d.ts

@@ -0,0 +1,26 @@
+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;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${barElementClasses.series}-${seriesId}`.
+   */
+  series: 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/{modern/LineChart/markElementClasses.js → esm/BarChart/barElementClasses.js}

@@ -1,19 +1,19 @@
-import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getMarkElementUtilityClass(slot) {
-  return generateUtilityClass('MuiMarkElement', slot);
+export function getBarElementUtilityClass(slot) {
+  return generateUtilityClass('MuiBarElement', slot);
 }
-export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded']);
+export const barElementClasses = generateUtilityClasses('MuiBarElement', ['root', 'highlighted', 'faded', 'series']);
 export const useUtilityClasses = ownerState => {
   const {
     classes,
     id,
-    isFaded,
-    isHighlighted
+    isHighlighted,
+    isFaded
   } = ownerState;
   const slots = {
     root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
-  return composeClasses(slots, getMarkElementUtilityClass, classes);
+  return composeClasses(slots, getBarElementUtilityClass, classes);
 };

package/esm/BarChart/getRadius.d.ts

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

package/esm/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/esm/BarChart/index.js

@@ -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/esm/BarChart/seriesConfig/getColor.js

@@ -5,6 +5,9 @@ const getColor = (series, xAxis, yAxis) => {
   const bandValues = verticalLayout ? xAxis?.data : yAxis?.data;
   if (valueColorScale) {
     return dataIndex => {
+      if (dataIndex === undefined) {
+        return series.color;
+      }
       const value = series.data[dataIndex];
       const color = value === null ? series.color : valueColorScale(value);
       if (color === null) {
@@ -15,6 +18,9 @@ const getColor = (series, xAxis, yAxis) => {
   }
   if (bandColorScale && bandValues) {
     return dataIndex => {
+      if (dataIndex === undefined) {
+        return series.color;
+      }
       const value = bandValues[dataIndex];
       const color = value === null ? series.color : bandColorScale(value);
       if (color === null) {

package/esm/BarChart/seriesConfig/index.js

@@ -2,13 +2,14 @@ import { getExtremumX, getExtremumY } from "./extremums.js";
 import seriesProcessor from "./seriesProcessor.js";
 import legendGetter from "./legend.js";
 import getColor from "./getColor.js";
-import tooltipGetter from "./tooltip.js";
+import tooltipGetter, { axisTooltipGetter } from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 export const seriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
   legendGetter,
   tooltipGetter,
+  axisTooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues

package/esm/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/esm/BarChart/seriesConfig/tooltip.js

@@ -10,6 +10,9 @@ const tooltipGetter = params => {
   }
   const label = getLabel(series.label, 'tooltip');
   const value = series.data[identifier.dataIndex];
+  if (value == null) {
+    return null;
+  }
   const formattedValue = series.valueFormatter(value, {
     dataIndex: identifier.dataIndex
   });
@@ -22,4 +25,13 @@ const tooltipGetter = params => {
     markType: series.labelMarkType
   };
 };
+export const axisTooltipGetter = series => {
+  return Object.values(series).map(s => s.layout === 'horizontal' ? {
+    direction: 'y',
+    axisId: s.yAxisId
+  } : {
+    direction: 'x',
+    axisId: s.xAxisId
+  });
+};
 export default tooltipGetter;

package/esm/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 {