@mui/x-charts 8.0.0-alpha.9 → 8.0.0-beta.1

package/esm/BarChart/BarPlot.js

@@ -0,0 +1,327 @@
+'use client';
+
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTransition } from '@react-spring/web';
+import { styled } from '@mui/material/styles';
+import { BarElement, barElementClasses } from "./BarElement.js";
+import getColor from "./seriesConfig/getColor.js";
+import { useChartId, useDrawingArea, useXAxes, useYAxes } from "../hooks/index.js";
+import { BarClipPath } from "./BarClipPath.js";
+import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
+import { checkScaleErrors } from "./checkScaleErrors.js";
+import { useBarSeriesContext } from "../hooks/useBarSeries.js";
+import { useSkipAnimation } from "../context/AnimationProvider/index.js";
+import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
+
+/**
+ * Solution of the equations
+ * W = barWidth * N + offset * (N-1)
+ * offset / (offset + barWidth) = r
+ * @param bandWidth The width available to place bars.
+ * @param numberOfGroups The number of bars to place in that space.
+ * @param gapRatio The ratio of the gap between bars over the bar width.
+ * @returns The bar width and the offset between bars.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getBandSize({
+  bandWidth: W,
+  numberOfGroups: N,
+  gapRatio: r
+}) {
+  if (r === 0) {
+    return {
+      barWidth: W / N,
+      offset: 0
+    };
+  }
+  const barWidth = W / (N + (N - 1) * r);
+  const offset = r * barWidth;
+  return {
+    barWidth,
+    offset
+  };
+}
+const useAggregatedData = () => {
+  const seriesData = useBarSeriesContext() ?? {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
+  const drawingArea = useDrawingArea();
+  const chartId = useChartId();
+  const {
+    series,
+    stackingGroups
+  } = seriesData;
+  const {
+    xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
+    yAxis,
+    yAxisIds
+  } = useYAxes();
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  const masks = {};
+  const data = stackingGroups.flatMap(({
+    ids: groupIds
+  }, groupIndex) => {
+    const xMin = drawingArea.left;
+    const xMax = drawingArea.left + drawingArea.width;
+    const yMin = drawingArea.top;
+    const yMax = drawingArea.top + drawingArea.height;
+    return groupIds.flatMap(seriesId => {
+      const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
+      const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
+      const xAxisConfig = xAxis[xAxisId];
+      const yAxisConfig = yAxis[yAxisId];
+      const verticalLayout = series[seriesId].layout === 'vertical';
+      checkScaleErrors(verticalLayout, seriesId, series[seriesId], xAxisId, xAxis, yAxisId, yAxis);
+      const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+      const xScale = xAxisConfig.scale;
+      const yScale = yAxisConfig.scale;
+      const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
+      const bandWidth = baseScaleConfig.scale.bandwidth();
+      const {
+        barWidth,
+        offset
+      } = getBandSize({
+        bandWidth,
+        numberOfGroups: stackingGroups.length,
+        gapRatio: baseScaleConfig.barGapRatio
+      });
+      const barOffset = groupIndex * (barWidth + offset);
+      const {
+        stackedData,
+        data: currentSeriesData,
+        layout
+      } = series[seriesId];
+      return baseScaleConfig.data.map((baseValue, dataIndex) => {
+        const values = stackedData[dataIndex];
+        const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
+        const minValueCoord = Math.round(Math.min(...valueCoordinates));
+        const maxValueCoord = Math.round(Math.max(...valueCoordinates));
+        const stackId = series[seriesId].stack;
+        const result = {
+          seriesId,
+          dataIndex,
+          layout,
+          x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
+          y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
+          xOrigin: xScale(0),
+          yOrigin: yScale(0),
+          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
+          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
+          color: colorGetter(dataIndex),
+          value: currentSeriesData[dataIndex],
+          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
+        };
+        if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
+          return null;
+        }
+        if (!masks[result.maskId]) {
+          masks[result.maskId] = {
+            id: result.maskId,
+            width: 0,
+            height: 0,
+            hasNegative: false,
+            hasPositive: false,
+            layout: result.layout,
+            xOrigin: xScale(0),
+            yOrigin: yScale(0),
+            x: 0,
+            y: 0
+          };
+        }
+        const mask = masks[result.maskId];
+        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
+        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
+        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
+        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
+        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
+        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
+        return result;
+      }).filter(rectangle => rectangle !== null);
+    });
+  });
+  return {
+    completedData: data,
+    masksData: Object.values(masks)
+  };
+};
+const leaveStyle = ({
+  layout,
+  yOrigin,
+  x,
+  width,
+  y,
+  xOrigin,
+  height
+}) => _extends({}, layout === 'vertical' ? {
+  y: yOrigin,
+  x,
+  height: 0,
+  width
+} : {
+  y,
+  x: xOrigin,
+  height,
+  width: 0
+});
+const enterStyle = ({
+  x,
+  width,
+  y,
+  height
+}) => ({
+  y,
+  x,
+  height,
+  width
+});
+const BarPlotRoot = styled('g', {
+  name: 'MuiBarPlot',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
+  [`& .${barElementClasses.root}`]: {
+    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+  }
+});
+
+/**
+ * Demos:
+ *
+ * - [Bars](https://mui.com/x/react-charts/bars/)
+ * - [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+ * - [Stacking](https://mui.com/x/react-charts/stacking/)
+ *
+ * API:
+ *
+ * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
+ */
+function BarPlot(props) {
+  const {
+    completedData,
+    masksData
+  } = useAggregatedData();
+  const {
+      skipAnimation: inSkipAnimation,
+      onItemClick,
+      borderRadius,
+      barLabel
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const isZoomInteracting = useInternalIsZoomInteracting();
+  const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
+  const withoutBorderRadius = !borderRadius || borderRadius <= 0;
+  const transition = useTransition(completedData, {
+    keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
+    from: skipAnimation ? undefined : leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
+    immediate: skipAnimation
+  });
+  const maskTransition = useTransition(withoutBorderRadius ? [] : masksData, {
+    keys: v => v.id,
+    from: skipAnimation ? undefined : leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
+    immediate: skipAnimation
+  });
+  return /*#__PURE__*/_jsxs(BarPlotRoot, {
+    children: [!withoutBorderRadius && maskTransition((style, {
+      id,
+      hasPositive,
+      hasNegative,
+      layout
+    }) => {
+      return /*#__PURE__*/_jsx(BarClipPath, {
+        maskId: id,
+        borderRadius: borderRadius,
+        hasNegative: hasNegative,
+        hasPositive: hasPositive,
+        layout: layout,
+        style: style
+      });
+    }), transition((style, {
+      seriesId,
+      dataIndex,
+      color,
+      maskId
+    }) => {
+      const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
+        id: seriesId,
+        dataIndex: dataIndex,
+        color: color
+      }, other, {
+        onClick: onItemClick && (event => {
+          onItemClick(event, {
+            type: 'bar',
+            seriesId,
+            dataIndex
+          });
+        }),
+        style: style
+      }));
+      if (withoutBorderRadius) {
+        return barElement;
+      }
+      return /*#__PURE__*/_jsx("g", {
+        clipPath: `url(#${maskId})`,
+        children: barElement
+      });
+    }), barLabel && /*#__PURE__*/_jsx(BarLabelPlot, _extends({
+      bars: completedData,
+      skipAnimation: skipAnimation,
+      barLabel: barLabel
+    }, other))]
+  });
+}
+process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @param {BarItem} item The item to format.
+   * @param {BarLabelContext} context data about the bar.
+   * @returns {string} The formatted label.
+   */
+  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: PropTypes.number,
+  /**
+   * Callback fired when a bar item is clicked.
+   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
+   */
+  onItemClick: PropTypes.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { BarPlot };

