@mui/x-charts 7.9.0 → 7.11.0

package/esm/BarChart/useBarChartProps.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 /**
@@ -10,36 +12,38 @@ import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
  */
 export const useBarChartProps = props => {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    sx,
-    tooltip,
-    onAxisClick,
-    axisHighlight,
-    legend,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    children,
-    slots,
-    slotProps,
-    skipAnimation,
-    loading,
-    layout,
-    onItemClick,
-    highlightedItem,
-    onHighlightChange,
-    borderRadius,
-    barLabel
-  } = props;
+      xAxis,
+      yAxis,
+      series,
+      width,
+      height,
+      margin,
+      colors,
+      dataset,
+      sx,
+      tooltip,
+      onAxisClick,
+      axisHighlight,
+      legend,
+      grid,
+      topAxis,
+      leftAxis,
+      rightAxis,
+      bottomAxis,
+      children,
+      slots,
+      slotProps,
+      skipAnimation,
+      loading,
+      layout,
+      onItemClick,
+      highlightedItem,
+      onHighlightChange,
+      borderRadius,
+      barLabel,
+      className
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
   const clipPathId = `${id}-clip-path`;
   const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
@@ -49,7 +53,7 @@ export const useBarChartProps = props => {
       length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
     }, (_, index) => index)
   };
-  const chartContainerProps = {
+  const chartContainerProps = _extends({}, rest, {
     series: series.map(s => _extends({
       type: 'bar'
     }, s, {
@@ -69,8 +73,9 @@ export const useBarChartProps = props => {
     sx,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick
-  };
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    className
+  });
   const barPlotProps = {
     onItemClick,
     slots,

package/esm/ChartContainer/ChartContainer.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DrawingProvider } from '../context/DrawingProvider';
@@ -8,78 +9,36 @@ import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
 import { HighlightedProvider, ZAxisContextProvider } from '../context';
-import { useChartContainerHooks } from './useChartContainerHooks';
+import { useChartContainerProps } from './useChartContainerProps';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
-    width,
-    height,
-    series,
-    margin,
-    xAxis,
-    yAxis,
-    zAxis,
-    colors,
-    dataset,
-    sx,
-    title,
-    desc,
-    disableAxisListener,
-    highlightedItem,
-    onHighlightChange,
-    plugins,
-    children
-  } = props;
-  const {
-    svgRef,
-    handleRef,
-    xExtremumGetters,
-    yExtremumGetters,
-    seriesFormatters,
-    colorProcessors
-  } = useChartContainerHooks(ref, plugins);
-  return /*#__PURE__*/_jsx(DrawingProvider, {
-    width: width,
-    height: height,
-    margin: margin,
-    svgRef: svgRef,
-    children: /*#__PURE__*/_jsx(ColorProvider, {
-      colorProcessors: colorProcessors,
-      children: /*#__PURE__*/_jsx(SeriesContextProvider, {
-        series: series,
-        colors: colors,
-        dataset: dataset,
-        seriesFormatters: seriesFormatters,
-        children: /*#__PURE__*/_jsx(CartesianContextProvider, {
-          xAxis: xAxis,
-          yAxis: yAxis,
-          dataset: dataset,
-          xExtremumGetters: xExtremumGetters,
-          yExtremumGetters: yExtremumGetters,
-          children: /*#__PURE__*/_jsx(ZAxisContextProvider, {
-            zAxis: zAxis,
-            dataset: dataset,
+    children,
+    drawingProviderProps,
+    colorProviderProps,
+    seriesContextProps,
+    cartesianContextProps,
+    zAxisContextProps,
+    highlightedProviderProps,
+    chartsSurfaceProps
+  } = useChartContainerProps(props, ref);
+  return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
+    children: /*#__PURE__*/_jsx(ColorProvider, _extends({}, colorProviderProps, {
+      children: /*#__PURE__*/_jsx(SeriesContextProvider, _extends({}, seriesContextProps, {
+        children: /*#__PURE__*/_jsx(CartesianContextProvider, _extends({}, cartesianContextProps, {
+          children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
             children: /*#__PURE__*/_jsx(InteractionProvider, {
-              children: /*#__PURE__*/_jsx(HighlightedProvider, {
-                highlightedItem: highlightedItem,
-                onHighlightChange: onHighlightChange,
-                children: /*#__PURE__*/_jsxs(ChartsSurface, {
-                  width: width,
-                  height: height,
-                  ref: handleRef,
-                  sx: sx,
-                  title: title,
-                  desc: desc,
-                  disableAxisListener: disableAxisListener,
+              children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
+                children: /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
                   children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), children]
-                })
-              })
+                }))
+              }))
             })
-          })
-        })
-      })
-    })
-  });
+          }))
+        }))
+      }))
+    }))
+  }));
 });
 process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/ChartContainer/useChartContainerHooks.js

