@mui/x-charts 7.15.0 → 7.17.0

package/node/Gauge/GaugeProvider.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,8 +12,6 @@ var _getPercentageValue = require("../internals/getPercentageValue");
 var _utils = require("./utils");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _jsxRuntime = require("react/jsx-runtime");
-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 && {}.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; }
 // @ignore - do not document.
 
 const GaugeContext = exports.GaugeContext = /*#__PURE__*/React.createContext({

package/node/Gauge/GaugeReferenceArc.js

@@ -1,6 +1,8 @@
 "use strict";
+'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,8 +13,6 @@ var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _styles = require("@mui/material/styles");
 var _GaugeProvider = require("./GaugeProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-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 && {}.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; }
 const StyledPath = (0, _styles.styled)('path', {
   name: 'MuiGauge',
   slot: 'ReferenceArc',

package/node/Gauge/GaugeValueArc.js

@@ -1,6 +1,8 @@
 "use strict";
+'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,8 +13,6 @@ var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _styles = require("@mui/material/styles");
 var _GaugeProvider = require("./GaugeProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-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 && {}.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; }
 const StyledPath = (0, _styles.styled)('path', {
   name: 'MuiGauge',
   slot: 'ReferenceArc',

package/node/Gauge/GaugeValueText.js

@@ -1,6 +1,8 @@
 "use strict";
+'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,8 +15,6 @@ var _GaugeProvider = require("./GaugeProvider");
 var _ChartsText = require("../ChartsText");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["text", "className"];
-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 && {}.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 defaultFormatter({
   value
 }) {

package/node/Gauge/gaugeClasses.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/node/LineChart/AnimatedArea.js

@@ -1,6 +1,8 @@
 "use strict";
+'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,13 +15,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _web = require("@react-spring/web");
 var _d3Color = require("@mui/x-charts-vendor/d3-color");
-var _useAnimatedPath = require("../internals/useAnimatedPath");
 var _cleanId = require("../internals/cleanId");
 var _hooks = require("../hooks");
+var _useStringInterpolator = require("../internals/useStringInterpolator");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["d", "skipAnimation", "ownerState"];
-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 && {}.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; }
 const AreaElementPath = exports.AreaElementPath = (0, _styles.styled)(_web.animated.path, {
   name: 'MuiAreaElement',
   slot: 'Root',
@@ -58,16 +58,33 @@ function AnimatedArea(props) {
     height
   } = (0, _hooks.useDrawingArea)();
   const chartId = (0, _hooks.useChartId)();
-  const path = (0, _useAnimatedPath.useAnimatedPath)(d, skipAnimation);
-  const {
-    animatedWidth
-  } = (0, _web.useSpring)({
+  const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
+  const transitionAppear = (0, _web.useTransition)([1], {
     from: {
       animatedWidth: left
     },
     to: {
       animatedWidth: width + left + right
     },
+    enter: {
+      animatedWidth: width + left + right
+    },
+    leave: {
+      animatedWidth: left
+    },
+    reset: false,
+    immediate: skipAnimation
+  });
+  const transitionChange = (0, _web.useTransition)([stringInterpolator], {
+    from: {
+      value: 0
+    },
+    to: {
+      value: 1
+    },
+    enter: {
+      value: 1
+    },
     reset: false,
     immediate: skipAnimation
   });
@@ -75,18 +92,18 @@ function AnimatedArea(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
       id: clipId,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
+      children: transitionAppear(style => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
         x: 0,
         y: 0,
-        width: animatedWidth,
+        width: style.animatedWidth,
         height: top + height + bottom
-      })
+      }))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       clipPath: `url(#${clipId})`,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaElementPath, (0, _extends2.default)({}, other, {
+      children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaElementPath, (0, _extends2.default)({}, other, {
         ownerState: ownerState,
-        d: path
-      }))
+        d: style.value.to(interpolator)
+      })))
     })]
   });
 }

package/node/LineChart/AnimatedLine.js

@@ -1,6 +1,8 @@
 "use strict";
+'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,14 +15,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _web = require("@react-spring/web");
 var _d3Color = require("@mui/x-charts-vendor/d3-color");
 var _styles = require("@mui/material/styles");
