@mui/x-charts 7.18.0 → 7.20.0

package/hooks/useSeries.js

@@ -25,7 +25,7 @@ export function useSeries() {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedPieSeriesType>; seriesOrder: SeriesId[]; } | undefined pieSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedPieSeriesType>; seriesOrder: SeriesId[]; } | undefined}  pieSeries
  */
 export function usePieSeries() {
   const series = useSeries();
@@ -37,7 +37,7 @@ export function usePieSeries() {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedLineSeriesType>; seriesOrder: SeriesId[]; } | undefined lineSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedLineSeriesType>; seriesOrder: SeriesId[]; } | undefined}  lineSeries
  */
 export function useLineSeries() {
   const series = useSeries();
@@ -49,7 +49,7 @@ export function useLineSeries() {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedBarSeriesType>; seriesOrder: SeriesId[]; } | undefined barSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedBarSeriesType>; seriesOrder: SeriesId[]; } | undefined}  barSeries
  */
 export function useBarSeries() {
   const series = useSeries();
@@ -61,7 +61,7 @@ export function useBarSeries() {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedScatterSeriesType>; seriesOrder: SeriesId[]; } | undefined scatterSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedScatterSeriesType>; seriesOrder: SeriesId[]; } | undefined}  scatterSeries
  */
 export function useScatterSeries() {
   const series = useSeries();

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.18.0
+ * @mui/x-charts v7.20.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/AxisSharedComponents.d.ts

@@ -1 +1 @@
-export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;
+export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;

package/internals/configInit.d.ts

@@ -3,7 +3,7 @@ declare class CartesianSeriesTypes {
     types: Set<ChartSeriesType>;
     constructor();
     addType(value: ChartSeriesType): void;
-    getTypes(): Set<keyof import("../models/seriesType/config").ChartsSeriesConfig>;
+    getTypes(): Set<keyof import(".").ChartsSeriesConfig>;
 }
 export declare const cartesianSeriesTypes: CartesianSeriesTypes;
 export {};

package/internals/defaultizeColor.d.ts

@@ -4,7 +4,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
         color: string;
         label?: (string | ((location: "tooltip" | "legend" | "arc") => string)) | undefined;
         value: number;
-        id?: import("../models/seriesType").PieItemId | undefined;
+        id?: import("..").PieItemId | undefined;
     }[];
     type: "pie";
     innerRadius?: number | string;
@@ -14,8 +14,8 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     startAngle?: number;
     endAngle?: number;
     paddingAngle?: number;
-    sortingValues?: import("../models/seriesType").ChartsPieSorting;
-    arcLabel?: "formattedValue" | "label" | "value" | ((item: Omit<import("../models/seriesType").DefaultizedPieValueType, "label"> & {
+    sortingValues?: import("..").ChartsPieSorting;
+    arcLabel?: "formattedValue" | "label" | "value" | ((item: Omit<import("..").DefaultizedPieValueType, "label"> & {
         label?: string;
     }) => string);
     arcLabelMinAngle?: number;
@@ -41,7 +41,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     };
     id?: import(".").SeriesId;
     color?: string;
-    valueFormatter?: import(".").SeriesValueFormatter<import(".").MakeOptional<import("../models/seriesType").PieValueType, "id">> | undefined;
+    valueFormatter?: import(".").SeriesValueFormatter<import(".").MakeOptional<import("..").PieValueType, "id">> | undefined;
     highlightScope?: Partial<import("..").HighlightScope>;
 } | {
     type: "bar";
@@ -62,7 +62,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     stackOrder?: import("..").StackOrderType;
 } | {
     type: "scatter";
-    data: import("../models/seriesType").ScatterValueType[];
+    data: import("..").ScatterValueType[];
     markerSize?: number;
     label?: string | ((location: "tooltip" | "legend") => string);
     disableHover?: boolean;
@@ -70,7 +70,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     zAxisId?: string;
     id?: import(".").SeriesId;
     color: string;
-    valueFormatter?: import(".").SeriesValueFormatter<import("../models/seriesType").ScatterValueType> | undefined;
+    valueFormatter?: import(".").SeriesValueFormatter<import("..").ScatterValueType> | undefined;
     highlightScope?: Partial<import("..").HighlightScope>;
     xAxisKey?: string;
     yAxisKey?: string;
@@ -83,8 +83,8 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     stack?: string;
     area?: boolean;
     label?: string | ((location: "tooltip" | "legend") => string);
-    curve?: import("../models/seriesType").CurveType;
-    showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams) => boolean);
+    curve?: import("..").CurveType;
+    showMark?: boolean | ((params: import("..").ShowMarkParams) => boolean);
     disableHighlight?: boolean;
     connectNulls?: boolean;
     stackOffset?: import("..").StackOffsetType;

