@mui/x-charts 7.16.0 → 7.18.0

package/modern/ChartsLegend/ContinuousColorLegend.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/ChartsLegend/DefaultChartsLegend.js

@@ -1,21 +1,32 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["drawingArea", "seriesToDisplay", "hidden"];
+const _excluded = ["drawingArea", "seriesToDisplay", "hidden", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { LegendPerItem } from "./LegendPerItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const seriesContextBuilder = context => ({
+  type: 'series',
+  color: context.color,
+  label: context.label,
+  seriesId: context.seriesId,
+  itemId: context.itemId
+});
 function DefaultChartsLegend(props) {
   const {
       seriesToDisplay,
-      hidden
+      hidden,
+      onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   if (hidden) {
     return null;
   }
   return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
-    itemsToDisplay: seriesToDisplay
+    itemsToDisplay: seriesToDisplay,
+    onItemClick: onItemClick ? (e, i) => onItemClick(e, seriesContextBuilder(seriesToDisplay[i]), i) : undefined
   }));
 }
 process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
@@ -73,6 +84,13 @@ process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
    * @default 5
    */
   markGap: PropTypes.number,
+  /**
+   * Callback fired when a legend item is clicked.
+   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+   * @param {SeriesLegendItemContext} legendItem The legend item data.
+   * @param {number} index The index of the clicked legend item.
+   */
+  onItemClick: PropTypes.func,
   /**
    * Legend padding (in px).
    * Can either be a single number, or an object with top, left, bottom, right properties.
@@ -95,7 +113,11 @@ process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
   seriesToDisplay: PropTypes.arrayOf(PropTypes.shape({
     color: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    label: PropTypes.string.isRequired
+    itemId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    label: PropTypes.string.isRequired,
+    maxValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    minValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   })).isRequired
 } : void 0;
 export { DefaultChartsLegend };

package/modern/ChartsLegend/LegendPerItem.js

@@ -1,15 +1,17 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["rotate", "dominantBaseline"];
 import * as React from 'react';
 import NoSsr from '@mui/material/NoSsr';
 import { useTheme, styled } from '@mui/material/styles';
-import { useRtl } from '@mui/system/RtlProvider';
-import { ChartsText } from "../ChartsText/index.js";
 import { getWordsByLines } from "../internals/getWordsByLines.js";
 import { legendItemPlacements } from "./legendItemsPlacement.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChartsLegendItem } from "./ChartsLegendItem.js";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const ChartsLegendRoot = styled('g', {
   name: 'MuiChartsLegend',
   slot: 'Root',
@@ -51,10 +53,10 @@ export function LegendPerItem(props) {
     markGap = 5,
     itemGap = 10,
     padding: paddingProps = 10,
-    labelStyle: inLabelStyle
+    labelStyle: inLabelStyle,
+    onItemClick
   } = props;
   const theme = useTheme();
-  const isRtl = useRtl();
   const drawingArea = useDrawingArea();
   const labelStyle = React.useMemo(() => _extends({}, theme.typography.subtitle1, {
     color: 'inherit',
@@ -110,29 +112,18 @@ export function LegendPerItem(props) {
   return /*#__PURE__*/_jsx(NoSsr, {
     children: /*#__PURE__*/_jsx(ChartsLegendRoot, {
       className: classes?.root,
-      children: itemsWithPosition.map(({
-        id,
-        label,
-        color,
-        positionX,
-        positionY
-      }) => /*#__PURE__*/_jsxs("g", {
-        className: classes?.series,
-        transform: `translate(${gapX + (isRtl ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
-        children: [/*#__PURE__*/_jsx("rect", {
-          className: classes?.mark,
-          x: isRtl ? -itemMarkWidth : 0,
-          y: -itemMarkHeight / 2,
-          width: itemMarkWidth,
-          height: itemMarkHeight,
-          fill: color
-        }), /*#__PURE__*/_jsx(ChartsText, {
-          style: labelStyle,
-          text: label,
-          x: (isRtl ? -1 : 1) * (itemMarkWidth + markGap),
-          y: 0
-        })]
-      }, id))
+      children: itemsWithPosition.map((item, i) => /*#__PURE__*/_createElement(ChartsLegendItem, _extends({}, item, {
+        key: item.id,
+        gapX: gapX,
+        gapY: gapY,
+        legendWidth: legendWidth,
+        itemMarkHeight: itemMarkHeight,
+        itemMarkWidth: itemMarkWidth,
+        markGap: markGap,
+        labelStyle: labelStyle,
+        classes: classes,
+        onClick: onItemClick ? e => onItemClick(e, i) : undefined
+      })))
     })
   });
 }

package/modern/ChartsLegend/PiecewiseColorLegend.js

@@ -1,6 +1,8 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter"];
+const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useAxis } from "./useAxis.js";
@@ -16,13 +18,21 @@ function defaultLabelFormatter(params) {
   }
   return `${params.formattedMin}-${params.formattedMax}`;
 }
+const piecewiseColorContextBuilder = context => ({
+  type: 'piecewiseColor',
+  color: context.color,
+  label: context.label,
+  maxValue: context.maxValue,
+  minValue: context.minValue
+});
 function PiecewiseColorLegend(props) {
   const {
       axisDirection,
       axisId,
       hideFirst,
       hideLast,
-      labelFormatter = defaultLabelFormatter
+      labelFormatter = defaultLabelFormatter,
+      onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const axisItem = useAxis({
@@ -43,30 +53,34 @@ function PiecewiseColorLegend(props) {
     if (hideFirst && isFirst || hideLast && isLast) {
       return null;
     }
-    const label = labelFormatter(_extends({}, index === 0 ? {
+    const data = _extends({}, isFirst ? {
       min: null,
       formattedMin: null
     } : {
       min: colorMap.thresholds[index - 1],
       formattedMin: formattedLabels[index - 1]
-    }, index === colorMap.colors.length - 1 ? {
+    }, isLast ? {
       max: null,
       formattedMax: null
     } : {
       max: colorMap.thresholds[index],
       formattedMax: formattedLabels[index]
-    }));
+    });
+    const label = labelFormatter(data);
     if (label === null) {
       return null;
     }
     return {
       id: label,
       color,
-      label
+      label,
+      minValue: data.min,
+      maxValue: data.max
     };
   }).filter(notNull);
   return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
-    itemsToDisplay: itemsToDisplay
+    itemsToDisplay: itemsToDisplay,
+    onItemClick: onItemClick ? (e, i) => onItemClick(e, piecewiseColorContextBuilder(itemsToDisplay[i]), i) : undefined
   }));
 }
 process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
@@ -134,6 +148,13 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * @default 5
    */
   markGap: PropTypes.number,
+  /**
+   * Callback fired when a legend item is clicked.
+   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+   * @param {PiecewiseColorLegendItemContext} legendItem The legend item data.
+   * @param {number} index The index of the clicked legend item.
+   */
+  onItemClick: PropTypes.func,
   /**
    * Legend padding (in px).
    * Can either be a single number, or an object with top, left, bottom, right properties.

package/modern/ChartsLegend/chartsLegendClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generat
 export function getLegendUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLegend', slot);
 }
-export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'column', 'row']);
+export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'itemBackground', 'mark', 'label', 'column', 'row']);

package/modern/ChartsLegend/useAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { ZAxisContext } from "../context/ZAxisContextProvider.js";
 import { useCartesianContext } from "../context/CartesianProvider/useCartesianContext.js";

package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { InteractionContext } from "../context/InteractionProvider.js";
@@ -27,7 +29,7 @@ function ChartsOnAxisClickHandler(props) {
     }
     const handleMouseClick = event => {
       event.preventDefault();
-      const isXaxis = (axis.x && axis.x.index) !== undefined;
+      const isXaxis = axis.x && axis.x.index !== -1;
       const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
       const dataIndex = isXaxis ? axis.x && axis.x.index : axis.y && axis.y.index;
       if (dataIndex == null) {

package/modern/ChartsOverlay/ChartsLoadingOverlay.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];

package/modern/ChartsOverlay/ChartsNoDataOverlay.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];

package/modern/ChartsOverlay/ChartsOverlay.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ChartsLoadingOverlay } from "./ChartsLoadingOverlay.js";

package/modern/ChartsReferenceLine/ChartsReferenceLine.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -1,11 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
+import { warnOnce } from '@mui/x-internals/warning';
 import { useDrawingArea, useXScale } from "../hooks/index.js";
 import { ReferenceLineRoot } from "./common.js";
 import { ChartsText } from "../ChartsText/index.js";
 import { getReferenceLineUtilityClass } from "./chartsReferenceLineClasses.js";
-import { warnOnce } from "../internals/warning.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   top,

package/modern/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -1,11 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
+import { warnOnce } from '@mui/x-internals/warning';
 import { useDrawingArea, useYScale } from "../hooks/index.js";
 import { ReferenceLineRoot } from "./common.js";
 import { ChartsText } from "../ChartsText/index.js";
 import { getReferenceLineUtilityClass } from "./chartsReferenceLineClasses.js";
-import { warnOnce } from "../internals/warning.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   left,

package/modern/ChartsSurface/ChartsSurface.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "title", "desc"];

package/modern/ChartsText/ChartsText.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "style", "text", "ownerState"],

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/ChartsTooltip/index.js

@@ -4,4 +4,7 @@ export * from "./ChartsAxisTooltipContent.js";
 export * from "./ChartsItemTooltipContent.js";
 export * from "./DefaultChartsAxisTooltipContent.js";
 export * from "./DefaultChartsItemTooltipContent.js";
-export * from "./ChartsTooltipTable.js";
+export * from "./ChartsTooltipTable.js";
+export * from "./useItemTooltip.js";
+export * from "./useAxisTooltip.js";
+export { useMouseTracker } from "./utils.js";

package/modern/ChartsTooltip/useAxisTooltip.js

@@ -0,0 +1,84 @@
+'use client';
+
+import * as React from 'react';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useSeries } from "../hooks/useSeries.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { getLabel } from "../internals/getLabel.js";
+import { isCartesianSeriesType } from "../internals/isCartesian.js";
+import { utcFormatter } from "./utils.js";
+export function useAxisTooltip() {
+  const {
+    axis
+  } = React.useContext(InteractionContext);
+  const series = useSeries();
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = useCartesianContext();
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(ZAxisContext);
+  const colorProcessors = useColorProcessor();
+
+  // By default use the x-axis
+  const isXaxis = axis.x !== null && axis.x.index !== -1;
+  const axisData = isXaxis ? axis.x && axis.x : axis.y && axis.y;
+  if (axisData === null) {
+    return null;
+  }
+  const {
+    index: dataIndex,
+    value: axisValue
+  } = axisData;
+  const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
+  const usedAxis = isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
+  const relevantSeries = Object.keys(series).filter(isCartesianSeriesType).flatMap(seriesType => {
+    const seriesOfType = series[seriesType];
+    if (!seriesOfType) {
+      return [];
+    }
+    return seriesOfType.seriesOrder.map(seriesId => {
+      const seriesToAdd = seriesOfType.series[seriesId];
+      const providedXAxisId = seriesToAdd.xAxisId ?? seriesToAdd.xAxisKey;
+      const providedYAxisId = seriesToAdd.yAxisId ?? seriesToAdd.yAxisKey;
+      const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
+
+      // Test if the series uses the default axis
+      if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+        const xAxisId = providedXAxisId ?? xAxisIds[0];
+        const yAxisId = providedYAxisId ?? yAxisIds[0];
+        const zAxisId = seriesToAdd.zAxisId ?? seriesToAdd.zAxisKey ?? zAxisIds[0];
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId])(dataIndex) ?? '';
+        const value = seriesToAdd.data[dataIndex] ?? null;
+        const formattedValue = seriesToAdd.valueFormatter(value, {
+          dataIndex
+        });
+        const formattedLabel = getLabel(seriesToAdd.label, 'tooltip') ?? null;
+        return {
+          seriesId,
+          color,
+          value,
+          formattedValue,
+          formattedLabel
+        };
+      }
+      return undefined;
+    });
+  }).filter(item => item != null);
+  const axisFormatter = usedAxis.valueFormatter ?? (v => usedAxis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
+  const axisFormattedValue = axisFormatter(axisValue, {
+    location: 'tooltip'
+  });
+  return {
+    identifier: axis,
+    seriesItems: relevantSeries,
+    axisValue,
+    axisFormattedValue
+  };
+}

package/modern/ChartsTooltip/useItemTooltip.js

@@ -0,0 +1,64 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useSeries } from "../hooks/useSeries.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { getLabel } from "../internals/getLabel.js";
+export function useItemTooltip() {
+  const {
+    item
+  } = React.useContext(InteractionContext);
+  const series = useSeries();
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = useCartesianContext();
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(ZAxisContext);
+  const colorProcessors = useColorProcessor();
+  const xAxisId = series.xAxisId ?? series.xAxisKey ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? series.yAxisKey ?? yAxisIds[0];
+  const zAxisId = series.zAxisId ?? series.zAxisKey ?? zAxisIds[0];
+  if (!item || item.dataIndex === undefined) {
+    return null;
+  }
+  const itemSeries = series[item.type].series[item.seriesId];
+  const getColor = colorProcessors[itemSeries.type]?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
+  if (itemSeries.type === 'pie') {
+    const point = itemSeries.data[item.dataIndex];
+    const label = getLabel(point.label, 'tooltip');
+    const value = _extends({}, point, {
+      label
+    });
+    const formattedValue = itemSeries.valueFormatter?.(value, {
+      dataIndex: item.dataIndex
+    });
+    return {
+      identifier: item,
+      color: getColor(item.dataIndex),
+      label,
+      value,
+      formattedValue
+    };
+  }
+  const label = getLabel(itemSeries.label, 'tooltip');
+  const value = itemSeries.data[item.dataIndex];
+  const formattedValue = itemSeries.valueFormatter?.(value, {
+    dataIndex: item.dataIndex
+  });
+  return {
+    identifier: item,
+    color: getColor(item.dataIndex),
+    label,
+    value,
+    formattedValue
+  };
+}

package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Delaunay } from '@mui/x-charts-vendor/d3-delaunay';

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["scale", "tickNumber", "reverse"];

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["scale", "tickNumber"];

package/modern/Gauge/Gauge.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["text", "children", "classes", "className"];

package/modern/Gauge/GaugeContainer.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];

package/modern/Gauge/GaugeReferenceArc.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';

package/modern/Gauge/GaugeValueArc.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';

package/modern/Gauge/GaugeValueText.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["text", "className"];

package/modern/LineChart/AnimatedArea.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["d", "skipAnimation", "ownerState"];

package/modern/LineChart/AnimatedLine.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["d", "skipAnimation", "ownerState"];
@@ -42,29 +44,19 @@ function AnimatedLine(props) {
       ownerState
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    left,
-    top,
-    bottom,
-    width,
-    height,
-    right
-  } = useDrawingArea();
+  const drawingArea = useDrawingArea();
   const chartId = useChartId();
   const stringInterpolator = useStringInterpolator(d);
-  const transitionAppear = useTransition([1], {
-    from: {
-      animatedWidth: left
-    },
-    to: {
-      animatedWidth: width + left + right
-    },
-    enter: {
-      animatedWidth: width + left + right
-    },
-    leave: {
-      animatedWidth: left
-    },
+  const transitionAppear = useTransition([drawingArea], {
+    from: v => ({
+      animatedWidth: v.left
+    }),
+    enter: v => ({
+      animatedWidth: v.width + v.left + v.right
+    }),
+    leave: v => ({
+      animatedWidth: v.width + v.left + v.right
+    }),
     reset: false,
     immediate: skipAnimation
   });
@@ -89,7 +81,7 @@ function AnimatedLine(props) {
         x: 0,
         y: 0,
         width: style.animatedWidth,
-        height: top + height + bottom
+        height: drawingArea.top + drawingArea.height + drawingArea.bottom
       }))
     }), /*#__PURE__*/_jsx("g", {
       clipPath: `url(#${clipId})`,

package/modern/LineChart/AreaElement.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];

package/modern/LineChart/AreaPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];