-var _useAnimatedPath = require("../internals/useAnimatedPath");
 var _cleanId = require("../internals/cleanId");
 var _useChartId = require("../hooks/useChartId");
 var _useDrawingArea = require("../hooks/useDrawingArea");
+var _useStringInterpolator = require("../internals/useStringInterpolator");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["d", "skipAnimation", "ownerState"];
-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 && {}.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; }
 const LineElementPath = exports.LineElementPath = (0, _styles.styled)(_web.animated.path, {
   name: 'MuiLineElement',
   slot: 'Root',
@@ -61,16 +61,33 @@ function AnimatedLine(props) {
     right
   } = (0, _useDrawingArea.useDrawingArea)();
   const chartId = (0, _useChartId.useChartId)();
-  const path = (0, _useAnimatedPath.useAnimatedPath)(d, skipAnimation);
-  const {
-    animatedWidth
-  } = (0, _web.useSpring)({
+  const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
+  const transitionAppear = (0, _web.useTransition)([1], {
     from: {
       animatedWidth: left
     },
     to: {
       animatedWidth: width + left + right
     },
+    enter: {
+      animatedWidth: width + left + right
+    },
+    leave: {
+      animatedWidth: left
+    },
+    reset: false,
+    immediate: skipAnimation
+  });
+  const transitionChange = (0, _web.useTransition)([stringInterpolator], {
+    from: {
+      value: 0
+    },
+    to: {
+      value: 1
+    },
+    enter: {
+      value: 1
+    },
     reset: false,
     immediate: skipAnimation
   });
@@ -78,18 +95,18 @@ function AnimatedLine(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
       id: clipId,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
+      children: transitionAppear(style => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
         x: 0,
         y: 0,
-        width: animatedWidth,
+        width: style.animatedWidth,
         height: top + height + bottom
-      })
+      }))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       clipPath: `url(#${clipId})`,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LineElementPath, (0, _extends2.default)({}, other, {
+      children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(LineElementPath, (0, _extends2.default)({}, other, {
         ownerState: ownerState,
-        d: path
-      }))
+        d: style.value.to(interpolator)
+      })))
     })]
   });
 }

package/node/LineChart/AreaElement.js

@@ -1,6 +1,8 @@
 "use strict";
+'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -20,8 +22,6 @@ var _AnimatedArea = require("./AnimatedArea");
 var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
-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 && {}.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 getAreaElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAreaElement', slot);
 }

package/node/LineChart/AreaPlot.js

@@ -1,6 +1,8 @@
 "use strict";