package/internals/domUtils.js

@@ -113,7 +113,7 @@ export const getStringSize = (text, style = {}) => {
       measurementSpan.textContent = '';
     }, 0);
     return result;
-  } catch (e) {
+  } catch {
     return {
       width: 0,
       height: 0

package/internals/geometry.js

@@ -1,7 +1,6 @@
+import { warnOnce } from '@mui/x-internals/warning';
 const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle as perfectly horizontal/vertical
 
-let warnedOnce = false;
-
 /**
  * Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation.
  * This assumes that all rectangles have the same height and angle between -90 and 90.
@@ -12,9 +11,8 @@ let warnedOnce = false;
  */
 export function getMinXTranslation(width, height, angle = 0) {
   if (process.env.NODE_ENV !== 'production') {
-    if (!warnedOnce && angle > 90 && angle < -90) {
-      warnedOnce = true;
-      console.warn([`MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`].join('\n'));
+    if (angle > 90 && angle < -90) {
+      warnOnce([`MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`]);
     }
   }
   const standardAngle = Math.min(Math.abs(angle) % 180, Math.abs(Math.abs(angle) % 180 - 180) % 180); // Map from R to [0, 90]

package/internals/getPercentageValue.js

@@ -24,5 +24,5 @@ export function getPercentageValue(value, refValue) {
       return val;
     }
   }
-  throw Error(`MUI X: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
+  throw new Error(`MUI X: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/models/seriesType/line.d.ts

@@ -40,6 +40,11 @@ export interface LineSeriesType extends CommonSeriesType<number | null>, Cartesi
      * The label to display on the tooltip or the legend. It can be a string or a function.
      */
     label?: string | ((location: 'tooltip' | 'legend') => string);
+    /**
+     * The type of curve to use for the line.
+     * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+     * @default 'monotoneX'
+     */
     curve?: CurveType;
     /**
      * Define which items of the series should display a mark.

package/modern/BarChart/BarChart.js

@@ -63,7 +63,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
    * Depends on `layout` prop.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),

package/modern/BarChart/formatter.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
+import { warnOnce } from '@mui/x-internals/warning';
 import { getStackingGroups } from "../internals/stackSeries.js";
 import { defaultizeValueFormatter } from "../internals/defaultizeValueFormatter.js";
-let warnOnce = false;
 const formatter = (params, dataset) => {
   const {
     seriesOrder,
@@ -50,9 +50,10 @@ const formatter = (params, dataset) => {
         data: dataKey ? dataset.map(data => {
           const value = data[dataKey];
           if (typeof value !== 'number') {
-            if (process.env.NODE_ENV !== 'production' && !warnOnce && value !== null) {
-              warnOnce = true;
-              console.error([`MUI X charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.'].join('\n'));
+            if (process.env.NODE_ENV !== 'production') {
+              if (value !== null) {
+                warnOnce([`MUI X: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
+              }
             }
             return 0;
           }

package/modern/ChartContainer/useDefaultizeAxis.js

@@ -18,7 +18,7 @@ const defaultizeAxis = (inAxis, dataset, axisName) => {
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+      throw new Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
     }
     return _extends({}, axisConfig, {
       data: dataset.map(d => d[dataKey])

package/modern/ChartsAxis/ChartsAxis.js

@@ -59,16 +59,16 @@ function ChartsAxis(props) {
   const topId = getAxisId(topAxis, xAxisIds[0]);
   const rightId = getAxisId(rightAxis, yAxisIds[0]);
   if (topId !== null && !xAxis[topId]) {
-    throw Error([`MUI X: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
+    throw new Error([`MUI X: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   if (leftId !== null && !yAxis[leftId]) {
-    throw Error([`MUI X: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
+    throw new Error([`MUI X: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (rightId !== null && !yAxis[rightId]) {
-    throw Error([`MUI X: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
+    throw new Error([`MUI X: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (bottomId !== null && !xAxis[bottomId]) {
-    throw Error([`MUI X: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
+    throw new Error([`MUI X: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   const topAxisProps = mergeProps(topAxis, slots, slotProps);
   const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);

package/modern/ChartsLegend/DefaultChartsLegend.js

@@ -26,7 +26,7 @@ function DefaultChartsLegend(props) {
   }
   return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
     itemsToDisplay: seriesToDisplay,
-    onItemClick: onItemClick ? (e, i) => onItemClick(e, seriesContextBuilder(seriesToDisplay[i]), i) : undefined
+    onItemClick: onItemClick ? (event, i) => onItemClick(event, seriesContextBuilder(seriesToDisplay[i]), i) : undefined
   }));
 }
 process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {

package/modern/ChartsLegend/LegendPerItem.js

@@ -122,7 +122,7 @@ export function LegendPerItem(props) {
         markGap: markGap,
         labelStyle: labelStyle,
         classes: classes,
-        onClick: onItemClick ? e => onItemClick(e, i) : undefined
+        onClick: onItemClick ? event => onItemClick(event, i) : undefined
       })))
     })
   });

package/modern/ChartsLegend/PiecewiseColorLegend.js

@@ -80,7 +80,7 @@ function PiecewiseColorLegend(props) {
   }).filter(notNull);
   return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
     itemsToDisplay: itemsToDisplay,
-    onItemClick: onItemClick ? (e, i) => onItemClick(e, piecewiseColorContextBuilder(itemsToDisplay[i]), i) : undefined
+    onItemClick: onItemClick ? (event, i) => onItemClick(event, piecewiseColorContextBuilder(itemsToDisplay[i]), i) : undefined
   }));
 }
 process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {

package/modern/LineChart/AnimatedArea.js

@@ -8,10 +8,9 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { animated, useTransition } from '@react-spring/web';
 import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
-import { cleanId } from "../internals/cleanId.js";
-import { useChartId, useDrawingArea } from "../hooks/index.js";
 import { useStringInterpolator } from "../internals/useStringInterpolator.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppearingMask } from "./AppearingMask.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const AreaElementPath = styled(animated.path, {
   name: 'MuiAreaElement',
   slot: 'Root',
@@ -41,32 +40,7 @@ function AnimatedArea(props) {
       ownerState
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    left,
-    top,
-    right,
-    bottom,
-    width,
-    height
-  } = 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
-    },
-    reset: false,
-    immediate: skipAnimation
-  });
   const transitionChange = useTransition([stringInterpolator], {
     from: {
       value: 0
@@ -80,23 +54,13 @@ function AnimatedArea(props) {
     reset: false,
     immediate: skipAnimation
   });
-  const clipId = cleanId(`${chartId}-${ownerState.id}-area-clip`);
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx("clipPath", {
-      id: clipId,
-      children: transitionAppear(style => /*#__PURE__*/_jsx(animated.rect, {
-        x: 0,
-        y: 0,
-        width: style.animatedWidth,
-        height: top + height + bottom
-      }))
-    }), /*#__PURE__*/_jsx("g", {
-      clipPath: `url(#${clipId})`,
-      children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(AreaElementPath, _extends({}, other, {
-        ownerState: ownerState,
-        d: style.value.to(interpolator)
-      })))
-    })]
+  return /*#__PURE__*/_jsx(AppearingMask, {
+    skipAnimation: skipAnimation,
+    id: `${ownerState.id}-area-clip`,
+    children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(AreaElementPath, _extends({}, other, {
+      ownerState: ownerState,
+      d: style.value.to(interpolator)
+    })))
   });
 }
 process.env.NODE_ENV !== "production" ? AnimatedArea.propTypes = {

package/modern/LineChart/AnimatedLine.js

@@ -8,11 +8,9 @@ import PropTypes from 'prop-types';
 import { animated, useTransition } from '@react-spring/web';
 import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
 import { styled } from '@mui/material/styles';
-import { cleanId } from "../internals/cleanId.js";
-import { useChartId } from "../hooks/useChartId.js";
-import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { useStringInterpolator } from "../internals/useStringInterpolator.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppearingMask } from "./AppearingMask.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const LineElementPath = styled(animated.path, {
   name: 'MuiLineElement',
   slot: 'Root',
@@ -44,22 +42,7 @@ function AnimatedLine(props) {
       ownerState
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const drawingArea = useDrawingArea();
-  const chartId = useChartId();
   const stringInterpolator = useStringInterpolator(d);
-  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
-  });
   const transitionChange = useTransition([stringInterpolator], {
     from: {
       value: 0
@@ -73,23 +56,13 @@ function AnimatedLine(props) {
     reset: false,
     immediate: skipAnimation
   });
-  const clipId = cleanId(`${chartId}-${ownerState.id}-line-clip`);
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx("clipPath", {
-      id: clipId,
-      children: transitionAppear(style => /*#__PURE__*/_jsx(animated.rect, {
-        x: 0,
-        y: 0,
-        width: style.animatedWidth,
-        height: drawingArea.top + drawingArea.height + drawingArea.bottom
-      }))
-    }), /*#__PURE__*/_jsx("g", {
-      clipPath: `url(#${clipId})`,
-      children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(LineElementPath, _extends({}, other, {
-        ownerState: ownerState,
-        d: style.value.to(interpolator)
-      })))
-    })]
+  return /*#__PURE__*/_jsx(AppearingMask, {
+    skipAnimation: skipAnimation,
+    id: `${ownerState.id}-line-clip`,
+    children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(LineElementPath, _extends({}, other, {
+      ownerState: ownerState,
+      d: style.value.to(interpolator)
+    })))
   });
 }
 process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {

package/modern/LineChart/AppearingMask.js

@@ -0,0 +1,42 @@
+'use client';
+
+import * as React from 'react';
+import { animated, useTransition } from '@react-spring/web';
+import { cleanId } from "../internals/cleanId.js";
+import { useChartId, useDrawingArea } from "../hooks/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export function AppearingMask(props) {
+  const drawingArea = useDrawingArea();
+  const chartId = useChartId();
+  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: props.skipAnimation
+  });
+  const clipId = cleanId(`${chartId}-${props.id}`);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx("clipPath", {
+      id: clipId,
+      children: transitionAppear(style => /*#__PURE__*/_jsx(animated.rect, {
+        x: 0,
+        y: 0,
+        width: style.animatedWidth,
+        height: drawingArea.top + drawingArea.height + drawingArea.bottom
+      }))
+    }), /*#__PURE__*/_jsx("g", {
+      clipPath: `url(#${clipId})`,
+      children: props.children
+    })]
+  });
+}

