@internetstiftelsen/charts 0.10.0 → 0.11.0

package/dist/bar.js

@@ -1,9 +1,11 @@
 import { getContrastTextColor, sanitizeForCSS, mergeDeep } from './utils.js';
 import { getScalePosition } from './scale-utils.js';
+import { buildXYDatumSnapshotKeys, createTransitionCompletionPromise, } from './xy-motion/helpers.js';
 const LABEL_INSET_DEFAULT = 4;
 const LABEL_INSET_STACKED = 6;
 const LABEL_MIN_PADDING_DEFAULT = 8;
 const LABEL_MIN_PADDING_STACKED = 16;
+const LABEL_OUTSIDE_OFFSET = 4;
 function getLabelSpacing(mode) {
     const stacked = mode !== 'none';
     return {
@@ -48,34 +50,50 @@ function getBarSlotLayout(bandwidth, mode, maxBarSize, totalSeries, seriesIndex,
 function getBarValueRange(categoryKey, value, stackingContext) {
     const mode = stackingContext?.mode ?? 'normal';
     if (mode === 'none' || mode === 'layer') {
-        return {
-            start: 0,
-            end: value,
-        };
+        return getUnstackedBarValueRange(value);
     }
     if (mode === 'percent') {
-        if (value >= 0) {
-            const cumulative = stackingContext?.positiveCumulativeData.get(categoryKey) ?? 0;
-            const total = stackingContext?.positiveTotalData.get(categoryKey) ?? 0;
-            if (total === 0) {
-                return { start: 0, end: 0 };
-            }
-            return {
-                start: (cumulative / total) * 100,
-                end: ((cumulative + value) / total) * 100,
-            };
-        }
-        const cumulativeMagnitude = stackingContext?.negativeCumulativeData.get(categoryKey) ?? 0;
-        const totalMagnitude = stackingContext?.negativeTotalData.get(categoryKey) ?? 0;
-        if (totalMagnitude === 0) {
-            return { start: 0, end: 0 };
-        }
+        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: -((cumulativeMagnitude / totalMagnitude) * 100),
-            end: -(((cumulativeMagnitude + Math.abs(value)) / totalMagnitude) *
-                100),
+            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 {
@@ -181,13 +199,10 @@ export class Bar {
         }
         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);
-        }
-        else {
-            this.renderHorizontal(plotGroup, data, xKey, x, y, parseValue, xScaleType, stackingContext);
-        }
+    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme, stackingContext, orientation = 'vertical', animation) {
+        const result = orientation === 'vertical'
+            ? this.renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType, stackingContext, animation)
+            : this.renderHorizontal(plotGroup, data, xKey, x, y, parseValue, xScaleType, stackingContext, animation);
         // Render value labels if enabled
         if (this.valueLabel?.show && theme) {
             if (orientation === 'vertical') {
@@ -197,8 +212,9 @@ export class Bar {
                 this.renderHorizontalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme, stackingContext);
             }
         }
+        return result;
     }
-    renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType, stackingContext) {
+    renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType, stackingContext, animation) {
         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);
@@ -208,29 +224,15 @@ export class Bar {
             const { start, end } = getBarValueRange(categoryKey, value, stackingContext);
             return getScaledValueRange(y, start, end);
         };
-        // Add bar rectangles
-        const sanitizedKey = sanitizeForCSS(this.dataKey);
-        plotGroup
-            .selectAll(`.bar-${sanitizedKey}`)
-            .data(data)
-            .join('rect')
-            .attr('class', `bar-${sanitizedKey}`)
-            .attr('data-index', (_, i) => i)
-            .attr('x', (d) => {
-            const xPos = getScalePosition(x, d[xKey], xScaleType);
-            return xScaleType === 'band'
-                ? xPos + barOffset
-                : xPos - barWidth / 2;
-        })
-            .attr('y', (d) => getVerticalBounds(d).min)
-            .attr('width', barWidth)
-            .attr('height', (d) => {
-            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 snapshotKeys = buildXYDatumSnapshotKeys(data, xKey);
+        const layoutData = this.createVerticalLayoutData(data, xKey, snapshotKeys, x, xScaleType, barWidth, barOffset, getVerticalBounds);
+        const animatedLayoutData = this.createAnimatedVerticalLayoutData(layoutData, animation);
+        return {
+            snapshot: this.createSnapshot(layoutData),
+            transitions: this.renderBars(plotGroup, layoutData, animatedLayoutData, animation),
+        };
+    }
+    renderHorizontal(plotGroup, data, xKey, x, y, parseValue, yScaleType, stackingContext, animation) {
         const bandwidth = y.bandwidth ? y.bandwidth() : 20;
         const mode = stackingContext?.mode ?? 'normal';
         const { thickness: barHeight, offset: barOffset } = getBarSlotLayout(bandwidth, mode, this.maxBarSize, stackingContext?.totalSeries ?? 1, stackingContext?.seriesIndex ?? 0, stackingContext?.gap ?? 0.1);
@@ -240,278 +242,395 @@ export class Bar {
             const { start, end } = getBarValueRange(categoryKey, value, stackingContext);
             return getScaledValueRange(x, start, end);
         };
-        // Add bar rectangles (horizontal)
+        const snapshotKeys = buildXYDatumSnapshotKeys(data, xKey);
+        const layoutData = this.createHorizontalLayoutData(data, xKey, snapshotKeys, y, yScaleType, barHeight, barOffset, getHorizontalBounds);
+        const animatedLayoutData = this.createAnimatedHorizontalLayoutData(layoutData, animation);
+        return {
+            snapshot: this.createSnapshot(layoutData),
+            transitions: this.renderBars(plotGroup, layoutData, animatedLayoutData, animation),
+        };
+    }
+    createVerticalLayoutData(data, xKey, snapshotKeys, x, xScaleType, barWidth, barOffset, getVerticalBounds) {
+        return data.map((entry, index) => {
+            const xPos = getScalePosition(x, entry[xKey], xScaleType);
+            const bounds = getVerticalBounds(entry);
+            return {
+                data: entry,
+                snapshotKey: snapshotKeys[index] ?? String(index),
+                x: xScaleType === 'band'
+                    ? xPos + barOffset
+                    : xPos - barWidth / 2,
+                y: bounds.min,
+                width: barWidth,
+                height: Math.abs(bounds.max - bounds.min),
+            };
+        });
+    }
+    createHorizontalLayoutData(data, xKey, snapshotKeys, y, yScaleType, barHeight, barOffset, getHorizontalBounds) {
+        return data.map((entry, index) => {
+            const yPos = getScalePosition(y, entry[xKey], yScaleType);
+            const bounds = getHorizontalBounds(entry);
+            return {
+                data: entry,
+                snapshotKey: snapshotKeys[index] ?? String(index),
+                x: bounds.min,
+                y: yScaleType === 'band'
+                    ? yPos + barOffset
+                    : yPos - barHeight / 2,
+                width: Math.abs(bounds.max - bounds.min),
+                height: barHeight,
+            };
+        });
+    }
+    createAnimatedVerticalLayoutData(layoutData, animation) {
+        return layoutData.map((entry) => {
+            return this.resolveAnimatedLayoutDatum(entry, animation, {
+                y: animation?.baselineValuePosition,
+                height: 0,
+            });
+        });
+    }
+    createAnimatedHorizontalLayoutData(layoutData, animation) {
+        return layoutData.map((entry) => {
+            return this.resolveAnimatedLayoutDatum(entry, animation, {
+                x: animation?.baselineValuePosition,
+                width: 0,
+            });
+        });
+    }
+    resolveAnimatedLayoutDatum(entry, animation, baselineOverride) {
+        if (!animation) {
+            return entry;
+        }
+        const previousSnapshot = animation.previousSnapshot?.get(entry.snapshotKey);
+        if (previousSnapshot) {
+            return {
+                ...entry,
+                ...previousSnapshot,
+            };
+        }
+        return {
+            ...entry,
+            ...baselineOverride,
+        };
+    }
+    createSnapshot(layoutData) {
+        const snapshot = new Map();
+        layoutData.forEach((entry) => {
+            snapshot.set(entry.snapshotKey, {
+                x: entry.x,
+                y: entry.y,
+                width: entry.width,
+                height: entry.height,
+            });
+        });
+        return snapshot;
+    }
+    renderBars(plotGroup, layoutData, animatedLayoutData, animation) {
         const sanitizedKey = sanitizeForCSS(this.dataKey);
-        plotGroup
+        const bars = plotGroup
             .selectAll(`.bar-${sanitizedKey}`)
-            .data(data)
+            .data(layoutData)
             .join('rect')
             .attr('class', `bar-${sanitizedKey}`)
             .attr('data-index', (_, i) => i)
-            .attr('x', (d) => getHorizontalBounds(d).min)
-            .attr('y', (d) => {
-            const yPos = getScalePosition(y, d[xKey], yScaleType);
-            return yScaleType === 'band'
-                ? yPos + barOffset
-                : yPos - barHeight / 2;
-        })
-            .attr('width', (d) => {
-            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);
+            .attr('x', (_, index) => (animation
+            ? animatedLayoutData[index]?.x
+            : layoutData[index]?.x) ?? 0)
+            .attr('y', (_, index) => (animation
+            ? animatedLayoutData[index]?.y
+            : layoutData[index]?.y) ?? 0)
+            .attr('width', (_, index) => (animation
+            ? animatedLayoutData[index]?.width
+            : layoutData[index]?.width) ?? 0)
+            .attr('height', (_, index) => (animation
+            ? animatedLayoutData[index]?.height
+            : layoutData[index]?.height) ?? 0)
+            .attr('fill', (entry, i) => this.colorAdapter
+            ? this.colorAdapter(entry.data, i)
+            : this.fill);
+        if (!animation) {
+            return [];
+        }
+        const transition = bars
+            .transition()
+            .duration(animation.duration)
+            .ease(animation.easing)
+            .attr('x', (_, index) => layoutData[index]?.x ?? 0)
+            .attr('y', (_, index) => layoutData[index]?.y ?? 0)
+            .attr('width', (_, index) => layoutData[index]?.width ?? 0)
+            .attr('height', (_, index) => layoutData[index]?.height ?? 0);
+        return [createTransitionCompletionPromise(transition)];
+    }
+    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);
+        }
+        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);
+        }
+        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);
+        }
+        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.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 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 rawValue = parseValue(d[this.dataKey]);
-            const renderedValue = this.getRenderedValue(rawValue, 'vertical');
-            const valueText = String(rawValue);
-            const xPos = getScalePosition(x, d[xKey], xScaleType);
-            const barColor = this.colorAdapter
-                ? this.colorAdapter(d, i)
-                : this.fill;
-            const { start, end } = getBarValueRange(categoryKey, renderedValue, stackingContext);
-            const bounds = getScaledValueRange(y, start, end);
-            const barTop = bounds.min;
-            const barBottom = bounds.max;
-            const isNegative = renderedValue < 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') {
-                const plotTop = y.range()[1];
-                const plotBottom = y.range()[0];
-                labelY = isNegative
-                    ? barBottom + boxHeight / 2 + 4
-                    : barTop - boxHeight / 2 - 4;
-                if ((!isNegative && labelY - boxHeight / 2 < plotTop) ||
-                    (isNegative && labelY + boxHeight / 2 > plotBottom)) {
-                    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;
-                    }
-                    if (boxHeight + minPadding > barHeight) {
-                        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';
         const { thickness: barHeight, offset: barOffset } = getBarSlotLayout(bandwidth, mode, this.maxBarSize, stackingContext?.totalSeries ?? 1, stackingContext?.seriesIndex ?? 0, stackingContext?.gap ?? 0.1);
-        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 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 rawValue = parseValue(d[this.dataKey]);
-            const renderedValue = this.getRenderedValue(rawValue, 'horizontal');
-            const valueText = String(rawValue);
-            const yPos = getScalePosition(y, d[xKey], yScaleType);
-            const barColor = this.colorAdapter
-                ? this.colorAdapter(d, i)
-                : this.fill;
-            const { start, end } = getBarValueRange(categoryKey, renderedValue, stackingContext);
-            const bounds = getScaledValueRange(x, start, end);
-            const barLeft = bounds.min;
-            const barRight = bounds.max;
-            const isNegative = renderedValue < 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') {
-                const plotLeft = Math.min(...x.range());
-                const plotRight = Math.max(...x.range());
-                labelX = isNegative
-                    ? barLeft - boxWidth / 2 - 4
-                    : barRight + boxWidth / 2 + 4;
-                if ((!isNegative && labelX + boxWidth / 2 > plotRight) ||
-                    (isNegative && labelX - boxWidth / 2 < plotLeft)) {
-                    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':
-                            labelX = isNegative
-                                ? barRight - boxWidth / 2 - inset
-                                : barLeft + boxWidth / 2 + inset;
-                            break;
-                        case 'middle':
-                            labelX = (barLeft + barRight) / 2;
-                            break;
-                        case 'bottom':
-                            labelX = isNegative
-                                ? barLeft + boxWidth / 2 + inset
-                                : barRight - boxWidth / 2 - inset;
-                            break;
-                    }
-                    if (boxWidth + minPadding > barWidth) {
-                        shouldRender = false;
-                    }
-                    if (shouldRender &&
-                        position === 'inside' &&
-                        insidePosition !== 'middle') {
-                        const labelLeft = labelX - boxWidth / 2;
-                        const labelRight = labelX + boxWidth / 2;
-                        if (labelLeft < barLeft + 1 ||
-                            labelRight > barRight - 1) {
-                            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));
     }
 }