@mui/x-charts 7.22.3 → 8.0.0-alpha.1

package/modern/{ResponsiveChartContainer/ResponsiveChartContainer.js → context/ChartDataProvider/ChartDataProvider.js}

@@ -3,27 +3,58 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { ChartContainer } from "../ChartContainer/index.js";
-import { ResizableContainer } from "./ResizableContainer.js";
-import { useResponsiveChartContainerProps } from "./useResponsiveChartContainerProps.js";
+import { DrawingAreaProvider } from "../DrawingAreaProvider/index.js";
+import { SeriesProvider } from "../SeriesProvider/index.js";
+import { InteractionProvider } from "../InteractionProvider.js";
+import { CartesianProvider } from "../CartesianProvider/index.js";
+import { PluginProvider } from "../PluginProvider/index.js";
+import { useChartDataProviderProps } from "./useChartDataProviderProps.js";
+import { AnimationProvider } from "../AnimationProvider/index.js";
+import { ZAxisContextProvider } from "../ZAxisContextProvider.js";
+import { HighlightedProvider } from "../HighlightedProvider/index.js";
+import { SizeProvider } from "../SizeProvider/index.js";
+import { SvgRefProvider } from "../SvgRefProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
+function ChartDataProvider(props) {
   const {
-    hasIntrinsicSize,
-    chartContainerProps,
-    resizableChartContainerProps
-  } = useResponsiveChartContainerProps(props, ref);
-  return /*#__PURE__*/_jsx(ResizableContainer, _extends({}, resizableChartContainerProps, {
-    children: hasIntrinsicSize ? /*#__PURE__*/_jsx(ChartContainer, _extends({}, chartContainerProps)) : null
+    children,
+    drawingAreaProviderProps,
+    seriesProviderProps,
+    cartesianProviderProps,
+    zAxisContextProps,
+    highlightedProviderProps,
+    pluginProviderProps,
+    animationProviderProps,
+    sizeProviderProps
+  } = useChartDataProviderProps(props);
+  return /*#__PURE__*/_jsx(SizeProvider, _extends({}, sizeProviderProps, {
+    children: /*#__PURE__*/_jsx(DrawingAreaProvider, _extends({}, drawingAreaProviderProps, {
+      children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
+        children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
+          children: /*#__PURE__*/_jsx(CartesianProvider, _extends({}, cartesianProviderProps, {
+            children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
+              children: /*#__PURE__*/_jsx(InteractionProvider, {
+                children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
+                  children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
+                    children: /*#__PURE__*/_jsx(SvgRefProvider, {
+                      children: children
+                    })
+                  }))
+                }))
+              })
+            }))
+          }))
+        }))
+      }))
+    }))
   }));
-});
-process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
+}
+process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
-  className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
    * @default blueberryTwilightPalette
@@ -33,13 +64,6 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
-  desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -74,16 +98,6 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * If not provided, the container supports line, bar, scatter and pie charts.
    */
   plugins: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
@@ -95,14 +109,6 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: PropTypes.bool,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  title: PropTypes.string,
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -241,4 +247,4 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     min: PropTypes.number
   }))
 } : void 0;
-export { ResponsiveChartContainer };
+export { ChartDataProvider };

package/modern/context/ChartDataProvider/index.js

@@ -0,0 +1 @@
+export * from "./ChartDataProvider.js";

package/modern/context/ChartDataProvider/useChartDataProviderProps.js

@@ -0,0 +1,66 @@
+'use client';
+
+import { useDefaultizeAxis } from "./useDefaultizeAxis.js";
+export const useChartDataProviderProps = props => {
+  const {
+    width,
+    height,
+    series,
+    margin,
+    xAxis,
+    yAxis,
+    zAxis,
+    colors,
+    dataset,
+    highlightedItem,
+    onHighlightChange,
+    plugins,
+    children,
+    skipAnimation
+  } = props;
+  const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis, dataset);
+  const drawingAreaProviderProps = {
+    margin
+  };
+  const animationProviderProps = {
+    skipAnimation
+  };
+  const pluginProviderProps = {
+    plugins
+  };
+  const seriesProviderProps = {
+    series,
+    colors,
+    dataset
+  };
+  const cartesianProviderProps = {
+    xAxis: defaultizedXAxis,
+    yAxis: defaultizedYAxis,
+    dataset
+  };
+  const zAxisContextProps = {
+    zAxis,
+    dataset
+  };
+  const highlightedProviderProps = {
+    highlightedItem,
+    onHighlightChange
+  };
+  const sizeProviderProps = {
+    width,
+    height
+  };
+  return {
+    children,
+    drawingAreaProviderProps,
+    seriesProviderProps,
+    cartesianProviderProps,
+    zAxisContextProps,
+    highlightedProviderProps,
+    pluginProviderProps,
+    animationProviderProps,
+    xAxis: defaultizedXAxis,
+    yAxis: defaultizedYAxis,
+    sizeProviderProps
+  };
+};

