@mui/x-charts 7.7.0 → 7.7.1

package/context/CartesianProvider/computeValue.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.computeValue = computeValue;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _d3Scale = require("d3-scale");
+var _constants = require("../../constants");
+var _axis = require("../../models/axis");
+var _colorScale = require("../../internals/colorScale");
+var _useTicks = require("../../hooks/useTicks");
+var _getScale = require("../../internals/getScale");
+var _getAxisExtremum = require("./getAxisExtremum");
+const getRange = (drawingArea, axisName, isReverse) => {
+  const range = axisName === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
+  return isReverse ? range.reverse() : range;
+};
+const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
+const DEFAULT_BAR_GAP_RATIO = 0.1;
+function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName) {
+  const DEFAULT_AXIS_KEY = axisName === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
+  const allAxis = [...(inAxis?.map((axis, index) => (0, _extends2.default)({
+    id: `defaultized-${axisName}-axis-${index}`
+  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
+    id
+  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
+    id: DEFAULT_AXIS_KEY,
+    scaleType: 'linear'
+  }] : [])];
+  const completeAxis = {};
+  allAxis.forEach((axis, axisIndex) => {
+    const isDefaultAxis = axisIndex === 0;
+    const [minData, maxData] = (0, _getAxisExtremum.getAxisExtremum)(axis, extremumGetters, isDefaultAxis, formattedSeries);
+    const range = getRange(drawingArea, axisName, axis.reverse);
+    if ((0, _axis.isBandScaleConfig)(axis)) {
+      const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+      const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
+      // Reverse range because ordinal scales are presented from top to bottom on y-axis
+      const scaleRange = axisName === 'x' ? range : [range[1], range[0]];
+      completeAxis[axis.id] = (0, _extends2.default)({
+        categoryGapRatio,
+        barGapRatio
+      }, axis, {
+        scale: (0, _d3Scale.scaleBand)(axis.data, scaleRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
+        tickNumber: axis.data.length,
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
+          values: axis.data
+        }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
+      });
+    }
+    if ((0, _axis.isPointScaleConfig)(axis)) {
+      const scaleRange = axisName === 'x' ? range : [...range].reverse();
+      completeAxis[axis.id] = (0, _extends2.default)({}, axis, {
+        scale: (0, _d3Scale.scalePoint)(axis.data, scaleRange),
+        tickNumber: axis.data.length,
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
+          values: axis.data
+        }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
+      });
+    }
+    if (axis.scaleType === 'band' || axis.scaleType === 'point') {
+      // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
+      return;
+    }
+    const scaleType = axis.scaleType ?? 'linear';
+    const extremums = [axis.min ?? minData, axis.max ?? maxData];
+    const tickNumber = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
+      range,
+      domain: extremums
+    }));
+    const scale = (0, _getScale.getScale)(scaleType, extremums, range).nice(tickNumber);
+    const [minDomain, maxDomain] = scale.domain();
+    const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
+    completeAxis[axis.id] = (0, _extends2.default)({}, axis, {
+      scaleType: scaleType,
+      scale: scale.domain(domain),
+      tickNumber,
+      colorScale: axis.colorMap && (0, _colorScale.getColorScale)(axis.colorMap)
+    });
+  });
+  return {
+    axis: completeAxis,
+    axisIds: allAxis.map(({
+      id
+    }) => id)
+  };
+}

package/context/CartesianProvider/getAxisExtremum.d.ts

@@ -0,0 +1,4 @@
+import { AxisConfig, ExtremumGettersConfig } from '../../models';
+import { ExtremumGetterResult } from '../../models/seriesType/config';
+import { FormattedSeries } from '../SeriesContextProvider';
+export declare const getAxisExtremum: (axis: AxisConfig, getters: ExtremumGettersConfig, isDefaultAxis: boolean, formattedSeries: FormattedSeries) => ExtremumGetterResult;

