@coinbase/cds-web-visualization 3.4.0-beta.23 → 3.4.0-beta.25

package/esm/chart/bar/Bar.js

@@ -33,6 +33,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     borderRadius = 4,
     roundTop = true,
     roundBottom = true,
+    minSize,
     transitions,
     transition
   } = _ref;
@@ -42,12 +43,8 @@ export const Bar = /*#__PURE__*/memo(_ref => {
   const barPath = useMemo(() => {
     return getBarPath(x, y, width, height, borderRadius, !!roundTop, !!roundBottom, layout);
   }, [x, y, width, height, borderRadius, roundTop, roundBottom, layout]);
-  const origin = useMemo(() => {
-    return originProp !== null && originProp !== void 0 ? originProp : layout === 'horizontal' ? x : y + height;
-  }, [originProp, layout, x, y, height]);
-  if (!barPath) {
-    return null;
-  }
+  const origin = useMemo(() => originProp !== null && originProp !== void 0 ? originProp : layout === 'horizontal' ? x : y + height, [originProp, layout, x, y, height]);
+  if (!barPath) return;
   return /*#__PURE__*/_jsx(BarComponent, {
     borderRadius: borderRadius,
     d: barPath,
@@ -56,6 +53,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     fill: fill,
     fillOpacity: fillOpacity,
     height: height,
+    minSize: minSize,
     origin: origin,
     roundBottom: roundBottom,
     roundTop: roundTop,

package/esm/chart/bar/BarChart.js

@@ -49,9 +49,9 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     });
   }, [seriesProp, stacked]);
   const seriesIds = useMemo(() => series === null || series === void 0 ? void 0 : series.map(s => s.id), [series]);
-  const isHorizontal = chartProps.layout === 'horizontal';
-  const defaultXScaleType = isHorizontal ? 'linear' : 'band';
-  const defaultYScaleType = isHorizontal ? 'band' : 'linear';
+  const isHorizontalLayout = chartProps.layout === 'horizontal';
+  const defaultXScaleType = isHorizontalLayout ? 'linear' : 'band';
+  const defaultYScaleType = isHorizontalLayout ? 'band' : 'linear';
 
   // Split axis props into config props for Chart and visual props for axis components
   const _ref2 = xAxis || {},
@@ -87,24 +87,24 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     scaleType: xScaleType !== null && xScaleType !== void 0 ? xScaleType : defaultXScaleType,
     data: xData,
     categoryPadding: xCategoryPadding,
-    domain: isHorizontal && !hasNegativeValues ? _objectSpread({
+    domain: isHorizontalLayout && !hasNegativeValues ? _objectSpread({
       min: 0
     }, xDomain) : xDomain,
     domainLimit: xDomainLimit,
     range: xRange
-  }), [xScaleType, isHorizontal, xData, xCategoryPadding, hasNegativeValues, xDomain, xDomainLimit, xRange, defaultXScaleType]);
+  }), [xScaleType, isHorizontalLayout, xData, xCategoryPadding, hasNegativeValues, xDomain, xDomainLimit, xRange, defaultXScaleType]);
 
   // Set default min domain to 0 for bar chart, but only if there are no negative values
   const yAxisConfig = useMemo(() => ({
     scaleType: yScaleType !== null && yScaleType !== void 0 ? yScaleType : defaultYScaleType,
     data: yData,
     categoryPadding: yCategoryPadding,
-    domain: !isHorizontal && !hasNegativeValues ? _objectSpread({
+    domain: !isHorizontalLayout && !hasNegativeValues ? _objectSpread({
       min: 0
     }, yDomain) : yDomain,
     domainLimit: yDomainLimit,
     range: yRange
-  }), [yScaleType, isHorizontal, yData, yCategoryPadding, hasNegativeValues, yDomain, yDomainLimit, yRange, defaultYScaleType]);
+  }), [yScaleType, isHorizontalLayout, yData, yCategoryPadding, hasNegativeValues, yDomain, yDomainLimit, yRange, defaultYScaleType]);
   return /*#__PURE__*/_jsxs(CartesianChart, _objectSpread(_objectSpread({}, chartProps), {}, {
     ref: ref,
     inset: inset,

package/esm/chart/bar/BarPlot.js

@@ -1,6 +1,7 @@
 import { memo, useId, useMemo } from 'react';
+import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { defaultAxisId } from '../utils';
+import { getStackGroups, instantTransition } from '../utils';
 import { BarStackGroup } from './BarStackGroup';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -10,6 +11,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * cross-axis stacking (e.g., comparing $1M vs $1B companies on different scales).
  */
 export const BarPlot = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
   let {
     seriesIds,
     barPadding = 0.1,
@@ -27,6 +29,7 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     transition
   } = _ref;
   const {
+    animate,
     series: allSeries,
     drawingArea
   } = useCartesianChartContext();
@@ -38,37 +41,24 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     }
     return allSeries;
   }, [allSeries, seriesIds]);
