Core | Component | Stacked Bar: Add stacked spacing option

Author: dennisadriaans

packages/ts/src/components/stacked-bar/index.ts

@@ -32,7 +32,7 @@ export class StackedBar<Datum> extends XYComponentCore<Datum, StackedBarConfigIn
   getAccessors = (): NumericAccessor<Datum>[] => (isArray(this.config.y) ? this.config.y : [this.config.y])
   stacked = true
   events = {}
-  private _prevNegative: boolean[] | undefined // To help guessing the bar direction when an accessor was set to null or 0
+  private _prevNegative: boolean[] | undefined
   private _barData: Datum[] = []
 
   constructor (config?: StackedBarConfigInterface<Datum>) {
@@ -124,18 +124,38 @@ export class StackedBar<Datum> extends XYComponentCore<Datum, StackedBarConfigIn
       )
 
     // Render Bars
+    const stackExtents = this._barData.map((_, j) => {
+      const values = stacked.map(s => s[j]) // Get all [y0, y1] pairs for stack j
+      const positiveY1 = values.filter(v => v[1] >= v[0]).map(v => v[1])
+      const negativeY1 = values.filter(v => v[1] < v[0]).map(v => v[1])
+      return {
+        maxPositive: positiveY1.length ? max(positiveY1) : undefined,
+        minNegative: negativeY1.length ? min(negativeY1) : undefined,
+      }
+    })
+
     const bars = barGroupsMerged
       .selectAll<SVGPathElement, StackedBarDataRecord<Datum>>(`.${s.bar}`)
-      .data((d, j) => stacked.map((s, stackIndex) =>
-        ({
-          ...d,
-          _index: j,
-          _stacked: s[j],
-          // Ending bar if the next stack is not the same as the current one
-          _ending: (stackIndex === stacked.length - 1) ||
-            ((stackIndex <= stacked.length - 1) && stacked[stackIndex + 1][j][0] !== s[j][1]),
-        }))
-      )
+      .data((d, j) => {
+        const { maxPositive, minNegative } = stackExtents[j]
+        return stacked.map((s) => {
+          const y0 = s[j][0]
+          const y1 = s[j][1]
+          const isSegmentPositive = y1 >= y0
+
+          // A bar is "ending" if it's the outermost in its respective direction (positive or negative)
+          const isEnding = isSegmentPositive
+            ? y1 === maxPositive
+            : y1 === minNegative
+
+          return {
+            ...d,
+            _index: j,
+            _stacked: s[j],
+            _ending: isEnding,
+          }
+        })
+      })
 
     const barsEnter = bars.enter().append('path')
       .attr('class', s.bar)
@@ -224,27 +244,16 @@ export class StackedBar<Datum> extends XYComponentCore<Datum, StackedBarConfigIn
     const stackSpacing = config.stackSpacing || 0
     let hWithSpacing = h
     let yWithSpacing = y
-    // Always apply spacing between all stacked segments if config.stackSpacing is set
-    // Only apply the zero-axis gap if there are actual negative values in the data
-    const hasNegative = stackSpacing > 0 && this._barData && this._barData.length > 0 && this._barData.some(barDataItem =>
-      this.getAccessors().some(accessor => getNumber(barDataItem, accessor) < 0)
-    )
+    // For negative bars, shift y position by stackSpacing so the base remains at the correct value
     if (!isEntering && stackSpacing > 0) {
-      if (this.isVertical()) {
-        hWithSpacing = Math.max(0, h - stackSpacing)
-        // For negative bars, spacing should be applied in the same direction as positive, but the sign of the offset should be flipped
-        yWithSpacing = y + (isNegative ? stackSpacing / 2 : stackSpacing / 2)
-        // Apply gap at zero axis for both positive and negative bars
-        if (hasNegative && (d._stacked[0] === 0 || d._stacked[1] === 0)) {
-          // Always add half the spacing away from zero, regardless of sign
-          yWithSpacing += (isNegative ? stackSpacing / 2 : -stackSpacing / 2)
-        }
+      hWithSpacing = h - stackSpacing
+      if (hWithSpacing <= 0 && isFinite(value) && (value !== config.barMinHeightZeroValue)) {
+        hWithSpacing = 1
       } else {
-        hWithSpacing = Math.max(0, h - stackSpacing)
-        yWithSpacing = y + (isNegative ? stackSpacing / 2 : stackSpacing / 2)
-        if (hasNegative && (d._stacked[0] === 0 || d._stacked[1] === 0)) {
-          yWithSpacing += (isNegative ? stackSpacing / 2 : -stackSpacing / 2)
-        }
+        hWithSpacing = Math.max(0, hWithSpacing)
+      }
+      if (this.isVertical() && isNegative) {
+        yWithSpacing = y + stackSpacing
       }
     }