package/esm/BarChart/checkScaleErrors.d.ts

@@ -0,0 +1,10 @@
+import { AxisDefaultized, AxisId } from "../models/axis.js";
+import { DefaultizedBarSeriesType } from "../models/seriesType/bar.js";
+import { SeriesId } from "../models/seriesType/common.js";
+export declare function checkScaleErrors(verticalLayout: boolean, seriesId: SeriesId, series: DefaultizedBarSeriesType & {
+  stackedData: [number, number][];
+}, xAxisId: AxisId, xAxis: {
+  [axisId: AxisId]: AxisDefaultized;
+}, yAxisId: AxisId, yAxis: {
+  [axisId: AxisId]: AxisDefaultized;
+}): void;

package/esm/BarChart/checkScaleErrors.js

@@ -0,0 +1,33 @@
+import { warnOnce } from '@mui/x-internals/warning';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
+import { isBandScaleConfig, isPointScaleConfig } from "../models/axis.js";
+const getAxisMessage = (axisDirection, axisId) => {
+  const axisName = `${axisDirection}-axis`;
+  const axisIdName = `${axisDirection}Axis`;
+  const axisDefaultKey = axisDirection === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
+  return axisId === axisDefaultKey ? `The first \`${axisIdName}\`` : `The ${axisName} with id "${axisId}"`;
+};
+export function checkScaleErrors(verticalLayout, seriesId, series, xAxisId, xAxis, yAxisId, yAxis) {
+  const xAxisConfig = xAxis[xAxisId];
+  const yAxisConfig = yAxis[yAxisId];
+  const discreteAxisConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+  const continuousAxisConfig = verticalLayout ? yAxisConfig : xAxisConfig;
+  const discreteAxisId = verticalLayout ? xAxisId : yAxisId;
+  const continuousAxisId = verticalLayout ? yAxisId : xAxisId;
+  const discreteAxisDirection = verticalLayout ? 'x' : 'y';
+  const continuousAxisDirection = verticalLayout ? 'y' : 'x';
+  if (!isBandScaleConfig(discreteAxisConfig)) {
+    throw new Error(`MUI X: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} should be of type "band" to display the bar series of id "${seriesId}".`);
+  }
+  if (discreteAxisConfig.data === undefined) {
+    throw new Error(`MUI X: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} should have data property.`);
+  }
+  if (isBandScaleConfig(continuousAxisConfig) || isPointScaleConfig(continuousAxisConfig)) {
+    throw new Error(`MUI X: ${getAxisMessage(continuousAxisDirection, continuousAxisId)} should be a continuous type to display the bar series of id "${seriesId}".`);
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    if (discreteAxisConfig.data.length < series.stackedData.length) {
+      warnOnce([`MUI X: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} has less data (${discreteAxisConfig.data.length} values) than the bar series of id "${seriesId}" (${series.stackedData.length} values).`, 'The axis data should have at least the same length than the series using it.'], 'error');
+    }
+  }
+}

