@mui/x-charts 7.6.0 → 7.6.2

package/context/CartesianContextProvider.js

@@ -14,11 +14,11 @@ var _extremums2 = require("../ScatterChart/extremums");
 var _extremums3 = require("../LineChart/extremums");
 var _axis = require("../models/axis");
 var _getScale = require("../internals/getScale");
-var _SeriesContextProvider = require("./SeriesContextProvider");
 var _constants = require("../constants");
 var _useTicks = require("../hooks/useTicks");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _colorScale = require("../internals/colorScale");
+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; }
@@ -52,7 +52,7 @@ function CartesianContextProvider(props) {
     dataset,
     children
   } = props;
-  const formattedSeries = React.useContext(_SeriesContextProvider.SeriesContext);
+  const formattedSeries = (0, _useSeries.useSeries)();
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const xAxis = React.useMemo(() => inXAxis?.map(axisConfig => {
     const dataKey = axisConfig.dataKey;

package/context/DrawingProvider.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { LayoutConfig } from '../models/layout';
+import { Initializable } from './context.types';
 export interface DrawingProviderProps extends LayoutConfig {
     children: React.ReactNode;
     svgRef: React.RefObject<SVGSVGElement>;
@@ -39,5 +40,6 @@ export declare const DrawingContext: React.Context<DrawingArea & {
      */
     chartId: string;
 }>;
-export declare const SvgContext: React.Context<React.RefObject<SVGSVGElement>>;
+export type SvgContextState = React.RefObject<SVGSVGElement>;
+export declare const SvgContext: React.Context<Initializable<SvgContextState>>;
 export declare function DrawingProvider(props: DrawingProviderProps): React.JSX.Element;

package/context/DrawingProvider.js

@@ -31,7 +31,10 @@ if (process.env.NODE_ENV !== 'production') {
   DrawingContext.displayName = 'DrawingContext';
 }
 const SvgContext = exports.SvgContext = /*#__PURE__*/React.createContext({
-  current: null
+  isInitialized: false,
+  data: {
+    current: null
+  }
 });
 if (process.env.NODE_ENV !== 'production') {
   SvgContext.displayName = 'SvgContext';
@@ -49,8 +52,12 @@ function DrawingProvider(props) {
   const value = React.useMemo(() => (0, _extends2.default)({
     chartId: chartId ?? ''
   }, drawingArea), [chartId, drawingArea]);
+  const refValue = React.useMemo(() => ({
+    isInitialized: true,
+    data: svgRef
+  }), [svgRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SvgContext.Provider, {
-    value: svgRef,
+    value: refValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawingContext.Provider, {
       value: value,
       children: children

package/context/HighlightedProvider/HighlightedContext.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { SeriesId } from '../../models/seriesType/common';
+import { Initializable } from '../context.types';
 /**
  * The data of the highlighted item.
  * To highlight an item, you need to provide the series id and the item id.
@@ -62,4 +63,4 @@ export type HighlightedState = {
     isHighlighted: (input: HighlightItemData) => boolean;
     isFaded: (input: HighlightItemData) => boolean;
 };
-export declare const HighlightedContext: React.Context<HighlightedState>;
+export declare const HighlightedContext: React.Context<Initializable<HighlightedState>>;

package/context/HighlightedProvider/HighlightedContext.js

@@ -25,11 +25,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 
 const HighlightedContext = exports.HighlightedContext = /*#__PURE__*/React.createContext({
-  highlightedItem: null,
-  setHighlighted: () => {},
-  clearHighlighted: () => {},
-  isHighlighted: () => false,
-  isFaded: () => false
+  isInitialized: false,
+  data: {
+    highlightedItem: null,
+    setHighlighted: () => {},
+    clearHighlighted: () => {},
+    isHighlighted: () => false,
+    isFaded: () => false
+  }
 });
 if (process.env.NODE_ENV !== 'production') {
   HighlightedContext.displayName = 'HighlightedContext';

package/context/HighlightedProvider/HighlightedProvider.js

@@ -56,18 +56,21 @@ function HighlightedProvider({
   const highlightScope = highlightedItem && highlightedItem.seriesId ? seriesById.get(highlightedItem.seriesId) ?? undefined : undefined;
   const providerValue = React.useMemo(() => {
     return {
-      highlightScope,
-      highlightedItem,
-      setHighlighted: itemData => {
-        setHighlightedItem(itemData);
-        onHighlightChange?.(itemData);
-      },
-      clearHighlighted: () => {
-        setHighlightedItem(null);
-        onHighlightChange?.(null);
-      },
-      isHighlighted: (0, _createIsHighlighted.createIsHighlighted)(highlightScope, highlightedItem),
-      isFaded: (0, _createIsFaded.createIsFaded)(highlightScope, highlightedItem)
+      isInitialized: true,
+      data: {
+        highlightScope,
+        highlightedItem,
+        setHighlighted: itemData => {
+          setHighlightedItem(itemData);
+          onHighlightChange?.(itemData);
+        },
+        clearHighlighted: () => {
+          setHighlightedItem(null);
+          onHighlightChange?.(null);
+        },
+        isHighlighted: (0, _createIsHighlighted.createIsHighlighted)(highlightScope, highlightedItem),
+        isFaded: (0, _createIsFaded.createIsFaded)(highlightScope, highlightedItem)
+      }
     };
   }, [highlightedItem, highlightScope, setHighlightedItem, onHighlightChange]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightedContext.HighlightedContext.Provider, {

package/context/HighlightedProvider/useHighlighted.js

@@ -16,9 +16,12 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @returns {HighlightedState} the state of the chart
  */
 function useHighlighted() {
-  const highlighted = React.useContext(_HighlightedContext.HighlightedContext);
-  if (highlighted === undefined) {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(_HighlightedContext.HighlightedContext);
+  if (!isInitialized) {
     throw new Error(['MUI X: Could not find the highlighted ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return highlighted;
+  return data;
 }

package/context/HighlightedProvider/useItemHighlighted.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useItemHighlighted = useItemHighlighted;
-var React = _interopRequireWildcard(require("react"));
-var _HighlightedContext = require("./HighlightedContext");
-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; }
+var _useHighlighted = require("./useHighlighted");
 /**
  * A hook to check the highlighted state of the item.
  * This function already calculates that an item is not faded if it is highlighted.
@@ -18,10 +15,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @returns {ItemHighlightedState} the state of the item
  */
 function useItemHighlighted(item) {
-  const highlighted = React.useContext(_HighlightedContext.HighlightedContext);
-  if (highlighted === undefined) {
-    throw new Error(['MUI X: Could not find the highlighted ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
-  }
+  const highlighted = (0, _useHighlighted.useHighlighted)();
   if (!item) {
     return {
       isHighlighted: false,

package/context/SeriesContextProvider.d.ts

@@ -1,25 +1,36 @@
 import * as React from 'react';
 import { AllSeriesType } from '../models/seriesType';
-import { ChartSeriesType, DatasetType, FormatterResult } from '../models/seriesType/config';
+import { ChartSeriesType, DatasetType, FormatterParams, FormatterResult } from '../models/seriesType/config';
 import { ChartsColorPalette } from '../colorPalettes';
-export type SeriesContextProviderProps = {
+import { Initializable } from './context.types';
+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> = {
     dataset?: DatasetType;
     /**
      * The array of series to display.
      * Each type of series has its own specificity.
      * Please refer to the appropriate docs page to learn more about it.
      */
-    series: AllSeriesType[];
+    series: AllSeriesType<T>[];
     /**
      * Color palette used to colorize multiple series.
      * @default blueberryTwilightPalette
      */
     colors?: ChartsColorPalette;
+    /**
+     * Preprocessors for each series types.
+     */
+    seriesFormatters: SeriesFormatterConfig<T>;
     children: React.ReactNode;
 };
 export type FormattedSeries = {
     [type in ChartSeriesType]?: FormatterResult<type>;
 };
-export declare const SeriesContext: React.Context<FormattedSeries>;
-declare function SeriesContextProvider(props: SeriesContextProviderProps): React.JSX.Element;
+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/SeriesContextProvider.js

@@ -9,26 +9,18 @@ exports.SeriesContextProvider = SeriesContextProvider;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
-var _formatter = _interopRequireDefault(require("../BarChart/formatter"));
-var _formatter2 = _interopRequireDefault(require("../ScatterChart/formatter"));
-var _formatter3 = _interopRequireDefault(require("../LineChart/formatter"));
-var _formatter4 = _interopRequireDefault(require("../PieChart/formatter"));
 var _defaultizeColor = require("../internals/defaultizeColor");
 var _colorPalettes = require("../colorPalettes");
 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; }
-const SeriesContext = exports.SeriesContext = /*#__PURE__*/React.createContext({});
+const SeriesContext = exports.SeriesContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {}
+});
 if (process.env.NODE_ENV !== 'production') {
   SeriesContext.displayName = 'SeriesContext';
 }
-const seriesTypeFormatter = {
-  bar: _formatter.default,
-  scatter: _formatter2.default,
-  line: _formatter3.default,
-  pie: _formatter4.default
-};
-
 /**
  * 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
@@ -37,7 +29,7 @@ const seriesTypeFormatter = {
  * @param colors The color palette used to defaultize series colors
  * @returns An object structuring all the series by type.
  */
-const formatSeries = (series, colors, dataset) => {
+const preprocessSeries = (series, colors, seriesFormatters, dataset) => {
   // Group series by type
   const seriesGroups = {};
   series.forEach((seriesData, seriesIndex) => {
@@ -61,9 +53,10 @@ const formatSeries = (series, colors, dataset) => {
   });
   const formattedSeries = {};
   // Apply formatter on a type group
-  Object.keys(seriesTypeFormatter).forEach(type => {
-    if (seriesGroups[type] !== undefined) {
-      formattedSeries[type] = seriesTypeFormatter[type]?.(seriesGroups[type], dataset) ?? seriesGroups[type];
+  Object.keys(seriesFormatters).forEach(type => {
+    const group = seriesGroups[type];
+    if (group !== undefined) {
+      formattedSeries[type] = seriesFormatters[type]?.(group, dataset) ?? seriesGroups[type];
     }
   });
   return formattedSeries;
@@ -73,10 +66,14 @@ function SeriesContextProvider(props) {
     series,
     dataset,
     colors = _colorPalettes.blueberryTwilightPalette,
+    seriesFormatters,
     children
   } = props;
   const theme = (0, _styles.useTheme)();
-  const formattedSeries = React.useMemo(() => formatSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors, dataset), [series, colors, theme.palette.mode, dataset]);
+  const formattedSeries = React.useMemo(() => ({
+    isInitialized: true,
+    data: preprocessSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors, seriesFormatters, dataset)
+  }), [series, colors, theme.palette.mode, seriesFormatters, dataset]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SeriesContext.Provider, {
     value: formattedSeries,
     children: children

package/context/context.types.d.ts

@@ -0,0 +1,4 @@
+export type Initializable<T> = {
+    isInitialized: boolean;
+    data: T;
+};

package/context/context.types.js

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

package/esm/BarChart/BarChart.js

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

package/esm/BarChart/BarPlot.js

@@ -4,7 +4,6 @@ const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
 import getColor from './getColor';
@@ -12,6 +11,7 @@ import { useChartId } from '../hooks';
 import { BarClipPath } from './BarClipPath';
 import { BarLabelPlot } from './BarLabel/BarLabelPlot';
 import { checkScaleErrors } from './checkScaleErrors';
+import { useBarSeries } from '../hooks/useSeries';
 
 /**
  * Solution of the equations
@@ -42,7 +42,7 @@ function getBandSize({
   };
 }
 const useAggregatedData = () => {
-  const seriesData = React.useContext(SeriesContext).bar ?? {
+  const seriesData = useBarSeries() ?? {
     series: {},
     stackingGroups: [],
     seriesOrder: []

package/esm/BarChart/formatter.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from 'd3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
-import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
 let warnOnce = false;
 const formatter = (params, dataset) => {
   const {

package/esm/BarChart/getColor.js

@@ -1,8 +1,8 @@
 export default 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];
@@ -13,7 +13,7 @@ export default 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/esm/BarChart/plugin.js

@@ -0,0 +1,10 @@
+import { getExtremumX, getExtremumY } from './extremums';
+import formatter from './formatter';
+import getColor from './getColor';
+export const plugin = {
+  seriesType: 'bar',
+  seriesFormatter: formatter,
+  colorProcessor: getColor,
+  xExtremumGetter: getExtremumX,
+  yExtremumGetter: getExtremumY
+};

package/esm/ChartContainer/ChartContainer.js

@@ -9,6 +9,7 @@ import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianContextProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
 import { HighlightedProvider } from '../context';
+import { usePluginsMerge } from './usePluginsMerge';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
@@ -26,10 +27,14 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     disableAxisListener,
     highlightedItem,
     onHighlightChange,
+    plugins,
     children
   } = props;
   const svgRef = React.useRef(null);
   const handleRef = useForkRef(ref, svgRef);
+  const {
+    seriesFormatters
+  } = usePluginsMerge(plugins);
   useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
 
   return /*#__PURE__*/_jsx(DrawingProvider, {
@@ -41,6 +46,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
       series: series,
       colors: colors,
       dataset: dataset,
+      seriesFormatters: seriesFormatters,
       children: /*#__PURE__*/_jsx(CartesianContextProvider, {
         xAxis: xAxis,
         yAxis: yAxis,
@@ -117,6 +123,11 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * An array of plugins defining how to preprocess data.
+   * If not provided, the container supports line, bar, scatter and pie charts.
+   */
+  plugins: PropTypes.arrayOf(PropTypes.object),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
@@ -170,7 +181,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['bottom', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -223,7 +234,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['left', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,

package/esm/ChartContainer/defaultPlugins.js

@@ -0,0 +1,5 @@
+import { plugin as barPlugin } from '../BarChart/plugin';
+import { plugin as scatterPlugin } from '../ScatterChart/plugin';
+import { plugin as linePlugin } from '../LineChart/plugin';
+import { plugin as piePlugin } from '../PieChart/plugin';
+export const defaultPlugins = [barPlugin, scatterPlugin, linePlugin, piePlugin];

package/esm/ChartContainer/usePluginsMerge.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { defaultPlugins } from './defaultPlugins';
+export function usePluginsMerge(plugins) {
+  const defaultizedPlugins = plugins ?? 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/esm/ChartsLegend/ChartsLegend.js

@@ -5,10 +5,10 @@ import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { getSeriesToDisplay } from './utils';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { getLegendUtilityClass } from './chartsLegendClasses';
 import { DefaultChartsLegend } from './DefaultChartsLegend';
 import { useDrawingArea } from '../hooks';
+import { useSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -47,7 +47,7 @@ function ChartsLegend(inProps) {
     theme
   }));
   const drawingArea = useDrawingArea();
-  const series = React.useContext(SeriesContext);
+  const series = useSeries();
   const seriesToDisplay = getSeriesToDisplay(series);
   const ChartLegendRender = slots?.legend ?? DefaultChartsLegend;
   const chartLegendRenderProps = useSlotProps({

package/esm/ChartsLegend/utils.js

@@ -9,5 +9,8 @@ const legendGetter = {
   pie: getPieLegend
 };
 export 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/esm/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { SvgContext } from '../context/DrawingProvider';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { SeriesContext } from '../context/SeriesContextProvider';
+import { useSeries } from '../hooks/useSeries';
+import { useSvgRef } from '../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsOnAxisClickHandler(props) {
   const {
     onAxisClick
   } = props;
-  const svgRef = React.useContext(SvgContext);
-  const series = React.useContext(SeriesContext);
+  const svgRef = useSvgRef();
+  const series = useSeries();
   const {
     axis
   } = React.useContext(InteractionContext);

package/esm/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
-import { isCartesianSeriesType } from './utils';
+import { isCartesianSeriesType } from '../internals/isCartesian';
 import colorGetter from '../internals/colorGetter';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
+import { useSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsAxisTooltipContent(props) {
   const {
@@ -30,7 +30,7 @@ function ChartsAxisTooltipContent(props) {
     zAxisIds,
     zAxis
   } = React.useContext(ZAxisContext);
-  const series = React.useContext(SeriesContext);
+  const series = useSeries();
   const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
   const relevantSeries = React.useMemo(() => {
     const rep = [];

package/esm/ChartsTooltip/ChartsItemTooltipContent.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import colorGetter from '../internals/colorGetter';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
+import { useSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsItemTooltipContent(props) {
   const {
@@ -16,7 +16,7 @@ function ChartsItemTooltipContent(props) {
     classes,
     contentProps
   } = props;
-  const series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
+  const series = useSeries()[itemData.type].series[itemData.seriesId];
   const {
     xAxis,
     yAxis,

package/esm/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
-import { isCartesianSeries, utcFormatter } from './utils';
+import { utcFormatter } from './utils';
 import { getLabel } from '../internals/getLabel';
+import { isCartesianSeries } from '../internals/isCartesian';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsAxisTooltipContent(props) {
   const {

package/esm/ChartsTooltip/utils.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SvgContext } from '../context/DrawingProvider';
+import { useSvgRef } from '../hooks';
 export function generateVirtualElement(mousePosition) {
   if (mousePosition === null) {
     return {
@@ -44,7 +44,7 @@ export function generateVirtualElement(mousePosition) {
   };
 }
 export function useMouseTracker() {
-  const svgRef = React.useContext(SvgContext);
+  const svgRef = useSvgRef();
 
   // Use a ref to avoid rerendering on every mousemove event.
   const [mousePosition, setMousePosition] = React.useState(null);
@@ -84,12 +84,6 @@ export function getTooltipHasData(trigger, displayedData) {
   const hasAxisYData = displayedData.y !== null;
   return hasAxisXData || hasAxisYData;
 }
-export function isCartesianSeriesType(seriesType) {
-  return ['bar', 'line', 'scatter'].includes(seriesType);
-}
-export function isCartesianSeries(series) {
-  return isCartesianSeriesType(series.type);
-}
 export function utcFormatter(v) {
   if (v instanceof Date) {
     return v.toUTCString();