@@ -4,7 +4,7 @@ import { usePluginsMerge } from './usePluginsMerge';
 import { useReducedMotion } from '../hooks/useReducedMotion';
 export const useChartContainerHooks = (ref, plugins) => {
   const svgRef = React.useRef(null);
-  const handleRef = useForkRef(ref, svgRef);
+  const chartSurfaceRef = useForkRef(ref, svgRef);
   const {
     xExtremumGetters,
     yExtremumGetters,
@@ -15,7 +15,7 @@ export const useChartContainerHooks = (ref, plugins) => {
 
   return {
     svgRef,
-    handleRef,
+    chartSurfaceRef,
     xExtremumGetters,
     yExtremumGetters,
     seriesFormatters,

package/esm/ChartContainer/useChartContainerProps.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children"];
+import { useChartContainerHooks } from './useChartContainerHooks';
+import { useDefaultizeAxis } from './useDefaultizeAxis';
+export const useChartContainerProps = (props, ref) => {
+  const {
+      width,
+      height,
+      series,
+      margin,
+      xAxis,
+      yAxis,
+      zAxis,
+      colors,
+      dataset,
+      sx,
+      title,
+      desc,
+      disableAxisListener,
+      highlightedItem,
+      onHighlightChange,
+      plugins,
+      children
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    svgRef,
+    chartSurfaceRef,
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
+  } = useChartContainerHooks(ref, plugins);
+  const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis);
+  const drawingProviderProps = {
+    width,
+    height,
+    margin,
+    svgRef
+  };
+  const colorProviderProps = {
+    colorProcessors
+  };
+  const seriesContextProps = {
+    series,
+    colors,
+    dataset,
+    seriesFormatters
+  };
+  const cartesianContextProps = {
+    xAxis: defaultizedXAxis,
+    yAxis: defaultizedYAxis,
+    dataset,
+    xExtremumGetters,
+    yExtremumGetters
+  };
+  const zAxisContextProps = {
+    zAxis,
+    dataset
+  };
+  const highlightedProviderProps = {
+    highlightedItem,
+    onHighlightChange
+  };
+  const chartsSurfaceProps = _extends({}, other, {
+    width,
+    height,
+    ref: chartSurfaceRef,
+    sx,
+    title,
+    desc,
+    disableAxisListener
+  });
+  return {
+    children,
+    drawingProviderProps,
+    colorProviderProps,
+    seriesContextProps,
+    cartesianContextProps,
+    zAxisContextProps,
+    highlightedProviderProps,
+    chartsSurfaceProps,
+    xAxis: defaultizedXAxis,
+    yAxis: defaultizedYAxis
+  };
+};

package/esm/ChartContainer/useDefaultizeAxis.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+const defaultizeAxis = (inAxis, axisName) => {
+  const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
+  return [...(inAxis?.map((axis, index) => _extends({
+    id: `defaultized-${axisName}-axis-${index}`
+  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
+    id
+  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
+    id: DEFAULT_AXIS_KEY,
+    scaleType: 'linear'
+  }] : [])];
+};
+export const useDefaultizeAxis = (inXAxis, inYAxis) => {
+  const xAxis = React.useMemo(() => defaultizeAxis(inXAxis, 'x'), [inXAxis]);
+  const yAxis = React.useMemo(() => defaultizeAxis(inYAxis, 'y'), [inYAxis]);
+  return [xAxis, yAxis];
+};