@mui/x-charts 7.6.1 → 7.7.0

package/modern/context/HighlightedProvider/HighlightedProvider.js

@@ -47,18 +47,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: createIsHighlighted(highlightScope, highlightedItem),
-      isFaded: createIsFaded(highlightScope, highlightedItem)
+      isInitialized: true,
+      data: {
+        highlightScope,
+        highlightedItem,
+        setHighlighted: itemData => {
+          setHighlightedItem(itemData);
+          onHighlightChange?.(itemData);
+        },
+        clearHighlighted: () => {
+          setHighlightedItem(null);
+          onHighlightChange?.(null);
+        },
+        isHighlighted: createIsHighlighted(highlightScope, highlightedItem),
+        isFaded: createIsFaded(highlightScope, highlightedItem)
+      }
     };
   }, [highlightedItem, highlightScope, setHighlightedItem, onHighlightChange]);
   return /*#__PURE__*/_jsx(HighlightedContext.Provider, {

package/modern/context/HighlightedProvider/useHighlighted.js

@@ -9,9 +9,12 @@ import { HighlightedContext } from './HighlightedContext';
  * @returns {HighlightedState} the state of the chart
  */
 export function useHighlighted() {
-  const highlighted = React.useContext(HighlightedContext);
-  if (highlighted === undefined) {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(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/modern/context/HighlightedProvider/useItemHighlighted.js

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { HighlightedContext } from './HighlightedContext';
+import { useHighlighted } from './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.
@@ -10,10 +9,7 @@ import { HighlightedContext } from './HighlightedContext';
  * @returns {ItemHighlightedState} the state of the item
  */
 export function useItemHighlighted(item) {
-  const highlighted = React.useContext(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 = useHighlighted();
   if (!item) {
     return {
       isHighlighted: false,

package/modern/context/SeriesContextProvider.js

@@ -1,24 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
-import barSeriesFormatter from '../BarChart/formatter';
-import scatterSeriesFormatter from '../ScatterChart/formatter';
-import lineSeriesFormatter from '../LineChart/formatter';
-import pieSeriesFormatter from '../PieChart/formatter';
 import { defaultizeColor } from '../internals/defaultizeColor';
 import { blueberryTwilightPalette } from '../colorPalettes';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const SeriesContext = /*#__PURE__*/React.createContext({});
+export const SeriesContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {}
+});
 if (process.env.NODE_ENV !== 'production') {
   SeriesContext.displayName = 'SeriesContext';
 }
-const seriesTypeFormatter = {
-  bar: barSeriesFormatter,
-  scatter: scatterSeriesFormatter,
-  line: lineSeriesFormatter,
-  pie: pieSeriesFormatter
-};
-
 /**
  * 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
@@ -27,7 +19,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) => {
@@ -51,9 +43,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;
@@ -63,10 +56,14 @@ function SeriesContextProvider(props) {
     series,
     dataset,
     colors = blueberryTwilightPalette,
+    seriesFormatters,
     children
   } = props;
   const theme = 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__*/_jsx(SeriesContext.Provider, {
     value: formattedSeries,
     children: children

package/modern/context/context.types.js

@@ -0,0 +1 @@
+export {};

package/modern/hooks/index.js

@@ -1,5 +1,6 @@
 export * from './useDrawingArea';
 export * from './useChartId';
 export * from './useScale';
+export * from './useColorScale';
 export * from './useSvgRef';
 export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from './useSeries';

package/modern/hooks/useColor.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ColorContext } from '../context/ColorProvider';
+export function useColorProcessor(seriesType) {
+  const colorProcessors = React.useContext(ColorContext);
+  if (!seriesType) {
+    return colorProcessors;
+  }
+  return colorProcessors[seriesType];
+}

package/modern/hooks/useColorScale.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { ZAxisContext } from '../context/ZAxisContextProvider';
+export function useXColorScale(identifier) {
+  const {
+    xAxis,
+    xAxisIds
+  } = React.useContext(CartesianContext);
+  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
+  return xAxis[id].colorScale;
+}
+export function useYColorScale(identifier) {
+  const {
+    yAxis,
+    yAxisIds
+  } = React.useContext(CartesianContext);
+  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
+  return yAxis[id].colorScale;
+}
+export function useZColorScale(identifier) {
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(ZAxisContext);
+  const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
+  return zAxis[id]?.colorScale;
+}

package/modern/hooks/useInteractionItemProps.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
-import { HighlightedContext } from '../context';
+import { useHighlighted } from '../context';
 export const useInteractionItemProps = skip => {
   const {
     dispatch: dispatchInteraction
@@ -8,7 +8,7 @@ export const useInteractionItemProps = skip => {
   const {
     setHighlighted,
     clearHighlighted
-  } = React.useContext(HighlightedContext);
+  } = useHighlighted();
   if (skip) {
     return () => ({});
   }

package/modern/hooks/useReducedMotion.js

@@ -11,6 +11,13 @@ export const useReducedMotion = () => {
   // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13
 
   useIsomorphicLayoutEffect(() => {
+    if (!window.matchMedia) {
+      // skip animation in environments where `window.matchMedia` would not be available (i.e. test/jsdom)
+      Globals.assign({
+        skipAnimation: true
+      });
+      return () => {};
+    }
     const mql = window.matchMedia('(prefers-reduced-motion)');
     const handleMediaChange = e => {
       Globals.assign({

package/modern/hooks/useSeries.js

@@ -8,11 +8,14 @@ import { SeriesContext } from '../context/SeriesContextProvider';
  * @returns FormattedSeries series
  */
 export function useSeries() {
-  const series = React.useContext(SeriesContext);
-  if (series === undefined) {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(SeriesContext);
+  if (!isInitialized) {
     throw new Error(['MUI X: Could not find the series ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return series;
+  return data;
 }
 
 /**

package/modern/hooks/useSvgRef.js

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { SvgContext } from '../context/DrawingProvider';
 export function useSvgRef() {
-  const svgRef = React.useContext(SvgContext);
-  if (svgRef === undefined) {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(SvgContext);
+  if (!isInitialized) {
     throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return svgRef;
+  return data;
 }

package/modern/index.js

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

package/modern/internals/configInit.js

@@ -0,0 +1,20 @@
+let instance;
+class CartesianSeriesTypes {
+  constructor() {
+    this.types = new Set();
+    if (instance) {
+      throw new Error('You can only create one instance!');
+    }
+    instance = this.types;
+  }
+  addType(value) {
+    this.types.add(value);
+  }
+  getTypes() {
+    return this.types;
+  }
+}
+export const cartesianSeriesTypes = new CartesianSeriesTypes();
+cartesianSeriesTypes.addType('bar');
+cartesianSeriesTypes.addType('line');
+cartesianSeriesTypes.addType('scatter');

package/modern/internals/defaultizeValueFormatter.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-function defaultizeValueFormatter(series, defaultValueFormatter) {
+export function defaultizeValueFormatter(series, defaultValueFormatter) {
   const defaultizedSeries = {};
   Object.keys(series).forEach(seriesId => {
     defaultizedSeries[seriesId] = _extends({}, series[seriesId], {
@@ -7,5 +7,4 @@ function defaultizeValueFormatter(series, defaultValueFormatter) {
     });
   });
   return defaultizedSeries;
-}
-export default defaultizeValueFormatter;
+}

package/modern/internals/index.js

@@ -0,0 +1,27 @@
+// Components
+export * from './components/ChartsAxesGradients';
+export * from '../ResponsiveChartContainer/useChartContainerDimensions';
+export * from '../ResponsiveChartContainer/ResizableContainer';
+
+// hooks
+export { useReducedMotion } from '../hooks/useReducedMotion';
+export { useSeries } from '../hooks/useSeries';
+
+// utils
+export * from './defaultizeValueFormatter';
+export * from './configInit';
+
+// contexts
+
+export * from '../context/CartesianContextProvider';
+export * from '../context/DrawingProvider';
+export * from '../context/InteractionProvider';
+export * from '../context/SeriesContextProvider';
+export * from '../context/ZAxisContextProvider';
+
+// series configuration
+export * from '../models/seriesType/config';
+export * from '../models/seriesType/common';
+export * from '../models/helpers';
+export * from '../models/z-axis';
+export * from '../models/axis';

package/modern/internals/isCartesian.js

@@ -0,0 +1,7 @@
+import { cartesianSeriesTypes } from './configInit';
+export function isCartesianSeriesType(seriesType) {
+  return cartesianSeriesTypes.getTypes().has(seriesType);
+}
+export function isCartesianSeries(series) {
+  return isCartesianSeriesType(series.type);
+}

package/modern/internals/warning.js

@@ -0,0 +1,13 @@
+export function buildWarning(message, gravity = 'warning') {
+  let alreadyWarned = false;
+  return (...args) => {
+    if (!alreadyWarned) {
+      alreadyWarned = true;
+      if (gravity === 'error') {
+        console.error(message(...args));
+      } else {
+        console.warn(message(...args));
+      }
+    }
+  };
+}

package/modern/models/index.js

@@ -1,4 +1,5 @@
 export * from './seriesType';
 export * from './layout';
 export * from './stacking';
+export * from './plugin';
 export {};

package/modern/models/plugin.js

@@ -0,0 +1 @@
+export {};

package/modern/models/seriesType/index.js

@@ -1,7 +1,13 @@
+// Series definition
+
+// item identifier
+
 export * from './line';
 export * from './bar';
 export * from './scatter';
 export * from './pie';
+// Helpers
+
 export function isDefaultizedBarSeries(series) {
   return series.type === 'bar';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.6.1",
+  "version": "7.7.0",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -29,7 +29,7 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
+    "@babel/runtime": "^7.24.7",
     "@mui/base": "^5.0.0-beta.40",
     "@mui/system": "^5.15.15",
     "@mui/utils": "^5.15.14",

package/themeAugmentation/components.d.ts

@@ -1,9 +1,9 @@
 import { ComponentsProps, ComponentsOverrides } from '@mui/material/styles';
 
-export interface ChartsComponents {
+export interface ChartsComponents<Theme = unknown> {
   MuiChartsAxis?: {
     defaultProps?: ComponentsProps['MuiChartsAxis'];
-    styleOverrides?: ComponentsOverrides['MuiChartsAxis'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiChartsAxis'];
   };
   MuiChartsXAxis?: {
     defaultProps?: ComponentsProps['MuiChartsXAxis'];
@@ -13,22 +13,22 @@ export interface ChartsComponents {
   };
   MuiChartsAxisHighlight?: {
     defaultProps?: ComponentsProps['MuiChartsAxisHighlight'];
-    styleOverrides?: ComponentsOverrides['MuiChartsAxisHighlight'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiChartsAxisHighlight'];
   };
   MuiChartsClipPath?: {
     defaultProps?: ComponentsProps['MuiChartsClipPath'];
   };
   MuiChartsGrid?: {
     defaultProps?: ComponentsProps['MuiChartsGrid'];
-    styleOverrides?: ComponentsOverrides['MuiChartsGrid'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiChartsGrid'];
   };
   MuiChartsLegend?: {
     defaultProps?: ComponentsProps['MuiChartsLegend'];
-    styleOverrides?: ComponentsOverrides['MuiChartsLegend'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiChartsLegend'];
   };
   MuiChartsTooltip?: {
     defaultProps?: ComponentsProps['MuiChartsTooltip'];
-    styleOverrides?: ComponentsOverrides['MuiChartsTooltip'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiChartsTooltip'];
   };
   MuiChartsSurface?: {
     defaultProps?: ComponentsProps['MuiChartsSurface'];
@@ -38,26 +38,26 @@ export interface ChartsComponents {
   };
   MuiBarElement?: {
     defaultProps?: ComponentsProps['MuiBarElement'];
-    styleOverrides?: ComponentsOverrides['MuiBarElement'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiBarElement'];
   };
   MuiBarLabel?: {
     defaultProps?: ComponentsProps['MuiBarLabel'];
-    styleOverrides?: ComponentsOverrides['MuiBarLabel'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiBarLabel'];
   };
   MuiLineChart?: {
     defaultProps?: ComponentsProps['MuiLineChart'];
   };
   MuiAreaElement?: {
     defaultProps?: ComponentsProps['MuiAreaElement'];
-    styleOverrides?: ComponentsOverrides['MuiAreaElement'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiAreaElement'];
   };
   MuiLineElement?: {
     defaultProps?: ComponentsProps['MuiLineElement'];
-    styleOverrides?: ComponentsOverrides['MuiLineElement'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiLineElement'];
   };
   MuiMarkElement?: {
     defaultProps?: ComponentsProps['MuiMarkElement'];
-    styleOverrides?: ComponentsOverrides['MuiMarkElement'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiMarkElement'];
   };
   MuiScatterChart?: {
     defaultProps?: ComponentsProps['MuiScatterChart'];
@@ -68,5 +68,5 @@ export interface ChartsComponents {
 }
 
 declare module '@mui/material/styles' {
-  interface Components extends ChartsComponents {}
+  interface Components<Theme = unknown> extends ChartsComponents<Theme> {}
 }

package/esm/internals/colorGetter.js

@@ -1,22 +0,0 @@
-import getBarColor from '../BarChart/getColor';
-import getLineColor from '../LineChart/getColor';
-import getScatterColor from '../ScatterChart/getColor';
-import getPieColor from '../PieChart/getColor';
-function getColor(series, xAxis, yAxis, zAxis) {
-  if (xAxis !== undefined && yAxis !== undefined) {
-    if (series.type === 'bar') {
-      return getBarColor(series, xAxis, yAxis);
-    }
-    if (series.type === 'line') {
-      return getLineColor(series, xAxis, yAxis);
-    }
-    if (series.type === 'scatter') {
-      return getScatterColor(series, xAxis, yAxis, zAxis);
-    }
-  }
-  if (series.type === 'pie') {
-    return getPieColor(series);
-  }
-  throw Error(`MUI X Charts: getColor called with unexpected arguments for series with id "${series.id}"`);
-}
-export default getColor;

package/internals/colorGetter.d.ts

@@ -1,7 +0,0 @@
-import { DefaultizedBarSeriesType, DefaultizedLineSeriesType, DefaultizedPieSeriesType, DefaultizedScatterSeriesType } from '../models';
-import { AxisDefaultized } from '../models/axis';
-import { ZAxisDefaultized } from '../models/z-axis';
-declare function getColor(series: DefaultizedPieSeriesType): (dataIndex: number) => string;
-declare function getColor(series: DefaultizedBarSeriesType | DefaultizedLineSeriesType, xAxis: AxisDefaultized, yAxis: AxisDefaultized): (dataIndex: number) => string;
-declare function getColor(series: DefaultizedScatterSeriesType, xAxis: AxisDefaultized, yAxis: AxisDefaultized, zAxis?: ZAxisDefaultized): (dataIndex: number) => string;
-export default getColor;

package/internals/colorGetter.js

@@ -1,29 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _getColor = _interopRequireDefault(require("../BarChart/getColor"));
-var _getColor2 = _interopRequireDefault(require("../LineChart/getColor"));
-var _getColor3 = _interopRequireDefault(require("../ScatterChart/getColor"));
-var _getColor4 = _interopRequireDefault(require("../PieChart/getColor"));
-function getColor(series, xAxis, yAxis, zAxis) {
-  if (xAxis !== undefined && yAxis !== undefined) {
-    if (series.type === 'bar') {
-      return (0, _getColor.default)(series, xAxis, yAxis);
-    }
-    if (series.type === 'line') {
-      return (0, _getColor2.default)(series, xAxis, yAxis);
-    }
-    if (series.type === 'scatter') {
-      return (0, _getColor3.default)(series, xAxis, yAxis, zAxis);
-    }
-  }
-  if (series.type === 'pie') {
-    return (0, _getColor4.default)(series);
-  }
-  throw Error(`MUI X Charts: getColor called with unexpected arguments for series with id "${series.id}"`);
-}
-var _default = exports.default = getColor;

package/modern/internals/colorGetter.js

@@ -1,22 +0,0 @@
-import getBarColor from '../BarChart/getColor';
-import getLineColor from '../LineChart/getColor';
-import getScatterColor from '../ScatterChart/getColor';
-import getPieColor from '../PieChart/getColor';
-function getColor(series, xAxis, yAxis, zAxis) {
-  if (xAxis !== undefined && yAxis !== undefined) {
-    if (series.type === 'bar') {
-      return getBarColor(series, xAxis, yAxis);
-    }
-    if (series.type === 'line') {
-      return getLineColor(series, xAxis, yAxis);
-    }
-    if (series.type === 'scatter') {
-      return getScatterColor(series, xAxis, yAxis, zAxis);
-    }
-  }
-  if (series.type === 'pie') {
-    return getPieColor(series);
-  }
-  throw Error(`MUI X Charts: getColor called with unexpected arguments for series with id "${series.id}"`);
-}
-export default getColor;