@internetstiftelsen/charts 0.9.2 → 0.10.1

package/dist/bar.js

@@ -4,7 +4,7 @@ const LABEL_INSET_DEFAULT = 4;
 const LABEL_INSET_STACKED = 6;
 const LABEL_MIN_PADDING_DEFAULT = 8;
 const LABEL_MIN_PADDING_STACKED = 16;
-const LAYER_LABEL_GAP = 6;
+const LABEL_OUTSIDE_OFFSET = 4;
 function getLabelSpacing(mode) {
     const stacked = mode !== 'none';
     return {
@@ -14,6 +14,109 @@ function getLabelSpacing(mode) {
             : LABEL_MIN_PADDING_DEFAULT,
     };
 }
+function getBarSlotLayout(bandwidth, mode, maxBarSize, totalSeries, seriesIndex, gap) {
+    if (mode === 'none') {
+        const groupSize = maxBarSize
+            ? Math.min(bandwidth, maxBarSize * totalSeries)
+            : bandwidth;
+        const totalGapSpace = groupSize * gap * (totalSeries - 1);
+        const availableSize = groupSize - totalGapSpace;
+        const thickness = availableSize / totalSeries;
+        const gapSize = totalSeries > 1 ? groupSize * gap : 0;
+        return {
+            thickness,
+            offset: (bandwidth - groupSize) / 2 +
+                seriesIndex * (thickness + gapSize),
+        };
+    }
+    if (mode === 'layer') {
+        const maxSize = maxBarSize
+            ? Math.min(bandwidth, maxBarSize)
+            : bandwidth;
+        const scaleFactor = 1 - (seriesIndex / totalSeries) * 0.7;
+        const thickness = maxSize * scaleFactor;
+        return {
+            thickness,
+            offset: (bandwidth - thickness) / 2,
+        };
+    }
+    const thickness = maxBarSize ? Math.min(bandwidth, maxBarSize) : bandwidth;
+    return {
+        thickness,
+        offset: (bandwidth - thickness) / 2,
+    };
+}
+function getBarValueRange(categoryKey, value, stackingContext) {
+    const mode = stackingContext?.mode ?? 'normal';
+    if (mode === 'none' || mode === 'layer') {
+        return getUnstackedBarValueRange(value);
+    }
+    if (mode === 'percent') {
+        return getPercentBarValueRange(categoryKey, value, stackingContext);
+    }
+    return getStackedBarValueRange(categoryKey, value, stackingContext);
+}
+function getUnstackedBarValueRange(value) {
+    return {
+        start: 0,
+        end: value,
+    };
+}
+function getPercentBarValueRange(categoryKey, value, stackingContext) {
+    const isPositive = value >= 0;
+    const { cumulative, total } = getPercentBarRangeMetrics(categoryKey, isPositive, stackingContext);
+    if (total === 0) {
+        return {
+            start: 0,
+            end: 0,
+        };
+    }
+    const start = (cumulative / total) * 100;
+    const end = ((cumulative + Math.abs(value)) / total) * 100;
+    return isPositive ? { start, end } : { start: -start, end: -end };
+}
+function getPercentBarRangeMetrics(categoryKey, isPositive, stackingContext) {
+    return isPositive
+        ? getPositivePercentBarRangeMetrics(categoryKey, stackingContext)
+        : getNegativePercentBarRangeMetrics(categoryKey, stackingContext);
+}
+function getPositivePercentBarRangeMetrics(categoryKey, stackingContext) {
+    return {
+        cumulative: stackingContext?.positiveCumulativeData.get(categoryKey) ?? 0,
+        total: stackingContext?.positiveTotalData.get(categoryKey) ?? 0,
+    };
+}
+function getNegativePercentBarRangeMetrics(categoryKey, stackingContext) {
+    return {
+        cumulative: stackingContext?.negativeCumulativeData.get(categoryKey) ?? 0,
+        total: stackingContext?.negativeTotalData.get(categoryKey) ?? 0,
+    };
+}
+function getStackedBarValueRange(categoryKey, value, stackingContext) {
+    if (value >= 0) {
+        const cumulative = stackingContext?.positiveCumulativeData.get(categoryKey) ?? 0;
+        return {
+            start: cumulative,
+            end: cumulative + value,
+        };
+    }
+    const cumulativeMagnitude = stackingContext?.negativeCumulativeData.get(categoryKey) ?? 0;
+    const start = -cumulativeMagnitude;
+    return {
+        start,
+        end: start + value,
+    };
+}
+function getScaledValueRange(scale, startValue, endValue) {
+    const start = scale(startValue) ?? 0;
+    const end = scale(endValue) ?? 0;
+    return {
+        start,
+        end,
+        min: Math.min(start, end),
+        max: Math.max(start, end),
+    };
+}
 export class Bar {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -46,6 +149,12 @@ export class Bar {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "side", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "valueLabel", {
             enumerable: true,
             configurable: true,
@@ -62,6 +171,7 @@ export class Bar {
         this.fill = config.fill || '#8884d8';
         this.colorAdapter = config.colorAdapter;
         this.maxBarSize = config.maxBarSize;
+        this.side = config.side ?? 'right';
         this.valueLabel = config.valueLabel;
         this.exportHooks = config.exportHooks;
     }
@@ -71,6 +181,7 @@ export class Bar {
             fill: this.fill,
             colorAdapter: this.colorAdapter,
             maxBarSize: this.maxBarSize,
+            side: this.side,
             valueLabel: this.valueLabel,
         };
     }
@@ -81,6 +192,12 @@ export class Bar {
             exportHooks: this.exportHooks,
         });
     }
+    getRenderedValue(value, orientation = 'vertical') {
+        if (orientation === 'horizontal' && this.side === 'left') {
+            return -Math.abs(value);
+        }
+        return value;
+    }
     render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme, stackingContext, orientation = 'vertical') {
         if (orientation === 'vertical') {
             this.renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType, stackingContext);
@@ -101,49 +218,13 @@ export class Bar {
     renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType, stackingContext) {
         const bandwidth = x.bandwidth ? x.bandwidth() : 20;
         const mode = stackingContext?.mode ?? 'normal';
-        // Calculate bar width based on stacking mode
-        let barWidth;
-        let barOffset;
-        if (mode === 'none') {
-            // Grouped bars: divide bandwidth among series with gap
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const gap = stackingContext?.gap ?? 0.1;
-            const groupWidth = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize * totalSeries)
-                : bandwidth;
-            // Calculate total gap space and individual bar width
-            const totalGapSpace = groupWidth * gap * (totalSeries - 1);
-            const availableWidth = groupWidth - totalGapSpace;
-            barWidth = availableWidth / totalSeries;
-            const gapSize = totalSeries > 1 ? groupWidth * gap : 0;
-            barOffset =
-                (bandwidth - groupWidth) / 2 +
-                    seriesIndex * (barWidth + gapSize);
-        }
-        else if (mode === 'layer') {
-            // Layer mode: each subsequent series has smaller bars
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const maxWidth = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            // Scale from 100% to a minimum (e.g., 30%) based on series position
-            const scaleFactor = 1 - (seriesIndex / totalSeries) * 0.7;
-            barWidth = maxWidth * scaleFactor;
-            barOffset = (bandwidth - barWidth) / 2;
-        }
-        else {
-            // Normal and Percent modes: full width stacked bars
-            barWidth = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            barOffset = (bandwidth - barWidth) / 2;
-        }
-        // Get the baseline value from the Y scale's domain
-        const yDomain = y.domain();
-        const baselineValue = yDomain[0] >= 0 ? Math.max(0, yDomain[0]) : yDomain[0];
-        const yBaseline = y(baselineValue) || 0;
+        const { thickness: barWidth, offset: barOffset } = getBarSlotLayout(bandwidth, mode, this.maxBarSize, stackingContext?.totalSeries ?? 1, stackingContext?.seriesIndex ?? 0, stackingContext?.gap ?? 0.1);
+        const getVerticalBounds = (d) => {
+            const categoryKey = String(d[xKey]);
+            const value = this.getRenderedValue(parseValue(d[this.dataKey]), 'vertical');
+            const { start, end } = getBarValueRange(categoryKey, value, stackingContext);
+            return getScaledValueRange(y, start, end);
+        };
         // Add bar rectangles
         const sanitizedKey = sanitizeForCSS(this.dataKey);
         plotGroup
@@ -158,96 +239,24 @@ export class Bar {
                 ? xPos + barOffset
                 : xPos - barWidth / 2;
         })
