@mui/x-charts 7.6.1 → 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'>, 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/BarChart/BarChart.js

@@ -360,7 +360,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    position: _propTypes.default.oneOf(['bottom', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
@@ -413,7 +413,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    position: _propTypes.default.oneOf(['left', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,

package/BarChart/BarPlot.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _web = require("@react-spring/web");
-var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _BarElement = require("./BarElement");
 var _getColor = _interopRequireDefault(require("./getColor"));
@@ -18,6 +17,7 @@ var _hooks = require("../hooks");
 var _BarClipPath = require("./BarClipPath");
 var _BarLabelPlot = require("./BarLabel/BarLabelPlot");
 var _checkScaleErrors = require("./checkScaleErrors");
+var _useSeries = require("../hooks/useSeries");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 /**
@@ -50,7 +50,7 @@ function getBandSize({
   };
 }
 const useAggregatedData = () => {
-  const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).bar ?? {
+  const seriesData = (0, _useSeries.useBarSeries)() ?? {
     series: {},
     stackingGroups: [],
     seriesOrder: []

package/BarChart/formatter.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _d3Shape = require("d3-shape");
 var _stackSeries = require("../internals/stackSeries");
-var _defaultizeValueFormatter = _interopRequireDefault(require("../internals/defaultizeValueFormatter"));
+var _defaultizeValueFormatter = require("../internals/defaultizeValueFormatter");
 let warnOnce = false;
 const formatter = (params, dataset) => {
   const {
@@ -72,7 +72,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v == null ? '' : v.toLocaleString())
+    series: (0, _defaultizeValueFormatter.defaultizeValueFormatter)(completedSeries, v => v == null ? '' : v.toLocaleString())
   };
 };
 var _default = exports.default = formatter;

package/BarChart/getColor.d.ts

@@ -1,3 +1,3 @@
 import { AxisDefaultized } from '../models/axis';
 import { DefaultizedBarSeriesType } from '../models/seriesType/bar';
-export default function getColor(series: DefaultizedBarSeriesType, xAxis: AxisDefaultized, yAxis: AxisDefaultized): (dataIndex: number) => string;
+export default function getColor(series: DefaultizedBarSeriesType, xAxis?: AxisDefaultized, yAxis?: AxisDefaultized): (dataIndex: number) => string;

package/BarChart/getColor.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = getColor;
 function getColor(series, xAxis, yAxis) {
   const verticalLayout = series.layout === 'vertical';
-  const bandColorScale = verticalLayout ? xAxis.colorScale : yAxis.colorScale;
-  const valueColorScale = verticalLayout ? yAxis.colorScale : xAxis.colorScale;
-  const bandValues = verticalLayout ? xAxis.data : yAxis.data;
+  const bandColorScale = verticalLayout ? xAxis?.colorScale : yAxis?.colorScale;
+  const valueColorScale = verticalLayout ? yAxis?.colorScale : xAxis?.colorScale;
+  const bandValues = verticalLayout ? xAxis?.data : yAxis?.data;
   if (valueColorScale) {
     return dataIndex => {
       const value = series.data[dataIndex];
@@ -19,7 +19,7 @@ function getColor(series, xAxis, yAxis) {
       return color;
     };
   }
-  if (bandColorScale) {
+  if (bandColorScale && bandValues) {
     return dataIndex => {
       const value = bandValues[dataIndex];
       const color = value === null ? series.color : bandColorScale(value);

package/BarChart/plugin.d.ts

@@ -0,0 +1,2 @@
+import { ChartsPluginType } from '../models/plugin';
+export declare const plugin: ChartsPluginType<'bar'>;

package/BarChart/plugin.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.plugin = void 0;
+var _extremums = require("./extremums");
+var _formatter = _interopRequireDefault(require("./formatter"));
+var _getColor = _interopRequireDefault(require("./getColor"));
+const plugin = exports.plugin = {
+  seriesType: 'bar',
+  seriesFormatter: _formatter.default,
+  colorProcessor: _getColor.default,
+  xExtremumGetter: _extremums.getExtremumX,
+  yExtremumGetter: _extremums.getExtremumY
+};

package/CHANGELOG.md

@@ -3,6 +3,153 @@
 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_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Adds Date and Time Pickers accessibility page
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.6.2`
+
+- [DataGrid] Add the `areElementSizesEqual` utility to improve code readability (#13254) @layerok
+- [DataGrid] Clean up IE remnants from the codebase (#13390) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.6.2` [![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.6.2`.
+
+#### `@mui/x-data-grid-premium@7.6.2` [![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.6.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.6.2`
+
+- [fields] Fix `PageUp` and `PageDown` editing on letter sections (#13310) @arthurbalduini
+- [pickers] Fix `AdapterDayjs` timezone behavior (#13362) @LukasTy
+- [pickers] Use `useRtl` instead of `useTheme` to access direction (#13363) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.6.2` [![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.6.2`.
+
+### Charts
+
+#### `@mui/x-charts@7.6.2`
+
+- [charts] Add `Initializable` type and behaviour to allow checking if a complex context has been initialized. (#13365) @JCQuintas
+- [charts] Fix some props not working in `xAxis` and `yAxis` (#13372) @Valyok26
+- [charts] Harmonize charts types (#13366) @alexfauquette
+- [charts] Introduce plugins system (#13367) @alexfauquette
+- [charts] Simplify plugin types (#13396) @JCQuintas
+
+### Docs
+
+- [docs] Add badges like in Material UI @oliviertassinari
+- [docs] Update twitter.com to x.com @oliviertassinari
+- [docs] Fix the description of `tickInterval` (#13355) @alexfauquette
+- [docs] Adjust the code example for `quickFilterValues` (#12919) @michelengelen
+- [docs] Create Pickers accessibility page (#13274) @arthurbalduini
+
+### Core
+
+- [core] Comment on `CSS.escape` for the future @oliviertassinari
+- [core] Fix `l10n` action setup (#13382) @LukasTy
+- [core] Fixes in preparation for React 18.3 (#13378) @LukasTy
+- [core] Remove explicit `marked` dependency (#13383) @LukasTy
+- [core] Remove unused `@types/prettier` dependency (#13389) @LukasTy
+- [core] Add `docs/.env.local` to `.gitignore` (#13377) @KenanYusuf
+
 ## 7.6.1
 
 _May 31, 2024_

package/ChartContainer/ChartContainer.d.ts

@@ -3,11 +3,23 @@ import { DrawingProviderProps } from '../context/DrawingProvider';
 import { SeriesContextProviderProps } from '../context/SeriesContextProvider';
 import { ChartsSurfaceProps } from '../ChartsSurface';
 import { CartesianContextProviderProps } from '../context/CartesianContextProvider';
-import { HighlightedProviderProps } from '../context';
-export type ChartContainerProps = Omit<ChartsSurfaceProps & SeriesContextProviderProps & Omit<DrawingProviderProps, 'svgRef'> & CartesianContextProviderProps & HighlightedProviderProps, 'children'> & {
+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'> & ZAxisContextProviderProps & HighlightedProviderProps, 'children'> & {
     children?: React.ReactNode;
+    /**
+     * An array of plugins defining how to preprocess data.
+     * If not provided, the container supports line, bar, scatter and pie charts.
+     */
+    plugins?: ChartsPluginType<ChartSeriesType>[];
 };
-declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & SeriesContextProviderProps & Omit<DrawingProviderProps, "svgRef"> & CartesianContextProviderProps & 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.
+     * If not provided, the container supports line, bar, scatter and pie charts.
+     */
+    plugins?: ChartsPluginType<keyof import("../models/seriesType/config").ChartsSeriesConfig>[] | undefined;
 } & React.RefAttributes<unknown>>;
 export { ChartContainer };

package/ChartContainer/ChartContainer.js

@@ -11,11 +11,13 @@ 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");
 var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
 var _context = require("../context");
+var _usePluginsMerge = require("./usePluginsMerge");
 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; }
@@ -27,6 +29,7 @@ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(fu
     margin,
     xAxis,
     yAxis,
+    zAxis,
     colors,
     dataset,
     sx,
@@ -35,10 +38,17 @@ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(fu
     disableAxisListener,
     highlightedItem,
     onHighlightChange,
+    plugins,
     children
   } = props;
   const svgRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(ref, svgRef);
+  const {
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
+  } = (0, _usePluginsMerge.usePluginsMerge)(plugins);
   (0, _useReducedMotion.useReducedMotion)(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, {
@@ -46,27 +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,
-      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]
+                })
+              })
             })
           })
         })
