@coinbase/cds-web-visualization 3.3.2 → 3.4.0-beta.10

package/esm/chart/bar/BarStack.js

@@ -0,0 +1,561 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { memo, useMemo } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { evaluateGradientAtValue, getGradientConfig } from '../utils/gradient';
+import { Bar } from './Bar';
+import { DefaultBarStack } from './DefaultBarStack';
+import { jsx as _jsx } from "react/jsx-runtime";
+const EPSILON = 1e-4;
+/**
+ * BarStack component that renders a single stack of bars at a specific category index.
+ * Handles the stacking logic for bars within a single category.
+ */
+export const BarStack = /*#__PURE__*/memo(_ref => {
+  let {
+    series,
+    categoryIndex,
+    x,
+    width,
+    yScale,
+    rect,
+    BarComponent: defaultBarComponent,
+    fillOpacity: defaultFillOpacity,
+    stroke: defaultStroke,
+    strokeWidth: defaultStrokeWidth,
+    borderRadius = 4,
+    BarStackComponent = DefaultBarStack,
+    stackGap,
+    barMinSize,
+    stackMinSize,
+    roundBaseline,
+    transition
+  } = _ref;
+  const {
+    getSeriesData,
+    getXAxis,
+    getXScale,
+    getSeries
+  } = useCartesianChartContext();
+  const xScale = getXScale();
+  const barMinSizePx = barMinSize;
+  const stackMinSizePx = stackMinSize;
+  const xAxis = getXAxis();
+  const baseline = useMemo(() => {
+    var _yScale;
+    const domain = yScale.domain();
+    const [domainMin, domainMax] = domain;
+    const baselineValue = domainMin >= 0 ? domainMin : domainMax <= 0 ? domainMax : 0;
+    const baseline = (_yScale = yScale(baselineValue)) !== null && _yScale !== void 0 ? _yScale : rect.y + rect.height;
+    return Math.max(rect.y, Math.min(baseline, rect.y + rect.height));
+  }, [rect.height, rect.y, yScale]);
+  const seriesGradients = useMemo(() => {
+    return series.map(s => {
+      if (!s.gradient || !xScale || !yScale) return null;
+      const gradientScale = s.gradient.axis === 'x' ? xScale : yScale;
+      const stops = getGradientConfig(s.gradient, xScale, yScale);
+      if (!stops) return null;
+      return {
+        seriesId: s.id,
+        gradient: s.gradient,
+        scale: gradientScale,
+        stops
+      };
+    });
+  }, [series, xScale, yScale]);
+
+  // Calculate bars for this specific category
+  const {
+    bars,
+    stackRect
+  } = useMemo(() => {
+    let allBars = [];
+
+    // Track how many bars we've stacked in each direction for gap calculation
+    let positiveBarCount = 0;
+    let negativeBarCount = 0;
+
+    // Track stack bounds for clipping
+    let minY = Infinity;
+    let maxY = -Infinity;
+
+    // Process each series in the stack
+    series.forEach(s => {
+      var _yScale2, _yScale3, _s$color;
+      const data = getSeriesData(s.id);
+      if (!data) return;
+      const value = data[categoryIndex];
+      if (value === null || value === undefined) return;
+      const originalData = s.data;
+      const originalValue = originalData === null || originalData === void 0 ? void 0 : originalData[categoryIndex];
+      // Only apply gap logic if the original data wasn't tuple format
+      const shouldApplyGap = !Array.isArray(originalValue);
+
+      // Sort to be in ascending order
+      const [bottom, top] = value.sort((a, b) => a - b);
+      const isAboveBaseline = bottom >= 0 && top !== bottom;
+      const isBelowBaseline = bottom <= 0 && bottom !== top;
+      const barBottom = (_yScale2 = yScale(bottom)) !== null && _yScale2 !== void 0 ? _yScale2 : baseline;
+      const barTop = (_yScale3 = yScale(top)) !== null && _yScale3 !== void 0 ? _yScale3 : baseline;
+
+      // Track bar counts for later gap calculations
+      if (shouldApplyGap) {
+        if (isAboveBaseline) {
+          positiveBarCount++;
+        } else if (isBelowBaseline) {
+          negativeBarCount++;
+        }
+      }
+
+      // Calculate height (remember SVG y coordinates are inverted)
+      const height = Math.abs(barBottom - barTop);
+      const y = Math.min(barBottom, barTop);
+
+      // Skip bars that would have zero or negative height
+      if (height <= 0) {
+        return;
+      }
+
+      // Update stack bounds
+      minY = Math.min(minY, y);
+      maxY = Math.max(maxY, y + height);
+      let barFill = (_s$color = s.color) !== null && _s$color !== void 0 ? _s$color : 'var(--color-fgPrimary)';
+
+      // Evaluate gradient if provided (using precomputed stops)
+      const seriesGradientConfig = seriesGradients.find(g => (g === null || g === void 0 ? void 0 : g.seriesId) === s.id);
+      if (seriesGradientConfig && originalValue !== null && originalValue !== undefined) {
+        var _seriesGradientConfig;
+        const axis = (_seriesGradientConfig = seriesGradientConfig.gradient.axis) !== null && _seriesGradientConfig !== void 0 ? _seriesGradientConfig : 'y';
+        // For x-axis gradient, use the categoryIndex
+        // For y-axis gradient, use the ORIGINAL data value (not the processed top value)
+        // This is important for bar charts where originalValue might be a single number (e.g., -40, 15)
+        // or a tuple (e.g., [0, 10] for range bars)
+        let evalValue;
+        if (axis === 'x') {
+          evalValue = categoryIndex;
+        } else {
+          // Use original value for evaluation - handles both single numbers and tuples
+          evalValue = Array.isArray(originalValue) ? originalValue[1] : originalValue;
+        }
+        const evaluatedColor = evaluateGradientAtValue(seriesGradientConfig.stops, evalValue, seriesGradientConfig.scale);
+        if (evaluatedColor) {
+          // Only apply gradient color if fill is not explicitly set
+          barFill = evaluatedColor;
+        }
+      }
+      allBars.push({
+        seriesId: s.id,
+        x,
+        y,
+        width,
+        height,
+        dataY: value,
+        // Store the actual data value
+        fill: barFill,
+        // Check if the bar should be rounded based on the baseline, with an epsilon to handle floating-point rounding
+        roundTop: roundBaseline || Math.abs(barTop - baseline) >= EPSILON,
+        roundBottom: roundBaseline || Math.abs(barBottom - baseline) >= EPSILON,
+        shouldApplyGap
+      });
+    });
+
+    // Apply proportional gap distribution to maintain total stack height
+    if (stackGap && allBars.length > 1) {
+      // Separate bars by baseline side
+      const barsAboveBaseline = allBars.filter(bar => {
+        const [bottom, top] = bar.dataY.sort((a, b) => a - b);
+        return bottom >= 0 && top !== bottom && bar.shouldApplyGap;
+      });
+      const barsBelowBaseline = allBars.filter(bar => {
+        const [bottom, top] = bar.dataY.sort((a, b) => a - b);
+        return bottom <= 0 && bottom !== top && bar.shouldApplyGap;
+      });
+
+      // Apply proportional gaps to bars above baseline
+      if (barsAboveBaseline.length > 1) {
+        const totalGapSpace = stackGap * (barsAboveBaseline.length - 1);
+        const totalDataHeight = barsAboveBaseline.reduce((sum, bar) => sum + bar.height, 0);
+        const heightReduction = totalGapSpace / totalDataHeight;
+
+        // Sort bars by position (from baseline upward)
+        const sortedBars = barsAboveBaseline.sort((a, b) => b.y - a.y);
+        let currentY = baseline;
+        sortedBars.forEach((bar, index) => {
+          // Reduce bar height proportionally
+          const newHeight = bar.height * (1 - heightReduction);
+          const newY = currentY - newHeight;
+
+          // Update the bar in allBars array
+          const barIndex = allBars.findIndex(b => b.seriesId === bar.seriesId);
+          if (barIndex !== -1) {
+            allBars[barIndex] = _objectSpread(_objectSpread({}, allBars[barIndex]), {}, {
+              height: newHeight,
+              y: newY
+            });
+          }
+
+          // Move to next position (include gap for next bar)
+          currentY = newY - (index < sortedBars.length - 1 ? stackGap : 0);
+        });
+      }
+
+      // Apply proportional gaps to bars below baseline
+      if (barsBelowBaseline.length > 1) {
+        const totalGapSpace = stackGap * (barsBelowBaseline.length - 1);
+        const totalDataHeight = barsBelowBaseline.reduce((sum, bar) => sum + bar.height, 0);
+        const heightReduction = totalGapSpace / totalDataHeight;
+
+        // Sort bars by position (from baseline downward)
+        const sortedBars = barsBelowBaseline.sort((a, b) => a.y - b.y);
+        let currentY = baseline;
+        sortedBars.forEach((bar, index) => {
+          // Reduce bar height proportionally
+          const newHeight = bar.height * (1 - heightReduction);
+
+          // Update the bar in allBars array
+          const barIndex = allBars.findIndex(b => b.seriesId === bar.seriesId);
+          if (barIndex !== -1) {
+            allBars[barIndex] = _objectSpread(_objectSpread({}, allBars[barIndex]), {}, {
+              height: newHeight,
+              y: currentY
+            });
+          }
+
+          // Move to next position (include gap for next bar)
+          currentY = currentY + newHeight + (index < sortedBars.length - 1 ? stackGap : 0);
+        });
+      }
+
+      // Recalculate stack bounds after gap adjustments
+      if (allBars.length > 0) {
+        minY = Math.min(...allBars.map(bar => bar.y));
+        maxY = Math.max(...allBars.map(bar => bar.y + bar.height));
+      }
+    }
+
+    // Apply barMinSize constraints
+    if (barMinSizePx) {
+      // First, expand bars that need it and track the expansion
+      const expandedBars = allBars.map((bar, index) => {
+        if (bar.height < barMinSizePx) {
+          var _yScale4, _yScale5, _yScale6, _yScale7;
+          const heightIncrease = barMinSizePx - bar.height;
+          const bottom = 0;
+          const top = 0;
+
+          // Determine how to expand the bar
+          let newBottom = bottom;
+          let newTop = top;
+          const scaleUnit = Math.abs(((_yScale4 = yScale(1)) !== null && _yScale4 !== void 0 ? _yScale4 : 0) - ((_yScale5 = yScale(0)) !== null && _yScale5 !== void 0 ? _yScale5 : 0));
+          if (bottom === 0) {
+            // Expand away from baseline (upward for positive)
+            newTop = top + heightIncrease / scaleUnit;
+          } else if (top === 0) {
+            // Expand away from baseline (downward for negative)
+            newBottom = bottom - heightIncrease / scaleUnit;
+          } else {
+            // Expand in both directions
+            const halfIncrease = heightIncrease / scaleUnit / 2;
+            newBottom = bottom - halfIncrease;
+            newTop = top + halfIncrease;
+          }
+
+          // Recalculate bar position with new data values
+          const newBarBottom = (_yScale6 = yScale(newBottom)) !== null && _yScale6 !== void 0 ? _yScale6 : baseline;
+          const newBarTop = (_yScale7 = yScale(newTop)) !== null && _yScale7 !== void 0 ? _yScale7 : baseline;
+          const newHeight = Math.abs(newBarBottom - newBarTop);
+          const newY = Math.min(newBarBottom, newBarTop);
+          return _objectSpread(_objectSpread({}, bar), {}, {
+            height: newHeight,
+            y: newY,
+            wasExpanded: true
+          });
+        }
+        return _objectSpread(_objectSpread({}, bar), {}, {
+          wasExpanded: false
+        });
+      });
+
+      // Now reposition all bars to avoid overlaps, similar to stackMinSize logic
+
+      // Sort bars by position to maintain order
+      const sortedExpandedBars = [...expandedBars].sort((a, b) => a.y - b.y);
+
+      // Determine if we have bars above and below baseline
+      const barsAboveBaseline = sortedExpandedBars.filter(bar => bar.y + bar.height <= baseline);
+      const barsBelowBaseline = sortedExpandedBars.filter(bar => bar.y >= baseline);
+
+      // Create a map of new positions
+      const newPositions = new Map();
+
+      // Start positioning from the baseline and work outward
+      let currentYAbove = baseline; // Start at baseline, work upward (decreasing Y)
+      let currentYBelow = baseline; // Start at baseline, work downward (increasing Y)
+
+      // Position bars above baseline (positive values, decreasing Y)
+      for (let i = barsAboveBaseline.length - 1; i >= 0; i--) {
+        const bar = barsAboveBaseline[i];
+        const newY = currentYAbove - bar.height;
+        newPositions.set(bar.seriesId, {
+          y: newY,
+          height: bar.height
+        });
+
+        // Update currentYAbove for next bar (preserve gaps)
+        if (i > 0) {
+          const currentBar = barsAboveBaseline[i];
+          const nextBar = barsAboveBaseline[i - 1];
+          // Find original bars to get original gap
+          const originalCurrent = allBars.find(b => b.seriesId === currentBar.seriesId);
+          const originalNext = allBars.find(b => b.seriesId === nextBar.seriesId);
+          const originalGap = originalCurrent.y - (originalNext.y + originalNext.height);
+          currentYAbove = newY - originalGap;
+        }
+      }
+
+      // Position bars below baseline (negative values, increasing Y)
+      for (let i = 0; i < barsBelowBaseline.length; i++) {
+        const bar = barsBelowBaseline[i];
+        const newY = currentYBelow;
+        newPositions.set(bar.seriesId, {
+          y: newY,
+          height: bar.height
+        });
+
+        // Update currentYBelow for next bar (preserve gaps)
+        if (i < barsBelowBaseline.length - 1) {
+          const currentBar = barsBelowBaseline[i];
+          const nextBar = barsBelowBaseline[i + 1];
+          // Find original bars to get original gap
+          const originalCurrent = allBars.find(b => b.seriesId === currentBar.seriesId);
+          const originalNext = allBars.find(b => b.seriesId === nextBar.seriesId);
+          const originalGap = originalNext.y - (originalCurrent.y + originalCurrent.height);
+          currentYBelow = newY + bar.height + originalGap;
+        }
+      }
+
+      // Apply new positions to all bars
+      allBars = expandedBars.map(bar => {
+        const newPos = newPositions.get(bar.seriesId);
+        if (newPos) {
+          return _objectSpread(_objectSpread({}, bar), {}, {
+            y: newPos.y,
+            height: newPos.height
+          });
+        }
+        return bar;
+      });
+
+      // Recalculate stack bounds after barMinSize expansion and repositioning
+      if (allBars.length > 0) {
+        minY = Math.min(...allBars.map(bar => bar.y));
+        maxY = Math.max(...allBars.map(bar => bar.y + bar.height));
+      }
+    }
+
+    // Apply border radius logic (will be reapplied after stackMinSize if needed)
+    const applyBorderRadiusLogic = bars => {
+      return bars.sort((a, b) => b.y - a.y).map((a, index) => {
+        const barBefore = index > 0 ? bars[index - 1] : null;
+        const barAfter = index < bars.length - 1 ? bars[index + 1] : null;
+        const shouldRoundTop = index === bars.length - 1 || a.shouldApplyGap && stackGap || !a.shouldApplyGap && barAfter && barAfter.y + barAfter.height !== a.y;
+        const shouldRoundBottom = index === 0 || a.shouldApplyGap && stackGap || !a.shouldApplyGap && barBefore && barBefore.y !== a.y + a.height;
+        return _objectSpread(_objectSpread({}, a), {}, {
+          roundTop: Boolean(a.roundTop && shouldRoundTop),
+          roundBottom: Boolean(a.roundBottom && shouldRoundBottom)
+        });
+      });
+    };
+    allBars = applyBorderRadiusLogic(allBars);
+
+    // Calculate the bounding rect for the entire stack
+    let stackBounds = {
+      x,
+      y: minY === Infinity ? baseline : minY,
+      width,
+      height: maxY === -Infinity ? 0 : maxY - minY
+    };
+
+    // Apply stackMinSize constraints
+    if (stackMinSizePx) {
+      if (allBars.length === 1 && stackBounds.height < stackMinSizePx) {
+        var _yScale8, _yScale9, _yScale0, _yScale1;
+        // For single bars (non-stacked), treat stackMinSize like barMinSize
+
+        const bar = allBars[0];
+        const heightIncrease = stackMinSizePx - bar.height;
+        const bottom = 0;
+        const top = 0;
+
+        // Determine how to expand the bar (same logic as barMinSize)
+        let newBottom = bottom;
+        let newTop = top;
+        const scaleUnit = Math.abs(((_yScale8 = yScale(1)) !== null && _yScale8 !== void 0 ? _yScale8 : 0) - ((_yScale9 = yScale(0)) !== null && _yScale9 !== void 0 ? _yScale9 : 0));
+        if (bottom === 0) {
+          // Expand away from baseline (upward for positive)
+          newTop = top + heightIncrease / scaleUnit;
+        } else if (top === 0) {
+          // Expand away from baseline (downward for negative)
+          newBottom = bottom - heightIncrease / scaleUnit;
+        } else {
+          // Expand in both directions
+          const halfIncrease = heightIncrease / scaleUnit / 2;
+          newBottom = bottom - halfIncrease;
+          newTop = top + halfIncrease;
+        }
+
+        // Recalculate bar position with new data values
+        const newBarBottom = (_yScale0 = yScale(newBottom)) !== null && _yScale0 !== void 0 ? _yScale0 : baseline;
+        const newBarTop = (_yScale1 = yScale(newTop)) !== null && _yScale1 !== void 0 ? _yScale1 : baseline;
+        const newHeight = Math.abs(newBarBottom - newBarTop);
+        const newY = Math.min(newBarBottom, newBarTop);
+        allBars[0] = _objectSpread(_objectSpread({}, bar), {}, {
+          height: newHeight,
+          y: newY
+        });
+
+        // Recalculate stack bounds
+        stackBounds = {
+          x,
+          y: newY,
+          width,
+          height: newHeight
+        };
+      } else if (allBars.length > 1 && stackBounds.height < stackMinSizePx) {
+        // For multiple bars (stacked), scale heights while preserving gaps
+
+        // Calculate total bar height (excluding gaps)
+        const totalBarHeight = allBars.reduce((sum, bar) => sum + bar.height, 0);
+        const totalGapHeight = stackBounds.height - totalBarHeight;
+
+        // Calculate how much we need to increase bar heights
+        const requiredBarHeight = stackMinSizePx - totalGapHeight;
+        const barScaleFactor = requiredBarHeight / totalBarHeight;
+
+        // Sort bars by position to maintain order
+        const sortedBars = [...allBars].sort((a, b) => a.y - b.y);
+
+        // Determine if we have bars above and below baseline
+        const barsAboveBaseline = sortedBars.filter(bar => bar.y + bar.height <= baseline);
+        const barsBelowBaseline = sortedBars.filter(bar => bar.y >= baseline);
+
+        // Create a map of new positions
+        const newPositions = new Map();
+
+        // Start positioning from the baseline and work outward
+        let currentYAbove = baseline; // Start at baseline, work upward (decreasing Y)
+        let currentYBelow = baseline; // Start at baseline, work downward (increasing Y)
+
+        // Position bars above baseline (positive values, decreasing Y)
+        for (let i = barsAboveBaseline.length - 1; i >= 0; i--) {
+          const bar = barsAboveBaseline[i];
+          const newHeight = bar.height * barScaleFactor;
+          const newY = currentYAbove - newHeight;
+          newPositions.set(bar.seriesId, {
+            y: newY,
+            height: newHeight
+          });
+
+          // Update currentYAbove for next bar (preserve gaps)
+          if (i > 0) {
+            const currentBar = barsAboveBaseline[i];
+            const nextBar = barsAboveBaseline[i - 1];
+            const originalGap = currentBar.y - (nextBar.y + nextBar.height);
+            currentYAbove = newY - originalGap;
+          }
+        }
+
+        // Position bars below baseline (negative values, increasing Y)
+        for (let i = 0; i < barsBelowBaseline.length; i++) {
+          const bar = barsBelowBaseline[i];
+          const newHeight = bar.height * barScaleFactor;
+          const newY = currentYBelow;
+          newPositions.set(bar.seriesId, {
+            y: newY,
+            height: newHeight
+          });
+
+          // Update currentYBelow for next bar (preserve gaps)
+          if (i < barsBelowBaseline.length - 1) {
+            const currentBar = barsBelowBaseline[i];
+            const nextBar = barsBelowBaseline[i + 1];
+            const originalGap = nextBar.y - (currentBar.y + currentBar.height);
+            currentYBelow = newY + newHeight + originalGap;
+          }
+        }
+
+        // Apply new positions to all bars
+        allBars = allBars.map(bar => {
+          const newPos = newPositions.get(bar.seriesId);
+          if (!newPos) return bar;
+          return _objectSpread(_objectSpread({}, bar), {}, {
+            height: newPos.height,
+            y: newPos.y
+          });
+        });
+
+        // Recalculate stack bounds
+        const newMinY = Math.min(...allBars.map(bar => bar.y));
+        const newMaxY = Math.max(...allBars.map(bar => bar.y + bar.height));
+        stackBounds = {
+          x,
+          y: newMinY,
+          width,
+          height: newMaxY - newMinY
+        };
+      }
+
+      // Reapply border radius logic only if we actually scaled
+      if (stackBounds.height < stackMinSizePx) {
+        allBars = applyBorderRadiusLogic(allBars);
+      }
+    }
+    return {
+      bars: allBars,
+      stackRect: stackBounds
+    };
+  }, [series, stackGap, barMinSizePx, x, baseline, width, stackMinSizePx, getSeriesData, categoryIndex, yScale, seriesGradients, roundBaseline]);
+  const xData = xAxis !== null && xAxis !== void 0 && xAxis.data && Array.isArray(xAxis.data) && typeof xAxis.data[0] === 'number' ? xAxis.data : undefined;
+  const dataX = xData ? xData[categoryIndex] : categoryIndex;
+  const barElements = bars.map((bar, index) => {
+    var _bar$fillOpacity, _bar$stroke, _bar$strokeWidth;
+    return /*#__PURE__*/_jsx(Bar, {
+      BarComponent: bar.BarComponent || defaultBarComponent,
+      borderRadius: borderRadius,
+      dataX: dataX,
+      dataY: bar.dataY,
+      fill: bar.fill,
+      fillOpacity: (_bar$fillOpacity = bar.fillOpacity) !== null && _bar$fillOpacity !== void 0 ? _bar$fillOpacity : defaultFillOpacity,
+      height: bar.height,
+      originY: baseline,
+      roundBottom: bar.roundBottom,
+      roundTop: bar.roundTop,
+      stroke: (_bar$stroke = bar.stroke) !== null && _bar$stroke !== void 0 ? _bar$stroke : defaultStroke,
+      strokeWidth: (_bar$strokeWidth = bar.strokeWidth) !== null && _bar$strokeWidth !== void 0 ? _bar$strokeWidth : defaultStrokeWidth,
+      transition: transition,
+      width: bar.width,
+      x: bar.x,
+      y: bar.y
+    }, "".concat(bar.seriesId, "-").concat(categoryIndex, "-").concat(index));
+  });
+
+  // Check if the bar should be rounded based on the baseline, with an epsilon to handle floating-point rounding
+  const stackRoundBottom = roundBaseline || Math.abs(stackRect.y + stackRect.height - baseline) >= EPSILON;
+  const stackRoundTop = roundBaseline || Math.abs(stackRect.y - baseline) >= EPSILON;
+  return /*#__PURE__*/_jsx(BarStackComponent, {
+    borderRadius: borderRadius,
+    categoryIndex: categoryIndex,
+    height: stackRect.height,
+    roundBottom: stackRoundBottom,
+    roundTop: stackRoundTop,
+    transition: transition,
+    width: stackRect.width,
+    x: stackRect.x,
+    y: stackRect.y,
+    yOrigin: baseline,
+    children: barElements
+  });
+});