package/esm/BarChart/getRadius.d.ts

@@ -0,0 +1,20 @@
+type GetRadiusData = {
+  hasNegative: boolean;
+  hasPositive: boolean;
+  borderRadius?: number;
+  layout?: 'vertical' | 'horizontal';
+};
+type GetRadiusCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+/**
+ * Returns if the corner should have a radius or not based on the layout and the data.
+ * @param {GetRadiusCorner} corner The corner to check.
+ * @param {GetRadiusData} cornerData The data for the corner.
+ * @returns {number} The radius for the corner.
+ */
+export declare const getRadius: (corner: GetRadiusCorner, {
+  hasNegative,
+  hasPositive,
+  borderRadius,
+  layout
+}: GetRadiusData) => number;
+export {};

package/esm/BarChart/getRadius.js

@@ -0,0 +1,30 @@
+/**
+ * Returns if the corner should have a radius or not based on the layout and the data.
+ * @param {GetRadiusCorner} corner The corner to check.
+ * @param {GetRadiusData} cornerData The data for the corner.
+ * @returns {number} The radius for the corner.
+ */
+export const getRadius = (corner, {
+  hasNegative,
+  hasPositive,
+  borderRadius,
+  layout
+}) => {
+  if (!borderRadius) {
+    return 0;
+  }
+  const isVertical = layout === 'vertical';
+  if (corner === 'top-left' && (isVertical && hasPositive || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  if (corner === 'top-right' && (isVertical && hasPositive || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-right' && (isVertical && hasNegative || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-left' && (isVertical && hasNegative || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  return 0;
+};

package/esm/BarChart/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./BarChart.js";
+export * from "./BarPlot.js";
+export * from "./BarElement.js";
+export * from "./BarLabel/index.js";

package/esm/BarChart/index.js

@@ -0,0 +1,4 @@
+export * from "./BarChart.js";
+export * from "./BarPlot.js";
+export * from "./BarElement.js";
+export * from "./BarLabel/index.js";

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

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

package/esm/BarChart/seriesConfig/extremums.js

@@ -0,0 +1,75 @@
+const createResult = (data, direction) => {
+  if (direction === 'x') {
+    return {
+      x: data,
+      y: null
+    };
+  }
+  return {
+    x: null,
+    y: data
+  };
+};
+const getBaseExtremum = params => {
+  const {
+    axis,
+    getFilters,
+    isDefaultAxis
+  } = params;
+  const filter = getFilters?.({
+    currentAxisId: axis.id,
+    isDefaultAxis
+  });
+  const data = filter ? axis.data?.filter((_, i) => filter({
+    x: null,
+    y: null
+  }, i)) : axis.data;
+  const minX = Math.min(...(data ?? []));
+  const maxX = Math.max(...(data ?? []));
+  return [minX, maxX];
+};
+const getValueExtremum = direction => params => {
+  const {
+    series,
+    axis,
+    getFilters,
+    isDefaultAxis
+  } = params;
+  return Object.keys(series).filter(seriesId => {
+    const axisId = direction === 'x' ? series[seriesId].xAxisId : series[seriesId].yAxisId;
+    return axisId === axis.id || isDefaultAxis && axisId === undefined;
+  }).reduce((acc, seriesId) => {
+    const {
+      stackedData
+    } = series[seriesId];
+    const filter = getFilters?.({
+      currentAxisId: axis.id,
+      isDefaultAxis,
+      seriesXAxisId: series[seriesId].xAxisId,
+      seriesYAxisId: series[seriesId].yAxisId
+    });
+    const [seriesMin, seriesMax] = stackedData?.reduce((seriesAcc, values, index) => {
+      if (filter && (!filter(createResult(values[0], direction), index) || !filter(createResult(values[1], direction), index))) {
+        return seriesAcc;
+      }
+      return [Math.min(...values, seriesAcc[0]), Math.max(...values, seriesAcc[1])];
+    }, [Infinity, -Infinity]) ?? [Infinity, -Infinity];
+    return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
+  }, [Infinity, -Infinity]);
+};
+export const getExtremumX = params => {
+  // Notice that bar should be all horizontal or all vertical.
+  // Don't think it's a problem for now
+  const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
+  if (isHorizontal) {
+    return getValueExtremum('x')(params);
+  }
+  return getBaseExtremum(params);
+};
+export const getExtremumY = params => {
+  const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
+  if (isHorizontal) {
+    return getBaseExtremum(params);
+  }
+  return getValueExtremum('y')(params);
+};

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

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

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

@@ -0,0 +1,3 @@
+import type { GetSeriesWithDefaultValues } from '../../internals/plugins/models/seriesConfig';
+declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'bar'>;
+export default getSeriesWithDefaultValues;

package/esm/BarChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -0,0 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
+  return _extends({
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
+    color: colors[seriesIndex % colors.length]
+  }, seriesData);
+};
+export default getSeriesWithDefaultValues;

package/esm/BarChart/seriesConfig/index.d.ts

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

package/esm/BarChart/seriesConfig/index.js

@@ -0,0 +1,15 @@
+import { getExtremumX, getExtremumY } from "./extremums.js";
+import seriesProcessor from "./seriesProcessor.js";
+import legendGetter from "./legend.js";
+import getColor from "./getColor.js";
+import tooltipGetter from "./tooltip.js";
+import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
+export const seriesConfig = {
+  seriesProcessor,
+  colorProcessor: getColor,
+  legendGetter,
+  tooltipGetter,
+  xExtremumGetter: getExtremumX,
+  yExtremumGetter: getExtremumY,
+  getSeriesWithDefaultValues
+};

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

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

package/esm/BarChart/seriesConfig/legend.js

@@ -0,0 +1,22 @@
+import { getLabel } from "../../internals/getLabel.js";
+const legendGetter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  return seriesOrder.reduce((acc, seriesId) => {
+    const formattedLabel = getLabel(series[seriesId].label, 'legend');
+    if (formattedLabel === undefined) {
+      return acc;
+    }
+    acc.push({
+      markType: series[seriesId].labelMarkType,
+      id: seriesId,
+      seriesId,
+      color: series[seriesId].color,
+      label: formattedLabel
+    });
+    return acc;
+  }, []);
+};
+export default legendGetter;

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

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

package/esm/BarChart/seriesConfig/seriesProcessor.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
+import { warnOnce } from '@mui/x-internals/warning';
+import { getStackingGroups } from "../../internals/stackSeries.js";
+import { defaultizeValueFormatter } from "../../internals/defaultizeValueFormatter.js";
+const seriesProcessor = (params, dataset) => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  const stackingGroups = getStackingGroups(params);
+
+  // Create a data set with format adapted to d3
+  const d3Dataset = dataset ?? [];
+  seriesOrder.forEach(id => {
+    const data = series[id].data;
+    if (data !== undefined) {
+      data.forEach((value, index) => {
+        if (d3Dataset.length <= index) {
+          d3Dataset.push({
+            [id]: value
+          });
+        } else {
+          d3Dataset[index][id] = value;
+        }
+      });
+    } else if (dataset === undefined) {
+      throw new Error([`MUI X: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+    }
+  });
+  const completedSeries = {};
+  stackingGroups.forEach(stackingGroup => {
+    const {
+      ids,
+      stackingOffset,
+      stackingOrder
+    } = stackingGroup;
+    // Get stacked values, and derive the domain
+    const stackedSeries = d3Stack().keys(ids.map(id => {
+      // Use dataKey if needed and available
+      const dataKey = series[id].dataKey;
+      return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
+    })).value((d, key) => d[key] ?? 0) // defaultize null value to 0
+    .order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    ids.forEach((id, index) => {
+      const dataKey = series[id].dataKey;
+      completedSeries[id] = _extends({
+        layout: 'vertical',
+        labelMarkType: 'square'
+      }, series[id], {
+        data: dataKey ? dataset.map(data => {
+          const value = data[dataKey];
+          if (typeof value !== 'number') {
+            if (process.env.NODE_ENV !== 'production') {
+              if (value !== null) {
+                warnOnce([`MUI X: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
+              }
+            }
+            return 0;
+          }
+          return value;
+        }) : series[id].data,
+        stackedData: stackedSeries[index].map(([a, b]) => [a, b])
+      });
+    });
+  });
+  return {
+    seriesOrder,
+    stackingGroups,
+    series: defaultizeValueFormatter(completedSeries, v => v == null ? '' : v.toLocaleString())
+  };
+};
+export default seriesProcessor;

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

@@ -0,0 +1,3 @@
+import type { TooltipGetter } from '../../internals/plugins/models';
+declare const tooltipGetter: TooltipGetter<'bar'>;
+export default tooltipGetter;