-            .attr('y', (d) => {
-            const categoryKey = String(d[xKey]);
-            const value = parseValue(d[this.dataKey]);
-            if (mode === 'none' || mode === 'layer') {
-                // No stacking - each bar starts from baseline
-                const yPos = y(value) || 0;
-                return Math.min(yBaseline, yPos);
-            }
-            else if (mode === 'percent') {
-                // Percent mode: calculate position based on cumulative percentage
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
-                const percentCumulative = (cumulative / total) * 100;
-                const percentValue = (value / total) * 100;
-                return y(percentCumulative + percentValue) || 0;
-            }
-            else {
-                // Normal stacking mode
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                return y(cumulative + value) || 0;
-            }
-        })
+            .attr('y', (d) => getVerticalBounds(d).min)
             .attr('width', barWidth)
             .attr('height', (d) => {
-            const categoryKey = String(d[xKey]);
-            const value = parseValue(d[this.dataKey]);
-            if (mode === 'none' || mode === 'layer') {
-                const yPos = y(value) || 0;
-                return Math.abs(yBaseline - yPos);
-            }
-            else if (mode === 'percent') {
-                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
-                const percentValue = (value / total) * 100;
-                const yTop = y(percentValue) || 0;
-                const yBottom = y(0) || 0;
-                return Math.abs(yBottom - yTop);
-            }
-            else {
-                // Normal stacking mode
-                const yTop = y(value) || 0;
-                return Math.abs(yBaseline - yTop);
-            }
+            const bounds = getVerticalBounds(d);
+            return Math.abs(bounds.max - bounds.min);
         })
             .attr('fill', (d, i) => this.colorAdapter ? this.colorAdapter(d, i) : this.fill);
     }
     renderHorizontal(plotGroup, data, xKey, x, y, parseValue, yScaleType, stackingContext) {
         const bandwidth = y.bandwidth ? y.bandwidth() : 20;
         const mode = stackingContext?.mode ?? 'normal';
-        // Calculate bar height based on stacking mode
-        let barHeight;
-        let barOffset;
-        if (mode === 'none') {
-            // Grouped bars: divide bandwidth among series with gap
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const gap = stackingContext?.gap ?? 0.1;
-            const groupHeight = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize * totalSeries)
-                : bandwidth;
-            // Calculate total gap space and individual bar height
-            const totalGapSpace = groupHeight * gap * (totalSeries - 1);
-            const availableHeight = groupHeight - totalGapSpace;
-            barHeight = availableHeight / totalSeries;
-            const gapSize = totalSeries > 1 ? groupHeight * gap : 0;
-            barOffset =
-                (bandwidth - groupHeight) / 2 +
-                    seriesIndex * (barHeight + gapSize);
-        }
-        else if (mode === 'layer') {
-            // Layer mode: each subsequent series has smaller bars
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const maxHeight = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            const scaleFactor = 1 - (seriesIndex / totalSeries) * 0.7;
-            barHeight = maxHeight * scaleFactor;
-            barOffset = (bandwidth - barHeight) / 2;
-        }
-        else {
-            // Normal and Percent modes: full height stacked bars
-            barHeight = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            barOffset = (bandwidth - barHeight) / 2;
-        }
-        // Get the baseline value from the scale's domain
-        const domain = x.domain();
-        const baselineValue = domain[0] >= 0 ? Math.max(0, domain[0]) : domain[0];
-        const xBaseline = x(baselineValue) || 0;
+        const { thickness: barHeight, offset: barOffset } = getBarSlotLayout(bandwidth, mode, this.maxBarSize, stackingContext?.totalSeries ?? 1, stackingContext?.seriesIndex ?? 0, stackingContext?.gap ?? 0.1);
+        const getHorizontalBounds = (d) => {
+            const categoryKey = String(d[xKey]);
+            const value = this.getRenderedValue(parseValue(d[this.dataKey]), 'horizontal');
+            const { start, end } = getBarValueRange(categoryKey, value, stackingContext);
+            return getScaledValueRange(x, start, end);
+        };
         // Add bar rectangles (horizontal)
         const sanitizedKey = sanitizeForCSS(this.dataKey);
         plotGroup