package/esm/chart/bar/BarStackGroup.js

@@ -0,0 +1,86 @@
+const _excluded = ["series", "yAxisId", "stackIndex", "totalStacks", "barPadding"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useMemo, createElement as _createElement } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { getBarSizeAdjustment } from '../utils/bar';
+import { isCategoricalScale } from '../utils/scale';
+import { BarStack } from './BarStack';
+/**
+ * BarStackGroup component that renders a group of stacks across all categories.
+ * Delegates the actual stacking logic to BarStack for each category.
+ */
+export const BarStackGroup = /*#__PURE__*/memo(_ref => {
+  let {
+      series,
+      yAxisId,
+      stackIndex,
+      totalStacks,
+      barPadding = 0.1
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    getXScale,
+    getYScale,
+    drawingArea,
+    dataLength
+  } = useCartesianChartContext();
+  const xScale = getXScale();
+  const yScale = getYScale(yAxisId);
+  const stackConfigs = useMemo(() => {
+    if (!xScale || !yScale || !drawingArea || dataLength === 0) return [];
+    if (!isCategoricalScale(xScale)) {
+      return [];
+    }
+    const categoryWidth = xScale.bandwidth();
+
+    // Calculate width for each stack within a category
+    // Only apply barPadding when there are multiple stacks
+    const gapWidth = totalStacks > 1 ? categoryWidth * barPadding / (totalStacks - 1) : 0;
+    const barWidth = categoryWidth / totalStacks - getBarSizeAdjustment(totalStacks, gapWidth);
+    const configs = [];
+
+    // Calculate position for each category
+    // todo: look at using xDomain for this instead of dataLength
+    for (let categoryIndex = 0; categoryIndex < dataLength; categoryIndex++) {
+      // Get x position for this category
+      const categoryX = xScale(categoryIndex);
+      if (categoryX !== undefined) {
+        // Calculate x position for this specific stack within the category
+        const stackX = categoryX + stackIndex * (barWidth + gapWidth);
+        configs.push({
+          categoryIndex,
+          x: stackX,
+          width: barWidth
+        });
+      }
+    }
+    return configs;
+  }, [xScale, yScale, drawingArea, dataLength, stackIndex, totalStacks, barPadding]);
+  if (xScale && !isCategoricalScale(xScale)) {
+    throw new Error('BarStackGroup requires a band scale for x-axis. See https://cds.coinbase.com/components/graphs/XAxis/#scale-type');
+  }
+  if (!yScale || !drawingArea || stackConfigs.length === 0) return null;
+  return stackConfigs.map(_ref2 => {
+    let {
+      categoryIndex,
+      x,
+      width
+    } = _ref2;
+    return /*#__PURE__*/_createElement(BarStack, _objectSpread(_objectSpread({}, props), {}, {
+      key: "stack-".concat(stackIndex, "-category-").concat(categoryIndex),
+      categoryIndex: categoryIndex,
+      rect: drawingArea,
+      series: series,
+      width: width,
+      x: x,
+      yAxisId: yAxisId,
+      yScale: yScale
+    }));
+  });
+});