+'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,85 +21,88 @@ var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients"
 var _useSeries = require("../hooks/useSeries");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "onItemClick", "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 && {}.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; }
 const useAggregatedData = () => {
   const seriesData = (0, _useSeries.useLineSeries)();
   const axisData = (0, _CartesianProvider.useCartesianContext)();
-  if (seriesData === undefined) {
-    return [];
-  }
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = axisData;
-  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: xAxisIdProp,
-        yAxisId: yAxisIdProp,
-        xAxisKey = defaultXAxisId,
-        yAxisKey = defaultYAxisId,
-        stackedData,
-        data,
-        connectNulls,
-        baseline
-      } = series[seriesId];
-      const xAxisId = xAxisIdProp ?? xAxisKey;
-      const yAxisId = yAxisIdProp ?? yAxisKey;
-      const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
-      const yScale = yAxis[yAxisId].scale;
-      const xData = xAxis[xAxisId].data;
-      const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
-      if (process.env.NODE_ENV !== 'production') {
-        if (xData === undefined) {
-          throw new Error(`MUI X: ${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: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
-        }
-      }
-      const areaPath = (0, _d3Shape.area)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).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];
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const {
+      xAxis,
+      yAxis,
+      xAxisIds,
+      yAxisIds
+    } = axisData;
+    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: xAxisIdProp,
+          yAxisId: yAxisIdProp,
+          xAxisKey = defaultXAxisId,
+          yAxisKey = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls,
+          baseline
+        } = series[seriesId];
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
+        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
+        const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X: ${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: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          }
         }
-        return value;
-      }).y1(d => d.y && yScale(d.y[1]));
-      const curve = (0, _getCurve.default)(series[seriesId].curve);
-      const formattedData = xData?.map((x, index) => ({
-        x,
-        y: stackedData[index]
-      })) ?? [];
-      const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-      const d = areaPath.curve(curve)(d3Data) || '';
-      return (0, _extends2.default)({}, series[seriesId], {
-        gradientUsed,
-        d,
-        seriesId
+        const areaPath = (0, _d3Shape.area)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).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 curve = (0, _getCurve.default)(series[seriesId].curve);
+        const formattedData = xData?.map((x, index) => ({
+          x,
+          y: stackedData[index]
+        })) ?? [];
+        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
+        const d = areaPath.curve(curve)(d3Data) || '';
+        return (0, _extends2.default)({}, series[seriesId], {
+          gradientUsed,
+          d,
+          seriesId
+        });
       });
     });
-  });
+  }, [seriesData, axisData]);
+  return allData;
 };
 
 /**

package/node/LineChart/CircleMarkElement.js

@@ -0,0 +1,113 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CircleMarkElement = CircleMarkElement;
+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 _warning = require("@mui/x-internals/warning");
+var _web = require("@react-spring/web");
+var _InteractionProvider = require("../context/InteractionProvider");
+var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
+var _context = require("../context");
+var _markElementClasses = require("./markElementClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "shape"];
+/**
+ * The line mark element that only render circle for performance improvement.
+ *
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [CircleMarkElement API](https://mui.com/x/api/charts/circle-mark-element/)
+ */
+function CircleMarkElement(props) {
+  const {
+      x,
+      y,
+      id,
+      classes: innerClasses,
+      color,
+      dataIndex,
+      onClick,
+      skipAnimation,
+      shape
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  if (shape !== 'circle') {
+    (0, _warning.warnOnce)([`MUI X: The mark element of your line chart have shape "${shape}" which is not supported when using \`experimentalRendering=true\`.`, 'Only "circle" are supported with `experimentalRendering`.'].join('\n'), 'error');
+  }
+  const theme = (0, _styles.useTheme)();
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)();
+  const {
+    isFaded,
+    isHighlighted
+  } = (0, _context.useItemHighlighted)({
+    seriesId: id
+  });
+  const {
+    axis
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const position = (0, _web.useSpring)({
+    to: {
+      x,
+      y
+    },
+    immediate: skipAnimation
+  });
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    isHighlighted: axis.x?.index === dataIndex || isHighlighted,
+    isFaded,
+    color
+  };
+  const classes = (0, _markElementClasses.useUtilityClasses)(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.circle, (0, _extends2.default)({}, other, {
+    cx: position.x,
+    cy: position.y,
+    r: 5,
+    fill: (theme.vars || theme).palette.background.paper,
+    stroke: color,
+    strokeWidth: 2,
+    className: classes.root,
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset'
+  }, getInteractionItemProps({
+    type: 'line',
+    seriesId: id,
+    dataIndex
+  })));
+}
+process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: _propTypes.default.object,
+  /**
+   * The index to the element in the series' data array.
+   */
+  dataIndex: _propTypes.default.number.isRequired,
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  /**
+   * The shape of the marker.
+   */
+  shape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool
+} : void 0;

package/node/LineChart/LineChart.js

@@ -1,6 +1,8 @@
 "use strict";
+'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -24,8 +26,6 @@ var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
 var _ChartsOverlay = require("../ChartsOverlay");
 var _useLineChartProps = require("./useLineChartProps");
 var _jsxRuntime = require("react/jsx-runtime");
-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 && {}.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; }
 /**
  * Demos:
  *
@@ -61,7 +61,7 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, (0, _extends2.default)({
     ref: ref
   }, chartContainerProps, {
-    children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
+    children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       "data-drawing-container": true,
@@ -111,6 +111,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
+  /**
+   * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
+   */
+  experimentalMarkRendering: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -142,6 +146,18 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     classes: _propTypes.default.object,
     direction: _propTypes.default.oneOf(['column', 'row']),
     hidden: _propTypes.default.bool,
+    itemGap: _propTypes.default.number,
+    itemMarkHeight: _propTypes.default.number,
+    itemMarkWidth: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
+    markGap: _propTypes.default.number,
+    onItemClick: _propTypes.default.func,
+    padding: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+      bottom: _propTypes.default.number,
+      left: _propTypes.default.number,
+      right: _propTypes.default.number,
+      top: _propTypes.default.number
+    })]),
     position: _propTypes.default.shape({
       horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired