@mui/x-charts 8.27.0 → 9.0.0-alpha.1

package/BarChart/AnimatedBarElement.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { type SeriesId } from "../models/seriesType/common.js";
 import { type BarElementOwnerState } from "./barElementClasses.js";
-export interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'id' | 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'> {
-  id: SeriesId;
+export interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'> {
+  seriesId: SeriesId;
   dataIndex: number;
   color: string;
   ownerState: BarElementOwnerState;

package/BarChart/AnimatedBarElement.js

@@ -12,7 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _useAnimateBar = require("../hooks/animation/useAnimateBar");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ownerState", "skipAnimation", "id", "dataIndex", "xOrigin", "yOrigin"];
+const _excluded = ["ownerState", "skipAnimation", "seriesId", "dataIndex", "xOrigin", "yOrigin"];
 function AnimatedBarElement(props) {
   const {
       ownerState

package/BarChart/BarChart.d.ts

@@ -70,5 +70,5 @@ export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartP
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<SVGSVGElement>>;
+declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
 export { BarChart };

package/BarChart/BarChart.js

@@ -58,11 +58,12 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
   const {
     chartDataProviderProps,
     chartsSurfaceProps
-  } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps, ref);
+  } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      ref: ref,
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedBar.FocusedBar, {})]
@@ -80,6 +81,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.object
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: _propTypes.default.number,
   /**
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
@@ -163,8 +169,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -184,7 +190,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -214,8 +220,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar'])
   })),
   /**
    * The direction of the bar elements.
@@ -275,6 +281,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: _propTypes.default.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -318,14 +332,22 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/BarChart/BarElement.d.ts

@@ -7,12 +7,12 @@ export interface BarElementSlots {
    * The component that renders the bar.
    * @default BarElementPath
    */
-  bar?: React.ElementType<BarProps>;
+  bar?: React.JSXElementConstructor<BarProps>;
 }
 export interface BarElementSlotProps {
   bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
 }
-export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGRectElement>, 'ref' | 'id'> & {
+export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted' | 'isFocused'> & Omit<React.SVGProps<SVGRectElement>, 'ref'> & {
   /**
    * The props used for each component slot.
    * @default {}

package/BarChart/BarElement.js

@@ -18,10 +18,10 @@ var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _AnimatedBarElement = require("./AnimatedBarElement");
 var _useIsItemFocused = require("../hooks/useIsItemFocused");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick", "skipAnimation", "layout", "x", "xOrigin", "y", "yOrigin", "width", "height", "hidden"];
+const _excluded = ["seriesId", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick", "skipAnimation", "layout", "x", "xOrigin", "y", "yOrigin", "width", "height", "hidden"];
 function BarElement(props) {
   const {
-      id,
+      seriesId,
       dataIndex,
       classes: innerClasses,
       color,
@@ -42,9 +42,9 @@ function BarElement(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const itemIdentifier = React.useMemo(() => ({
     type: 'bar',
-    seriesId: id,
+    seriesId,
     dataIndex
-  }), [id, dataIndex]);
+  }), [seriesId, dataIndex]);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)(itemIdentifier);
   const {
     isFaded,
@@ -52,11 +52,11 @@ function BarElement(props) {
   } = (0, _useItemHighlighted.useItemHighlighted)(itemIdentifier);
   const isFocused = (0, _useIsItemFocused.useIsItemFocused)(React.useMemo(() => ({
     type: 'bar',
-    seriesId: id,
+    seriesId,
     dataIndex
-  }), [id, dataIndex]));
+  }), [seriesId, dataIndex]));
   const ownerState = {
-    id,
+    seriesId,
     dataIndex,
     classes: innerClasses,
     color,
@@ -71,7 +71,7 @@ function BarElement(props) {
     externalSlotProps: slotProps?.bar,
     externalForwardedProps: other,
     additionalProps: (0, _extends2.default)({}, interactionProps, {
-      id,
+      seriesId,
       dataIndex,
       color,
       x,
@@ -101,8 +101,8 @@ process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
   // ----------------------------------------------------------------------
   classes: _propTypes.default.object,
   dataIndex: _propTypes.default.number.isRequired,
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   layout: _propTypes.default.oneOf(['horizontal', 'vertical']).isRequired,
+  seriesId: _propTypes.default.string.isRequired,
   skipAnimation: _propTypes.default.bool.isRequired,
   /**
    * The props used for each component slot.

package/BarChart/BarLabel/BarLabel.js

@@ -108,7 +108,7 @@ process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
    * @default 'center'
    */
   placement: _propTypes.default.oneOf(['center', 'outside']),
-  seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  seriesId: _propTypes.default.string.isRequired,
   skipAnimation: _propTypes.default.bool.isRequired,
   /**
    * Width of the bar this label belongs to.

package/BarChart/FocusedBar.js

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _useFocusedItem = require("../hooks/useFocusedItem");
 var _hooks = require("../hooks");
-var _getBarDimensions = require("../internals/getBarDimensions");
+var _createGetBarDimensions = require("../internals/createGetBarDimensions");
 var _jsxRuntime = require("react/jsx-runtime");
 function FocusedBar(props) {
   const theme = (0, _styles.useTheme)();
@@ -40,15 +40,13 @@ function FocusedBar(props) {
   const yAxisConfig = yAxis[yAxisId];
   const verticalLayout = barSeries.series[focusedItem.seriesId].layout === 'vertical';
   const groupIndex = barSeries.stackingGroups.findIndex(group => group.ids.includes(focusedItem.seriesId));
-  const barDimensions = (0, _getBarDimensions.getBarDimensions)({
+  const barDimensions = (0, _createGetBarDimensions.createGetBarDimensions)({
     verticalLayout,
     xAxisConfig,
     yAxisConfig,
     series,
-    dataIndex: focusedItem.dataIndex,
-    numberOfGroups: barSeries.stackingGroups.length,
-    groupIndex
-  });
+    numberOfGroups: barSeries.stackingGroups.length
+  })(focusedItem.dataIndex, groupIndex);
   if (barDimensions === null) {
     return null;
   }

package/BarChart/IndividualBarPlot.js

@@ -72,7 +72,7 @@ function IndividualBarPlot(_ref) {
           height
         }) => {
           const barElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
-            id: seriesId,
+            seriesId: seriesId,
             dataIndex: dataIndex,
             color: color,
             skipAnimation: skipAnimation ?? false,

package/BarChart/barClasses.d.ts

@@ -9,4 +9,4 @@ export interface BarClasses {
 export type BarClassKey = keyof BarClasses;
 export declare function getBarUtilityClass(slot: string): string;
 export declare const barClasses: BarClasses;
-export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"series" | "root" | "seriesLabels", string>;
+export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"root" | "series" | "seriesLabels", string>;

package/BarChart/barClasses.js

@@ -11,9 +11,9 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getBarUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiBar', slot);
+  return (0, _generateUtilityClass.default)('MuiBarChart', slot);
 }
-const barClasses = exports.barClasses = (0, _generateUtilityClasses.default)('MuiBar', ['root', 'series', 'seriesLabels']);
+const barClasses = exports.barClasses = (0, _generateUtilityClasses.default)('MuiBarChart', ['root', 'series', 'seriesLabels']);
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],

package/BarChart/barElementClasses.d.ts

@@ -14,11 +14,12 @@ export interface BarElementClasses {
 }
 export type BarElementClassKey = keyof BarElementClasses;
 export interface BarElementOwnerState {
-  id: SeriesId;
+  seriesId: SeriesId;
   dataIndex: number;
   color: string;
   isFaded: boolean;
   isHighlighted: boolean;
+  isFocused: boolean;
   classes?: Partial<BarElementClasses>;
 }
 export declare function getBarElementUtilityClass(slot: string): string;

package/BarChart/barElementClasses.js

@@ -17,12 +17,12 @@ const barElementClasses = exports.barElementClasses = (0, _generateUtilityClasse
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    id,
+    seriesId,
     isHighlighted,
     isFaded
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return (0, _composeClasses.default)(slots, getBarElementUtilityClass, classes);
 };

package/BarChart/seriesConfig/bar/extremums.d.ts

@@ -1,3 +1,3 @@
-import { type CartesianExtremumGetter } from "../../../internals/plugins/models/seriesConfig/index.js";
+import type { CartesianExtremumGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const getExtremumX: CartesianExtremumGetter<'bar'>;
 export declare const getExtremumY: CartesianExtremumGetter<'bar'>;

package/BarChart/seriesConfig/bar/getColor.d.ts

@@ -1,3 +1,3 @@
-import { type ColorProcessor } from "../../../internals/plugins/models/index.js";
+import type { ColorProcessor } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getColor: ColorProcessor<'bar'>;
 export default getColor;

package/BarChart/seriesConfig/bar/getSeriesWithDefaultValues.d.ts

@@ -1,6 +1,6 @@
 import { type AllSeriesType } from "../../../models/seriesType/index.js";
 export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'bar'>, seriesIndex: number, colors: readonly string[]): {
-  id: import("../../../index.js").SeriesId;
+  id: string;
   color: string;
   type: "bar";
   data?: ReadonlyArray<import("../../../index.js").BarValueType | null>;
@@ -12,7 +12,7 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'ba
   barLabel?: "value" | ((item: import("@mui/x-charts/BarChart").BarItem, context: import("@mui/x-charts/BarChart").BarLabelContext) => string | null | undefined);
   barLabelPlacement?: "center" | "outside";
   valueFormatter?: import("../../../internals/index.js").SeriesValueFormatter<number | null> | undefined;
-  highlightScope?: import("../../../index.js").HighlightScope;
+  highlightScope?: import("../../../internals/index.js").CommonHighlightScope | undefined;
   labelMarkType?: import("../../../internals/index.js").ChartsLabelMarkType;
   colorGetter?: ((data: import("../../../internals/index.js").ColorCallbackValue<number | null>) => string) | undefined;
   xAxisId?: import("../../../internals/index.js").AxisId;

package/BarChart/seriesConfig/bar/keyboardFocusHandler.d.ts

@@ -1,3 +1,4 @@
 import type { KeyboardFocusHandler } from "../../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
-declare const keyboardFocusHandler: KeyboardFocusHandler<'bar', 'bar' | 'line' | 'scatter'>;
+import { type ComposableCartesianChartSeriesType } from "../../../internals/commonNextFocusItem.js";
+declare const keyboardFocusHandler: KeyboardFocusHandler<'bar', ComposableCartesianChartSeriesType>;
 export default keyboardFocusHandler;

package/BarChart/seriesConfig/bar/keyboardFocusHandler.js

@@ -4,20 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _createCommonKeyboardFocusHandler = require("../../../internals/createCommonKeyboardFocusHandler");
 var _commonNextFocusItem = require("../../../internals/commonNextFocusItem");
-const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
-const keyboardFocusHandler = event => {
-  switch (event.key) {
-    case 'ArrowRight':
-      return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(outSeriesTypes);
-    case 'ArrowLeft':
-      return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(outSeriesTypes);
-    case 'ArrowDown':
-      return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
-    case 'ArrowUp':
-      return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(outSeriesTypes);
-    default:
-      return null;
-  }
-};
+const keyboardFocusHandler = (0, _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler)(_commonNextFocusItem.composableCartesianSeriesTypes);
 var _default = exports.default = keyboardFocusHandler;

package/BarChart/seriesConfig/bar/legend.d.ts

@@ -1,3 +1,3 @@
-import { type LegendGetter } from "../../../internals/plugins/models/index.js";
+import type { LegendGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const legendGetter: LegendGetter<'bar'>;
 export default legendGetter;

package/BarChart/seriesConfig/bar/legend.js

@@ -18,7 +18,6 @@ const legendGetter = params => {
     acc.push({
       type: 'bar',
       markType: series[seriesId].labelMarkType,
-      id: seriesId,
       seriesId,
       color: series[seriesId].color,
       label: formattedLabel

package/BarChart/seriesConfig/bar/seriesProcessor.d.ts

@@ -1,3 +1,3 @@
-import { type SeriesProcessor } from "../../../internals/plugins/models/index.js";
+import type { SeriesProcessor } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const seriesProcessor: SeriesProcessor<'bar'>;
 export default seriesProcessor;

package/BarChart/seriesConfig/bar/tooltip.d.ts

@@ -1,4 +1,4 @@
-import type { AxisTooltipGetter, TooltipGetter } from "../../../internals/plugins/models/index.js";
+import type { AxisTooltipGetter, TooltipGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipGetter: TooltipGetter<'bar'>;
 export declare const axisTooltipGetter: AxisTooltipGetter<'bar', 'x' | 'y'>;
 export default tooltipGetter;

package/BarChart/seriesConfig/bar/tooltipPosition.d.ts

@@ -1,3 +1,3 @@
-import type { TooltipItemPositionGetter } from "../../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+import type { TooltipItemPositionGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'bar'>;
 export default tooltipItemPositionGetter;

package/BarChart/seriesConfig/bar/tooltipPosition.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _getBarDimensions = require("../../../internals/getBarDimensions");
+var _createGetBarDimensions = require("../../../internals/createGetBarDimensions");
 const tooltipItemPositionGetter = params => {
   const {
     series,
@@ -22,15 +22,14 @@ const tooltipItemPositionGetter = params => {
   if (axesConfig.x === undefined || axesConfig.y === undefined) {
     return null;
   }
-  const dimensions = (0, _getBarDimensions.getBarDimensions)({
+  const groupIndex = series.bar.stackingGroups.findIndex(group => group.ids.includes(itemSeries.id));
+  const dimensions = (0, _createGetBarDimensions.createGetBarDimensions)({
     verticalLayout: itemSeries.layout === 'vertical',
     xAxisConfig: axesConfig.x,
     yAxisConfig: axesConfig.y,
     series: itemSeries,
-    dataIndex: identifier.dataIndex,
-    numberOfGroups: series.bar.stackingGroups.length,
-    groupIndex: series.bar.stackingGroups.findIndex(group => group.ids.includes(itemSeries.id))
-  });
+    numberOfGroups: series.bar.stackingGroups.length
+  })(identifier.dataIndex, groupIndex);
   if (dimensions == null) {
     return null;
   }

package/BarChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import { type ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import type { ChartSeriesTypeConfig } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const barSeriesConfig: ChartSeriesTypeConfig<'bar'>;

package/BarChart/seriesConfig/index.js

@@ -15,6 +15,7 @@ var _tooltip = _interopRequireWildcard(require("./bar/tooltip"));
 var _tooltipPosition = _interopRequireDefault(require("./bar/tooltipPosition"));
 var _getSeriesWithDefaultValues = require("./bar/getSeriesWithDefaultValues");
 var _identifierSerializer = require("../../internals/identifierSerializer");
+var _identifierCleaner = require("../../internals/identifierCleaner");
 const barSeriesConfig = exports.barSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   colorProcessor: _getColor.default,
@@ -26,5 +27,6 @@ const barSeriesConfig = exports.barSeriesConfig = {
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.getSeriesWithDefaultValues,
   keyboardFocusHandler: _keyboardFocusHandler.default,
-  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: _identifierCleaner.identifierCleanerSeriesIdDataIndex
 };

package/BarChart/useBarPlotData.d.ts

@@ -11,7 +11,7 @@ export declare function useBarPlotData(drawingArea: ChartDrawingArea, xAxes: Com
 };
 export declare function processBarDataForPlot(drawingArea: ChartDrawingArea, chartId: string | undefined, stackingGroups: StackingGroupsType, series: Record<SeriesId, ChartSeriesDefaultized<'bar'>>, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>, defaultXAxisId: AxisId, defaultYAxisId: AxisId): {
   completedData: {
-    seriesId: SeriesId;
+    seriesId: string;
     barLabel: "value" | ((item: import("@mui/x-charts/BarChart").BarItem, context: import("@mui/x-charts/BarChart").BarLabelContext) => string | null | undefined) | undefined;
     barLabelPlacement: "center" | "outside" | undefined;
     data: ProcessedBarData[];

package/BarChart/useBarPlotData.js

@@ -11,7 +11,7 @@ var _getColor = _interopRequireDefault(require("./seriesConfig/bar/getColor"));
 var _useAxis = require("../hooks/useAxis");
 var _checkBarChartScaleErrors = require("./checkBarChartScaleErrors");
 var _useBarSeries = require("../hooks/useBarSeries");
-var _getBarDimensions = require("../internals/getBarDimensions");
+var _createGetBarDimensions = require("../internals/createGetBarDimensions");
 var _useChartId = require("../hooks/useChartId");
 function useBarPlotData(drawingArea, xAxes, yAxes) {
   const seriesData = (0, _useBarSeries.useBarSeriesContext)() ?? {
@@ -51,16 +51,15 @@ function processBarDataForPlot(drawingArea, chartId, stackingGroups, series, xAx
       const yOrigin = Math.round(yScale(0) ?? 0);
       const colorGetter = (0, _getColor.default)(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
       const seriesDataPoints = [];
+      const getBarDimensions = (0, _createGetBarDimensions.createGetBarDimensions)({
+        verticalLayout,
+        xAxisConfig,
+        yAxisConfig,
+        series: series[seriesId],
+        numberOfGroups: stackingGroups.length
+      });
       for (let dataIndex = 0; dataIndex < baseScaleConfig.data.length; dataIndex += 1) {
-        const barDimensions = (0, _getBarDimensions.getBarDimensions)({
-          verticalLayout,
-          xAxisConfig,
-          yAxisConfig,
-          series: series[seriesId],
-          dataIndex,
-          numberOfGroups: stackingGroups.length,
-          groupIndex
-        });
+        const barDimensions = getBarDimensions(dataIndex, groupIndex);
         if (barDimensions == null) {
           continue;
         }

package/BarChart/useRegisterItemClickHandlers.js

@@ -9,7 +9,7 @@ exports.useRegisterItemClickHandlers = useRegisterItemClickHandlers;
 var React = _interopRequireWildcard(require("react"));
 var _useSvgRef = require("../hooks/useSvgRef");
 var _ChartProvider = require("../context/ChartProvider");
-var _getSVGPoint = require("../internals/getSVGPoint");
+var _getChartPoint = require("../internals/getChartPoint");
 var _useStore = require("../internals/store/useStore");
 var _useChartCartesianAxisPosition = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors");
 /**
@@ -46,7 +46,7 @@ function useRegisterItemClickHandlers(onItemClick) {
         }
       }
       lastPointerUp = null;
-      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, point);
+      const svgPoint = (0, _getChartPoint.getChartPoint)(element, point);
       if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
         return;
       }