package/{ChartContainer → modern/context/ChartDataProvider}/useDefaultizeAxis.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../../constants/index.js";
 const defaultizeAxis = (inAxis, dataset, axisName) => {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
   return [...(inAxis?.map((axis, index) => _extends({

package/modern/context/DrawingAreaProvider/DrawingArea.types.js

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

package/modern/context/DrawingAreaProvider/DrawingAreaContext.js

@@ -0,0 +1,16 @@
+'use client';
+
+import * as React from 'react';
+export const DrawingAreaContext = /*#__PURE__*/React.createContext({
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  height: 300,
+  width: 400,
+  chartId: '',
+  isPointInside: () => false
+});
+if (process.env.NODE_ENV !== 'production') {
+  DrawingAreaContext.displayName = 'DrawingContext';
+}

package/{context/DrawingProvider.js → modern/context/DrawingAreaProvider/DrawingAreaProvider.js}

@@ -3,42 +3,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useId from '@mui/utils/useId';
-import useChartDimensions from "../hooks/useChartDimensions.js";
-
-/**
- * Defines the area in which it is possible to draw the charts.
- */
+import useChartDimensions from "../../hooks/useChartDimensions.js";
+import { DrawingAreaContext } from "./DrawingAreaContext.js";
+import { useSize } from "../SizeProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DrawingContext = /*#__PURE__*/React.createContext({
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  height: 300,
-  width: 400,
-  chartId: '',
-  isPointInside: () => false
-});
-if (process.env.NODE_ENV !== 'production') {
-  DrawingContext.displayName = 'DrawingContext';
-}
-export const SvgContext = /*#__PURE__*/React.createContext({
-  isInitialized: false,
-  data: {
-    current: null
-  }
-});
-if (process.env.NODE_ENV !== 'production') {
-  SvgContext.displayName = 'SvgContext';
-}
-export function DrawingProvider(props) {
+export function DrawingAreaProvider(props) {
   const {
-    width,
-    height,
     margin,
-    svgRef,
     children
   } = props;
+  const {
+    width,
+    height
+  } = useSize();
   const drawingArea = useChartDimensions(width, height, margin);
   const chartId = useId();
   const isPointInside = React.useCallback(({
@@ -64,15 +41,8 @@ export function DrawingProvider(props) {
   }, drawingArea, {
     isPointInside
   }), [chartId, drawingArea, isPointInside]);
-  const refValue = React.useMemo(() => ({
-    isInitialized: true,
-    data: svgRef
-  }), [svgRef]);
-  return /*#__PURE__*/_jsx(SvgContext.Provider, {
-    value: refValue,
-    children: /*#__PURE__*/_jsx(DrawingContext.Provider, {
-      value: value,
-      children: children
-    })
+  return /*#__PURE__*/_jsx(DrawingAreaContext.Provider, {
+    value: value,
+    children: children
   });
 }

package/modern/context/DrawingAreaProvider/index.js

@@ -0,0 +1,3 @@
+export * from "./DrawingArea.types.js";
+export * from "./DrawingAreaProvider.js";
+export * from "./DrawingAreaContext.js";

package/modern/context/HighlightedProvider/HighlightedProvider.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["highlighted", "faded"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useControlled from '@mui/utils/useControlled';
@@ -11,18 +8,6 @@ import { createIsFaded } from "./createIsFaded.js";
 import { createIsHighlighted } from "./createIsHighlighted.js";
 import { useSeries } from "../../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const mergeDeprecatedOptions = options => {
-  const _ref = options ?? {},
-    {
-      highlighted,
-      faded
-    } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return _extends({
-    highlight: highlighted,
-    fade: faded
-  }, other);
-};
 function HighlightedProvider({
   children,
   highlightedItem: highlightedItemProps,
@@ -41,7 +26,7 @@ function HighlightedProvider({
       const seriesData = series[seriesType];
       Object.keys(seriesData?.series ?? {}).forEach(seriesId => {
         const seriesItem = seriesData?.series[seriesId];
-        map.set(seriesId, mergeDeprecatedOptions(seriesItem?.highlightScope));
+        map.set(seriesId, seriesItem?.highlightScope);
       });
     });
     return map;

package/modern/context/InteractionProvider.js

@@ -1,77 +1,21 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useCharts } from "../internals/useCharts.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const InteractionContext = /*#__PURE__*/React.createContext({
-  item: null,
-  axis: {
-    x: null,
-    y: null
-  },
-  useVoronoiInteraction: false,
-  dispatch: () => null
-});
+export const ChartsContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
-  InteractionContext.displayName = 'InteractionContext';
+  ChartsContext.displayName = 'ChartsContext';
 }
-const dataReducer = (prevState, action) => {
-  switch (action.type) {
-    case 'enterItem':
-      return _extends({}, prevState, {
-        item: action.data
-      });
-    case 'exitChart':
-      if (prevState.item === null && prevState.axis.x === null && prevState.axis.y === null) {
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        axis: {
-          x: null,
-          y: null
-        },
-        item: null
-      });
-    case 'updateVoronoiUsage':
-      return _extends({}, prevState, {
-        useVoronoiInteraction: action.useVoronoiInteraction
-      });
-    case 'leaveItem':
-      if (prevState.item === null || Object.keys(action.data).some(key => action.data[key] !== prevState.item[key])) {
-        // The item is already something else
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        item: null
-      });
-    case 'updateAxis':
-      if (action.data.x === prevState.axis.x && action.data.y === prevState.axis.y) {
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        axis: action.data
-      });
-    default:
-      return prevState;
-  }
-};
 function InteractionProvider(props) {
   const {
     children
   } = props;
-  const [data, dispatch] = React.useReducer(dataReducer, {
-    item: null,
-    axis: {
-      x: null,
-      y: null
-    },
-    useVoronoiInteraction: false
-  });
-  const value = React.useMemo(() => _extends({}, data, {
-    dispatch
-  }), [data]);
-  return /*#__PURE__*/_jsx(InteractionContext.Provider, {
-    value: value,
+  const {
+    contextValue
+  } = useCharts();
+  return /*#__PURE__*/_jsx(ChartsContext.Provider, {
+    value: contextValue,
     children: children
   });
 }

package/modern/context/InteractionSelectors.js

@@ -0,0 +1,12 @@
+import { createSelector } from "../internals/plugins/utils/selectors.js";
+function selectInteraction(state) {
+  return state.interaction;
+}
+export const selectorChartsInteractionItem = createSelector(selectInteraction, interaction => interaction.item);
+export const selectorChartsInteractionAxis = createSelector(selectInteraction, interaction => interaction.axis);
+export const selectorChartsInteractionXAxis = createSelector(selectInteraction, interaction => interaction.axis.x);
+export const selectorChartsInteractionYAxis = createSelector(selectInteraction, interaction => interaction.axis.y);
+export const selectorChartsInteractionItemIsDefined = createSelector(selectorChartsInteractionItem, item => item !== null);
+export const selectorChartsInteractionXAxisIsDefined = createSelector(selectorChartsInteractionXAxis, x => x !== null);
+export const selectorChartsInteractionYAxisIsDefined = createSelector(selectorChartsInteractionYAxis, y => y !== null);
+export const selectorChartsInteractionIsVoronoiEnabled = createSelector(selectInteraction, interaction => interaction.isVoronoiEnabled);

package/modern/context/SizeProvider/Size.types.js

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

package/modern/context/SizeProvider/SizeContext.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export const SizeContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    hasIntrinsicSize: false,
+    containerRef: null,
+    height: 0,
+    width: 0
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  SizeContext.displayName = 'SizeContext';
+}

package/modern/context/SizeProvider/SizeProvider.js

@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import { SizeContext } from "./SizeContext.js";
+import { useChartContainerDimensions } from "./useChartContainerDimensions.js";
+
+/**
+ * The size provider.
+ *
+ * This differs from the DrawingProvider in that it provides the full size of the container.
+ *
+ * This provider is also responsible for resolving the size of the container before rendering and if the parent size changes.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function SizeProvider(props) {
+  const dimensions = useChartContainerDimensions(props.width, props.height);
+  const value = React.useMemo(() => ({
+    isInitialized: true,
+    data: dimensions
+  }), [dimensions]);
+  return /*#__PURE__*/_jsx(SizeContext.Provider, {
+    value: value,
+    children: props.children
+  });
+}
+export { SizeProvider };

package/modern/context/SizeProvider/index.js

@@ -0,0 +1,4 @@
+export * from "./SizeProvider.js";
+export * from "./SizeContext.js";
+export * from "./useSize.js";
+export * from "./Size.types.js";

package/{ResponsiveChartContainer → modern/context/SizeProvider}/useChartContainerDimensions.js

@@ -1,9 +1,12 @@
 'use client';
 
+/* eslint-disable react-compiler/react-compiler */
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
-export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender) => {
+const MAX_COMPUTE_RUN = 10;
+export const useChartContainerDimensions = (inWidth, inHeight) => {
+  const hasInSize = inWidth !== undefined && inHeight !== undefined;
   const stateRef = React.useRef({
     displayError: false,
     initialCompute: true,
@@ -40,7 +43,7 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
   // https://github.com/mui/mui-x/issues/13477#issuecomment-2336634785
   useEnhancedEffect(() => {
     // computeRun is used to avoid infinite loops.
-    if (!resolveSizeBeforeRender || !stateRef.current.initialCompute || stateRef.current.computeRun > 20) {
+    if (hasInSize || !stateRef.current.initialCompute || stateRef.current.computeRun > MAX_COMPUTE_RUN) {
       return;
     }
     const computedSize = computeSize();
@@ -49,9 +52,9 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
     } else if (stateRef.current.initialCompute) {
       stateRef.current.initialCompute = false;
     }
-  }, [width, height, computeSize, resolveSizeBeforeRender]);
+  }, [width, height, computeSize, hasInSize]);
   useEnhancedEffect(() => {
-    if (inWidth !== undefined && inHeight !== undefined) {
+    if (hasInSize) {
       return () => {};
     }
     computeSize();
@@ -77,7 +80,7 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
         observer.unobserve(elementToObserve);
       }
     };
-  }, [computeSize, inHeight, inWidth]);
+  }, [computeSize, hasInSize]);
   if (process.env.NODE_ENV !== 'production') {
     if (stateRef.current.displayError && inWidth === undefined && width === 0) {
       console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
@@ -88,9 +91,14 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
       stateRef.current.displayError = false;
     }
   }
+  const finalWidth = inWidth ?? width;
+  const finalHeight = inHeight ?? height;
   return {
     containerRef: rootRef,
-    width: inWidth ?? width,
-    height: inHeight ?? height
+    width: finalWidth,
+    height: finalHeight,
+    hasIntrinsicSize: finalWidth > 0 && finalHeight > 0,
+    inWidth,
+    inHeight
   };
 };