-  const stackGroups = useMemo(() => {
-    const groups = new Map();
+  const stackGroups = useMemo(() => getStackGroups(targetSeries), [targetSeries]);
+  if (!drawingArea) return;
+
+  // Clip path animation for bar is just for chart size changes, not for
+  // enter transition. One caveat, bar update transitions are staggered
+  // but clip path is not, so some bars could be clipped in rare cases
 
-    // Group series into stacks based on stackId + axis ID combination
-    targetSeries.forEach(series => {
-      var _series$xAxisId, _series$yAxisId;
-      const xAxisId = (_series$xAxisId = series.xAxisId) !== null && _series$xAxisId !== void 0 ? _series$xAxisId : defaultAxisId;
-      const yAxisId = (_series$yAxisId = series.yAxisId) !== null && _series$yAxisId !== void 0 ? _series$yAxisId : defaultAxisId;
-      const stackId = series.stackId || "individual-".concat(series.id);
-      const stackKey = "".concat(stackId, ":").concat(xAxisId, ":").concat(yAxisId);
-      if (!groups.has(stackKey)) {
-        groups.set(stackKey, {
-          stackId: stackKey,
-          series: [],
-          xAxisId: series.xAxisId,
-          yAxisId: series.yAxisId
-        });
-      }
-      const group = groups.get(stackKey);
-      group.series.push(series);
-    });
-    return Array.from(groups.values());
-  }, [targetSeries]);
-  if (!drawingArea) {
-    return null;
-  }
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
         id: clipPathId,