package/modern/LineChart/LineChart.js

@@ -69,7 +69,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    * @default { x: 'line' }
    */
   axisHighlight: PropTypes.shape({

package/modern/LineChart/formatter.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
+import { warnOnce } from '@mui/x-internals/warning';
 import { getStackingGroups } from "../internals/stackSeries.js";
 import { defaultizeValueFormatter } from "../internals/defaultizeValueFormatter.js";
-let warnedOnce = false;
-
 // For now it's a copy past of bar charts formatter, but maybe will diverge later
 const formatter = (params, dataset) => {
   const {
@@ -54,9 +53,10 @@ const formatter = (params, dataset) => {
         data: dataKey ? dataset.map(data => {
           const value = data[dataKey];
           if (typeof value !== 'number') {
-            if (process.env.NODE_ENV !== 'production' && !warnedOnce && value !== null) {
-              warnedOnce = true;
-              console.error([`MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
+            if (process.env.NODE_ENV !== 'production') {
+              if (value !== null) {
+                warnOnce([`MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
+              }
             }
             return null;
           }

package/modern/PieChart/PieChart.js

@@ -137,7 +137,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    * @default { x: 'none', y: 'none' }
    */
   axisHighlight: PropTypes.shape({

package/modern/ScatterChart/ScatterChart.js

@@ -62,7 +62,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    * @default { x: 'none', y: 'none' }
    */
   axisHighlight: PropTypes.shape({

package/modern/context/ZAxisContextProvider.js

@@ -24,7 +24,7 @@ function ZAxisContextProvider(props) {
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error('MUI X: z-axis uses `dataKey` but no `dataset` is provided.');
+      throw new Error('MUI X: z-axis uses `dataKey` but no `dataset` is provided.');
     }
     return _extends({}, axisConfig, {
       data: dataset.map(d => d[dataKey])

package/modern/hooks/useReducedMotion.js

@@ -1,10 +1,10 @@
 'use client';
 
 import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
-const handleMediaChange = e => {
+const handleMediaChange = event => {
   Globals.assign({
     // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
-    skipAnimation: e.matches || undefined
+    skipAnimation: event.matches || undefined
   });
 };
 

package/modern/hooks/useSeries.js

@@ -25,7 +25,7 @@ export function useSeries() {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedPieSeriesType>; seriesOrder: SeriesId[]; } | undefined pieSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedPieSeriesType>; seriesOrder: SeriesId[]; } | undefined}  pieSeries
  */
 export function usePieSeries() {
   const series = useSeries();
@@ -37,7 +37,7 @@ export function usePieSeries() {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedLineSeriesType>; seriesOrder: SeriesId[]; } | undefined lineSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedLineSeriesType>; seriesOrder: SeriesId[]; } | undefined}  lineSeries
  */
 export function useLineSeries() {
   const series = useSeries();
@@ -49,7 +49,7 @@ export function useLineSeries() {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedBarSeriesType>; seriesOrder: SeriesId[]; } | undefined barSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedBarSeriesType>; seriesOrder: SeriesId[]; } | undefined}  barSeries
  */
 export function useBarSeries() {
   const series = useSeries();
@@ -61,7 +61,7 @@ export function useBarSeries() {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedScatterSeriesType>; seriesOrder: SeriesId[]; } | undefined scatterSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedScatterSeriesType>; seriesOrder: SeriesId[]; } | undefined}  scatterSeries
  */
 export function useScatterSeries() {
   const series = useSeries();

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.18.0
+ * @mui/x-charts v7.20.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/domUtils.js

@@ -113,7 +113,7 @@ export const getStringSize = (text, style = {}) => {
       measurementSpan.textContent = '';
     }, 0);
     return result;
-  } catch (e) {
+  } catch {
     return {
       width: 0,
       height: 0

package/modern/internals/geometry.js

@@ -1,7 +1,6 @@
+import { warnOnce } from '@mui/x-internals/warning';
 const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle as perfectly horizontal/vertical
 
-let warnedOnce = false;
-
 /**
  * Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation.
  * This assumes that all rectangles have the same height and angle between -90 and 90.
@@ -12,9 +11,8 @@ let warnedOnce = false;
  */
 export function getMinXTranslation(width, height, angle = 0) {
   if (process.env.NODE_ENV !== 'production') {
-    if (!warnedOnce && angle > 90 && angle < -90) {
-      warnedOnce = true;
-      console.warn([`MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`].join('\n'));
+    if (angle > 90 && angle < -90) {
+      warnOnce([`MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`]);
     }
   }
   const standardAngle = Math.min(Math.abs(angle) % 180, Math.abs(Math.abs(angle) % 180 - 180) % 180); // Map from R to [0, 90]

package/modern/internals/getPercentageValue.js

@@ -24,5 +24,5 @@ export function getPercentageValue(value, refValue) {
       return val;
     }
   }
-  throw Error(`MUI X: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
+  throw new Error(`MUI X: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/node/BarChart/BarChart.js

@@ -70,7 +70,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
    * Depends on `layout` prop.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    */
   axisHighlight: _propTypes.default.shape({
     x: _propTypes.default.oneOf(['band', 'line', 'none']),