@coinbase/cds-mobile-visualization 3.4.0-beta.24 → 3.4.0-beta.26

package/esm/chart/bar/BarStack.js

@@ -1,18 +1,16 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { memo, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
-import { evaluateGradientAtValue, getGradientStops } from '../utils/gradient';
+import { EPSILON, getBars, getStackBaseline, getStackOrigin } from '../utils/bar';
+import { getGradientStops } from '../utils/gradient';
 import { convertToSerializableScale } from '../utils/scale';
 import { Bar } from './Bar';
 import { DefaultBarStack } from './DefaultBarStack';
-import { jsx as _jsx } from "react/jsx-runtime";
-const EPSILON = 1e-4;
 
 /**
  * Extended series type that includes bar-specific properties.
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * BarStack component that renders a single stack of bars at a specific category index.
  * Handles the stacking logic for bars within a single category.
@@ -50,23 +48,11 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
   } = useCartesianChartContext();
   const xAxis = getXAxis(xAxisId);
   const yAxis = getYAxis(yAxisId);
-  const barsGrowVertically = layout !== 'horizontal';
-  const baseline = useMemo(() => {
-    var _valueScale;
-    const domain = valueScale.domain();
-    const [domainMin, domainMax] = domain;
-    const baselineValue = domainMin >= 0 ? domainMin : domainMax <= 0 ? domainMax : 0;
-    const fallback = barsGrowVertically ? rect.y + rect.height : rect.x;
-    const baselinePos = (_valueScale = valueScale(baselineValue)) != null ? _valueScale : fallback;
-    if (barsGrowVertically) {
-      return Math.max(rect.y, Math.min(baselinePos, rect.y + rect.height));
-    }
-    return Math.max(rect.x, Math.min(baselinePos, rect.x + rect.width));
-  }, [rect, valueScale, barsGrowVertically]);
+  const baseline = useMemo(() => getStackBaseline(valueScale, rect, layout), [rect, valueScale, layout]);
   const seriesGradients = useMemo(() => {
     return series.map(s => {
       if (!s.gradient) return;
-      const gradientScale = s.gradient.axis === 'x' ? barsGrowVertically ? indexScale : valueScale : barsGrowVertically ? valueScale : indexScale;
+      const gradientScale = s.gradient.axis === 'x' ? layout === 'vertical' ? indexScale : valueScale : layout === 'vertical' ? valueScale : indexScale;
       const serializableScale = convertToSerializableScale(gradientScale);
       if (!serializableScale) return;
       const domain = {
@@ -81,613 +67,95 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
         stops
       };
     });
-  }, [series, indexScale, valueScale, barsGrowVertically]);
-
-  // Calculate bars for this specific category
-  const {
-    bars,
-    stackRect
-  } = useMemo(() => {
-    const x = indexPos;
-    const width = thickness;
-    const yScale = valueScale;
-    let allBars = [];
-    if (!barsGrowVertically) {
-      let minX = Infinity;
-      let maxX = -Infinity;
-      series.forEach(s => {
-        var _yScale, _yScale2;
-        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 ? void 0 : originalData[categoryIndex];
-        const shouldApplyGap = !Array.isArray(originalValue);
-        const [bottom, top] = value.sort((a, b) => a - b);
-        const edgeBottom = (_yScale = yScale(bottom)) != null ? _yScale : baseline;
-        const edgeTop = (_yScale2 = yScale(top)) != null ? _yScale2 : baseline;
-        const length = Math.abs(edgeBottom - edgeTop);
-        const barX = Math.min(edgeBottom, edgeTop);
-        if (length <= 0) return;
-        minX = Math.min(minX, barX);
-        maxX = Math.max(maxX, barX + length);
-        let barFill = s.color || theme.color.fgPrimary;
-        const seriesGradientConfig = seriesGradients.find(g => (g == null ? void 0 : g.seriesId) === s.id);
-        if (seriesGradientConfig && originalValue !== null && originalValue !== undefined) {
-          var _seriesGradientConfig;
-          const axis = (_seriesGradientConfig = seriesGradientConfig.gradient.axis) != null ? _seriesGradientConfig : 'y';
-          const evalValue = axis === 'x' ? Array.isArray(originalValue) ? originalValue[1] : originalValue : categoryIndex;
-          const evaluatedColor = evaluateGradientAtValue(seriesGradientConfig.stops, evalValue, seriesGradientConfig.scale);
-          if (evaluatedColor) {
-            barFill = evaluatedColor;
-          }
-        }
-        const roundTop = roundBaseline || Math.abs(edgeTop - baseline) >= EPSILON;
-        const roundBottom = roundBaseline || Math.abs(edgeBottom - baseline) >= EPSILON;
-        allBars.push({
-          seriesId: s.id,
-          x: barX,
-          y: x,
-          width: length,
-          height: width,
-          dataY: value,
-          fill: barFill,
-          roundTop,
-          roundBottom,
-          BarComponent: s.BarComponent,
-          shouldApplyGap
-        });
-      });
-      if (stackGap && allBars.length > 1) {
-        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;
-        });
-        if (barsAboveBaseline.length > 1) {
-          const totalGapSpace = stackGap * (barsAboveBaseline.length - 1);
-          const totalDataLength = barsAboveBaseline.reduce((sum, bar) => sum + bar.width, 0);
-          const lengthReduction = totalGapSpace / totalDataLength;
-          const sortedBars = barsAboveBaseline.sort((a, b) => a.x - b.x);
-          let currentEdge = baseline;
-          sortedBars.forEach((bar, index) => {
-            const newLength = bar.width * (1 - lengthReduction);
-            const newX = currentEdge;
-            currentEdge = newX + newLength + (index < sortedBars.length - 1 ? stackGap : 0);
-            const barIndex = allBars.findIndex(b => b.seriesId === bar.seriesId);
-            if (barIndex !== -1) {
-              allBars[barIndex] = _extends({}, allBars[barIndex], {
-                width: newLength,
-                x: newX
-              });
-            }
-          });
-        }
-        if (barsBelowBaseline.length > 1) {
-          const totalGapSpace = stackGap * (barsBelowBaseline.length - 1);
-          const totalDataLength = barsBelowBaseline.reduce((sum, bar) => sum + bar.width, 0);
-          const lengthReduction = totalGapSpace / totalDataLength;
-          const sortedBars = barsBelowBaseline.sort((a, b) => b.x - a.x);
-          let currentEdge = baseline;
-          sortedBars.forEach((bar, index) => {
-            const newLength = bar.width * (1 - lengthReduction);
-            const newX = currentEdge - newLength;
-            currentEdge = newX - (index < sortedBars.length - 1 ? stackGap : 0);
-            const barIndex = allBars.findIndex(b => b.seriesId === bar.seriesId);
-            if (barIndex !== -1) {
-              allBars[barIndex] = _extends({}, allBars[barIndex], {
-                width: newLength,
-                x: newX
-              });
-            }
-          });
-        }
-        if (allBars.length > 0) {
-          minX = Math.min(...allBars.map(bar => bar.x));
-          maxX = Math.max(...allBars.map(bar => bar.x + bar.width));
-        }
-      }
-
-      // Horizontal border radius logic: left-to-right sorting.
-      const sortedBars = [...allBars].sort((a, b) => a.x - b.x);
-      const roundedBars = sortedBars.map((bar, index) => {
-        const barBefore = index > 0 ? sortedBars[index - 1] : null;
-        const barAfter = index < sortedBars.length - 1 ? sortedBars[index + 1] : null;
-        const shouldRoundLower = index === 0 || bar.shouldApplyGap && stackGap || !bar.shouldApplyGap && barAfter && barAfter.x + barAfter.width !== bar.x;
-        const shouldRoundHigher = index === sortedBars.length - 1 || bar.shouldApplyGap && stackGap || !bar.shouldApplyGap && barBefore && barBefore.x !== bar.x + bar.width;
-        return _extends({}, bar, {
-          roundTop: Boolean(bar.roundTop && shouldRoundHigher),
-          roundBottom: Boolean(bar.roundBottom && shouldRoundLower)
-        });
-      });
-      const stackBounds = {
-        x: minX === Infinity ? baseline : minX,
-        y: x,
-        width: maxX === -Infinity ? 0 : maxX - minX,
-        height: width
-      };
+  }, [series, indexScale, valueScale, layout]);
+  const categoryAxis = layout === 'vertical' ? xAxis : yAxis;
+  const categoryData = categoryAxis != null && categoryAxis.data && Array.isArray(categoryAxis.data) && typeof categoryAxis.data[0] === 'number' ? categoryAxis.data : undefined;
+  const categoryValue = categoryData ? categoryData[categoryIndex] : categoryIndex;
+  const seriesData = useMemo(() => Object.fromEntries(series.map(s => {
+    var _getSeriesData;
+    return [s.id, (_getSeriesData = getSeriesData(s.id)) != null ? _getSeriesData : []];
+  })), [series, getSeriesData]);
+  const bars = useMemo(() => getBars({
+    series,
+    seriesData,
+    categoryIndex,
+    categoryValue,
+    indexPos,
+    thickness,
+    valueScale,
+    seriesGradients,
+    roundBaseline,
+    layout,
+    baseline,
+    stackGap,
+    barMinSize,
+    stackMinSize,
+    defaultFill: theme.color.fgPrimary,
+    borderRadius,
+    defaultFillOpacity,
+    defaultStroke,
+    defaultStrokeWidth,
+    defaultBarComponent
+  }), [series, seriesData, indexPos, thickness, categoryIndex, categoryValue, roundBaseline, baseline, stackGap, barMinSize, stackMinSize, valueScale, seriesGradients, theme.color.fgPrimary, layout, borderRadius, defaultFillOpacity, defaultStroke, defaultStrokeWidth, defaultBarComponent]);
+  const stackRect = useMemo(() => {
+    if (bars.length === 0) {
       return {
-        bars: roundedBars,
-        stackRect: stackBounds
+        x: layout === 'vertical' ? indexPos : baseline,
+        y: layout === 'vertical' ? baseline : indexPos,
+        width: layout === 'vertical' ? thickness : 0,
+        height: layout === 'vertical' ? 0 : thickness
       };
     }
-
-    // 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 _yScale3, _yScale4;
-      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 ? 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 = (_yScale3 = yScale(bottom)) != null ? _yScale3 : baseline;
-      const barTop = (_yScale4 = yScale(top)) != null ? _yScale4 : 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);
-
-      // Determine fill color, respecting gradient if present
-      let barFill = s.color || theme.color.fgPrimary;
-
-      // Evaluate gradient if provided (using precomputed stops)
-      const seriesGradientConfig = seriesGradients.find(g => (g == null ? void 0 : g.seriesId) === s.id);
-      if (seriesGradientConfig) {
-        var _seriesGradientConfig2;
-        const axis = (_seriesGradientConfig2 = seriesGradientConfig.gradient.axis) != null ? _seriesGradientConfig2 : 'y';
-        // For x-axis gradient, use the categoryIndex
-        // For y-axis gradient, use the actual data value
-        const dataValue = axis === 'x' ? categoryIndex : top;
-        const evaluatedColor = evaluateGradientAtValue(seriesGradientConfig.stops, dataValue, 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,
-        BarComponent: s.BarComponent,
-        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] = _extends({}, 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] = _extends({}, 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 (barMinSize) {
-      // First, expand bars that need it and track the expansion
-      const expandedBars = allBars.map((bar, index) => {
-        if (bar.height < barMinSize) {
-          var _yScale5, _yScale6, _yScale7, _yScale8;
-          const heightIncrease = barMinSize - bar.height;
-          const [bottom, top] = bar.dataY.sort((a, b) => a - b);
-
-          // Determine how to expand the bar
-          let newBottom = bottom;
-          let newTop = top;
-          const scaleUnit = Math.abs(((_yScale5 = yScale(1)) != null ? _yScale5 : 0) - ((_yScale6 = yScale(0)) != null ? _yScale6 : 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 = (_yScale7 = yScale(newBottom)) != null ? _yScale7 : baseline;
-          const newBarTop = (_yScale8 = yScale(newTop)) != null ? _yScale8 : baseline;
-          const newHeight = Math.abs(newBarBottom - newBarTop);
-          const newY = Math.min(newBarBottom, newBarTop);
-          return _extends({}, bar, {
-            height: newHeight,
-            y: newY,
-            wasExpanded: true
-          });
-        }
-        return _extends({}, 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 _extends({}, 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 _extends({}, 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 (stackMinSize) {
-      if (allBars.length === 1 && stackBounds.height < stackMinSize) {
-        var _yScale9, _yScale0, _yScale1, _yScale10;
-        // For single bars (non-stacked), treat stackMinSize like barMinSize
-
-        const bar = allBars[0];
-        const heightIncrease = stackMinSize - bar.height;
-        const [bottom, top] = bar.dataY.sort((a, b) => a - b);
-
-        // Determine how to expand the bar (same logic as barMinSize)
-        let newBottom = bottom;
-        let newTop = top;
-        const scaleUnit = Math.abs(((_yScale9 = yScale(1)) != null ? _yScale9 : 0) - ((_yScale0 = yScale(0)) != null ? _yScale0 : 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 = (_yScale1 = yScale(newBottom)) != null ? _yScale1 : baseline;
-        const newBarTop = (_yScale10 = yScale(newTop)) != null ? _yScale10 : baseline;
-        const newHeight = Math.abs(newBarBottom - newBarTop);
-        const newY = Math.min(newBarBottom, newBarTop);
-        allBars[0] = _extends({}, bar, {
-          height: newHeight,
-          y: newY
-        });
-
-        // Recalculate stack bounds
-        stackBounds = {
-          x,
-          y: newY,
-          width,
-          height: newHeight
-        };
-      } else if (allBars.length > 1 && stackBounds.height < stackMinSize) {
-        // 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 = stackMinSize - 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 _extends({}, 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 < stackMinSize) {
-        allBars = applyBorderRadiusLogic(allBars);
-      }
-    }
+    const minX = Math.min(...bars.map(b => b.x));
+    const minY = Math.min(...bars.map(b => b.y));
+    const maxX = Math.max(...bars.map(b => b.x + b.width));
+    const maxY = Math.max(...bars.map(b => b.y + b.height));
     return {
-      bars: allBars,
-      stackRect: stackBounds
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY
     };
-  }, [series, indexPos, thickness, getSeriesData, categoryIndex, roundBaseline, baseline, stackGap, barMinSize, stackMinSize, valueScale, seriesGradients, theme.color.fgPrimary, barsGrowVertically]);
-  const categoryAxis = barsGrowVertically ? xAxis : yAxis;
-  const categoryData = categoryAxis != null && categoryAxis.data && Array.isArray(categoryAxis.data) && typeof categoryAxis.data[0] === 'number' ? categoryAxis.data : undefined;
-  const categoryValue = categoryData ? categoryData[categoryIndex] : categoryIndex;
+  }, [bars, baseline, indexPos, layout, thickness]);
+  const stackOrigin = useMemo(() => {
+    var _getStackOrigin;
+    return (_getStackOrigin = getStackOrigin(bars.map(b => b.origin), bars.map(b => {
+      var _b$minSize;
+      return (_b$minSize = b.minSize) != null ? _b$minSize : 0;
+    }))) != null ? _getStackOrigin : baseline;
+  }, [bars, baseline]);
   const barElements = bars.map((bar, index) => /*#__PURE__*/_jsx(Bar, {
-    BarComponent: bar.BarComponent || defaultBarComponent,
-    borderRadius: borderRadius,
-    dataX: barsGrowVertically ? categoryValue : bar.dataY,
-    dataY: barsGrowVertically ? bar.dataY : categoryValue,
+    BarComponent: bar.BarComponent,
+    borderRadius: bar.borderRadius,
+    dataX: bar.dataX,
+    dataY: bar.dataY,
     fill: bar.fill,
-    fillOpacity: defaultFillOpacity,
+    fillOpacity: bar.fillOpacity,
     height: bar.height,
-    origin: baseline,
+    minSize: bar.minSize,
+    origin: bar.origin,
     roundBottom: bar.roundBottom,
     roundTop: bar.roundTop,
     seriesId: bar.seriesId,
-    stroke: defaultStroke,
-    strokeWidth: defaultStrokeWidth,
+    stroke: bar.stroke,
+    strokeWidth: bar.strokeWidth,
     transition: transition,
     transitions: transitions,
     width: bar.width,
     x: bar.x,
     y: bar.y
   }, bar.seriesId + "-" + categoryIndex + "-" + index));