package/context/CartesianProvider/getAxisExtremum.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAxisExtremum = void 0;
+const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, formattedSeries) => {
+  const getter = getters[chartType];
+  const series = formattedSeries[chartType]?.series ?? {};
+  const [minChartTypeData, maxChartTypeData] = getter?.({
+    series,
+    axis,
+    isDefaultAxis
+  }) ?? [null, null];
+  const [minData, maxData] = acc;
+  if (minData === null || maxData === null) {
+    return [minChartTypeData, maxChartTypeData];
+  }
+  if (minChartTypeData === null || maxChartTypeData === null) {
+    return [minData, maxData];
+  }
+  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+};
+const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries) => {
+  const charTypes = Object.keys(getters);
+  return charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries), [null, null]);
+};
+exports.getAxisExtremum = getAxisExtremum;

package/context/CartesianProvider/index.d.ts

@@ -0,0 +1,9 @@
+import { computeValue } from './computeValue';
+export * from './CartesianProvider';
+export * from './CartesianContext';
+export * from './useCartesianContext';
+declare const cartesianProviderUtils: {
+    computeValue: typeof computeValue;
+    normalizeAxis: <T extends import("../../internals").ChartsAxisProps, R extends import("../../internals").MakeOptional<import("../..").AxisConfig<import("../..").ScaleName, any, T>, "id">>(axis: R[] | undefined, dataset: import("../../internals").DatasetType | undefined, axisName: "x" | "y") => R[] | undefined;
+};
+export { cartesianProviderUtils };

package/context/CartesianProvider/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  cartesianProviderUtils: true
+};
+exports.cartesianProviderUtils = void 0;
+var _computeValue = require("./computeValue");
+var _normalizeAxis = require("./normalizeAxis");
+var _CartesianProvider = require("./CartesianProvider");
+Object.keys(_CartesianProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CartesianProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CartesianProvider[key];
+    }
+  });
+});
+var _CartesianContext = require("./CartesianContext");
+Object.keys(_CartesianContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CartesianContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CartesianContext[key];
+    }
+  });
+});
+var _useCartesianContext = require("./useCartesianContext");
+Object.keys(_useCartesianContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useCartesianContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useCartesianContext[key];
+    }
+  });
+});
+const cartesianProviderUtils = exports.cartesianProviderUtils = {
+  computeValue: _computeValue.computeValue,
+  normalizeAxis: _normalizeAxis.normalizeAxis
+};

package/context/CartesianProvider/normalizeAxis.d.ts

@@ -0,0 +1,5 @@
+import type { AxisConfig, ScaleName } from '../../models';
+import { ChartsAxisProps } from '../../models/axis';
+import { MakeOptional } from '../../models/helpers';
+import { DatasetType } from '../../models/seriesType/config';
+export declare const normalizeAxis: <T extends ChartsAxisProps, R extends MakeOptional<AxisConfig<ScaleName, any, T>, "id">>(axis: R[] | undefined, dataset: DatasetType | undefined, axisName: 'x' | 'y') => R[] | undefined;

