@mui/x-charts 7.16.0 → 7.18.0

package/ChartsLegend/PiecewiseColorLegend.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { ColorLegendSelector, PiecewiseLabelFormatterParams } from './legend.types';
 import { LegendPerItemProps } from './LegendPerItem';
-export interface PiecewiseColorLegendProps extends ColorLegendSelector, Omit<LegendPerItemProps, 'itemsToDisplay'> {
+import { PiecewiseColorLegendItemContext } from './chartsLegend.types';
+export interface PiecewiseColorLegendProps extends ColorLegendSelector, Omit<LegendPerItemProps, 'itemsToDisplay' | 'onItemClick'> {
     /**
      * Hide the first item of the legend, corresponding to the [-infinity, min] piece.
      * @default false
@@ -18,6 +19,13 @@ export interface PiecewiseColorLegendProps extends ColorLegendSelector, Omit<Leg
      * @returns {string|null} The displayed label, or `null` to skip the item.
      */
     labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+    /**
+     * 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?: (event: React.MouseEvent<SVGRectElement, MouseEvent>, legendItem: PiecewiseColorLegendItemContext, index: number) => void;
 }
 declare function PiecewiseColorLegend(props: PiecewiseColorLegendProps): React.JSX.Element | null;
 declare namespace PiecewiseColorLegend {

package/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/ChartsLegend/chartsLegend.types.d.ts

@@ -1,5 +1,7 @@
 import { ChartsTextStyle } from '../ChartsText';
-export interface LegendItemParams {
+import { PieItemId } from '../models';
+import { SeriesId } from '../models/seriesType/common';
+interface LegendItemContextBase {
     /**
      * The color used in the legend
      */
@@ -8,12 +10,47 @@ export interface LegendItemParams {
      * The label displayed in the legend
      */
     label: string;
+}
+export interface LegendItemParams extends Partial<Omit<SeriesLegendItemContext, 'type' | keyof LegendItemContextBase>>, Partial<Omit<PiecewiseColorLegendItemContext, 'type' | keyof LegendItemContextBase>>, LegendItemContextBase {
     /**
      * The identifier of the legend element.
      * Used for internal purpose such as `key` props
      */
     id: number | string;
 }
+export interface SeriesLegendItemContext extends LegendItemContextBase {
+    /**
+     * The type of the legend item
+     * - `series` is used for series legend item
+     * - `piecewiseColor` is used for piecewise color legend item
+     */
+    type: 'series';
+    /**
+     * The identifier of the series
+     */
+    seriesId: SeriesId;
+    /**
+     * The identifier of the pie item
+     */
+    itemId?: PieItemId;
+}
+export interface PiecewiseColorLegendItemContext extends LegendItemContextBase {
+    /**
+     * The type of the legend item
+     * - `series` is used for series legend item
+     * - `piecewiseColor` is used for piecewise color legend item
+     */
+    type: 'piecewiseColor';
+    /**
+     * The minimum value of the category
+     */
+    minValue: number | Date | null;
+    /**
+     * The maximum value of the category
+     */
+    maxValue: number | Date | null;
+}
+export type LegendItemContext = SeriesLegendItemContext | PiecewiseColorLegendItemContext;
 export interface LegendItemWithPosition extends LegendItemParams {
     positionX: number;
     positionY: number;
@@ -29,3 +66,4 @@ export type GetItemSpaceType = (label: string, inStyle?: ChartsTextStyle) => {
     outerWidth: number;
     outerHeight: number;
 };
+export {};

package/ChartsLegend/chartsLegendClasses.d.ts

@@ -3,6 +3,8 @@ export interface ChartsLegendClasses {
     root: string;
     /** Styles applied to a series element. */
     series: string;
+    /** Styles applied to the item background. */
+    itemBackground: string;
     /** Styles applied to series mark element. */
     mark: string;
     /** Styles applied to the series label. */

package/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/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/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/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/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/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/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/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/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/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/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/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/ChartsTooltip/DefaultChartsAxisTooltipContent.js

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

package/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/ChartsTooltip/index.d.ts

@@ -5,3 +5,6 @@ export * from './ChartsItemTooltipContent';
 export * from './DefaultChartsAxisTooltipContent';
 export * from './DefaultChartsItemTooltipContent';
 export * from './ChartsTooltipTable';
+export * from './useItemTooltip';
+export * from './useAxisTooltip';
+export { useMouseTracker } from './utils';

package/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/ChartsTooltip/useAxisTooltip.d.ts

@@ -0,0 +1,18 @@
+import { AxisInteractionData } from '../context/InteractionProvider';
+import { SeriesId } from '../models/seriesType/common';
+import { CartesianChartSeriesType, ChartsSeriesConfig } from '../models/seriesType/config';
+export interface UseAxisTooltipReturnValue<SeriesT extends CartesianChartSeriesType = CartesianChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
+    identifier: AxisInteractionData;
+    seriesItems: SeriesItem<SeriesT>[];
+    axisValue: AxisValueT;
+    axisFormattedValue: string;
+}
+interface SeriesItem<T extends CartesianChartSeriesType> {
+    seriesId: SeriesId;
+    color: string;
+    value: ChartsSeriesConfig[T]['valueType'];
+    formattedValue: string;
+    formattedLabel: string | null;
+}
+export declare function useAxisTooltip(): null | UseAxisTooltipReturnValue;
+export {};

package/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/ChartsTooltip/useItemTooltip.d.ts

@@ -0,0 +1,10 @@
+import { ItemInteractionData } from '../context/InteractionProvider';
+import { ChartSeriesType, ChartsSeriesConfig } from '../models/seriesType/config';
+export interface UseItemTooltipReturnValue<T extends ChartSeriesType> {
+    identifier: ItemInteractionData<T>;
+    color: string;
+    label: string | undefined;
+    value: ChartsSeriesConfig[T]['valueType'];
+    formattedValue: string | undefined;
+}
+export declare function useItemTooltip<T extends ChartSeriesType>(): null | UseItemTooltipReturnValue<T>;

package/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/ChartsTooltip/utils.d.ts

@@ -19,7 +19,8 @@ export declare function generateVirtualElement(mousePosition: MousePosition | nu
         toJSON: () => string;
     };
 };
-export declare function useMouseTracker(): MousePosition | null;
+export type UseMouseTrackerReturnValue = null | MousePosition;
+export declare function useMouseTracker(): UseMouseTrackerReturnValue;
 export type TriggerOptions = 'item' | 'axis' | 'none';
 export declare function getTooltipHasData(trigger: TriggerOptions, displayedData: null | AxisInteractionData | ItemInteractionData<ChartSeriesType>): boolean;
 export declare function utcFormatter(v: string | number | Date): string;

package/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/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/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/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/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/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/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/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/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/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/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"];