package/modern/context/SizeProvider/useSize.js

@@ -0,0 +1,13 @@
+'use client';
+
+import * as React from 'react';
+import { SizeContext } from "./SizeContext.js";
+/**
+ * Returns the size of the chart. And the ref of the container element that the chart is rendered in.
+ */
+export const useSize = () => {
+  const {
+    data
+  } = React.useContext(SizeContext);
+  return data;
+};

package/modern/context/SvgRefProvider/SvgRef.types.js

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

package/modern/context/SvgRefProvider/SvgRefContext.js

@@ -0,0 +1,17 @@
+'use client';
+
+import * as React from 'react';
+export const SvgRefContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    svgRef: {
+      current: null
+    },
+    surfaceRef: {
+      current: null
+    }
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  SvgRefContext.displayName = 'SvgRefContext';
+}

package/modern/context/SvgRefProvider/SvgRefProvider.js

@@ -0,0 +1,24 @@
+'use client';
+
+import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+import { SvgRefContext } from "./SvgRefContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function SvgRefProvider(props) {
+  const {
+    children
+  } = props;
+  const svgRef = React.useRef(null);
+  const surfaceRef = useForkRef(svgRef);
+  const refValue = React.useMemo(() => ({
+    isInitialized: true,
+    data: {
+      svgRef,
+      surfaceRef
+    }
+  }), [svgRef, surfaceRef]);
+  return /*#__PURE__*/_jsx(SvgRefContext.Provider, {
+    value: refValue,
+    children: children
+  });
+}

package/modern/context/SvgRefProvider/index.js

@@ -0,0 +1,4 @@
+export * from "./SvgRef.types.js";
+export * from "./SvgRefProvider.js";
+export * from "./SvgRefContext.js";
+export * from "./useSurfaceRef.js";

package/modern/context/SvgRefProvider/useSurfaceRef.js

@@ -0,0 +1,14 @@
+'use client';
+
+import * as React from 'react';
+import { SvgRefContext } from "./SvgRefContext.js";
+export function useSurfaceRef() {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(SvgRefContext);
+  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 data.surfaceRef;
+}

package/modern/context/index.js

@@ -1,2 +1,3 @@
 export * from "./HighlightedProvider/index.js";
-export { ZAxisContextProvider } from "./ZAxisContextProvider.js";
+export { ZAxisContextProvider } from "./ZAxisContextProvider.js";
+export { ChartDataProvider } from "./ChartDataProvider/index.js";