@@ -126,6 +146,11 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.func,
+  /**
+   * An array of plugins defining how to preprocess data.
+   * If not provided, the container supports line, bar, scatter and pie charts.
+   */
+  plugins: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
@@ -179,7 +204,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    position: _propTypes.default.oneOf(['bottom', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
@@ -232,7 +257,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    position: _propTypes.default.oneOf(['left', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
@@ -249,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/ChartContainer/defaultPlugins.d.ts

@@ -0,0 +1,2 @@
+import { ChartsPluginType } from '../models';
+export declare const defaultPlugins: ChartsPluginType<'bar' | 'scatter' | 'line' | 'pie'>[];

package/ChartContainer/defaultPlugins.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultPlugins = void 0;
+var _plugin = require("../BarChart/plugin");
+var _plugin2 = require("../ScatterChart/plugin");
+var _plugin3 = require("../LineChart/plugin");
+var _plugin4 = require("../PieChart/plugin");
+const defaultPlugins = exports.defaultPlugins = [_plugin.plugin, _plugin2.plugin, _plugin3.plugin, _plugin4.plugin];

package/ChartContainer/usePluginsMerge.d.ts

@@ -0,0 +1,10 @@
+import { ChartsPluginType, ColorProcessorsConfig } from '../models';
+import { ChartSeriesType } from '../models/seriesType/config';
+import { ExtremumGettersConfig } from '../context/CartesianContextProvider';
+import { SeriesFormatterConfig } from '../context/SeriesContextProvider';
+export declare function usePluginsMerge<T extends ChartSeriesType>(plugins?: ChartsPluginType<T>[]): {
+    seriesFormatters: SeriesFormatterConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;
+    colorProcessors: ColorProcessorsConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;
+    xExtremumGetters: ExtremumGettersConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;
+    yExtremumGetters: ExtremumGettersConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;
+};

package/ChartContainer/usePluginsMerge.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePluginsMerge = usePluginsMerge;
+var React = _interopRequireWildcard(require("react"));
+var _defaultPlugins = require("./defaultPlugins");
+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 usePluginsMerge(plugins) {
+  const defaultizedPlugins = plugins ?? _defaultPlugins.defaultPlugins;
+  return React.useMemo(() => {
+    const seriesFormatters = {};
+    const colorProcessors = {};
+    const xExtremumGetters = {};
+    const yExtremumGetters = {};
+    for (let i = 0; i < defaultizedPlugins.length; i += 1) {
+      const plugin = defaultizedPlugins[i];
+
+      // To remove those any we will need to solve this union discrimination issue:
+      // https://www.typescriptlang.org/play/?#code/FDAuE8AcFMAIDkCuBbARtATgYQPYDsAzASwHNYBeWAb2FlgGsi8ATALlgHI8V0MOBuWrBwwMAQ1A4M7ABQAPdtzSYAlBQB8sJb0EBfEBBiwAyqAxMSuQqQrUhjFuw4BnMxYFCRmCVNkLYruZ4JGrkmoEWeiAAxviuWqhWxCTsSMrY+Mm2VAxMbLAARNqYBQA0wqI+0rByGrAATLAAVDWw+rF48YFJpOymQZaZNpQ5DvkFEcFlFd6S1bVhsAAG9S0AJFRyukttMXGgsB3JzrYA2niJQyTl3VcAugZQcADylXPOALJikJAW2ULFDAAflSPEwPRIpw4XnEcw4d1KQkmJBBJjcwQhUJhVXhiN0gmAHXi2LmXx+FnYr1mUk+31+wWy+JABCksBkABtoAcjjYcARDldnGoaCA6AB6MWwADqUnoJxw9FgRH5AHc4L9ooroGJogALQ5iZxwPJEABuRGYiDE7PASJVRFAerZPJIADoxsKhHRooa4FwwXxWF66DNYVIyfTIS73Xk7rZoySpIIQyHUBhtfRkyGfUbOMiOEGU3RExgIxZTtGxnHKAm3kng8xoAQxIh2aBC0W0xms-pvftqLkWOUS2141chBLYABJDimuB4HBKxtiWBiVA4RAHXU4FWwSSwTkHAAqxlgiBYmFcYhYAusbrGq5vtepGFX6YPTHo0GYnjrpbp5ZVrYJZ6EAA
+      seriesFormatters[plugin.seriesType] = plugin.seriesFormatter;
+      colorProcessors[plugin.seriesType] = plugin.colorProcessor;
+      if (plugin.xExtremumGetter) {
+        xExtremumGetters[plugin.seriesType] = plugin.xExtremumGetter;
+      }
+      if (plugin.yExtremumGetter) {
+        yExtremumGetters[plugin.seriesType] = plugin.yExtremumGetter;
+      }
+    }
+    return {
+      seriesFormatters,
+      colorProcessors,
+      xExtremumGetters,
+      yExtremumGetters
+    };
+  }, [defaultizedPlugins]);
+}

package/ChartsLegend/ChartsLegend.js

@@ -12,10 +12,10 @@ var _utils = require("@mui/base/utils");
 var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _utils3 = require("./utils");
-var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _chartsLegendClasses = require("./chartsLegendClasses");
 var _DefaultChartsLegend = require("./DefaultChartsLegend");
 var _hooks = require("../hooks");
+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); }
 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 +56,7 @@ function ChartsLegend(inProps) {
     theme
   }));
   const drawingArea = (0, _hooks.useDrawingArea)();