-
-  // Check if the stack should be rounded based on baseline, across both orientations.
-  const edge = barsGrowVertically ? stackRect.y : stackRect.x;
-  const size = barsGrowVertically ? stackRect.height : stackRect.width;
+  const edge = layout === 'vertical' ? stackRect.y : stackRect.x;
+  const size = layout === 'vertical' ? stackRect.height : stackRect.width;
   const stackRoundLower = roundBaseline || Math.abs(edge - baseline) >= EPSILON;
   const stackRoundHigher = roundBaseline || Math.abs(edge + size - baseline) >= EPSILON;
-  const stackRoundTop = barsGrowVertically ? stackRoundLower : stackRoundHigher;
-  const stackRoundBottom = barsGrowVertically ? stackRoundHigher : stackRoundLower;
+  const stackRoundTop = layout === 'vertical' ? stackRoundLower : stackRoundHigher;
+  const stackRoundBottom = layout === 'vertical' ? stackRoundHigher : stackRoundLower;
   return /*#__PURE__*/_jsx(BarStackComponent, {
     borderRadius: borderRadius,
     categoryIndex: categoryIndex,
     height: stackRect.height,
+    origin: stackOrigin,
     roundBottom: stackRoundBottom,
     roundTop: stackRoundTop,
     transition: transition,
@@ -695,7 +163,6 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     width: stackRect.width,
     x: stackRect.x,
     y: stackRect.y,
-    yOrigin: baseline,
     children: barElements
   });
 });