@mui/x-charts 8.5.3 → 8.7.0

package/ChartsXAxis/ChartsXAxis.js

@@ -15,24 +15,22 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _clampAngle = require("../internals/clampAngle");
 var _useIsHydrated = require("../hooks/useIsHydrated");
-var _ellipsize = require("../internals/ellipsize");
 var _domUtils = require("../internals/domUtils");
 var _useTicks = require("../hooks/useTicks");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
 var _ChartsText = require("../ChartsText");
-var _geometry = require("../internals/geometry");
 var _useMounted = require("../hooks/useMounted");
 var _useDrawingArea = require("../hooks/useDrawingArea");
-var _getWordsByLines = require("../internals/getWordsByLines");
 var _isInfinity = require("../internals/isInfinity");
 var _isBandScale = require("../internals/isBandScale");
 var _useChartContext = require("../context/ChartProvider/useChartContext");
 var _useAxis = require("../hooks/useAxis");
 var _defaultTextPlacement = require("../ChartsText/defaultTextPlacement");
 var _invertTextAnchor = require("../internals/invertTextAnchor");
+var _shortenLabels = require("./shortenLabels");
+var _getVisibleLabels = require("./getVisibleLabels");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber", "reverse"];
 const useUtilityClasses = ownerState => {
@@ -56,108 +54,6 @@ const useUtilityClasses = ownerState => {
 const TICK_LABEL_GAP = 3;
 /* Gap between the axis label and tick labels. */
 const AXIS_LABEL_TICK_LABEL_GAP = 4;
-
-/* Returns a set of indices of the tick labels that should be visible.  */
-function getVisibleLabels(xTicks, {
-  tickLabelStyle: style,
-  tickLabelInterval,
-  tickLabelMinGap,
-  reverse,
-  isMounted,
-  isXInside
-}) {
-  const getTickLabelSize = tick => {
-    if (!isMounted || tick.formattedValue === undefined) {
-      return {
-        width: 0,
-        height: 0
-      };
-    }
-    const tickSizes = (0, _getWordsByLines.getWordsByLines)({
-      style,
-      needsComputation: true,
-      text: tick.formattedValue
-    });
-    return {
-      width: Math.max(...tickSizes.map(size => size.width)),
-      height: Math.max(tickSizes.length * tickSizes[0].height)
-    };
-  };
-  if (typeof tickLabelInterval === 'function') {
-    return new Set(xTicks.filter((item, index) => tickLabelInterval(item.value, index)));
-  }
-
-  // Filter label to avoid overlap
-  let previousTextLimit = 0;
-  const direction = reverse ? -1 : 1;
-  return new Set(xTicks.filter((item, labelIndex) => {
-    const {
-      offset,
-      labelOffset
-    } = item;
-    const textPosition = offset + labelOffset;
-    if (labelIndex > 0 && direction * textPosition < direction * (previousTextLimit + tickLabelMinGap)) {
-      return false;
-    }
-    if (!isXInside(textPosition)) {
-      return false;
-    }
-
-    /* Measuring text width is expensive, so we need to delay it as much as possible to improve performance. */
-    const {
-      width,
-      height
-    } = getTickLabelSize(item);
-    const distance = (0, _geometry.getMinXTranslation)(width, height, style?.angle);
-    const currentTextLimit = textPosition - direction * distance / 2;
-    if (labelIndex > 0 && direction * currentTextLimit < direction * (previousTextLimit + tickLabelMinGap)) {
-      // Except for the first label, we skip all label that overlap with the last accepted.
-      // Notice that the early return prevents `previousTextLimit` from being updated.
-      return false;
-    }
-    previousTextLimit = textPosition + direction * distance / 2;
-    return true;
-  }));
-}
-function shortenLabels(visibleLabels, drawingArea, maxHeight, isRtl, tickLabelStyle) {
-  const shortenedLabels = new Map();
-  const angle = (0, _clampAngle.clampAngle)(tickLabelStyle?.angle ?? 0);
-
-  // Multiplying the space available to the left of the text position by leftBoundFactor returns the max width of the text.
-  // Same for rightBoundFactor
-  let leftBoundFactor = 1;
-  let rightBoundFactor = 1;
-  if (tickLabelStyle?.textAnchor === 'start') {
-    leftBoundFactor = Infinity;
-    rightBoundFactor = 1;
-  } else if (tickLabelStyle?.textAnchor === 'end') {
-    leftBoundFactor = 1;
-    rightBoundFactor = Infinity;
-  } else {
-    leftBoundFactor = 2;
-    rightBoundFactor = 2;
-  }
-  if (angle > 90 && angle < 270) {
-    [leftBoundFactor, rightBoundFactor] = [rightBoundFactor, leftBoundFactor];
-  }
-  if (isRtl) {
-    [leftBoundFactor, rightBoundFactor] = [rightBoundFactor, leftBoundFactor];
-  }
-  for (const item of visibleLabels) {
-    if (item.formattedValue) {
-      // That maximum width of the tick depends on its proximity to the axis bounds.
-      const width = Math.min((item.offset + item.labelOffset) * leftBoundFactor, (drawingArea.left + drawingArea.width + drawingArea.right - item.offset - item.labelOffset) * rightBoundFactor);
-      const doesTextFit = text => (0, _ellipsize.doesTextFitInRect)(text, {
-        width,
-        height: maxHeight,
-        angle,
-        measureText: string => (0, _domUtils.getStringSize)(string, tickLabelStyle)
-      });
-      shortenedLabels.set(item, (0, _ellipsize.ellipsize)(item.formattedValue.toString(), doesTextFit));
-    }
-  }
-  return shortenedLabels;
-}
 const XAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
   name: 'MuiChartsXAxis',
   slot: 'Root'
@@ -261,7 +157,7 @@ function ChartsXAxis(inProps) {
     tickLabelPlacement,
     direction: 'x'
   });
-  const visibleLabels = getVisibleLabels(xTicks, {
+  const visibleLabels = (0, _getVisibleLabels.getVisibleLabels)(xTicks, {
     tickLabelStyle: axisTickLabelProps.style,
     tickLabelInterval,
     tickLabelMinGap,
@@ -299,7 +195,7 @@ function ChartsXAxis(inProps) {
 
   /* If there's an axis title, the tick labels have less space to render  */
   const tickLabelsMaxHeight = Math.max(0, axisHeight - (label ? labelHeight + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
-  const tickLabels = isHydrated ? shortenLabels(visibleLabels, drawingArea, tickLabelsMaxHeight, isRtl, axisTickLabelProps.style) : new Map(Array.from(visibleLabels).map(item => [item, item.formattedValue]));
+  const tickLabels = isHydrated ? (0, _shortenLabels.shortenLabels)(visibleLabels, drawingArea, tickLabelsMaxHeight, isRtl, axisTickLabelProps.style) : new Map(Array.from(visibleLabels).map(item => [item, item.formattedValue]));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(XAxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
     className: classes.root,

package/ChartsXAxis/getVisibleLabels.d.ts

@@ -0,0 +1,14 @@
+import { TickItemType } from "../hooks/useTicks.js";
+import { ChartsXAxisProps, ComputedXAxis } from "../models/axis.js";
+export declare function getVisibleLabels(xTicks: TickItemType[], {
+  tickLabelStyle: style,
+  tickLabelInterval,
+  tickLabelMinGap,
+  reverse,
+  isMounted,
+  isXInside
+}: Pick<ChartsXAxisProps, 'tickLabelInterval' | 'tickLabelStyle'> & Pick<ComputedXAxis, 'reverse'> & {
+  isMounted: boolean;
+  tickLabelMinGap: NonNullable<ChartsXAxisProps['tickLabelMinGap']>;
+  isXInside: (x: number) => boolean;
+}): Set<TickItemType>;

package/ChartsXAxis/getVisibleLabels.js

@@ -0,0 +1,71 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVisibleLabels = getVisibleLabels;
+var _geometry = require("../internals/geometry");
+var _getWordsByLines = require("../internals/getWordsByLines");
+/* Returns a set of indices of the tick labels that should be visible.  */
+function getVisibleLabels(xTicks, {
+  tickLabelStyle: style,
+  tickLabelInterval,
+  tickLabelMinGap,
+  reverse,
+  isMounted,
+  isXInside
+}) {
+  const getTickLabelSize = tick => {
+    if (!isMounted || tick.formattedValue === undefined) {
+      return {
+        width: 0,
+        height: 0
+      };
+    }
+    const tickSizes = (0, _getWordsByLines.getWordsByLines)({
+      style,
+      needsComputation: true,
+      text: tick.formattedValue
+    });
+    return {
+      width: Math.max(...tickSizes.map(size => size.width)),
+      height: Math.max(tickSizes.length * tickSizes[0].height)
+    };
+  };
+  if (typeof tickLabelInterval === 'function') {
+    return new Set(xTicks.filter((item, index) => tickLabelInterval(item.value, index)));
+  }
+
+  // Filter label to avoid overlap
+  let previousTextLimit = 0;
+  const direction = reverse ? -1 : 1;
+  return new Set(xTicks.filter((item, labelIndex) => {
+    const {
+      offset,
+      labelOffset
+    } = item;
+    const textPosition = offset + labelOffset;
+    if (labelIndex > 0 && direction * textPosition < direction * (previousTextLimit + tickLabelMinGap)) {
+      return false;
+    }
+    if (!isXInside(textPosition)) {
+      return false;
+    }
+
+    /* Measuring text width is expensive, so we need to delay it as much as possible to improve performance. */
+    const {
+      width,
+      height
+    } = getTickLabelSize(item);
+    const distance = (0, _geometry.getMinXTranslation)(width, height, style?.angle);
+    const currentTextLimit = textPosition - direction * distance / 2;
+    if (labelIndex > 0 && direction * currentTextLimit < direction * (previousTextLimit + tickLabelMinGap)) {
+      // Except for the first label, we skip all label that overlap with the last accepted.
+      // Notice that the early return prevents `previousTextLimit` from being updated.
+      return false;
+    }
+    previousTextLimit = textPosition + direction * distance / 2;
+    return true;
+  }));
+}

package/ChartsXAxis/shortenLabels.d.ts

@@ -0,0 +1,4 @@
+import { TickItemType } from "../hooks/useTicks.js";
+import { ChartsXAxisProps } from "../models/axis.js";
+import { ChartDrawingArea } from "../hooks/useDrawingArea.js";
+export declare function shortenLabels(visibleLabels: Set<TickItemType>, drawingArea: Pick<ChartDrawingArea, 'left' | 'width' | 'right'>, maxHeight: number, isRtl: boolean, tickLabelStyle: ChartsXAxisProps['tickLabelStyle']): Map<TickItemType, string>;

package/ChartsXAxis/shortenLabels.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shortenLabels = shortenLabels;
+var _clampAngle = require("../internals/clampAngle");
+var _ellipsize = require("../internals/ellipsize");
+var _domUtils = require("../internals/domUtils");
+function shortenLabels(visibleLabels, drawingArea, maxHeight, isRtl, tickLabelStyle) {
+  const shortenedLabels = new Map();
+  const angle = (0, _clampAngle.clampAngle)(tickLabelStyle?.angle ?? 0);
+
+  // Multiplying the space available to the left of the text position by leftBoundFactor returns the max width of the text.
+  // Same for rightBoundFactor
+  let leftBoundFactor = 1;
+  let rightBoundFactor = 1;
+  if (tickLabelStyle?.textAnchor === 'start') {
+    leftBoundFactor = Infinity;
+    rightBoundFactor = 1;
+  } else if (tickLabelStyle?.textAnchor === 'end') {
+    leftBoundFactor = 1;
+    rightBoundFactor = Infinity;
+  } else {
+    leftBoundFactor = 2;
+    rightBoundFactor = 2;
+  }
+  if (angle > 90 && angle < 270) {
+    [leftBoundFactor, rightBoundFactor] = [rightBoundFactor, leftBoundFactor];
+  }
+  if (isRtl) {
+    [leftBoundFactor, rightBoundFactor] = [rightBoundFactor, leftBoundFactor];
+  }
+  for (const item of visibleLabels) {
+    if (item.formattedValue) {
+      // That maximum width of the tick depends on its proximity to the axis bounds.
+      const width = Math.min((item.offset + item.labelOffset) * leftBoundFactor, (drawingArea.left + drawingArea.width + drawingArea.right - item.offset - item.labelOffset) * rightBoundFactor);
+      const doesTextFit = text => (0, _ellipsize.doesTextFitInRect)(text, {
+        width,
+        height: maxHeight,
+        angle,
+        measureText: string => (0, _domUtils.getStringSize)(string, tickLabelStyle)
+      });
+      shortenedLabels.set(item, (0, _ellipsize.ellipsize)(item.formattedValue.toString(), doesTextFit));
+    }
+  }
+  return shortenedLabels;
+}

package/ChartsYAxis/ChartsYAxis.js

@@ -17,7 +17,6 @@ var _styles = require("@mui/material/styles");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _useIsHydrated = require("../hooks/useIsHydrated");
 var _defaultTextPlacement = require("../ChartsText/defaultTextPlacement");
-var _ellipsize = require("../internals/ellipsize");
 var _domUtils = require("../internals/domUtils");
 var _useTicks = require("../hooks/useTicks");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -28,8 +27,8 @@ var _isInfinity = require("../internals/isInfinity");
 var _isBandScale = require("../internals/isBandScale");
 var _ChartProvider = require("../context/ChartProvider");
 var _hooks = require("../hooks");
-var _clampAngle = require("../internals/clampAngle");
 var _invertTextAnchor = require("../internals/invertTextAnchor");
+var _shortenLabels = require("./shortenLabels");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber"];
 const useUtilityClasses = ownerState => {
@@ -53,42 +52,6 @@ const useUtilityClasses = ownerState => {
 const TICK_LABEL_GAP = 2;
 /* Gap between the axis label and tick labels. */
 const AXIS_LABEL_TICK_LABEL_GAP = 2;
-function shortenLabels(visibleLabels, drawingArea, maxWidth, isRtl, tickLabelStyle) {
-  const shortenedLabels = new Map();
-  const angle = (0, _clampAngle.clampAngle)(tickLabelStyle?.angle ?? 0);
-  let topBoundFactor = 1;
-  let bottomBoundFactor = 1;
-  if (tickLabelStyle?.textAnchor === 'start') {
-    topBoundFactor = Infinity;
-    bottomBoundFactor = 1;
-  } else if (tickLabelStyle?.textAnchor === 'end') {
-    topBoundFactor = 1;
-    bottomBoundFactor = Infinity;
-  } else {
-    topBoundFactor = 2;
-    bottomBoundFactor = 2;
-  }
-  if (angle > 180) {
-    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
-  }
-  if (isRtl) {
-    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
-  }
-  for (const item of visibleLabels) {
-    if (item.formattedValue) {
-      // That maximum height of the tick depends on its proximity to the axis bounds.
-      const height = Math.min((item.offset + item.labelOffset) * topBoundFactor, (drawingArea.top + drawingArea.height + drawingArea.bottom - item.offset - item.labelOffset) * bottomBoundFactor);
-      const doesTextFit = text => (0, _ellipsize.doesTextFitInRect)(text, {
-        width: maxWidth,
-        height,
-        angle,
-        measureText: string => (0, _domUtils.getStringSize)(string, tickLabelStyle)
-      });
-      shortenedLabels.set(item, (0, _ellipsize.ellipsize)(item.formattedValue.toString(), doesTextFit));
-    }
-  }
-  return shortenedLabels;
-}
 const YAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
   name: 'MuiChartsYAxis',
   slot: 'Root'
@@ -226,7 +189,7 @@ function ChartsYAxis(inProps) {
   };
   /* If there's an axis title, the tick labels have less space to render  */
   const tickLabelsMaxWidth = Math.max(0, axisWidth - (label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
-  const tickLabels = isHydrated ? shortenLabels(yTicks, drawingArea, tickLabelsMaxWidth, isRtl, axisTickLabelProps.style) : new Map(Array.from(yTicks).map(item => [item, item.formattedValue]));
+  const tickLabels = isHydrated ? (0, _shortenLabels.shortenLabels)(yTicks, drawingArea, tickLabelsMaxWidth, isRtl, axisTickLabelProps.style) : new Map(Array.from(yTicks).map(item => [item, item.formattedValue]));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(YAxisRoot, {
     transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
     className: classes.root,

package/ChartsYAxis/shortenLabels.d.ts

@@ -0,0 +1,4 @@
+import { ChartDrawingArea } from "../hooks/index.js";
+import { TickItemType } from "../hooks/useTicks.js";
+import { ChartsYAxisProps } from "../models/index.js";
+export declare function shortenLabels(visibleLabels: TickItemType[], drawingArea: Pick<ChartDrawingArea, 'top' | 'height' | 'bottom'>, maxWidth: number, isRtl: boolean, tickLabelStyle: ChartsYAxisProps['tickLabelStyle']): Map<TickItemType, string>;

package/ChartsYAxis/shortenLabels.js

@@ -0,0 +1,46 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shortenLabels = shortenLabels;
+var _clampAngle = require("../internals/clampAngle");
+var _ellipsize = require("../internals/ellipsize");
+var _domUtils = require("../internals/domUtils");
+function shortenLabels(visibleLabels, drawingArea, maxWidth, isRtl, tickLabelStyle) {
+  const shortenedLabels = new Map();
+  const angle = (0, _clampAngle.clampAngle)(tickLabelStyle?.angle ?? 0);
+  let topBoundFactor = 1;
+  let bottomBoundFactor = 1;
+  if (tickLabelStyle?.textAnchor === 'start') {
+    topBoundFactor = Infinity;
+    bottomBoundFactor = 1;
+  } else if (tickLabelStyle?.textAnchor === 'end') {
+    topBoundFactor = 1;
+    bottomBoundFactor = Infinity;
+  } else {
+    topBoundFactor = 2;
+    bottomBoundFactor = 2;
+  }
+  if (angle > 180) {
+    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
+  }
+  if (isRtl) {
+    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
+  }
+  for (const item of visibleLabels) {
+    if (item.formattedValue) {
+      // That maximum height of the tick depends on its proximity to the axis bounds.
+      const height = Math.min((item.offset + item.labelOffset) * topBoundFactor, (drawingArea.top + drawingArea.height + drawingArea.bottom - item.offset - item.labelOffset) * bottomBoundFactor);
+      const doesTextFit = text => (0, _ellipsize.doesTextFitInRect)(text, {
+        width: maxWidth,
+        height,
+        angle,
+        measureText: string => (0, _domUtils.getStringSize)(string, tickLabelStyle)
+      });
+      shortenedLabels.set(item, (0, _ellipsize.ellipsize)(item.formattedValue.toString(), doesTextFit));
+    }
+  }
+  return shortenedLabels;
+}

package/LineChart/AnimatedArea.js

@@ -41,7 +41,10 @@ function AnimatedArea(props) {
       // eslint-disable-next-line no-nested-ternary
       ownerState.isHighlighted ? 'brightness(140%)' : ownerState.gradientId ? undefined : 'brightness(120%)',
       opacity: ownerState.isFaded ? 0.3 : 1,
-      stroke: "none"
+      stroke: "none",
+      "data-series": ownerState.id,
+      "data-highlighted": ownerState.isHighlighted || undefined,
+      "data-faded": ownerState.isFaded || undefined
     }, other, animatedProps))
   });
 }

package/LineChart/AnimatedLine.js

@@ -43,7 +43,10 @@ const AnimatedLine = exports.AnimatedLine = /*#__PURE__*/React.forwardRef(functi
       strokeLinejoin: "round",
       fill: "none",
       filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
-      opacity: ownerState.isFaded ? 0.3 : 1
+      opacity: ownerState.isFaded ? 0.3 : 1,
+      "data-series": ownerState.id,
+      "data-highlighted": ownerState.isHighlighted || undefined,
+      "data-faded": ownerState.isFaded || undefined
     }, other, animateProps))
   });
 });

package/LineChart/AreaPlot.js

@@ -7,22 +7,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AreaPlot = AreaPlot;
-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 _styles = require("@mui/material/styles");
-var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _AreaElement = require("./AreaElement");
-var _useScale = require("../hooks/useScale");
-var _getCurve = require("../internals/getCurve");
-var _isBandScale = require("../internals/isBandScale");
-var _constants = require("../constants");
-var _useLineSeries = require("../hooks/useLineSeries");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
-var _useChartGradientId = require("../hooks/useChartGradientId");
 var _useAxis = require("../hooks/useAxis");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
+var _useAreaPlotData = require("./useAreaPlotData");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
 const AreaPlotRoot = (0, _styles.styled)('g', {
@@ -34,117 +28,13 @@ const AreaPlotRoot = (0, _styles.styled)('g', {
   }
 });
 const useAggregatedData = () => {
-  const seriesData = (0, _useLineSeries.useLineSeriesContext)();
   const {
-    xAxis,
-    xAxisIds
+    xAxis: xAxes
   } = (0, _useAxis.useXAxes)();
   const {
-    yAxis,
-    yAxisIds
+    yAxis: yAxes
   } = (0, _useAxis.useYAxes)();
-  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
-
-  // This memo prevents odd line chart behavior when hydrating.
-  const allData = React.useMemo(() => {
-    if (seriesData === undefined) {
-      return [];
-    }
-    const {
-      series,
-      stackingGroups
-    } = seriesData;
-    const defaultXAxisId = xAxisIds[0];
-    const defaultYAxisId = yAxisIds[0];
-    return stackingGroups.flatMap(({
-      ids: groupIds
-    }) => {
-      return [...groupIds].reverse() // Revert stacked area for a more pleasant animation
-      .map(seriesId => {
-        const {
-          xAxisId = defaultXAxisId,
-          yAxisId = defaultYAxisId,
-          stackedData,
-          data,
-          connectNulls,
-          baseline,
-          curve,
-          strictStepCurve
-        } = series[seriesId];
-        const xScale = xAxis[xAxisId].scale;
-        const xPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-        const yScale = yAxis[yAxisId].scale;
-        const xData = xAxis[xAxisId].data;
-        const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
-        if (process.env.NODE_ENV !== 'production') {
-          if (xData === undefined) {
-            throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
-          }
-          if (xData.length < stackedData.length) {
-            throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
-          }
-        }
-        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);
-        const formattedData = xData?.flatMap((x, index) => {
-          const nullData = data[index] == null;
-          if (shouldExpand) {
-            const rep = [{
-              x,
-              y: stackedData[index],
-              nullData,
-              isExtension: false
-            }];
-            if (!nullData && (index === 0 || data[index - 1] == null)) {
-              rep.unshift({
-                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
-              rep.push({
-                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            return rep;
-          }
-          return {
-            x,
-            y: stackedData[index],
-            nullData
-          };
-        }) ?? [];
-        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
-        const areaPath = (0, _d3Shape.area)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y0(d => {
-          if (typeof baseline === 'number') {
-            return yScale(baseline);
-          }
-          if (baseline === 'max') {
-            return yScale.range()[1];
-          }
-          if (baseline === 'min') {
-            return yScale.range()[0];
-          }
-          const value = d.y && yScale(d.y[0]);
-          if (Number.isNaN(value)) {
-            return yScale.range()[0];
-          }
-          return value;
-        }).y1(d => d.y && yScale(d.y[1]));
-        const d = areaPath.curve((0, _getCurve.getCurveFactory)(curve))(d3Data) || '';
-        return (0, _extends2.default)({}, series[seriesId], {
-          gradientId,
-          d,
-          seriesId
-        });
-      });
-    });
-  }, [seriesData, xAxisIds, yAxisIds, xAxis, yAxis, getGradientId]);
-  return allData;
+  return (0, _useAreaPlotData.useAreaPlotData)(xAxes, yAxes);
 };
 
 /**

package/LineChart/CircleMarkElement.js

@@ -76,7 +76,10 @@ function CircleMarkElement(props) {
     className: classes.root,
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset'
-  }, interactionProps));
+  }, interactionProps, {
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined
+  }));
 }
 process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
   // ----------------------------- Warning --------------------------------