@mui/x-charts 7.6.2 → 7.7.0

package/BarChart/BarChart.d.ts

@@ -15,7 +15,7 @@ export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLege
 }
 export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
 }
-export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
+export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
     /**
      * The series to display in the bar chart.
      * An array of [[BarSeriesType]] objects.

package/CHANGELOG.md

@@ -3,6 +3,87 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.7.0
+
+_Jun 13, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Allow customization of the Pickers month and the year buttons
+- 🌍 Improve Persian (fa-IR), Portuguese (pt-PT), and Russian (ru-RU) locales on the Data Grid
+- 🌍 Improve Korean (ko-KR) and Persian (fa-IR) locales on the Date and Time Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.7.0`
+
+- [DataGrid] Add `getFilterState` method (#13418) @cherniavskii
+- [DataGrid] Do not show resize separators for column groups (#13455) @cherniavskii
+- [l10n] Improve Persian (fa-IR) locale (#13402) @fakhamatia
+- [l10n] Improve Portuguese (pt-PT) locale (#13384) @olavocarvalho
+- [l10n] Improve Russian (ru-RU) locale (#11210) @dastan-akhmetov-scity
+
+#### `@mui/x-data-grid-pro@7.7.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.7.0`, plus:
+
+- [DataGridPro] Do not render detail panel if the focused cell is not visible (#13456) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.7.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.7.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.7.0`
+
+- [l10n] Improve Korean (ko-KR) locale (#13452) @ryxxn
+- [l10n] Improve Persian (fa-IR) locale (#13402) @fakhamatia
+- [pickers] Allow to customize the month and the year buttons (#13321) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.7.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.7.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.7.0`
+
+- [charts] Add watermark on the pro `ResponsiveChartContainer` (#13398) @alexfauquette
+- [charts] Allow to specify y-axis configuration (#13438) @alexfauquette
+- [charts] Fix eslint for react compiler (#13444) @alexfauquette
+- [charts] Improve themeAugmentation typing (#13433) @noraleonte
+- [charts] Move the `ZAxisContextProvider` by default in the `ChartContainer` (#13465) @alexfauquette
+- [charts] Use plugins to define series extremum and colors (#13397) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@7.7.0`
+
+- [TreeView] Improve TypeScript for plugins (#13380) @flaviendelangle
+- [TreeView] Improve the typing of the cancelable events (#13152) @flaviendelangle
+- [TreeView] Prepare support for PigmentCSS (#13412) @flaviendelangle
+- [TreeView] Refactor the tree view internals to prepare for headless API (#13311) @flaviendelangle
+
+### Docs
+
+- [docs] Add `renderHeader` recipe to the Master Details docs (#13370) @michelengelen
+- [docs] Add lazy loading detail panel demo (#13453) @cherniavskii
+- [docs] Add small edits to the Data Grid overview page (#13060) @danilo-leal
+- [docs] Update a11y pages description (#13417) @danilo-leal
+- [docs] improve the writing on the "Quick filter outside of the grid" example (#13155) @michelengelen
+
+### Core
+
+- [core] Add `eslint-plugin-react-compiler` experimental version and rules (#13415) @JCQuintas
+- [core] Minor setup cleanup (#13467) @LukasTy
+- [infra] Adjust CI setup (#13448) @LukasTy
+- [test] Add tests for the custom slots of `TreeItem2` (#13314) @flaviendelangle
+
 ## 7.6.2
 
 _Jun 6, 2024_

package/ChartContainer/ChartContainer.d.ts

@@ -3,10 +3,10 @@ import { DrawingProviderProps } from '../context/DrawingProvider';
 import { SeriesContextProviderProps } from '../context/SeriesContextProvider';
 import { ChartsSurfaceProps } from '../ChartsSurface';
 import { CartesianContextProviderProps } from '../context/CartesianContextProvider';
-import { HighlightedProviderProps } from '../context';
+import { HighlightedProviderProps, ZAxisContextProviderProps } from '../context';
 import { ChartsPluginType } from '../models/plugin';
 import { ChartSeriesType } from '../models/seriesType/config';
-export type ChartContainerProps = Omit<ChartsSurfaceProps & Omit<SeriesContextProviderProps, 'seriesFormatters'> & Omit<DrawingProviderProps, 'svgRef'> & Omit<CartesianContextProviderProps, 'xExtremumGetters' | 'yExtremumGetters'> & HighlightedProviderProps, 'children'> & {
+export type ChartContainerProps = Omit<ChartsSurfaceProps & Omit<SeriesContextProviderProps, 'seriesFormatters'> & Omit<DrawingProviderProps, 'svgRef'> & Omit<CartesianContextProviderProps, 'xExtremumGetters' | 'yExtremumGetters'> & ZAxisContextProviderProps & HighlightedProviderProps, 'children'> & {
     children?: React.ReactNode;
     /**
      * An array of plugins defining how to preprocess data.
@@ -14,7 +14,7 @@ export type ChartContainerProps = Omit<ChartsSurfaceProps & Omit<SeriesContextPr
      */
     plugins?: ChartsPluginType<ChartSeriesType>[];
 };
-declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & Omit<SeriesContextProviderProps, "seriesFormatters"> & Omit<DrawingProviderProps, "svgRef"> & Omit<CartesianContextProviderProps, "xExtremumGetters" | "yExtremumGetters"> & HighlightedProviderProps, "children"> & {
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & Omit<SeriesContextProviderProps, "seriesFormatters"> & Omit<DrawingProviderProps, "svgRef"> & Omit<CartesianContextProviderProps, "xExtremumGetters" | "yExtremumGetters"> & ZAxisContextProviderProps & HighlightedProviderProps, "children"> & {
     children?: React.ReactNode;
     /**
      * An array of plugins defining how to preprocess data.

package/ChartContainer/ChartContainer.js

@@ -11,6 +11,7 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _DrawingProvider = require("../context/DrawingProvider");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _InteractionProvider = require("../context/InteractionProvider");
+var _ColorProvider = require("../context/ColorProvider");
 var _useReducedMotion = require("../hooks/useReducedMotion");
 var _ChartsSurface = require("../ChartsSurface");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
@@ -28,6 +29,7 @@ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(fu
     margin,
     xAxis,
     yAxis,
+    zAxis,
     colors,
     dataset,
     sx,
@@ -42,7 +44,10 @@ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(fu
   const svgRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(ref, svgRef);
   const {
-    seriesFormatters
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
   } = (0, _usePluginsMerge.usePluginsMerge)(plugins);
   (0, _useReducedMotion.useReducedMotion)(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
 
@@ -51,28 +56,37 @@ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(fu
     height: height,
     margin: margin,
     svgRef: svgRef,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesContextProvider.SeriesContextProvider, {
-      series: series,
-      colors: colors,
-      dataset: dataset,
-      seriesFormatters: seriesFormatters,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianContextProvider.CartesianContextProvider, {
-        xAxis: xAxis,
-        yAxis: yAxis,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorProvider.ColorProvider, {
+      colorProcessors: colorProcessors,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesContextProvider.SeriesContextProvider, {
+        series: series,
+        colors: colors,
         dataset: dataset,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InteractionProvider.InteractionProvider, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.HighlightedProvider, {
-            highlightedItem: highlightedItem,
-            onHighlightChange: onHighlightChange,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, {
-              width: width,
-              height: height,
-              ref: handleRef,
-              sx: sx,
-              title: title,
-              desc: desc,
-              disableAxisListener: disableAxisListener,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxesGradients.ChartsAxesGradients, {}), children]
+        seriesFormatters: seriesFormatters,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianContextProvider.CartesianContextProvider, {
+          xAxis: xAxis,
+          yAxis: yAxis,
+          dataset: dataset,
+          xExtremumGetters: xExtremumGetters,
+          yExtremumGetters: yExtremumGetters,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ZAxisContextProvider, {
+            zAxis: zAxis,
+            dataset: dataset,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InteractionProvider.InteractionProvider, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.HighlightedProvider, {
+                highlightedItem: highlightedItem,
+                onHighlightChange: onHighlightChange,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, {
+                  width: width,
+                  height: height,
+                  ref: handleRef,
+                  sx: sx,
+                  title: title,
+                  desc: desc,
+                  disableAxisListener: disableAxisListener,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxesGradients.ChartsAxesGradients, {}), children]
+                })
+              })
             })
           })
         })
@@ -260,5 +274,28 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
+  })),
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    id: _propTypes.default.string
   }))
 } : void 0;

package/ChartsOverlay/index.d.ts

@@ -1,3 +1,4 @@
 export { ChartsOverlay } from './ChartsOverlay';
+export type { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots, } from './ChartsOverlay';
 export { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
 export { ChartsNoDataOverlay } from './ChartsNoDataOverlay';

package/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -13,6 +13,7 @@ var _hooks = require("../hooks");
 var _common = require("./common");
 var _ChartsText = require("../ChartsText");
 var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
+var _warning = require("../internals/warning");
 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; }
@@ -56,7 +57,7 @@ function getXReferenceLineClasses(classes) {
     label: ['label']
   }, _chartsReferenceLineClasses.getReferenceLineUtilityClass, classes);
 }
-let warnedOnce = false;
+const valueError = (0, _warning.buildWarning)((value, id) => `MUI X Charts: the value ${value} does not exist in the data of x axis with id ${id}.`, 'error');
 function ChartsXReferenceLine(props) {
   const {
     x,
@@ -76,10 +77,7 @@ function ChartsXReferenceLine(props) {
   const xPosition = xAxisScale(x);
   if (xPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      if (!warnedOnce) {
-        warnedOnce = true;
-        console.error(`MUI X Charts: the value ${x} does not exist in the data of x axis with id ${axisId}.`);
-      }
+      valueError(x, axisId);
     }
     return null;
   }

package/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -13,6 +13,7 @@ var _hooks = require("../hooks");
 var _common = require("./common");
 var _ChartsText = require("../ChartsText");
 var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
+var _warning = require("../internals/warning");
 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; }
@@ -49,7 +50,6 @@ const getTextParams = ({
       };
   }
 };
-let warnedOnce = false;
 function getYReferenceLineClasses(classes) {
   return (0, _composeClasses.default)({
     root: ['root', 'horizontal'],
@@ -57,6 +57,7 @@ function getYReferenceLineClasses(classes) {
     label: ['label']
   }, _chartsReferenceLineClasses.getReferenceLineUtilityClass, classes);
 }
+const valueError = (0, _warning.buildWarning)((value, id) => `MUI X Charts: the value ${value} does not exist in the data of y axis with id ${id}.`, 'error');
 function ChartsYReferenceLine(props) {
   const {
     y,
@@ -76,10 +77,7 @@ function ChartsYReferenceLine(props) {
   const yPosition = yAxisScale(y);
   if (yPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      if (!warnedOnce) {
-        warnedOnce = true;
-        console.error(`MUI X Charts: the value ${y} does not exist in the data of y axis with id ${axisId}.`);
-      }
+      valueError(y, axisId);
     }
     return null;
   }

package/ChartsText/ChartsText.js

@@ -58,10 +58,8 @@ function ChartsText(props) {
   if (angle) {
     transforms.push(`rotate(${angle}, ${x}, ${y})`);
   }
-  if (transforms.length) {
-    textProps.transform = transforms.join(' ');
-  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", (0, _extends2.default)({}, textProps, {
+    transform: transforms.length > 0 ? transforms.join(' ') : undefined,
     x: x,
     y: y,
     textAnchor: textAnchor,

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -11,9 +11,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/base/utils");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DefaultChartsAxisTooltipContent = require("./DefaultChartsAxisTooltipContent");
-var _isCartesian = require("../internals/isCartesian");
-var _colorGetter = _interopRequireDefault(require("../internals/colorGetter"));
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+var _useColor = require("../hooks/useColor");
+var _isCartesian = require("../internals/isCartesian");
 var _useSeries = require("../hooks/useSeries");
 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); }
@@ -40,6 +40,7 @@ function ChartsAxisTooltipContent(props) {
     zAxis
   } = React.useContext(_ZAxisContextProvider.ZAxisContext);
   const series = (0, _useSeries.useSeries)();
+  const colorProcessors = (0, _useColor.useColorProcessor)();
   const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
   const relevantSeries = React.useMemo(() => {
     const rep = [];
@@ -49,15 +50,8 @@ function ChartsAxisTooltipContent(props) {
         const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey;
         if (axisKey === undefined || axisKey === USED_AXIS_ID) {
           const seriesToAdd = series[seriesType].series[seriesId];
-          let getColor;
-          switch (seriesToAdd.type) {
-            case 'scatter':
-              getColor = (0, _colorGetter.default)(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]], zAxis[seriesToAdd.zAxisKey ?? zAxisIds[0]]);
-              break;
-            default:
-              getColor = (0, _colorGetter.default)(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]]);
-              break;
-          }
+          const zAxisKey = seriesToAdd.zAxisKey ?? zAxisIds[0];
+          const getColor = colorProcessors[seriesType]?.(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]], zAxisKey && zAxis[zAxisKey]) ?? (() => '');
           rep.push((0, _extends2.default)({}, seriesToAdd, {
             getColor
           }));
@@ -65,7 +59,7 @@ function ChartsAxisTooltipContent(props) {
       });
     });
     return rep;
-  }, [USED_AXIS_ID, isXaxis, series, xAxis, xAxisIds, yAxis, yAxisIds, zAxis, zAxisIds]);
+  }, [USED_AXIS_ID, colorProcessors, isXaxis, series, xAxis, xAxisIds, yAxis, yAxisIds, zAxis, zAxisIds]);
   const relevantAxis = React.useMemo(() => {
     return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
   }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -11,8 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/base/utils");
 var _DefaultChartsItemTooltipContent = require("./DefaultChartsItemTooltipContent");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
-var _colorGetter = _interopRequireDefault(require("../internals/colorGetter"));
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+var _useColor = require("../hooks/useColor");
 var _useSeries = require("../hooks/useSeries");
 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); }
@@ -36,21 +36,11 @@ function ChartsItemTooltipContent(props) {
     zAxis,
     zAxisIds
   } = React.useContext(_ZAxisContextProvider.ZAxisContext);
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
-  const defaultZAxisId = zAxisIds[0];
-  let getColor;
-  switch (series.type) {
-    case 'pie':
-      getColor = (0, _colorGetter.default)(series);
-      break;
-    case 'scatter':
-      getColor = (0, _colorGetter.default)(series, xAxis[series.xAxisKey ?? defaultXAxisId], yAxis[series.yAxisKey ?? defaultYAxisId], zAxis[series.zAxisKey ?? defaultZAxisId]);
-      break;
-    default:
-      getColor = (0, _colorGetter.default)(series, xAxis[series.xAxisKey ?? defaultXAxisId], yAxis[series.yAxisKey ?? defaultYAxisId]);
-      break;
-  }
+  const colorProcessors = (0, _useColor.useColorProcessor)();
+  const xAxisKey = series.xAxisKey ?? xAxisIds[0];
+  const yAxisKey = series.yAxisKey ?? yAxisIds[0];
+  const zAxisKey = series.zAxisKey ?? zAxisIds[0];
+  const getColor = colorProcessors[series.type]?.(series, xAxisKey && xAxis[xAxisKey], yAxisKey && yAxis[yAxisKey], zAxisKey && zAxis[zAxisKey]) ?? (() => '');
   const Content = content ?? _DefaultChartsItemTooltipContent.DefaultChartsItemTooltipContent;
   const chartTooltipContentProps = (0, _utils.useSlotProps)({
     elementType: Content,

package/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -47,7 +47,6 @@ function DefaultChartsAxisTooltipContent(props) {
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
         children: series.filter(_isCartesian.isCartesianSeries).map(({
-          color,
           id,
           label,
           valueFormatter,
@@ -62,12 +61,13 @@ function DefaultChartsAxisTooltipContent(props) {
             return null;
           }
           const formattedLabel = (0, _getLabel.getLabel)(label, 'tooltip');
+          const color = getColor(dataIndex);
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
             className: classes.row,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
               className: (0, _clsx.default)(classes.markCell, classes.cell),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
-                color: getColor(dataIndex) ?? color,
+              children: color && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
+                color: color,
                 className: classes.mark
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {

package/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -32,7 +32,7 @@ function DefaultChartsItemTooltipContent(props) {
     color: getColor(itemData.dataIndex),
     displayedLabel: (0, _getLabel.getLabel)(series.data[itemData.dataIndex].label, 'tooltip')
   } : {
-    color: getColor(itemData.dataIndex) ?? series.color,
+    color: getColor(itemData.dataIndex),
     displayedLabel: (0, _getLabel.getLabel)(series.label, 'tooltip')
   };
   const value = series.type === 'pie' ? (0, _extends2.default)({}, series.data[itemData.dataIndex], {

package/LineChart/LineChart.d.ts

@@ -13,12 +13,12 @@ import { ChartsAxisSlotProps, ChartsAxisSlots } from '../models/axis';
 import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from './LineHighlightPlot';
 import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
-import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay/ChartsOverlay';
+import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
 export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots {
 }
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
 }
-export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
+export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
     /**
      * The series to display in the line chart.
      * An array of [[LineSeriesType]] objects.

package/LineChart/LineChart.js

@@ -22,7 +22,7 @@ var _ChartsClipPath = require("../ChartsClipPath");
 var _LineHighlightPlot = require("./LineHighlightPlot");
 var _ChartsGrid = require("../ChartsGrid");
 var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
-var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
+var _ChartsOverlay = require("../ChartsOverlay");
 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; }

package/PieChart/PieChart.d.ts

@@ -9,12 +9,12 @@ import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { PiePlotProps, PiePlotSlotProps, PiePlotSlots } from './PiePlot';
 import { PieValueType } from '../models/seriesType/pie';
 import { ChartsAxisSlots, ChartsAxisSlotProps, ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
-import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay/ChartsOverlay';
+import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
 export interface PieChartSlots extends ChartsAxisSlots, PiePlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots {
 }
 export interface PieChartSlotProps extends ChartsAxisSlotProps, PiePlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
 }
-export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis' | 'plugins'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
     /**
      * Indicate which axis to display the bottom of the charts.
      * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.

package/PieChart/PieChart.js

@@ -16,7 +16,7 @@ var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _PiePlot = require("./PiePlot");
 var _useIsRTL = require("../internals/useIsRTL");
-var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
+var _ChartsOverlay = require("../ChartsOverlay");
 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; }

package/ResponsiveChartContainer/ResizableContainer.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
+/**
+ * Wrapping div that take the shape of its parent.
+ *
+ * @ignore - do not document.
+ */
+export declare const ResizableContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: Pick<ResponsiveChartContainerProps, 'width' | 'height'>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;

package/ResponsiveChartContainer/ResizableContainer.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResizableContainer = void 0;
+var _styles = require("@mui/material/styles");
+/**
+ * Wrapping div that take the shape of its parent.
+ *
+ * @ignore - do not document.
+ */
+const ResizableContainer = exports.ResizableContainer = (0, _styles.styled)('div', {
+  name: 'MuiResponsiveChart',
+  slot: 'Container'
+})(({
+  ownerState
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
+  display: 'flex',
+  position: 'relative',
+  flexGrow: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  '&>svg': {
+    width: '100%',
+    height: '100%'
+  }
+}));

package/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -9,33 +9,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/material/styles");
 var _ChartContainer = require("../ChartContainer");
 var _useChartContainerDimensions = require("./useChartContainerDimensions");
+var _ResizableContainer = require("./ResizableContainer");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["width", "height"];
 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 ResizableContainer = (0, _styles.styled)('div', {
-  name: 'MuiResponsiveChart',
-  slot: 'Container'
-})(({
-  ownerState
-}) => ({
-  width: ownerState.width ?? '100%',
-  height: ownerState.height ?? '100%',
-  display: 'flex',
-  position: 'relative',
-  flexGrow: 1,
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'hidden',
-  '&>svg': {
-    width: '100%',
-    height: '100%'
-  }
-}));
 const ResponsiveChartContainer = exports.ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
   const {
       width: inWidth,
@@ -43,7 +23,7 @@ const ResponsiveChartContainer = exports.ResponsiveChartContainer = /*#__PURE__*
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [containerRef, width, height] = (0, _useChartContainerDimensions.useChartContainerDimensions)(inWidth, inHeight);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResizableContainer.ResizableContainer, {
     ref: containerRef,
     ownerState: {
       width: inWidth,
@@ -236,5 +216,28 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
+  })),
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    id: _propTypes.default.string
   }))
 } : void 0;

package/ScatterChart/ScatterChart.d.ts

@@ -6,7 +6,7 @@ import { ScatterSeriesType } from '../models/seriesType/scatter';
 import { MakeOptional } from '../models/helpers';
 import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
 import { ChartsLegendProps, ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
-import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay/ChartsOverlay';
+import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 import { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';