@mui/x-charts 7.6.2 → 7.7.1

package/hooks/useColorScale.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useXColorScale = useXColorScale;
+exports.useYColorScale = useYColorScale;
+exports.useZColorScale = useZColorScale;
+var React = _interopRequireWildcard(require("react"));
+var _CartesianProvider = require("../context/CartesianProvider");
+var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+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; }
+function useXColorScale(identifier) {
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _CartesianProvider.useCartesianContext)();
+  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
+  return xAxis[id].colorScale;
+}
+function useYColorScale(identifier) {
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _CartesianProvider.useCartesianContext)();
+  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
+  return yAxis[id].colorScale;
+}
+function useZColorScale(identifier) {
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
+  return zAxis[id]?.colorScale;
+}

package/hooks/useDrawingArea.d.ts

@@ -1,8 +1,2 @@
-export declare function useDrawingArea(): {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-    bottom: number;
-    right: number;
-};
+import { DrawingArea } from '../context/DrawingProvider';
+export declare function useDrawingArea(): DrawingArea;

package/hooks/useReducedMotion.js

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

package/hooks/useScale.js

@@ -6,11 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.getValueToPositionMapper = getValueToPositionMapper;
 exports.useXScale = useXScale;
 exports.useYScale = useYScale;
-var React = _interopRequireWildcard(require("react"));
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _isBandScale = require("../internals/isBandScale");
-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; }
 /**
  * For a given scale return a function that map value to their position.
  * Useful when dealing with specific scale such as band.
@@ -27,7 +24,7 @@ function useXScale(identifier) {
   const {
     xAxis,
     xAxisIds
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id].scale;
 }
@@ -35,7 +32,7 @@ function useYScale(identifier) {
   const {
     yAxis,
     yAxisIds
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id].scale;
 }

package/index.js

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

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
-export declare function useChartGradient(): (axisId: string, direction: 'x' | 'y') => string;
+import { AxisId } from '../../../models/axis';
+export declare function useChartGradient(): (axisId: AxisId, direction: 'x' | 'y') => string;
 export declare function ChartsAxesGradients(): React.JSX.Element;

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsAxesGradients = ChartsAxesGradients;
 exports.useChartGradient = useChartGradient;
 var React = _interopRequireWildcard(require("react"));
-var _CartesianContextProvider = require("../../../context/CartesianContextProvider");
+var _CartesianProvider = require("../../../context/CartesianProvider");
 var _DrawingProvider = require("../../../context/DrawingProvider");
 var _hooks = require("../../../hooks");
 var _ChartsPiecewiseGradient = _interopRequireDefault(require("./ChartsPiecewiseGradient"));
@@ -38,7 +38,7 @@ function ChartsAxesGradients() {
     xAxis,
     yAxisIds,
     yAxis
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
     children: [yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined).map(axisId => {
       const gradientId = getGradientId(axisId, 'y');

package/internals/defaultizeColor.d.ts

@@ -39,9 +39,9 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
         arcLabelRadius?: number | undefined;
         color?: string | undefined;
     } | undefined;
-    id?: import("../models/seriesType/common").SeriesId | undefined;
+    id?: import(".").SeriesId | undefined;
     color?: string | undefined;
-    valueFormatter?: import("../models/seriesType/common").SeriesValueFormatter<import("../models/helpers").MakeOptional<import("../models/seriesType").PieValueType, "id">> | undefined;
+    valueFormatter?: import(".").SeriesValueFormatter<import(".").MakeOptional<import("../models/seriesType").PieValueType, "id">> | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
 } | {
     type: "bar";
@@ -50,9 +50,9 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     label?: string | ((location: "tooltip" | "legend") => string) | undefined;
     layout?: "horizontal" | "vertical" | undefined;
     stackOffset?: import("..").StackOffsetType | undefined;
-    id?: import("../models/seriesType/common").SeriesId | undefined;
+    id?: import(".").SeriesId | undefined;
     color: string;
-    valueFormatter?: import("../models/seriesType/common").SeriesValueFormatter<number | null> | undefined;
+    valueFormatter?: import(".").SeriesValueFormatter<number | null> | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
     xAxisKey?: string | undefined;
     yAxisKey?: string | undefined;
@@ -70,9 +70,9 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     disableHighlight?: boolean | undefined;
     connectNulls?: boolean | undefined;
     stackOffset?: import("..").StackOffsetType | undefined;
-    id?: import("../models/seriesType/common").SeriesId | undefined;
+    id?: import(".").SeriesId | undefined;
     color: string;
-    valueFormatter?: import("../models/seriesType/common").SeriesValueFormatter<number | null> | undefined;
+    valueFormatter?: import(".").SeriesValueFormatter<number | null> | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
     xAxisKey?: string | undefined;
     yAxisKey?: string | undefined;
@@ -84,9 +84,9 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     label?: string | ((location: "tooltip" | "legend") => string) | undefined;
     disableHover?: boolean | undefined;
     zAxisKey?: string | undefined;
-    id?: import("../models/seriesType/common").SeriesId | undefined;
+    id?: import(".").SeriesId | undefined;
     color: string;
-    valueFormatter?: import("../models/seriesType/common").SeriesValueFormatter<import("../models/seriesType").ScatterValueType> | undefined;
+    valueFormatter?: import(".").SeriesValueFormatter<import("../models/seriesType").ScatterValueType> | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
     xAxisKey?: string | undefined;
     yAxisKey?: string | undefined;

package/internals/index.d.ts

@@ -1 +1,23 @@
+export * from './components/ChartsAxesGradients';
+export * from '../ResponsiveChartContainer/useChartContainerDimensions';
+export * from '../ResponsiveChartContainer/ResizableContainer';
+export { useReducedMotion } from '../hooks/useReducedMotion';
+export { useSeries } from '../hooks/useSeries';
+export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
+export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
+export { useLineChartProps } from '../LineChart/useLineChartProps';
+export { useBarChartProps } from '../BarChart/useBarChartProps';
+export * from './defaultizeValueFormatter';
 export * from './configInit';
+export * from '../context/CartesianProvider';
+export * from '../context/DrawingProvider';
+export * from '../context/ColorProvider';
+export * from '../context/InteractionProvider';
+export * from '../context/SeriesContextProvider';
+export * from '../context/ZAxisContextProvider';
+export type * from '../context/context.types';
+export * from '../models/seriesType/config';
+export * from '../models/seriesType/common';
+export * from '../models/helpers';
+export * from '../models/z-axis';
+export * from '../models/axis';

package/internals/index.js

@@ -3,9 +3,108 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  useReducedMotion: true,
+  useSeries: true,
+  useChartContainerHooks: true,
+  useScatterChartProps: true,
+  useLineChartProps: true,
+  useBarChartProps: true
+};
+Object.defineProperty(exports, "useBarChartProps", {
+  enumerable: true,
+  get: function () {
+    return _useBarChartProps.useBarChartProps;
+  }
+});
+Object.defineProperty(exports, "useChartContainerHooks", {
+  enumerable: true,
+  get: function () {
+    return _useChartContainerHooks.useChartContainerHooks;
+  }
+});
+Object.defineProperty(exports, "useLineChartProps", {
+  enumerable: true,
+  get: function () {
+    return _useLineChartProps.useLineChartProps;
+  }
+});
+Object.defineProperty(exports, "useReducedMotion", {
+  enumerable: true,
+  get: function () {
+    return _useReducedMotion.useReducedMotion;
+  }
+});
+Object.defineProperty(exports, "useScatterChartProps", {
+  enumerable: true,
+  get: function () {
+    return _useScatterChartProps.useScatterChartProps;
+  }
+});
+Object.defineProperty(exports, "useSeries", {
+  enumerable: true,
+  get: function () {
+    return _useSeries.useSeries;
+  }
+});
+var _ChartsAxesGradients = require("./components/ChartsAxesGradients");
+Object.keys(_ChartsAxesGradients).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartsAxesGradients[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsAxesGradients[key];
+    }
+  });
+});
+var _useChartContainerDimensions = require("../ResponsiveChartContainer/useChartContainerDimensions");
+Object.keys(_useChartContainerDimensions).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartContainerDimensions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartContainerDimensions[key];
+    }
+  });
+});
+var _ResizableContainer = require("../ResponsiveChartContainer/ResizableContainer");
+Object.keys(_ResizableContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ResizableContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ResizableContainer[key];
+    }
+  });
+});
+var _useReducedMotion = require("../hooks/useReducedMotion");
+var _useSeries = require("../hooks/useSeries");
+var _useChartContainerHooks = require("../ChartContainer/useChartContainerHooks");
+var _useScatterChartProps = require("../ScatterChart/useScatterChartProps");
+var _useLineChartProps = require("../LineChart/useLineChartProps");
+var _useBarChartProps = require("../BarChart/useBarChartProps");
+var _defaultizeValueFormatter = require("./defaultizeValueFormatter");
+Object.keys(_defaultizeValueFormatter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _defaultizeValueFormatter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _defaultizeValueFormatter[key];
+    }
+  });
+});
 var _configInit = require("./configInit");
 Object.keys(_configInit).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _configInit[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -13,4 +112,136 @@ Object.keys(_configInit).forEach(function (key) {
       return _configInit[key];
     }
   });
+});
+var _CartesianProvider = require("../context/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 _DrawingProvider = require("../context/DrawingProvider");
+Object.keys(_DrawingProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DrawingProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DrawingProvider[key];
+    }
+  });
+});
+var _ColorProvider = require("../context/ColorProvider");
+Object.keys(_ColorProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ColorProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ColorProvider[key];
+    }
+  });
+});
+var _InteractionProvider = require("../context/InteractionProvider");
+Object.keys(_InteractionProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _InteractionProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InteractionProvider[key];
+    }
+  });
+});
+var _SeriesContextProvider = require("../context/SeriesContextProvider");
+Object.keys(_SeriesContextProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SeriesContextProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SeriesContextProvider[key];
+    }
+  });
+});
+var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+Object.keys(_ZAxisContextProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ZAxisContextProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ZAxisContextProvider[key];
+    }
+  });
+});
+var _config = require("../models/seriesType/config");
+Object.keys(_config).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _config[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _config[key];
+    }
+  });
+});
+var _common = require("../models/seriesType/common");
+Object.keys(_common).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _common[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _common[key];
+    }
+  });
+});
+var _helpers = require("../models/helpers");
+Object.keys(_helpers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _helpers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _helpers[key];
+    }
+  });
+});
+var _zAxis = require("../models/z-axis");
+Object.keys(_zAxis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _zAxis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _zAxis[key];
+    }
+  });
+});
+var _axis = require("../models/axis");
+Object.keys(_axis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _axis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _axis[key];
+    }
+  });
 });

package/internals/warning.d.ts

@@ -0,0 +1 @@
+export declare function buildWarning(message: (...args: any) => string, gravity?: 'warning' | 'error'): (...args: any) => void;

package/internals/warning.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildWarning = buildWarning;
+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/models/axis.d.ts

@@ -182,7 +182,7 @@ export interface AxisScaleConfig {
         colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
     };
 }
-interface AxisScaleComputedConfig {
+export interface AxisScaleComputedConfig {
     band: {
         colorScale?: ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null>;
     };
@@ -267,4 +267,3 @@ export declare function isBandScaleConfig(scaleConfig: AxisConfig<ScaleName>): s
 export declare function isPointScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'point'> & {
     scaleType: 'point';
 };
-export {};

package/models/plugin.d.ts

@@ -1,4 +1,4 @@
-import { ChartSeriesType, ExtremumGetter, Formatter } from './seriesType/config';
+import { CartesianChartSeriesType, ChartSeriesType, ExtremumGetter, Formatter } from './seriesType/config';
 import { AxisDefaultized } from './axis';
 import { DefaultizedSeriesType } from './seriesType';
 import { ZAxisDefaultized } from './z-axis';
@@ -13,4 +13,7 @@ export type ChartsPluginType<T> = T extends ChartSeriesType ? {
     xExtremumGetter?: ExtremumGetter<T>;
     yExtremumGetter?: ExtremumGetter<T>;
 } : never;
+export type ExtremumGettersConfig<T extends ChartSeriesType = CartesianChartSeriesType> = {
+    [K in T]?: ExtremumGetter<K>;
+};
 export {};

package/modern/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 --------------------------------