package/context/CartesianProvider/normalizeAxis.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeAxis = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const normalizeAxis = (axis, dataset, axisName) => {
+  return axis?.map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw Error(`MUI X Charts: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+    }
+    return (0, _extends2.default)({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  });
+};
+exports.normalizeAxis = normalizeAxis;

package/context/CartesianProvider/useCartesianContext.d.ts

@@ -0,0 +1,2 @@
+import { CartesianContextState } from './CartesianContext';
+export declare const useCartesianContext: () => CartesianContextState;

package/context/CartesianProvider/useCartesianContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCartesianContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _CartesianContext = require("./CartesianContext");
+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 useCartesianContext = () => {
+  const {
+    data
+  } = React.useContext(_CartesianContext.CartesianContext);
+  return data;
+};
+exports.useCartesianContext = useCartesianContext;

package/context/ColorProvider.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ColorProcessorsConfig } from '../models';
-import { ChartSeriesType } from '../internals';
+import { ChartSeriesType } from '../models/seriesType/config';
 export interface ColorProviderProps {
     children: React.ReactNode;
     /**
@@ -8,5 +8,5 @@ export interface ColorProviderProps {
      */
     colorProcessors: ColorProcessorsConfig<ChartSeriesType>;
 }
-export declare const ColorContext: React.Context<ColorProcessorsConfig<keyof import("../internals").ChartsSeriesConfig>>;
+export declare const ColorContext: React.Context<ColorProcessorsConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>>;
 export declare function ColorProvider(props: ColorProviderProps): React.JSX.Element;

package/esm/BarChart/BarChart.js

@@ -1,11 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useId from '@mui/utils/useId';
 import PropTypes from 'prop-types';
 import { BarPlot } from './BarPlot';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
@@ -13,6 +11,7 @@ import { ChartsClipPath } from '../ChartsClipPath';
 import { ChartsGrid } from '../ChartsGrid';
 import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
 import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
+import { useBarChartProps } from './useBarChartProps';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -27,108 +26,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    sx,
-    layout,
-    tooltip,
-    axisHighlight,
-    legend,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    skipAnimation,
-    borderRadius,
-    onItemClick,
-    onAxisClick,
-    children,
-    slots,
-    slotProps,
-    loading,
-    barLabel,
-    highlightedItem,
-    onHighlightChange
-  } = props;
-  const id = useId();
-  const clipPathId = `${id}-clip-path`;
-  const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
-  const defaultAxisConfig = {
-    scaleType: 'band',
-    data: Array.from({
-      length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
-    }, (_, index) => index)
-  };
-  const defaultizedAxisHighlight = _extends({}, hasHorizontalSeries ? {
-    y: 'band'
-  } : {
-    x: 'band'
-  }, axisHighlight);
-  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
-    ref: ref,
-    series: series.map(s => _extends({
-      type: 'bar'
-    }, s, {
-      layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
-    })),
-    width: width,
-    height: height,
-    margin: margin,
-    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [_extends({
-      id: DEFAULT_X_AXIS_KEY
-    }, defaultAxisConfig)]),
-    yAxis: yAxis ?? (hasHorizontalSeries ? [_extends({
-      id: DEFAULT_Y_AXIS_KEY
-    }, defaultAxisConfig)] : undefined),
-    colors: colors,
-    dataset: dataset,
-    sx: sx,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
-    children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
-      onAxisClick: onAxisClick
-    }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
-      vertical: grid.vertical,
-      horizontal: grid.horizontal
-    }), /*#__PURE__*/_jsxs("g", {
-      clipPath: `url(#${clipPathId})`,
-      children: [/*#__PURE__*/_jsx(BarPlot, {
-        slots: slots,
-        slotProps: slotProps,
-        skipAnimation: skipAnimation,
-        onItemClick: onItemClick,
-        borderRadius: borderRadius,
-        barLabel: barLabel
-      }), /*#__PURE__*/_jsx(ChartsOverlay, {
-        loading: loading,
-        slots: slots,
-        slotProps: slotProps
-      })]
-    }), /*#__PURE__*/_jsx(ChartsAxis, {
-      topAxis: topAxis,
-      leftAxis: leftAxis,
-      rightAxis: rightAxis,
-      bottomAxis: bottomAxis,
-      slots: slots,
-      slotProps: slotProps
-    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
-      slots: slots,
-      slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, defaultizedAxisHighlight)), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
-      slots: slots,
-      slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsClipPath, {
-      id: clipPathId
-    }), children]
-  });
+    chartContainerProps,
+    barPlotProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    legendProps,
+    tooltipProps,
+    children
+  } = useBarChartProps(props);
+  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({
+    ref: ref
+  }, chartContainerProps, {
+    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+      children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps))]
+    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+  }));
 });
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/BarChart/BarLabel/BarLabelPlot.js

@@ -2,7 +2,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["bars", "skipAnimation"];
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
 import { BarLabelItem } from './BarLabelItem';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -73,26 +72,4 @@ function BarLabelPlot(props) {
     })))
   });
 }
-process.env.NODE_ENV !== "production" ? BarLabelPlot.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
-  bars: PropTypes.arrayOf(PropTypes.shape({
-    color: PropTypes.string.isRequired,
-    dataIndex: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    layout: PropTypes.oneOf(['horizontal', 'vertical']),
-    maskId: PropTypes.string.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    value: PropTypes.number,
-    width: PropTypes.number.isRequired,
-    x: PropTypes.number.isRequired,
-    xOrigin: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    yOrigin: PropTypes.number.isRequired
-  })).isRequired,
-  skipAnimation: PropTypes.bool
-} : void 0;
 export { BarLabelPlot };

package/esm/BarChart/BarPlot.js

@@ -4,7 +4,7 @@ const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { BarElement } from './BarElement';
 import getColor from './getColor';
 import { useChartId } from '../hooks';