-        children: /*#__PURE__*/_jsx("rect", {
+        children: animate ? /*#__PURE__*/_jsx(motion.rect, {
+          height: drawingArea.height,
+          transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : instantTransition,
+          width: drawingArea.width,
+          x: drawingArea.x,
+          y: drawingArea.y
+        }) : /*#__PURE__*/_jsx("rect", {
           height: drawingArea.height,
           width: drawingArea.width,
           x: drawingArea.x,

package/esm/chart/bar/BarStack.js

@@ -1,20 +1,14 @@
-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 { EPSILON, getBars, getStackBaseline, getStackOrigin } from '../utils/bar';
+import { getGradientConfig } from '../utils/gradient';
 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.
@@ -29,6 +23,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     valueScale,
     rect,
     xAxisId,
+    yAxisId,
     BarComponent: defaultBarComponent,
     fillOpacity: defaultFillOpacity,
     stroke: defaultStroke,
@@ -46,36 +41,21 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     layout,
     getSeriesData,
     getXAxis,
-    getSeries
+    getYAxis
   } = useCartesianChartContext();
-  const barMinSizePx = barMinSize;
-  const stackMinSizePx = stackMinSize;
   const xAxis = getXAxis(xAxisId);
-  const barsGrowVertically = layout !== 'horizontal';
+  const yAxis = getYAxis(yAxisId);
   const baseline = useMemo(() => {
-    var _valueScale, _valueScale2;
-    const domain = valueScale.domain();
-    const [domainMin, domainMax] = domain;
-    const baselineValue = domainMin >= 0 ? domainMin : domainMax <= 0 ? domainMax : 0;
-    const pos = (_valueScale = valueScale(baselineValue)) !== null && _valueScale !== void 0 ? _valueScale : 0;
-
-    // In vertical layout (bars grow up), value scale is Y. In horizontal, it's X.
-    const fallback = barsGrowVertically ? rect.y + rect.height : rect.x;
-    const baselinePos = (_valueScale2 = valueScale(baselineValue)) !== null && _valueScale2 !== void 0 ? _valueScale2 : fallback;
-    if (barsGrowVertically) {
-      return Math.max(rect.y, Math.min(baselinePos, rect.y + rect.height));
-    } else {
-      return Math.max(rect.x, Math.min(baselinePos, rect.x + rect.width));
-    }
-  }, [rect, valueScale, barsGrowVertically]);
+    return getStackBaseline(valueScale, rect, layout);
+  }, [rect, valueScale, layout]);
   const seriesGradients = useMemo(() => {
     return series.map(s => {
       if (!s.gradient) return null;
-      const evalScale = s.gradient.axis === 'x' ? barsGrowVertically ? indexScale : valueScale : barsGrowVertically ? valueScale : indexScale;
+      const evalScale = s.gradient.axis === 'x' ? layout === 'vertical' ? indexScale : valueScale : layout === 'vertical' ? valueScale : indexScale;
 
       // We need to pass original xScale/yScale to getGradientConfig for legacy reasons
       // For now let's assume getGradientConfig can handle these scales if we pass them correctly.
-      const stops = getGradientConfig(s.gradient, barsGrowVertically ? indexScale : valueScale, barsGrowVertically ? valueScale : indexScale);
+      const stops = getGradientConfig(s.gradient, layout === 'vertical' ? indexScale : valueScale, layout === 'vertical' ? valueScale : indexScale);
       if (!stops) return null;
       return {
         seriesId: s.id,
@@ -84,279 +64,95 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
         stops
       };
     });
-  }, [series, indexScale, valueScale, barsGrowVertically]);
-
-  // 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 minValuePos = Infinity;
-    let maxValuePos = -Infinity;
-
-    // Process each series in the stack
-    series.forEach(s => {
-      var _valueScale3, _valueScale4, _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 edgeBottom = (_valueScale3 = valueScale(bottom)) !== null && _valueScale3 !== void 0 ? _valueScale3 : baseline;
-      const edgeTop = (_valueScale4 = valueScale(top)) !== null && _valueScale4 !== void 0 ? _valueScale4 : baseline;
-
-      // In vertical layout (bars grow up):
-      // - edgeTop is min Y (top face)
-      // - edgeBottom is max Y (bottom face)
-      // In horizontal layout (bars grow sideways):
-      // - edgeTop is max X (right face)
-      // - edgeBottom is min X (left face)
-      // However, edgeTop/edgeBottom here are values from the scale.
-      // For positive bars: edgeTop = scale(value), edgeBottom = scale(0).
-      // For horizontal: edgeTop > edgeBottom (X increases right).
-      // For vertical: edgeTop < edgeBottom (Y increases down).
-
-      const roundingEndA = roundBaseline || Math.abs(edgeTop - baseline) >= EPSILON;
-      const roundingEndB = roundBaseline || Math.abs(edgeBottom - baseline) >= EPSILON;
-
-      // In horizontal layout: roundTop is Right (edgeTop), roundBottom is Left (edgeBottom)
-      // getBarPath already handles the mapping of roundTop/roundBottom to coordinates.
-      const roundTop = roundingEndA;
-      const roundBottom = roundingEndB;
-
-      // Track bar counts for later gap calculations
-      if (shouldApplyGap) {
-        if (isAboveBaseline) {
-          positiveBarCount++;
-        } else if (isBelowBaseline) {
-          negativeBarCount++;
-        }
-      }
-
-      // Calculate length (measured along the value axis)
-      const length = Math.abs(edgeBottom - edgeTop);
-      const valuePos = Math.min(edgeBottom, edgeTop);
-
-      // Skip bars that would have zero or negative height
-      if (length <= 0) {
-        return;
-      }
-
-      // Update stack bounds
-      minValuePos = Math.min(minValuePos, valuePos);
-      maxValuePos = Math.max(maxValuePos, valuePos + length);
-      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';
-        let evalValue;
-        if (axis === 'x') {
-          // X-axis gradient: In vertical it's the index, in horizontal it's the value.
-          evalValue = barsGrowVertically ? categoryIndex : Array.isArray(originalValue) ? originalValue[1] : originalValue;
-        } else {
-          // Y-axis gradient: In vertical it's the value, in horizontal it's the index.
-          evalValue = barsGrowVertically ? Array.isArray(originalValue) ? originalValue[1] : originalValue : categoryIndex;
-        }
-        const evaluatedColor = evaluateGradientAtValue(seriesGradientConfig.stops, evalValue, seriesGradientConfig.scale);
-        if (evaluatedColor) {
-          barFill = evaluatedColor;
-        }
-      }
-      allBars.push({
-        seriesId: s.id,
-        indexPos,
-        valuePos,
-        thickness,
-        length,
-        dataValue: value,
-        fill: barFill,
-        roundTop,
-        roundBottom,
-        shouldApplyGap,
-        BarComponent: s.BarComponent
-      });
-    });
-
-    // Apply proportional gap distribution to maintain total stack length
-    if (stackGap && allBars.length > 1) {
-      // Separate bars by baseline side
-      const barsAboveBaseline = allBars.filter(bar => {
-        const [bottom, top] = bar.dataValue.sort((a, b) => a - b);
-        return bottom >= 0 && top !== bottom && bar.shouldApplyGap;
-      });
-      const barsBelowBaseline = allBars.filter(bar => {
-        const [bottom, top] = bar.dataValue.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 totalDataLength = barsAboveBaseline.reduce((sum, bar) => sum + bar.length, 0);
-        const lengthReduction = totalGapSpace / totalDataLength;
-
-        // In SVG, for Y axis positive values go up (decreasing Y)
-        // For X axis positive values go right (increasing X)
-        const sortedBars = barsGrowVertically ? barsAboveBaseline.sort((a, b) => b.valuePos - a.valuePos) // Higher Y first
-        : barsAboveBaseline.sort((a, b) => a.valuePos - b.valuePos); // Higher X last
-
-        let currentEdge = baseline;
-        sortedBars.forEach((bar, index) => {
-          const newLength = bar.length * (1 - lengthReduction);
-          let newValuePos;
-          if (barsGrowVertically) {
-            newValuePos = currentEdge - newLength;
-            currentEdge = newValuePos - (index < sortedBars.length - 1 ? stackGap : 0);
-          } else {
-            newValuePos = currentEdge;
-            currentEdge = newValuePos + newLength + (index < sortedBars.length - 1 ? stackGap : 0);
-          }
-          const barIndex = allBars.findIndex(b => b.seriesId === bar.seriesId);
-          if (barIndex !== -1) {
-            allBars[barIndex] = _objectSpread(_objectSpread({}, allBars[barIndex]), {}, {
-              length: newLength,
-              valuePos: newValuePos
-            });
-          }
-        });
-      }
-
-      // Apply proportional gaps to bars below baseline
-      if (barsBelowBaseline.length > 1) {
-        const totalGapSpace = stackGap * (barsBelowBaseline.length - 1);
-        const totalDataLength = barsBelowBaseline.reduce((sum, bar) => sum + bar.length, 0);
-        const lengthReduction = totalGapSpace / totalDataLength;
-        const sortedBars = barsGrowVertically ? barsBelowBaseline.sort((a, b) => a.valuePos - b.valuePos) : barsBelowBaseline.sort((a, b) => b.valuePos - a.valuePos);
-        let currentEdge = baseline;
-        sortedBars.forEach((bar, index) => {
-          const newLength = bar.length * (1 - lengthReduction);
-          let newValuePos;
-          if (barsGrowVertically) {
-            newValuePos = currentEdge;
-            currentEdge = newValuePos + newLength + (index < sortedBars.length - 1 ? stackGap : 0);
-          } else {
-            newValuePos = currentEdge - newLength;
-            currentEdge = newValuePos - (index < sortedBars.length - 1 ? stackGap : 0);
-          }
-          const barIndex = allBars.findIndex(b => b.seriesId === bar.seriesId);
-          if (barIndex !== -1) {
-            allBars[barIndex] = _objectSpread(_objectSpread({}, allBars[barIndex]), {}, {
-              length: newLength,
-              valuePos: newValuePos
-            });
-          }
-        });
-      }
-
-      // Recalculate stack bounds after gap adjustments
-      if (allBars.length > 0) {
-        minValuePos = Math.min(...allBars.map(bar => bar.valuePos));
-        maxValuePos = Math.max(...allBars.map(bar => bar.valuePos + bar.length));
-      }
-    }
-
-    // Apply barMinSize constraints
-    if (barMinSizePx) {
-      // ... (Skipping full complex logic for brevity, but it should be layout-aware)
-      // For now let's assume it's correctly handled similar to above by using length and valuePos
+  }, [series, indexScale, valueScale, layout]);
+  const categoryAxis = layout === 'vertical' ? xAxis : yAxis;
+  const categoryData = categoryAxis !== null && categoryAxis !== void 0 && 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 !== void 0 ? _getSeriesData : []];
+  })), [series, getSeriesData]);
+  const bars = useMemo(() => getBars({
+    series,
+    seriesData,
+    categoryIndex,
+    categoryValue,
+    indexPos,
+    thickness,
+    valueScale,
+    seriesGradients,
+    roundBaseline,
+    layout,
+    baseline,
+    stackGap,
+    barMinSize,
+    stackMinSize,
+    defaultFill: 'var(--color-fgPrimary)',
+    borderRadius,
+    defaultFillOpacity,
+    defaultStroke,
+    defaultStrokeWidth,
+    defaultBarComponent
+  }), [series, seriesData, stackGap, barMinSize, stackMinSize, indexPos, baseline, thickness, categoryIndex, categoryValue, valueScale, seriesGradients, roundBaseline, layout, borderRadius, defaultFillOpacity, defaultStroke, defaultStrokeWidth, defaultBarComponent]);
+  const stackRect = useMemo(() => {
+    if (bars.length === 0) {
+      return {
+        x: layout === 'vertical' ? indexPos : baseline,
+        y: layout === 'vertical' ? baseline : indexPos,
+        width: layout === 'vertical' ? thickness : 0,
+        height: layout === 'vertical' ? 0 : thickness
+      };
     }
-
-    // Apply border radius logic
-    const applyBorderRadiusLogic = bars => {
-      // Sort bars from "bottom" to "top" of the stack relative to coordinate system
-      // Vertical (Y axis): Max Y (bottom) to Min Y (top)
-      // Horizontal (X axis): Min X (left) to Max X (right)
-      const sortedBars = barsGrowVertically ? [...bars].sort((a, b) => b.valuePos - a.valuePos) : [...bars].sort((a, b) => a.valuePos - b.valuePos);
-      return sortedBars.map((a, index) => {
-        const barBefore = index > 0 ? sortedBars[index - 1] : null;
-        const barAfter = index < sortedBars.length - 1 ? sortedBars[index + 1] : null;
-
-        // shouldRoundLower: the face with the smaller coordinate (Top in vertical, Left in horizontal)
-        const shouldRoundLower = (barsGrowVertically ? index === sortedBars.length - 1 : index === 0) || a.shouldApplyGap && stackGap || !a.shouldApplyGap && barAfter && barAfter.valuePos + barAfter.length !== a.valuePos;
-
-        // shouldRoundHigher: the face with the larger coordinate (Bottom in vertical, Right in horizontal)
-        const shouldRoundHigher = (barsGrowVertically ? index === 0 : index === sortedBars.length - 1) || a.shouldApplyGap && stackGap || !a.shouldApplyGap && barBefore && barBefore.valuePos !== a.valuePos + a.length;
-        return _objectSpread(_objectSpread({}, a), {}, {
-          roundTop: Boolean(a.roundTop && (barsGrowVertically ? shouldRoundLower : shouldRoundHigher)),
-          roundBottom: Boolean(a.roundBottom && (barsGrowVertically ? shouldRoundHigher : shouldRoundLower))
-        });
-      });
-    };
-    allBars = applyBorderRadiusLogic(allBars);
-
-    // Calculate the bounding rect for the entire stack
-    const stackBounds = {
-      x: barsGrowVertically ? indexPos : minValuePos === Infinity ? baseline : minValuePos,
-      y: barsGrowVertically ? minValuePos === Infinity ? baseline : minValuePos : indexPos,
-      width: barsGrowVertically ? thickness : maxValuePos === -Infinity ? 0 : maxValuePos - minValuePos,
-      height: barsGrowVertically ? maxValuePos === -Infinity ? 0 : maxValuePos - minValuePos : thickness
-    };
+    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, stackGap, barMinSizePx, indexPos, baseline, thickness, getSeriesData, categoryIndex, valueScale, seriesGradients, roundBaseline, barsGrowVertically]);
-  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: barsGrowVertically ? dataX : bar.dataValue // This is a bit loose, depends on Bar implementation
-      ,
-      dataY: barsGrowVertically ? bar.dataValue : dataX,
-      fill: bar.fill,
-      fillOpacity: (_bar$fillOpacity = bar.fillOpacity) !== null && _bar$fillOpacity !== void 0 ? _bar$fillOpacity : defaultFillOpacity,
-      height: barsGrowVertically ? bar.length : thickness,
-      origin: baseline,
-      roundBottom: bar.roundBottom,
-      roundTop: bar.roundTop,
-      seriesId: bar.seriesId,
-      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,
-      transitions: transitions,
-      width: barsGrowVertically ? thickness : bar.length,
-      x: barsGrowVertically ? indexPos : bar.valuePos,
-      y: barsGrowVertically ? bar.valuePos : indexPos
-    }, "".concat(bar.seriesId, "-").concat(categoryIndex, "-").concat(index));
-  });
-
-  // Check if the stack as a whole should be rounded based on the baseline
-  // edge: top in vertical, left in horizontal
-  // size: height in vertical, width in horizontal
-  const edge = barsGrowVertically ? stackRect.y : stackRect.x;
-  const size = barsGrowVertically ? stackRect.height : stackRect.width;
-
-  // stackRoundLower: face at smaller coordinate (Top in vertical, Left in horizontal)
-  // stackRoundHigher: face at larger coordinate (Bottom in vertical, Right in horizontal)
+  }, [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 !== void 0 ? _b$minSize : 0;
+    }))) !== null && _getStackOrigin !== void 0 ? _getStackOrigin : baseline;
+  }, [bars, baseline]);
+  const barElements = bars.map((bar, index) => /*#__PURE__*/_jsx(Bar, {
+    BarComponent: bar.BarComponent,
+    borderRadius: bar.borderRadius,
+    dataX: bar.dataX,
+    dataY: bar.dataY,
+    fill: bar.fill,
+    fillOpacity: bar.fillOpacity,
+    height: bar.height,
+    minSize: bar.minSize,
+    origin: bar.origin,
+    roundBottom: bar.roundBottom,
+    roundTop: bar.roundTop,
+    seriesId: bar.seriesId,
+    stroke: bar.stroke,
+    strokeWidth: bar.strokeWidth,
+    transition: transition,
+    transitions: transitions,
+    width: bar.width,
+    x: bar.x,
+    y: bar.y
+  }, "".concat(bar.seriesId, "-").concat(categoryIndex, "-").concat(index)));
+  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,
@@ -364,7 +160,6 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     width: stackRect.width,
     x: stackRect.x,
     y: stackRect.y,
-    yOrigin: baseline,
     children: barElements
   });
 });