-  const series = React.useContext(_SeriesContextProvider.SeriesContext);
+  const series = (0, _useSeries.useSeries)();
   const seriesToDisplay = (0, _utils3.getSeriesToDisplay)(series);
   const ChartLegendRender = slots?.legend ?? _DefaultChartsLegend.DefaultChartsLegend;
   const chartLegendRenderProps = (0, _utils.useSlotProps)({

package/ChartsLegend/utils.js

@@ -16,5 +16,8 @@ const legendGetter = {
   pie: _legend4.default
 };
 function getSeriesToDisplay(series) {
-  return Object.keys(series).flatMap(seriesType => legendGetter[seriesType](series[seriesType]));
+  return Object.keys(series).flatMap(seriesType => {
+    const getter = legendGetter[seriesType];
+    return getter === undefined ? [] : getter(series[seriesType]);
+  });
 }

package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsOnAxisClickHandler = ChartsOnAxisClickHandler;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _DrawingProvider = require("../context/DrawingProvider");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
-var _SeriesContextProvider = require("../context/SeriesContextProvider");
+var _useSeries = require("../hooks/useSeries");
+var _hooks = require("../hooks");
 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; }
@@ -18,8 +18,8 @@ function ChartsOnAxisClickHandler(props) {
   const {
     onAxisClick
   } = props;
-  const svgRef = React.useContext(_DrawingProvider.SvgContext);
-  const series = React.useContext(_SeriesContextProvider.SeriesContext);
+  const svgRef = (0, _hooks.useSvgRef)();
+  const series = (0, _useSeries.useSeries)();
   const {
     axis
   } = React.useContext(_InteractionProvider.InteractionContext);

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;
   }