@mui/x-charts 8.5.3 → 8.7.0

package/BarChart/AnimatedBarElement.js

@@ -21,6 +21,8 @@ function AnimatedBarElement(props) {
   const animatedProps = (0, _useAnimateBar.useAnimateBar)(props);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({}, other, {
     filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
-    opacity: ownerState.isFaded ? 0.3 : 1
+    opacity: ownerState.isFaded ? 0.3 : 1,
+    "data-highlighted": ownerState.isHighlighted || undefined,
+    "data-faded": ownerState.isFaded || undefined
   }, animatedProps));
 }

package/BarChart/BarLabel/BarLabelPlot.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { CompletedBarData } from "../types.js";
+import type { ProcessedBarSeriesData } from "../types.js";
 import { BarLabelItemProps } from "./BarLabelItem.js";
 type BarLabelPlotProps = {
-  bars: CompletedBarData[];
+  bars: ProcessedBarSeriesData[];
   skipAnimation?: boolean;
   barLabel?: BarLabelItemProps['barLabel'];
 };

package/BarChart/BarLabel/BarLabelPlot.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _BarLabelItem = require("./BarLabelItem");
+var _barClasses = require("../barClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["bars", "skipAnimation"];
 /**
@@ -21,32 +22,39 @@ function BarLabelPlot(props) {
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const classes = (0, _barClasses.useUtilityClasses)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-    children: bars.map(({
-      xOrigin,
-      yOrigin,
-      x,
-      y,
+    children: bars.flatMap(({
       seriesId,
-      dataIndex,
-      color,
-      value,
-      width,
-      height,
-      layout
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarLabelItem.BarLabelItem, (0, _extends2.default)({
-      seriesId: seriesId,
-      dataIndex: dataIndex,
-      value: value,
-      color: color,
-      xOrigin: xOrigin,
-      yOrigin: yOrigin,
-      x: x,
-      y: y,
-      width: width,
-      height: height,
-      skipAnimation: skipAnimation ?? false,
-      layout: layout ?? 'vertical'
-    }, other), `${seriesId}-${dataIndex}`))
+      data
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.seriesLabels,
+      "data-series": seriesId,
+      children: data.map(({
+        xOrigin,
+        yOrigin,
+        x,
+        y,
+        dataIndex,
+        color,
+        value,
+        width,
+        height,
+        layout
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarLabelItem.BarLabelItem, (0, _extends2.default)({
+        seriesId: seriesId,
+        dataIndex: dataIndex,
+        value: value,
+        color: color,
+        xOrigin: xOrigin,
+        yOrigin: yOrigin,
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        skipAnimation: skipAnimation ?? false,
+        layout: layout ?? 'vertical'
+      }, other), dataIndex))
+    }, seriesId))
   });
 }

package/BarChart/BarPlot.js

@@ -14,155 +14,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _barElementClasses = require("./barElementClasses");
 var _BarElement = require("./BarElement");
-var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
 var _hooks = require("../hooks");
 var _BarClipPath = require("./BarClipPath");
 var _BarLabelPlot = require("./BarLabel/BarLabelPlot");
-var _checkScaleErrors = require("./checkScaleErrors");
-var _useBarSeries = require("../hooks/useBarSeries");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
+var _useBarPlotData = require("./useBarPlotData");
+var _barClasses = require("./barClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
-/**
- * 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.
- */
-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 = (0, _useBarSeries.useBarSeriesContext)() ?? {
-    series: {},
-    stackingGroups: [],
-    seriesOrder: []
-  };
-  const drawingArea = (0, _hooks.useDrawingArea)();
-  const chartId = (0, _hooks.useChartId)();
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const {
-    xAxis,
-    xAxisIds
-  } = (0, _hooks.useXAxes)();
-  const {
-    yAxis,
-    yAxisIds
-  } = (0, _hooks.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';
-      (0, _checkScaleErrors.checkScaleErrors)(verticalLayout, seriesId, series[seriesId], xAxisId, xAxis, yAxisId, yAxis);
-      const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
-      const xScale = xAxisConfig.scale;
-      const yScale = yAxisConfig.scale;
-      const colorGetter = (0, _getColor.default)(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) => {
-        if (currentSeriesData[dataIndex] == null) {
-          return null;
-        }
-        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) ?? 0,
-          yOrigin: yScale(0) ?? 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 BarPlotRoot = (0, _styles.styled)('g', {
   name: 'MuiBarPlot',
   slot: 'Root'
@@ -184,10 +44,6 @@ const BarPlotRoot = (0, _styles.styled)('g', {
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
 function BarPlot(props) {
-  const {
-    completedData,
-    masksData
-  } = useAggregatedData();
   const {
       skipAnimation: inSkipAnimation,
       onItemClick,
@@ -197,8 +53,20 @@ function BarPlot(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
+  const {
+    xAxis: xAxes
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis: yAxes
+  } = (0, _hooks.useYAxes)();
+  const {
+    completedData,
+    masksData
+  } = (0, _useBarPlotData.useBarPlotData)((0, _hooks.useDrawingArea)(), xAxes, yAxes);
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
+  const classes = (0, _barClasses.useUtilityClasses)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BarPlotRoot, {
+    className: classes.root,
     children: [!withoutBorderRadius && masksData.map(({
       id,
       x,
@@ -223,45 +91,53 @@ function BarPlot(props) {
       }, id);
     }), completedData.map(({
       seriesId,
-      dataIndex,
-      color,
-      maskId,
-      layout,
-      x,
-      xOrigin,
-      y,
-      yOrigin,
-      width,
-      height
+      data
     }) => {
-      const barElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
-        id: seriesId,
-        dataIndex: dataIndex,
-        color: color,
-        skipAnimation: skipAnimation ?? false,
-        layout: layout ?? 'vertical',
-        x: x,
-        xOrigin: xOrigin,
-        y: y,
-        yOrigin: yOrigin,
-        width: width,
-        height: height
-      }, other, {
-        onClick: onItemClick && (event => {
-          onItemClick(event, {
-            type: 'bar',
-            seriesId,
-            dataIndex
-          });
-        })
-      }), `${seriesId}-${dataIndex}`);
-      if (withoutBorderRadius) {
-        return barElement;
-      }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-        clipPath: `url(#${maskId})`,
-        children: barElement
-      }, `${seriesId}-${dataIndex}`);
+        "data-series": seriesId,
+        className: classes.series,
+        children: data.map(({
+          dataIndex,
+          color,
+          maskId,
+          layout,
+          x,
+          xOrigin,
+          y,
+          yOrigin,
+          width,
+          height
+        }) => {
+          const barElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
+            id: seriesId,
+            dataIndex: dataIndex,
+            color: color,
+            skipAnimation: skipAnimation ?? false,
+            layout: layout ?? 'vertical',
+            x: x,
+            xOrigin: xOrigin,
+            y: y,
+            yOrigin: yOrigin,
+            width: width,
+            height: height
+          }, other, {
+            onClick: onItemClick && (event => {
+              onItemClick(event, {
+                type: 'bar',
+                seriesId,
+                dataIndex
+              });
+            })
+          }), dataIndex);
+          if (withoutBorderRadius) {
+            return barElement;
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+            clipPath: `url(#${maskId})`,
+            children: barElement
+          }, dataIndex);
+        })
+      }, seriesId);
     }), barLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarLabelPlot.BarLabelPlot, (0, _extends2.default)({
       bars: completedData,
       skipAnimation: skipAnimation,

package/BarChart/barClasses.d.ts

@@ -0,0 +1,12 @@
+export interface BarClasses {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+}
+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<"root" | "series" | "seriesLabels", string>;

package/BarChart/barClasses.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.barClasses = void 0;
+exports.getBarUtilityClass = getBarUtilityClass;
+exports.useUtilityClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getBarUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiBar', slot);
+}
+const barClasses = exports.barClasses = (0, _generateUtilityClasses.default)('MuiBar', ['root', 'series', 'seriesLabels']);
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    series: ['series'],
+    seriesLabels: ['seriesLabels']
+  };
+  return (0, _composeClasses.default)(slots, getBarUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/BarChart/index.d.ts

@@ -2,4 +2,6 @@ export * from "./BarChart.js";
 export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
-export * from "./barElementClasses.js";
+export * from "./barElementClasses.js";
+export { barClasses, getBarUtilityClass } from "./barClasses.js";
+export type { BarClassKey, BarClasses } from "./barClasses.js";

package/BarChart/index.js

@@ -3,9 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  barClasses: true,
+  getBarUtilityClass: true
+};
+Object.defineProperty(exports, "barClasses", {
+  enumerable: true,
+  get: function () {
+    return _barClasses.barClasses;
+  }
+});
+Object.defineProperty(exports, "getBarUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _barClasses.getBarUtilityClass;
+  }
+});
 var _BarChart = require("./BarChart");
 Object.keys(_BarChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _BarChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +34,7 @@ Object.keys(_BarChart).forEach(function (key) {
 var _BarPlot = require("./BarPlot");
 Object.keys(_BarPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _BarPlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +46,7 @@ Object.keys(_BarPlot).forEach(function (key) {
 var _BarElement = require("./BarElement");
 Object.keys(_BarElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _BarElement[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +58,7 @@ Object.keys(_BarElement).forEach(function (key) {
 var _BarLabel = require("./BarLabel");
 Object.keys(_BarLabel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _BarLabel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -50,6 +70,7 @@ Object.keys(_BarLabel).forEach(function (key) {
 var _barElementClasses = require("./barElementClasses");
 Object.keys(_barElementClasses).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _barElementClasses[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -57,4 +78,5 @@ Object.keys(_barElementClasses).forEach(function (key) {
       return _barElementClasses[key];
     }
   });
-});
+});
+var _barClasses = require("./barClasses");

package/BarChart/types.d.ts

@@ -9,7 +9,11 @@ export type AnimationData = {
   xOrigin: number;
   layout: BarSeriesType['layout'];
 };
-export interface CompletedBarData extends AnimationData {
+export interface ProcessedBarSeriesData {
+  seriesId: SeriesId;
+  data: ProcessedBarData[];
+}
+export interface ProcessedBarData extends AnimationData {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;

package/BarChart/useBarPlotData.d.ts

@@ -0,0 +1,8 @@
+import { ChartsXAxisProps, ChartsYAxisProps } from "../models/axis.js";
+import { ChartDrawingArea } from "../hooks/index.js";
+import { MaskData, ProcessedBarSeriesData } from "./types.js";
+import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.js";
+export declare function useBarPlotData(drawingArea: ChartDrawingArea, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): {
+  completedData: ProcessedBarSeriesData[];
+  masksData: MaskData[];
+};

package/BarChart/useBarPlotData.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBarPlotData = useBarPlotData;
+var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
+var _hooks = require("../hooks");
+var _checkScaleErrors = require("./checkScaleErrors");
+var _useBarSeries = require("../hooks/useBarSeries");
+function useBarPlotData(drawingArea, xAxes, yAxes) {
+  const seriesData = (0, _useBarSeries.useBarSeriesContext)() ?? {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
+  const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
+  const defaultYAxisId = (0, _hooks.useYAxes)().yAxisIds[0];
+  const chartId = (0, _hooks.useChartId)();
+  const {
+    series,
+    stackingGroups
+  } = seriesData;
+  const masks = {};
+  const data = stackingGroups.flatMap(({
+    ids: seriesIds
+  }, groupIndex) => {
+    const xMin = drawingArea.left;
+    const xMax = drawingArea.left + drawingArea.width;
+    const yMin = drawingArea.top;
+    const yMax = drawingArea.top + drawingArea.height;
+    return seriesIds.map(seriesId => {
+      const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
+      const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
+      const xAxisConfig = xAxes[xAxisId];
+      const yAxisConfig = yAxes[yAxisId];
+      const verticalLayout = series[seriesId].layout === 'vertical';
+      (0, _checkScaleErrors.checkScaleErrors)(verticalLayout, seriesId, series[seriesId], xAxisId, xAxes, yAxisId, yAxes);
+      const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+      const xScale = xAxisConfig.scale;
+      const yScale = yAxisConfig.scale;
+      const colorGetter = (0, _getColor.default)(series[seriesId], xAxes[xAxisId], yAxes[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];
+      const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
+        if (currentSeriesData[dataIndex] == null) {
+          return null;
+        }
+        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) ?? 0,
+          yOrigin: yScale(0) ?? 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 {
+        seriesId,
+        data: seriesDataPoints
+      };
+    });
+  });
+  return {
+    completedData: data,
+    masksData: Object.values(masks)
+  };
+}
+
+/**
+ * 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.
+ */
+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
+  };
+}