@mui/x-charts 7.11.0 → 7.12.0

package/ScatterChart/ScatterChart.js

@@ -50,7 +50,10 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     ref: ref
   }, chartContainerProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ZAxisContextProvider.ZAxisContextProvider, (0, _extends2.default)({}, zAxisProps, {
-      children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), children]
+      children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        "data-drawing-container": true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), children]
     }))
   }));
 });
@@ -227,7 +230,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
@@ -280,7 +282,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,

package/ScatterChart/ScatterPlot.js

@@ -62,12 +62,15 @@ function ScatterPlot(props) {
         xAxisKey,
         yAxisKey,
         zAxisKey,
+        xAxisId,
+        yAxisId,
+        zAxisId,
         markerSize,
         color
       } = series[seriesId];
-      const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey ?? defaultXAxisId], yAxis[yAxisKey ?? defaultYAxisId], zAxis[zAxisKey ?? defaultZAxisId]);
-      const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
-      const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
+      const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId], yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId], zAxis[zAxisId ?? zAxisKey ?? defaultZAxisId]);
+      const xScale = xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId].scale;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScatterItems, (0, _extends2.default)({
         xScale: xScale,
         yScale: yScale,

package/ScatterChart/extremums.js

@@ -19,7 +19,10 @@ const getExtremumX = params => {
     axis,
     isDefaultAxis
   } = params;
-  return Object.keys(series).filter(seriesId => series[seriesId].xAxisKey === axis.id || series[seriesId].xAxisKey === undefined && isDefaultAxis).reduce((acc, seriesId) => {
+  return Object.keys(series).filter(seriesId => {
+    const axisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey;
+    return axisId === axis.id || axisId === undefined && isDefaultAxis;
+  }).reduce((acc, seriesId) => {
     const seriesMinMax = series[seriesId].data.reduce((accSeries, {
       x
     }) => {
@@ -36,7 +39,10 @@ const getExtremumY = params => {
     axis,
     isDefaultAxis
   } = params;
-  return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || series[seriesId].yAxisKey === undefined && isDefaultAxis).reduce((acc, seriesId) => {
+  return Object.keys(series).filter(seriesId => {
+    const axisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    return axisId === axis.id || axisId === undefined && isDefaultAxis;
+  }).reduce((acc, seriesId) => {
     const seriesMinMax = series[seriesId].data.reduce((accSeries, {
       y
     }) => {

package/SparkLineChart/SparkLineChart.js

@@ -254,7 +254,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   xAxis: _propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
@@ -306,7 +305,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   yAxis: _propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,

package/context/CartesianProvider/CartesianContext.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Initializable } from '../context.types';
 import { AxisDefaultized, ScaleName, ChartsXAxisProps, ChartsYAxisProps, AxisId } from '../../models/axis';
 export type DefaultizedAxisConfig<AxisProps> = {
-    [axisKey: AxisId]: AxisDefaultized<ScaleName, any, AxisProps>;
+    [axisId: AxisId]: AxisDefaultized<ScaleName, any, AxisProps>;
 };
 export type CartesianContextState = {
     /**

package/context/CartesianProvider/computeValue.d.ts

@@ -3,7 +3,7 @@ import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, AxisId } from '../
 import { CartesianChartSeriesType, DatasetType, ExtremumGetter } from '../../models/seriesType/config';
 import { DefaultizedAxisConfig } from './CartesianContext';
 import { DrawingArea } from '../DrawingProvider';
-import { FormattedSeries } from '../SeriesContextProvider';
+import { FormattedSeries } from '../SeriesProvider';
 export declare function computeValue(options: {
     drawingArea: DrawingArea;
     formattedSeries: FormattedSeries;

package/context/CartesianProvider/computeValue.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.computeValue = computeValue;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _d3Scale = require("d3-scale");
+var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
 var _axis = require("../../models/axis");
 var _colorScale = require("../../internals/colorScale");
 var _useTicks = require("../../hooks/useTicks");

package/context/CartesianProvider/defaultizeAxis.d.ts

@@ -2,35 +2,34 @@ import { MakeOptional } from '../../models/helpers';
 import { AxisConfig, ScaleName } from '../../models';
 import { ChartsAxisProps } from '../../models/axis';
 export declare const defaultizeAxis: (inAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined, axisName: "x" | "y") => {
-    reverse?: boolean;
-    fill?: string;
-    stroke?: string;
+    reverse?: boolean | undefined;
+    fill?: string | undefined;
+    stroke?: string | undefined;
     data?: any[] | undefined;
-    label?: string;
-    max?: number | Date;
-    min?: number | Date;
-    classes?: Partial<import("../..").ChartsAxisClasses>;
-    slots?: Partial<import("../../models/axis").ChartsAxisSlots>;
-    slotProps?: Partial<import("../../models/axis").ChartsAxisSlotProps>;
-    dataKey?: string;
+    label?: string | undefined;
+    max?: (number | Date) | undefined;
+    min?: (number | Date) | undefined;
+    classes?: Partial<import("../..").ChartsAxisClasses> | undefined;
+    slots?: Partial<import("../../models/axis").ChartsAxisSlots> | undefined;
+    slotProps?: Partial<import("../../models/axis").ChartsAxisSlotProps> | undefined;
+    dataKey?: string | undefined;
     valueFormatter?: ((value: any, context: import("../../models/axis").AxisValueFormatterContext) => string) | undefined;
     colorMap?: import("../../models/colorMapping").ContinuousColorConfig<number | Date> | import("../../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
-    tickMaxStep?: number;
-    tickMinStep?: number;
-    tickNumber?: number;
-    tickPlacement?: "start" | "end" | "middle" | "extremities";
-    tickLabelPlacement?: "middle" | "tick";
-    scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
-    axisId?: import("../../models/axis").AxisId;
-    disableLine?: boolean;
-    disableTicks?: boolean;
-    tickFontSize?: number;
+    tickMaxStep?: number | undefined;
+    tickMinStep?: number | undefined;
+    tickNumber?: number | undefined;
+    disableLine?: boolean | undefined;
+    disableTicks?: boolean | undefined;
+    tickFontSize?: number | undefined;
     tickLabelStyle?: import("../..").ChartsTextProps["style"];
     labelStyle?: import("../..").ChartsTextProps["style"];
-    tickLabelInterval?: "auto" | ((value: any, index: number) => boolean);
-    labelFontSize?: number;
-    tickSize?: number;
-    tickInterval?: "auto" | ((value: any, index: number) => boolean) | any[];
-    hideTooltip?: boolean;
+    tickLabelInterval?: ("auto" | ((value: any, index: number) => boolean)) | undefined;
+    labelFontSize?: number | undefined;
+    tickSize?: number | undefined;
+    tickInterval?: ("auto" | ((value: any, index: number) => boolean) | any[]) | undefined;
+    tickPlacement?: ("start" | "end" | "middle" | "extremities") | undefined;
+    tickLabelPlacement?: ("middle" | "tick") | undefined;
+    scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
+    hideTooltip?: boolean | undefined;
     id: import("../../models/axis").AxisId;
 }[];

package/context/CartesianProvider/getAxisExtremum.d.ts

@@ -1,4 +1,4 @@
 import { AxisConfig, ExtremumGettersConfig } from '../../models';
 import { ExtremumGetterResult } from '../../models/seriesType/config';
-import { FormattedSeries } from '../SeriesContextProvider';
+import { FormattedSeries } from '../SeriesProvider';
 export declare const getAxisExtremum: (axis: AxisConfig, getters: ExtremumGettersConfig, isDefaultAxis: boolean, formattedSeries: FormattedSeries) => ExtremumGetterResult;

package/context/CartesianProvider/normalizeAxis.js

@@ -13,7 +13,7 @@ const normalizeAxis = (axis, dataset, axisName) => {
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error(`MUI X Charts: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+      throw Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
     }
     return (0, _extends2.default)({}, axisConfig, {
       data: dataset.map(d => d[dataKey])

package/context/DrawingProvider.d.ts

@@ -38,12 +38,13 @@ export type DrawingArea = {
      * @param {Object} point The point to check.
      * @param {number} point.x The x coordinate of the point.
      * @param {number} point.y The y coordinate of the point.
+     * @param {Element} targetElement The target element if relevant.
      * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
      */
     isPointInside: (point: {
         x: number;
         y: number;
-    }) => boolean;
+    }, targetElement?: Element) => boolean;
 };
 export declare const DrawingContext: React.Context<DrawingArea & {
     /**

package/context/DrawingProvider.js

@@ -53,7 +53,13 @@ function DrawingProvider(props) {
   const isPointInside = React.useCallback(({
     x,
     y
-  }) => x >= drawingArea.left && x <= drawingArea.left + drawingArea.width && y >= drawingArea.top && y <= drawingArea.top + drawingArea.height, [drawingArea]);
+  }, targetElement) => {
+    // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
+    if (targetElement && targetElement.closest('[data-drawing-container]')) {
+      return true;
+    }
+    return x >= drawingArea.left && x <= drawingArea.left + drawingArea.width && y >= drawingArea.top && y <= drawingArea.top + drawingArea.height;
+  }, [drawingArea]);
   const value = React.useMemo(() => (0, _extends2.default)({
     chartId: chartId ?? ''
   }, drawingArea, {

package/context/{SeriesContextProvider.d.ts → SeriesProvider/Series.types.d.ts}

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { AllSeriesType } from '../models/seriesType';
-import { ChartSeriesType, DatasetType, FormatterParams, FormatterResult } from '../models/seriesType/config';
-import { ChartsColorPalette } from '../colorPalettes';
-import { Initializable } from './context.types';
+import { AllSeriesType } from '../../models/seriesType';
+import { ChartSeriesType, DatasetType, FormatterParams, FormatterResult } from '../../models/seriesType/config';
+import { ChartsColorPalette } from '../../colorPalettes';
 export type SeriesFormatterType<T extends ChartSeriesType> = (series: AllSeriesType<T>[], colors: string[], dataset?: DatasetType) => {
     [type in T]?: FormatterResult<type>;
 };
-export type SeriesContextProviderProps<T extends ChartSeriesType = ChartSeriesType> = {
+export type SeriesProviderProps<T extends ChartSeriesType = ChartSeriesType> = {
     dataset?: DatasetType;
     /**
      * The array of series to display.
@@ -28,9 +27,6 @@ export type SeriesContextProviderProps<T extends ChartSeriesType = ChartSeriesTy
 export type FormattedSeries = {
     [type in ChartSeriesType]?: FormatterResult<type>;
 };
-export declare const SeriesContext: React.Context<Initializable<FormattedSeries>>;
 export type SeriesFormatterConfig<T extends ChartSeriesType = ChartSeriesType> = {
     [K in T]?: (series: FormatterParams<K>, dataset?: DatasetType) => any;
 };
-declare function SeriesContextProvider<T extends ChartSeriesType>(props: SeriesContextProviderProps<T>): React.JSX.Element;
-export { SeriesContextProvider };

package/context/SeriesProvider/Series.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/context/SeriesProvider/SeriesContext.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Initializable } from '../context.types';
+import { FormattedSeries } from './Series.types';
+export declare const SeriesContext: React.Context<Initializable<FormattedSeries>>;

package/context/SeriesProvider/SeriesContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SeriesContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+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 SeriesContext = exports.SeriesContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {}
+});
+if (process.env.NODE_ENV !== 'production') {
+  SeriesContext.displayName = 'SeriesContext';
+}

package/context/SeriesProvider/SeriesProvider.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ChartSeriesType } from '../../models/seriesType/config';
+import { SeriesProviderProps } from './Series.types';
+declare function SeriesProvider<T extends ChartSeriesType>(props: SeriesProviderProps<T>): React.JSX.Element;
+export { SeriesProvider };

package/context/SeriesProvider/SeriesProvider.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SeriesProvider = SeriesProvider;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _colorPalettes = require("../../colorPalettes");
+var _SeriesContext = require("./SeriesContext");
+var _processSeries = require("./processSeries");
+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; }
+function SeriesProvider(props) {
+  const {
+    series,
+    dataset,
+    colors = _colorPalettes.blueberryTwilightPalette,
+    seriesFormatters,
+    children
+  } = props;
+  const theme = (0, _styles.useTheme)();
+  const formattedSeries = React.useMemo(() => ({
+    isInitialized: true,
+    data: (0, _processSeries.preprocessSeries)({
+      series,
+      colors: typeof colors === 'function' ? colors(theme.palette.mode) : colors,
+      seriesFormatters,
+      dataset: dataset
+    })
+  }), [series, colors, theme.palette.mode, seriesFormatters, dataset]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesContext.SeriesContext.Provider, {
+    value: formattedSeries,
+    children: children
+  });
+}

package/context/SeriesProvider/index.d.ts

@@ -0,0 +1,12 @@
+export * from './SeriesProvider';
+export * from './SeriesContext';
+export * from './Series.types';
+declare const seriesProviderUtils: {
+    preprocessSeries: <T extends import("../../internals").ChartSeriesType>({ series, colors, seriesFormatters, dataset, }: {
+        series: import("../..").AllSeriesType<T>[];
+        colors: string[];
+        seriesFormatters: import("./Series.types").SeriesFormatterConfig<T>;
+        dataset?: import("../../internals").DatasetType;
+    }) => import("./Series.types").FormattedSeries;
+};
+export { seriesProviderUtils };

package/context/SeriesProvider/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  seriesProviderUtils: true
+};
+exports.seriesProviderUtils = void 0;
+var _processSeries = require("./processSeries");
+var _SeriesProvider = require("./SeriesProvider");
+Object.keys(_SeriesProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SeriesProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SeriesProvider[key];
+    }
+  });
+});
+var _SeriesContext = require("./SeriesContext");
+Object.keys(_SeriesContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SeriesContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SeriesContext[key];
+    }
+  });
+});
+var _Series = require("./Series.types");
+Object.keys(_Series).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Series[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Series[key];
+    }
+  });
+});
+const seriesProviderUtils = exports.seriesProviderUtils = {
+  preprocessSeries: _processSeries.preprocessSeries
+};

package/context/SeriesProvider/processSeries.d.ts

@@ -0,0 +1,17 @@
+import { AllSeriesType } from '../../models/seriesType';
+import { ChartSeriesType, DatasetType } from '../../models/seriesType/config';
+import { FormattedSeries, SeriesFormatterConfig } from './Series.types';
+/**
+ * This methods is the interface between what the developer is providing and what components receives
+ * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
+ * It also add defaultized values such as the ids, colors
+ * @param series The array of series provided by the developer
+ * @param colors The color palette used to defaultize series colors
+ * @returns An object structuring all the series by type.
+ */
+export declare const preprocessSeries: <T extends ChartSeriesType>({ series, colors, seriesFormatters, dataset, }: {
+    series: AllSeriesType<T>[];
+    colors: string[];
+    seriesFormatters: SeriesFormatterConfig<T>;
+    dataset?: DatasetType;
+}) => FormattedSeries;

package/context/SeriesProvider/processSeries.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.preprocessSeries = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defaultizeColor = require("../../internals/defaultizeColor");
+/**
+ * This methods is the interface between what the developer is providing and what components receives
+ * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
+ * It also add defaultized values such as the ids, colors
+ * @param series The array of series provided by the developer
+ * @param colors The color palette used to defaultize series colors
+ * @returns An object structuring all the series by type.
+ */
+const preprocessSeries = ({
+  series,
+  colors,
+  seriesFormatters,
+  dataset
+}) => {
+  // Group series by type
+  const seriesGroups = {};
+  series.forEach((seriesData, seriesIndex) => {
+    const {
+      id = `auto-generated-id-${seriesIndex}`,
+      type
+    } = seriesData;
+    if (seriesGroups[type] === undefined) {
+      seriesGroups[type] = {
+        series: {},
+        seriesOrder: []
+      };
+    }
+    if (seriesGroups[type]?.series[id] !== undefined) {
+      throw new Error(`MUI X: series' id "${id}" is not unique.`);
+    }
+    seriesGroups[type].series[id] = (0, _extends2.default)({
+      id
+    }, (0, _defaultizeColor.defaultizeColor)(seriesData, seriesIndex, colors));
+    seriesGroups[type].seriesOrder.push(id);
+  });
+  const formattedSeries = {};
+  // Apply formatter on a type group
+  Object.keys(seriesFormatters).forEach(type => {
+    const group = seriesGroups[type];
+    if (group !== undefined) {
+      formattedSeries[type] = seriesFormatters[type]?.(group, dataset) ?? seriesGroups[type];
+    }
+  });
+  return formattedSeries;
+};
+exports.preprocessSeries = preprocessSeries;

package/context/ZAxisContextProvider.d.ts

@@ -14,7 +14,7 @@ export type ZAxisContextProviderProps = {
     children: React.ReactNode;
 };
 type DefaultizedZAxisConfig = {
-    [axisKey: string]: ZAxisDefaultized;
+    [axisId: string]: ZAxisDefaultized;
 };
 export declare const ZAxisContext: React.Context<{
     /**

package/context/ZAxisContextProvider.js

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

package/esm/BarChart/BarChart.js

@@ -239,7 +239,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -292,7 +291,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,

package/esm/BarChart/BarElement.js

@@ -4,11 +4,11 @@ const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps",
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { useSlotProps } from '@mui/base/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
-import { color as d3Color } from 'd3-color';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
 import { animated } from '@react-spring/web';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { useItemHighlighted } from '../context';

package/esm/BarChart/BarLabel/BarLabelItem.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["seriesId", "classes", "color", "style", "dataIndex", "barLabel", "slots", "slotProps", "height", "width", "value"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
-import { useSlotProps } from '@mui/base/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
 import PropTypes from 'prop-types';
 import { useUtilityClasses } from './barLabelClasses';
 import { getBarLabel } from './getBarLabel';

package/esm/BarChart/BarPlot.js

@@ -66,16 +66,16 @@ const useAggregatedData = () => {
     ids: groupIds
   }, groupIndex) => {
     return groupIds.flatMap(seriesId => {
-      const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId;
-      const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
-      const xAxisConfig = xAxis[xAxisKey];
-      const yAxisConfig = yAxis[yAxisKey];
+      const xAxisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey ?? defaultXAxisId;
+      const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey ?? defaultYAxisId;
+      const xAxisConfig = xAxis[xAxisId];
+      const yAxisConfig = yAxis[yAxisId];
       const verticalLayout = series[seriesId].layout === 'vertical';
-      checkScaleErrors(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis);
+      checkScaleErrors(verticalLayout, seriesId, xAxisId, xAxis, yAxisId, yAxis);
       const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
       const xScale = xAxisConfig.scale;
       const yScale = yAxisConfig.scale;
-      const colorGetter = getColor(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+      const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
       const bandWidth = baseScaleConfig.scale.bandwidth();
       const {
         barWidth,
@@ -98,8 +98,8 @@ const useAggregatedData = () => {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
-          x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex]) + barOffset : minValueCoord,
-          y: verticalLayout ? minValueCoord : yScale(yAxis[yAxisKey].data?.[dataIndex]) + barOffset,
+          x: verticalLayout ? xScale(xAxis[xAxisId].data?.[dataIndex]) + barOffset : minValueCoord,
+          y: verticalLayout ? minValueCoord : yScale(yAxis[yAxisId].data?.[dataIndex]) + barOffset,
           xOrigin: xScale(0),
           yOrigin: yScale(0),
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,

package/esm/BarChart/checkScaleErrors.js

@@ -1,27 +1,27 @@
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
-const getAxisMessage = (axisDirection, axisKey) => {
+const getAxisMessage = (axisDirection, axisId) => {
   const axisName = `${axisDirection}-axis`;
-  const axisKeyName = `${axisDirection}Axis`;
+  const axisIdName = `${axisDirection}Axis`;
   const axisDefaultKey = axisDirection === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
-  return axisKey === axisDefaultKey ? `The first \`${axisKeyName}\`` : `The ${axisName} with id "${axisKey}"`;
+  return axisId === axisDefaultKey ? `The first \`${axisIdName}\`` : `The ${axisName} with id "${axisId}"`;
 };
-export function checkScaleErrors(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis) {
-  const xAxisConfig = xAxis[xAxisKey];
-  const yAxisConfig = yAxis[yAxisKey];
+export function checkScaleErrors(verticalLayout, seriesId, xAxisId, xAxis, yAxisId, yAxis) {
+  const xAxisConfig = xAxis[xAxisId];
+  const yAxisConfig = yAxis[yAxisId];
   const discreteAxisConfig = verticalLayout ? xAxisConfig : yAxisConfig;
   const continuousAxisConfig = verticalLayout ? yAxisConfig : xAxisConfig;
-  const discreteAxisKey = verticalLayout ? xAxisKey : yAxisKey;
-  const continuousAxisKey = verticalLayout ? yAxisKey : xAxisKey;
+  const discreteAxisId = verticalLayout ? xAxisId : yAxisId;
+  const continuousAxisId = verticalLayout ? yAxisId : xAxisId;
   const discreteAxisDirection = verticalLayout ? 'x' : 'y';
   const continuousAxisDirection = verticalLayout ? 'y' : 'x';
   if (!isBandScaleConfig(discreteAxisConfig)) {
-    throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisKey)} should be of type "band" to display the bar series of id "${seriesId}".`);
+    throw new Error(`MUI X: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} should be of type "band" to display the bar series of id "${seriesId}".`);
   }
   if (discreteAxisConfig.data === undefined) {
-    throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisKey)} should have data property.`);
+    throw new Error(`MUI X: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} should have data property.`);
   }
   if (isBandScaleConfig(continuousAxisConfig) || isPointScaleConfig(continuousAxisConfig)) {
-    throw new Error(`MUI X Charts: ${getAxisMessage(continuousAxisDirection, continuousAxisKey)} should be a continuous type to display the bar series of id "${seriesId}".`);
+    throw new Error(`MUI X: ${getAxisMessage(continuousAxisDirection, continuousAxisId)} should be a continuous type to display the bar series of id "${seriesId}".`);
   }
 }

package/esm/BarChart/extremums.js

@@ -12,7 +12,10 @@ const getValueExtremum = params => {
     axis,
     isDefaultAxis
   } = params;
-  return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || isDefaultAxis && series[seriesId].yAxisKey === undefined).reduce((acc, seriesId) => {
+  return Object.keys(series).filter(seriesId => {
+    const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
+  }).reduce((acc, seriesId) => {
     const [seriesMin, seriesMax] = series[seriesId].stackedData?.reduce((seriesAcc, values) => [Math.min(...values, ...(seriesAcc[0] === null ? [] : [seriesAcc[0]])), Math.max(...values, ...(seriesAcc[1] === null ? [] : [seriesAcc[1]]))], series[seriesId].stackedData[0]) ?? [null, null];
     return [acc[0] === null ? seriesMin : Math.min(seriesMin, acc[0]), acc[1] === null ? seriesMax : Math.max(seriesMax, acc[1])];
   }, [null, null]);