@@ -47,7 +47,7 @@ const useAggregatedData = () => {
     stackingGroups: [],
     seriesOrder: []
   };
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
   const chartId = useChartId();
   const {
     series,

package/esm/BarChart/useBarChartProps.js

@@ -0,0 +1,136 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useId from '@mui/utils/useId';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+
+/**
+ * A helper function that extracts BarChartProps from the input props
+ * and returns an object with props for the children components of BarChart.
+ *
+ * @param props The input props for BarChart
+ * @returns An object with props for the children components of BarChart
+ */
+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;
+  const id = useId();
+  const clipPathId = `${id}-clip-path`;
+  const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
+  const defaultAxisConfig = {
+    scaleType: 'band',
+    data: Array.from({
+      length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
+    }, (_, index) => index)
+  };
+  const chartContainerProps = {
+    series: series.map(s => _extends({
+      type: 'bar'
+    }, s, {
+      layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
+    })),
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [_extends({
+      id: DEFAULT_X_AXIS_KEY
+    }, defaultAxisConfig)]),
+    yAxis: yAxis ?? (hasHorizontalSeries ? [_extends({
+      id: DEFAULT_Y_AXIS_KEY
+    }, defaultAxisConfig)] : undefined),
+    sx,
+    highlightedItem,
+    onHighlightChange,
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick
+  };
+  const barPlotProps = {
+    onItemClick,
+    slots,
+    slotProps,
+    skipAnimation,
+    borderRadius,
+    barLabel
+  };
+  const axisClickHandlerProps = {
+    onAxisClick
+  };
+  const gridProps = {
+    vertical: grid?.vertical,
+    horizontal: grid?.horizontal
+  };
+  const clipPathGroupProps = {
+    clipPath: `url(#${clipPathId})`
+  };
+  const clipPathProps = {
+    id: clipPathId
+  };
+  const overlayProps = {
+    slots,
+    slotProps,
+    loading
+  };
+  const chartsAxisProps = {
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    slots,
+    slotProps
+  };
+  const axisHighlightProps = _extends({}, hasHorizontalSeries ? {
+    y: 'band'
+  } : {
+    x: 'band'
+  }, axisHighlight);
+  const legendProps = _extends({}, legend, {
+    slots,
+    slotProps
+  });
+  const tooltipProps = _extends({}, tooltip, {
+    slots,
+    slotProps
+  });
+  return {
+    chartContainerProps,
+    barPlotProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    legendProps,
+    tooltipProps,
+    children
+  };
+};

package/esm/ChartContainer/ChartContainer.js

@@ -1,16 +1,14 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import useForkRef from '@mui/utils/useForkRef';
 import { DrawingProvider } from '../context/DrawingProvider';
 import { SeriesContextProvider } from '../context/SeriesContextProvider';
 import { InteractionProvider } from '../context/InteractionProvider';
 import { ColorProvider } from '../context/ColorProvider';
-import { useReducedMotion } from '../hooks/useReducedMotion';
 import { ChartsSurface } from '../ChartsSurface';
-import { CartesianContextProvider } from '../context/CartesianContextProvider';
+import { CartesianContextProvider } from '../context/CartesianProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
 import { HighlightedProvider, ZAxisContextProvider } from '../context';
-import { usePluginsMerge } from './usePluginsMerge';
+import { useChartContainerHooks } from './useChartContainerHooks';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
@@ -32,16 +30,14 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     plugins,
     children
   } = props;
-  const svgRef = React.useRef(null);
-  const handleRef = useForkRef(ref, svgRef);
   const {
+    svgRef,
+    handleRef,
     xExtremumGetters,
     yExtremumGetters,
     seriesFormatters,
     colorProcessors
-  } = usePluginsMerge(plugins);
-  useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
-
+  } = useChartContainerHooks(ref, plugins);
   return /*#__PURE__*/_jsx(DrawingProvider, {
     width: width,
     height: height,

package/esm/ChartContainer/useChartContainerHooks.js

@@ -0,0 +1,24 @@
+import useForkRef from '@mui/utils/useForkRef';
+import * as React from 'react';
+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 {
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
+  } = usePluginsMerge(plugins);
+  useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
+
+  return {
+    svgRef,
+    handleRef,
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
+  };
+};