@@ -256,25 +265,7 @@ export class Bar {
             .join('rect')
             .attr('class', `bar-${sanitizedKey}`)
             .attr('data-index', (_, i) => i)
-            .attr('x', (d) => {
-            const categoryKey = String(d[xKey]);
-            const value = parseValue(d[this.dataKey]);
-            if (mode === 'none' || mode === 'layer') {
-                const xPos = x(value) || 0;
-                return Math.min(xBaseline, xPos);
-            }
-            else if (mode === 'percent') {
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
-                const percentCumulative = (cumulative / total) * 100;
-                return x(percentCumulative) || 0;
-            }
-            else {
-                // Normal stacking mode
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                return x(cumulative) || 0;
-            }
-        })
+            .attr('x', (d) => getHorizontalBounds(d).min)
             .attr('y', (d) => {
             const yPos = getScalePosition(y, d[xKey], yScaleType);
             return yScaleType === 'band'
@@ -282,396 +273,281 @@ export class Bar {
                 : yPos - barHeight / 2;
         })
             .attr('width', (d) => {
-            const categoryKey = String(d[xKey]);
-            const value = parseValue(d[this.dataKey]);
-            if (mode === 'none' || mode === 'layer') {
-                const xPos = x(value) || 0;
-                return Math.abs(xPos - xBaseline);
-            }
-            else if (mode === 'percent') {
-                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
-                const percentValue = (value / total) * 100;
-                const xLeft = x(0) || 0;
-                const xRight = x(percentValue) || 0;
-                return Math.abs(xRight - xLeft);
-            }
-            else {
-                // Normal stacking mode
-                const xLeft = x(0) || 0;
-                const xRight = x(value) || 0;
-                return Math.abs(xRight - xLeft);
-            }
+            const bounds = getHorizontalBounds(d);
+            return Math.abs(bounds.max - bounds.min);
         })
             .attr('height', barHeight)
             .attr('fill', (d, i) => this.colorAdapter ? this.colorAdapter(d, i) : this.fill);
     }
-    renderVerticalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme, stackingContext) {
-        const bandwidth = x.bandwidth ? x.bandwidth() : 20;
-        const mode = stackingContext?.mode ?? 'normal';
-        // Calculate bar width based on stacking mode (same logic as renderVertical)
-        let barWidth;
-        let barOffset;
-        if (mode === 'none') {
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const gap = stackingContext?.gap ?? 0.1;
-            const groupWidth = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize * totalSeries)
-                : bandwidth;
-            const totalGapSpace = groupWidth * gap * (totalSeries - 1);
-            const availableWidth = groupWidth - totalGapSpace;
-            barWidth = availableWidth / totalSeries;
-            const gapSize = totalSeries > 1 ? groupWidth * gap : 0;
-            barOffset =
-                (bandwidth - groupWidth) / 2 +
-                    seriesIndex * (barWidth + gapSize);
+    resolveValueLabelConfig(theme) {
+        const config = this.valueLabel;
+        return {
+            ...this.resolveValueLabelPlacement(config),
+            ...this.resolveValueLabelStyle(config, theme),
+            formatter: config.formatter,
+            autoContrastInside: config.color === undefined,
+        };
+    }
+    resolveValueLabelPlacement(config) {
+        return {
+            position: config.position ?? 'outside',
+            insidePosition: config.insidePosition ?? 'top',
+        };
+    }
+    resolveValueLabelStyle(config, theme) {
+        return {
+            fontSize: config.fontSize ?? theme.valueLabel.fontSize,
+            fontFamily: config.fontFamily ?? theme.valueLabel.fontFamily,
+            fontWeight: config.fontWeight ?? theme.valueLabel.fontWeight,
+            color: config.color ?? theme.valueLabel.color,
+            background: config.background ?? theme.valueLabel.background,
+            border: config.border ?? theme.valueLabel.border,
+            borderRadius: config.borderRadius ?? theme.valueLabel.borderRadius,
+            padding: config.padding ?? theme.valueLabel.padding,
+        };
+    }
+    getValueLabelText(rawValue, data, config) {
+        return config.formatter
+            ? config.formatter(this.dataKey, rawValue, data)
+            : String(rawValue);
+    }
+    getBarColor(data, index) {
+        return this.colorAdapter ? this.colorAdapter(data, index) : this.fill;
+    }
+    measureLabelBox(labelGroup, valueText, config) {
+        const tempText = labelGroup
+            .append('text')
+            .style('font-size', `${config.fontSize}px`)
+            .style('font-family', config.fontFamily)
+            .style('font-weight', config.fontWeight)
+            .text(valueText);
+        const textBox = tempText.node().getBBox();
+        tempText.remove();
+        return {
+            width: textBox.width + config.padding * 2,
+            height: textBox.height + config.padding * 2,
+        };
+    }
+    getLabelColor(config, barColor) {
+        if (config.position === 'inside' && config.autoContrastInside) {
+            return getContrastTextColor(barColor);
         }
-        else if (mode === 'layer') {
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const maxWidth = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            const scaleFactor = 1 - (seriesIndex / totalSeries) * 0.7;
-            barWidth = maxWidth * scaleFactor;
-            barOffset = (bandwidth - barWidth) / 2;
+        return config.color;
+    }
+    appendValueLabel(labelGroup, valueText, placement, labelBox, config, labelColor) {
+        const group = labelGroup.append('g');
+        if (config.position === 'outside') {
+            group
+                .append('rect')
+                .attr('x', placement.x - labelBox.width / 2)
+                .attr('y', placement.y - labelBox.height / 2)
+                .attr('width', labelBox.width)
+                .attr('height', labelBox.height)
+                .attr('rx', config.borderRadius)
+                .attr('ry', config.borderRadius)
+                .attr('fill', config.background)
+                .attr('stroke', config.border)
+                .attr('stroke-width', 1);
         }
-        else {
-            barWidth = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            barOffset = (bandwidth - barWidth) / 2;
+        group
+            .append('text')
+            .attr('x', placement.x)
+            .attr('y', placement.y)
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'central')
+            .style('font-size', `${config.fontSize}px`)
+            .style('font-family', config.fontFamily)
+            .style('font-weight', config.fontWeight)
+            .style('fill', labelColor)
+            .style('pointer-events', 'none')
+            .text(valueText);
+    }
+    getVerticalLabelPlacement(input) {
+        if (input.position === 'outside') {
+            return this.getVerticalOutsideLabelPlacement(input);
         }
-        const yDomain = y.domain();
-        const baselineValue = yDomain[0] >= 0 ? Math.max(0, yDomain[0]) : yDomain[0];
-        const yBaseline = y(baselineValue) || 0;
-        const config = this.valueLabel;
-        const position = config.position || 'outside';
-        const insidePosition = config.insidePosition || 'top';
-        const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
-        const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
-        const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
-        const defaultLabelColor = config.color ?? theme.valueLabel.color;
-        const background = config.background ?? theme.valueLabel.background;
-        const border = config.border ?? theme.valueLabel.border;
-        const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
-        const padding = config.padding ?? theme.valueLabel.padding;
+        if (input.mode === 'layer' && input.insidePosition === 'bottom') {
+            return {
+                x: input.x,
+                y: (input.barTop + input.barBottom) / 2,
+                shouldRender: false,
+            };
+        }
+        const { inset, minPadding } = getLabelSpacing(input.mode);
+        const y = this.getVerticalInsideLabelY(input.barTop, input.barBottom, input.labelBox.height, input.insidePosition, inset);
+        return {
+            x: input.x,
+            y,
+            shouldRender: input.labelBox.height + minPadding <= input.barHeight,
+        };
+    }
+    getVerticalOutsideLabelPlacement(input) {
+        const y = input.isNegative
+            ? input.barBottom + input.labelBox.height / 2 + LABEL_OUTSIDE_OFFSET
+            : input.barTop - input.labelBox.height / 2 - LABEL_OUTSIDE_OFFSET;
+        const shouldRender = input.isNegative
+            ? y + input.labelBox.height / 2 <= input.plotBottom
+            : y - input.labelBox.height / 2 >= input.plotTop;
+        return {
+            x: input.x,
+            y,
+            shouldRender,
+        };
+    }
+    getVerticalInsideLabelY(barTop, barBottom, labelHeight, insidePosition, inset) {
+        switch (insidePosition) {
+            case 'top':
+                return barTop + labelHeight / 2 + inset;
+            case 'middle':
+                return (barTop + barBottom) / 2;
+            case 'bottom':
+                return barBottom - labelHeight / 2 - inset;
+        }
+    }
+    getHorizontalLabelPlacement(input) {
+        if (input.position === 'outside') {
+            return this.getHorizontalOutsideLabelPlacement(input);
+        }
+        if (input.mode === 'layer' && input.insidePosition === 'bottom') {
+            return {
+                x: (input.barLeft + input.barRight) / 2,
+                y: input.y,
+                shouldRender: false,
+            };
+        }
+        const { inset, minPadding } = getLabelSpacing(input.mode);
+        const x = this.getHorizontalInsideLabelX(input.barLeft, input.barRight, input.labelBox.width, input.isNegative, input.insidePosition, inset);
+        const fitsBar = input.labelBox.width + minPadding <= input.barWidth;
+        const withinBounds = input.insidePosition === 'middle' ||
+            this.isHorizontalLabelWithinBounds(x, input.labelBox.width, input.barLeft, input.barRight);
+        return {
+            x,
+            y: input.y,
+            shouldRender: fitsBar && withinBounds,
+        };
+    }
+    getHorizontalOutsideLabelPlacement(input) {
+        const x = input.isNegative
+            ? input.barLeft - input.labelBox.width / 2 - LABEL_OUTSIDE_OFFSET
+            : input.barRight + input.labelBox.width / 2 + LABEL_OUTSIDE_OFFSET;
+        const shouldRender = input.isNegative
+            ? x - input.labelBox.width / 2 >= input.plotLeft
+            : x + input.labelBox.width / 2 <= input.plotRight;
+        return {
+            x,
+            y: input.y,
+            shouldRender,
+        };
+    }
+    getHorizontalInsideLabelX(barLeft, barRight, labelWidth, isNegative, insidePosition, inset) {
+        switch (insidePosition) {
+            case 'top':
+                return isNegative
+                    ? barRight - labelWidth / 2 - inset
+                    : barLeft + labelWidth / 2 + inset;
+            case 'middle':
+                return (barLeft + barRight) / 2;
+            case 'bottom':
+                return isNegative
+                    ? barLeft + labelWidth / 2 + inset
+                    : barRight - labelWidth / 2 - inset;
+        }
+    }
+    isHorizontalLabelWithinBounds(labelX, labelWidth, barLeft, barRight) {
+        const labelLeft = labelX - labelWidth / 2;
+        const labelRight = labelX + labelWidth / 2;
+        return labelLeft >= barLeft + 1 && labelRight <= barRight - 1;
+    }
+    renderVerticalValueLabel(labelGroup, dataItem, index, xKey, x, y, parseValue, xScaleType, stackingContext, config, barWidth, barOffset, mode, plotTop, plotBottom) {
+        const categoryKey = String(dataItem[xKey]);
+        const rawValue = parseValue(dataItem[this.dataKey]);
+        const renderedValue = this.getRenderedValue(rawValue, 'vertical');
+        const valueText = this.getValueLabelText(rawValue, dataItem, config);
+        const xPos = getScalePosition(x, dataItem[xKey], xScaleType);
+        const barColor = this.getBarColor(dataItem, index);
+        const { start, end } = getBarValueRange(categoryKey, renderedValue, stackingContext);
+        const bounds = getScaledValueRange(y, start, end);
+        const barTop = bounds.min;
+        const barBottom = bounds.max;
+        const barHeight = Math.abs(barBottom - barTop);
+        const barCenterX = xPos +
+            (xScaleType === 'band' ? barOffset : -barWidth / 2) +
+            barWidth / 2;
+        const labelBox = this.measureLabelBox(labelGroup, valueText, config);
+        const placement = this.getVerticalLabelPlacement({
+            x: barCenterX,
+            barTop,
+            barBottom,
+            barHeight,
+            labelBox,
+            isNegative: renderedValue < 0,
+            mode,
+            position: config.position,
+            insidePosition: config.insidePosition,
+            plotTop,
+            plotBottom,
+        });
+        if (!placement.shouldRender) {
+            return;
+        }
+        this.appendValueLabel(labelGroup, valueText, placement, labelBox, config, this.getLabelColor(config, barColor));
+    }
+    renderHorizontalValueLabel(labelGroup, dataItem, index, xKey, x, y, parseValue, yScaleType, stackingContext, config, barHeight, barOffset, mode, plotLeft, plotRight) {
+        const categoryKey = String(dataItem[xKey]);
+        const rawValue = parseValue(dataItem[this.dataKey]);
+        const renderedValue = this.getRenderedValue(rawValue, 'horizontal');
+        const valueText = this.getValueLabelText(rawValue, dataItem, config);
+        const yPos = getScalePosition(y, dataItem[xKey], yScaleType);
+        const barColor = this.getBarColor(dataItem, index);
+        const { start, end } = getBarValueRange(categoryKey, renderedValue, stackingContext);
+        const bounds = getScaledValueRange(x, start, end);
+        const barLeft = bounds.min;
+        const barRight = bounds.max;
+        const barWidth = Math.abs(barRight - barLeft);
+        const barCenterY = yPos +
+            (yScaleType === 'band' ? barOffset : -barHeight / 2) +
+            barHeight / 2;
+        const labelBox = this.measureLabelBox(labelGroup, valueText, config);
+        const placement = this.getHorizontalLabelPlacement({
+            y: barCenterY,
+            barLeft,
+            barRight,
+            barWidth,
+            labelBox,
+            isNegative: renderedValue < 0,
+            mode,
+            position: config.position,
+            insidePosition: config.insidePosition,
+            plotLeft,
+            plotRight,
+        });
+        if (!placement.shouldRender) {
+            return;
+        }
+        this.appendValueLabel(labelGroup, valueText, placement, labelBox, config, this.getLabelColor(config, barColor));
+    }
+    renderVerticalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme, stackingContext) {
+        const bandwidth = x.bandwidth ? x.bandwidth() : 20;
+        const mode = stackingContext?.mode ?? 'normal';
+        const { thickness: barWidth, offset: barOffset } = getBarSlotLayout(bandwidth, mode, this.maxBarSize, stackingContext?.totalSeries ?? 1, stackingContext?.seriesIndex ?? 0, stackingContext?.gap ?? 0.1);
+        const config = this.resolveValueLabelConfig(theme);
+        const plotTop = Math.min(...y.range());
+        const plotBottom = Math.max(...y.range());
         const labelGroup = plotGroup
             .append('g')
             .attr('class', `bar-value-labels-${sanitizeForCSS(this.dataKey)}`);
-        data.forEach((d, i) => {
-            const categoryKey = String(d[xKey]);
-            const value = parseValue(d[this.dataKey]);
-            const valueText = String(value);
-            const xPos = getScalePosition(x, d[xKey], xScaleType);
-            const barColor = this.colorAdapter
-                ? this.colorAdapter(d, i)
-                : this.fill;
-            // Calculate bar position based on stacking mode
-            let barTop;
-            let barBottom;
-            if (mode === 'none' || mode === 'layer') {
-                const yPos = y(value) || 0;
-                barTop = Math.min(yBaseline, yPos);
-                barBottom = Math.max(yBaseline, yPos);
-            }
-            else if (mode === 'percent') {
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
-                const percentCumulative = (cumulative / total) * 100;
-                const percentValue = (value / total) * 100;
-                barTop = y(percentCumulative + percentValue) || 0;
-                barBottom = y(percentCumulative) || 0;
-            }
-            else {
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                barTop = y(cumulative + value) || 0;
-                barBottom = y(cumulative) || 0;
-            }
-            const barHeight = Math.abs(barBottom - barTop);
-            const barCenterX = xPos +
-                (xScaleType === 'band' ? barOffset : -barWidth / 2) +
-                barWidth / 2;
-            // Create temporary text to measure dimensions
-            const tempText = labelGroup
-                .append('text')
-                .style('font-size', `${fontSize}px`)
-                .style('font-family', fontFamily)
-                .style('font-weight', fontWeight)
-                .text(valueText);
-            const textBBox = tempText.node().getBBox();
-            const boxWidth = textBBox.width + padding * 2;
-            const boxHeight = textBBox.height + padding * 2;
-            const labelX = barCenterX;
-            let labelY = (barTop + barBottom) / 2; // Default to middle
-            let shouldRender = true;
-            if (position === 'outside') {
-                // Place above the bar
-                labelY = barTop - boxHeight / 2 - 4;
-                // Check if it fits (not going above plot area)
-                const plotTop = y.range()[1];
-                if (labelY - boxHeight / 2 < plotTop) {
-                    shouldRender = false;
-                }
-            }
-            else {
-                if (mode === 'layer' && insidePosition === 'bottom') {
-                    // Bottom labels in layer mode are visually ambiguous and often hidden by overlap.
-                    shouldRender = false;
-                }
-                else {
-                    const { inset, minPadding } = getLabelSpacing(mode);
-                    switch (insidePosition) {
-                        case 'top':
-                            labelY = barTop + boxHeight / 2 + inset;
-                            break;
-                        case 'middle':
-                            labelY = (barTop + barBottom) / 2;
-                            break;
-                        case 'bottom':
-                            labelY = barBottom - boxHeight / 2 - inset;
-                            break;
-                    }
-                    // Check if it fits inside the bar
-                    if (boxHeight + minPadding > barHeight) {
-                        shouldRender = false;
-                    }
-                    // In layer mode, check the label fits in the visible gap
-                    // above the next layer's bar top
-                    if (shouldRender &&
-                        mode === 'layer' &&
-                        insidePosition === 'top' &&
-                        stackingContext?.nextLayerData) {
-                        const nextValue = stackingContext.nextLayerData.get(categoryKey);
-                        if (nextValue !== undefined) {
-                            const nextBarTop = y(nextValue) || 0;
-                            const labelBottom = labelY + boxHeight / 2;
-                            if (labelBottom + LAYER_LABEL_GAP > nextBarTop) {
-                                shouldRender = false;
-                            }
-                        }
-                    }
-                }
-            }
-            tempText.remove();
-            if (shouldRender) {
-                const labelColor = position === 'inside' && config.color === undefined
-                    ? getContrastTextColor(barColor)
-                    : defaultLabelColor;
-                const group = labelGroup.append('g');
-                if (position === 'outside') {
-                    // Draw rounded rectangle background
-                    group
-                        .append('rect')
-                        .attr('x', labelX - boxWidth / 2)
-                        .attr('y', labelY - boxHeight / 2)
-                        .attr('width', boxWidth)
-                        .attr('height', boxHeight)
-                        .attr('rx', borderRadius)
-                        .attr('ry', borderRadius)
-                        .attr('fill', background)
-                        .attr('stroke', border)
-                        .attr('stroke-width', 1);
-                }
-                // Draw text
-                group
-                    .append('text')
-                    .attr('x', labelX)
-                    .attr('y', labelY)
-                    .attr('text-anchor', 'middle')
-                    .attr('dominant-baseline', 'central')
-                    .style('font-size', `${fontSize}px`)
-                    .style('font-family', fontFamily)
-                    .style('font-weight', fontWeight)
-                    .style('fill', labelColor)
-                    .style('pointer-events', 'none')
-                    .text(valueText);
-            }
-        });
+        data.forEach((dataItem, index) => this.renderVerticalValueLabel(labelGroup, dataItem, index, xKey, x, y, parseValue, xScaleType, stackingContext, config, barWidth, barOffset, mode, plotTop, plotBottom));
     }
     renderHorizontalValueLabels(plotGroup, data, xKey, x, y, parseValue, yScaleType, theme, stackingContext) {
         const bandwidth = y.bandwidth ? y.bandwidth() : 20;
         const mode = stackingContext?.mode ?? 'normal';
-        // Calculate bar height based on stacking mode (same logic as renderHorizontal)
-        let barHeight;
-        let barOffset;
-        if (mode === 'none') {
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const gap = stackingContext?.gap ?? 0.1;
-            const groupHeight = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize * totalSeries)
-                : bandwidth;
-            const totalGapSpace = groupHeight * gap * (totalSeries - 1);
-            const availableHeight = groupHeight - totalGapSpace;
-            barHeight = availableHeight / totalSeries;
-            const gapSize = totalSeries > 1 ? groupHeight * gap : 0;
-            barOffset =
-                (bandwidth - groupHeight) / 2 +
-                    seriesIndex * (barHeight + gapSize);
-        }
-        else if (mode === 'layer') {
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const maxHeight = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            const scaleFactor = 1 - (seriesIndex / totalSeries) * 0.7;
-            barHeight = maxHeight * scaleFactor;
-            barOffset = (bandwidth - barHeight) / 2;
-        }
-        else {
-            barHeight = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            barOffset = (bandwidth - barHeight) / 2;
-        }
-        const domain = x.domain();
-        const baselineValue = domain[0] >= 0 ? Math.max(0, domain[0]) : domain[0];
-        const xBaseline = x(baselineValue) || 0;
-        const config = this.valueLabel;
-        const position = config.position || 'outside';
-        const insidePosition = config.insidePosition || 'top';
-        const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
-        const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
-        const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
-        const defaultLabelColor = config.color ?? theme.valueLabel.color;
-        const background = config.background ?? theme.valueLabel.background;
-        const border = config.border ?? theme.valueLabel.border;
-        const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
-        const padding = config.padding ?? theme.valueLabel.padding;
+        const { thickness: barHeight, offset: barOffset } = getBarSlotLayout(bandwidth, mode, this.maxBarSize, stackingContext?.totalSeries ?? 1, stackingContext?.seriesIndex ?? 0, stackingContext?.gap ?? 0.1);
+        const config = this.resolveValueLabelConfig(theme);
+        const plotLeft = Math.min(...x.range());
+        const plotRight = Math.max(...x.range());
         const labelGroup = plotGroup
             .append('g')
             .attr('class', `bar-value-labels-${sanitizeForCSS(this.dataKey)}`);
-        data.forEach((d, i) => {
-            const categoryKey = String(d[xKey]);
-            const value = parseValue(d[this.dataKey]);
-            const valueText = String(value);
-            const yPos = getScalePosition(y, d[xKey], yScaleType);
-            const barColor = this.colorAdapter
-                ? this.colorAdapter(d, i)
-                : this.fill;
-            // Calculate bar position based on stacking mode
-            let barLeft;
-            let barRight;
-            if (mode === 'none' || mode === 'layer') {
-                const xPos = x(value) || 0;
-                barLeft = Math.min(xBaseline, xPos);
-                barRight = Math.max(xBaseline, xPos);
-            }
-            else if (mode === 'percent') {
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
-                const percentCumulative = (cumulative / total) * 100;
-                const percentValue = (value / total) * 100;
-                barLeft = x(percentCumulative) || 0;
-                barRight = x(percentCumulative + percentValue) || 0;
-            }
-            else {
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                barLeft = x(cumulative) || 0;
-                barRight = x(cumulative + value) || 0;
-            }
-            const barWidth = Math.abs(barRight - barLeft);
-            const barCenterY = yPos +
-                (yScaleType === 'band' ? barOffset : -barHeight / 2) +
-                barHeight / 2;
-            // Create temporary text to measure dimensions
-            const tempText = labelGroup
-                .append('text')
-                .style('font-size', `${fontSize}px`)
-                .style('font-family', fontFamily)
-                .style('font-weight', fontWeight)
-                .text(valueText);
-            const textBBox = tempText.node().getBBox();
-            const boxWidth = textBBox.width + padding * 2;
-            const boxHeight = textBBox.height + padding * 2;
-            let labelX = (barLeft + barRight) / 2; // Default to middle
-            const labelY = barCenterY;
-            let shouldRender = true;
-            if (position === 'outside') {
-                // Place to the right of the bar
-                labelX = barRight + boxWidth / 2 + 4;
-                // Check if it fits (not going beyond plot area)
-                const plotRight = x.range()[1];
-                if (labelX + boxWidth / 2 > plotRight) {
-                    shouldRender = false;
-                }
-            }
-            else {
-                // Map top/middle/bottom to start/middle/end for horizontal
-                if (mode === 'layer' && insidePosition === 'bottom') {
-                    // Bottom labels in layer mode are visually ambiguous and often hidden by overlap.
-                    shouldRender = false;
-                }
-                else {
-                    const { inset, minPadding } = getLabelSpacing(mode);
-                    switch (insidePosition) {
-                        case 'top': // start of bar (left side)
-                            labelX = barLeft + boxWidth / 2 + inset;
-                            break;
-                        case 'middle':
-                            labelX = (barLeft + barRight) / 2;
-                            break;
-                        case 'bottom': // end of bar (right side)
-                            labelX = barRight - boxWidth / 2 - inset;
-                            break;
-                    }
-                    // Check if it fits inside the bar
-                    if (boxWidth + minPadding > barWidth) {
-                        shouldRender = false;
-                    }
-                    // In layer mode, check the label fits in the visible gap
-                    // before the next layer's bar end
-                    if (shouldRender &&
-                        mode === 'layer' &&
-                        insidePosition === 'top' &&
-                        stackingContext?.nextLayerData) {
-                        const nextValue = stackingContext.nextLayerData.get(categoryKey);
-                        if (nextValue !== undefined) {
-                            const nextBarRight = x(nextValue) || 0;
-                            const labelRight = labelX + boxWidth / 2;
-                            if (labelRight + LAYER_LABEL_GAP > nextBarRight) {
-                                shouldRender = false;
-                            }
-                        }
-                    }
-                }
-            }
-            tempText.remove();
-            if (shouldRender) {
-                const labelColor = position === 'inside' && config.color === undefined
-                    ? getContrastTextColor(barColor)
-                    : defaultLabelColor;
-                const group = labelGroup.append('g');
-                if (position === 'outside') {
-                    // Draw rounded rectangle background
-                    group
-                        .append('rect')
-                        .attr('x', labelX - boxWidth / 2)
-                        .attr('y', labelY - boxHeight / 2)
-                        .attr('width', boxWidth)
-                        .attr('height', boxHeight)
-                        .attr('rx', borderRadius)
-                        .attr('ry', borderRadius)
-                        .attr('fill', background)
-                        .attr('stroke', border)
-                        .attr('stroke-width', 1);
-                }
-                // Draw text
-                group
-                    .append('text')
-                    .attr('x', labelX)
-                    .attr('y', labelY)
-                    .attr('text-anchor', 'middle')
-                    .attr('dominant-baseline', 'central')
-                    .style('font-size', `${fontSize}px`)
-                    .style('font-family', fontFamily)
-                    .style('font-weight', fontWeight)
-                    .style('fill', labelColor)
-                    .style('pointer-events', 'none')
-                    .text(valueText);
-            }
-        });
+        data.forEach((dataItem, index) => this.renderHorizontalValueLabel(labelGroup, dataItem, index, xKey, x, y, parseValue, yScaleType, stackingContext, config, barHeight, barOffset, mode, plotLeft, plotRight));
     }
 }