@internetstiftelsen/charts 0.7.1 → 0.8.0

package/README.md

@@ -7,6 +7,7 @@ A framework-agnostic, composable charting library built on D3.js with TypeScript
 - **Framework Agnostic** - Works with vanilla JS, React, Vue, Svelte, or any framework
 - **Composable Architecture** - Build charts by composing components
 - **Multiple Chart Types** - XYChart (lines, areas, bars), DonutChart, PieChart, and GaugeChart
+- **Stacking Control** - Bar stacking modes with optional reversed visual series order
 - **Flexible Scales** - Band, linear, time, and logarithmic scales
 - **Auto Resize** - Built-in ResizeObserver handles responsive behavior
 - **Responsive Policy** - Chart-level container-query overrides for theme and components

package/bar.js

@@ -1,4 +1,18 @@
 import { getContrastTextColor, sanitizeForCSS, mergeDeep } from './utils.js';
+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;
+function getLabelSpacing(mode) {
+    const stacked = mode !== 'none';
+    return {
+        inset: stacked ? LABEL_INSET_STACKED : LABEL_INSET_DEFAULT,
+        minPadding: stacked
+            ? LABEL_MIN_PADDING_STACKED
+            : LABEL_MIN_PADDING_DEFAULT,
+    };
+}
 export class Bar {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -426,76 +440,42 @@ export class Bar {
                 }
             }
             else {
-                // Inside the bar - with special handling for layer mode
-                if (mode === 'layer') {
-                    const totalSeries = stackingContext?.totalSeries ?? 1;
-                    const seriesIndex = stackingContext?.seriesIndex ?? 0;
-                    const isTopLayer = seriesIndex === totalSeries - 1;
-                    switch (insidePosition) {
-                        case 'top':
-                            // For layer mode + inside + top: check if there's enough space in the gap
-                            if (seriesIndex < totalSeries - 1) {
-                                // Calculate the gap to the next layer
-                                const nextLayerScaleFactor = 1 - ((seriesIndex + 1) / totalSeries) * 0.7;
-                                const nextLayerWidth = (this.maxBarSize
-                                    ? Math.min(bandwidth, this.maxBarSize)
-                                    : bandwidth) * nextLayerScaleFactor;
-                                const gap = (barWidth - nextLayerWidth) / 2;
-                                const marginBelow = 4; // Minimum margin below text
-                                if (boxHeight + marginBelow <= gap) {
-                                    labelY =
-                                        barTop + boxHeight / 2 + marginBelow;
-                                }
-                                else {
-                                    shouldRender = false;
-                                }
-                            }
-                            else {
-                                // Top layer - use normal top position if it fits
-                                labelY = barTop + boxHeight / 2 + 4;
-                                if (boxHeight + 8 > barHeight) {
-                                    shouldRender = false;
-                                }
-                            }
-                            break;
-                        case 'middle':
-                            // For layer mode + inside + middle: only show what fits
-                            labelY = (barTop + barBottom) / 2;
-                            if (boxHeight + 8 > barHeight) {
-                                shouldRender = false;
-                            }
-                            break;
-                        case 'bottom':
-                            // For layer mode + inside + bottom: only show for top layer if it fits
-                            if (isTopLayer) {
-                                labelY = barBottom - boxHeight / 2 - 4;
-                                if (boxHeight + 8 > barHeight) {
-                                    shouldRender = false;
-                                }
-                            }
-                            else {
-                                shouldRender = false;
-                            }
-                            break;
-                    }
+                if (mode === 'layer' && insidePosition === 'bottom') {
+                    // Bottom labels in layer mode are visually ambiguous and often hidden by overlap.
+                    shouldRender = false;
                 }
                 else {
-                    // Non-layer modes - use existing logic
+                    const { inset, minPadding } = getLabelSpacing(mode);
                     switch (insidePosition) {
                         case 'top':
-                            labelY = barTop + boxHeight / 2 + 4;
+                            labelY = barTop + boxHeight / 2 + inset;
                             break;
                         case 'middle':
                             labelY = (barTop + barBottom) / 2;
                             break;
                         case 'bottom':
-                            labelY = barBottom - boxHeight / 2 - 4;
+                            labelY = barBottom - boxHeight / 2 - inset;
                             break;
                     }
                     // Check if it fits inside the bar
-                    if (boxHeight + 8 > barHeight) {
+                    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();
@@ -644,78 +624,43 @@ export class Bar {
                 }
             }
             else {
-                // Inside the bar - with special handling for layer mode
-                if (mode === 'layer') {
-                    const totalSeries = stackingContext?.totalSeries ?? 1;
-                    const seriesIndex = stackingContext?.seriesIndex ?? 0;
-                    const isTopLayer = seriesIndex === totalSeries - 1;
-                    // Map top/middle/bottom to start/middle/end for horizontal
-                    switch (insidePosition) {
-                        case 'top': // start of bar (left side)
-                            // For layer mode + inside + top(left): check if there's enough space in the gap
-                            if (seriesIndex < totalSeries - 1) {
-                                // Calculate the gap to the next layer
-                                const nextLayerScaleFactor = 1 - ((seriesIndex + 1) / totalSeries) * 0.7;
-                                const nextLayerHeight = (this.maxBarSize
-                                    ? Math.min(bandwidth, this.maxBarSize)
-                                    : bandwidth) * nextLayerScaleFactor;
-                                const gap = (barHeight - nextLayerHeight) / 2;
-                                const marginRight = 4; // Minimum margin to the right of text
-                                if (boxWidth + marginRight <= gap) {
-                                    labelX =
-                                        barLeft + boxWidth / 2 + marginRight;
-                                }
-                                else {
-                                    shouldRender = false;
-                                }
-                            }
-                            else {
-                                // Top layer - use normal left position if it fits
-                                labelX = barLeft + boxWidth / 2 + 4;
-                                if (boxWidth + 8 > barWidth) {
-                                    shouldRender = false;
-                                }
-                            }
-                            break;
-                        case 'middle':
-                            // For layer mode + inside + middle: only show what fits
-                            labelX = (barLeft + barRight) / 2;
-                            if (boxWidth + 8 > barWidth) {
-                                shouldRender = false;
-                            }
-                            break;
-                        case 'bottom': // end of bar (right side)
-                            // For layer mode + inside + bottom(right): only show for top layer if it fits
-                            if (isTopLayer) {
-                                labelX = barRight - boxWidth / 2 - 4;
-                                if (boxWidth + 8 > barWidth) {
-                                    shouldRender = false;
-                                }
-                            }
-                            else {
-                                shouldRender = false;
-                            }
-                            break;
-                    }
+                // 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 {
-                    // Non-layer modes - use existing logic
-                    // Map top/middle/bottom to start/middle/end for horizontal
+                    const { inset, minPadding } = getLabelSpacing(mode);
                     switch (insidePosition) {
                         case 'top': // start of bar (left side)
-                            labelX = barLeft + boxWidth / 2 + 4;
+                            labelX = barLeft + boxWidth / 2 + inset;
                             break;
                         case 'middle':
                             labelX = (barLeft + barRight) / 2;
                             break;
                         case 'bottom': // end of bar (right side)
-                            labelX = barRight - boxWidth / 2 - 4;
+                            labelX = barRight - boxWidth / 2 - inset;
                             break;
                     }
                     // Check if it fits inside the bar
-                    if (boxWidth + 8 > barWidth) {
+                    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();

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.7.1",
+    "version": "0.8.0",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,

package/types.d.ts

@@ -207,6 +207,7 @@ export type AreaConfig = AreaConfigBase & {
 export type BarStackConfig = {
     mode?: BarStackMode;
     gap?: number;
+    reverseSeries?: boolean;
 };
 export type AreaStackMode = 'none' | 'normal' | 'percent';
 export type AreaStackConfig = {
@@ -327,6 +328,7 @@ export type BarStackingContext = {
     cumulativeData: Map<string, number>;
     totalData: Map<string, number>;
     gap: number;
+    nextLayerData?: Map<string, number>;
 };
 export type AreaStackingContext = {
     mode: AreaStackMode;

package/xy-chart.d.ts

@@ -9,6 +9,7 @@ export declare class XYChart extends BaseChart {
     private readonly series;
     private barStackMode;
     private barStackGap;
+    private barStackReverseSeries;
     private areaStackMode;
     constructor(config: XYChartConfig);
     addChild(component: ChartComponent): this;
@@ -22,6 +23,7 @@ export declare class XYChart extends BaseChart {
     protected getLegendSeries(): LegendSeries[];
     private getCategoryScaleType;
     private getVisibleSeries;
+    private getDisplaySeries;
     private setupScales;
     private isHorizontalOrientation;
     private collectSeriesValues;

package/xy-chart.js

@@ -23,6 +23,12 @@ export class XYChart extends BaseChart {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "barStackReverseSeries", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "areaStackMode", {
             enumerable: true,
             configurable: true,
@@ -31,6 +37,7 @@ export class XYChart extends BaseChart {
         });
         this.barStackMode = config.barStack?.mode ?? 'normal';
         this.barStackGap = config.barStack?.gap ?? 0.1;
+        this.barStackReverseSeries = config.barStack?.reverseSeries ?? false;
         this.areaStackMode = config.areaStack?.mode ?? 'none';
     }
     addChild(component) {
@@ -120,6 +127,7 @@ export class XYChart extends BaseChart {
             barStack: {
                 mode: this.barStackMode,
                 gap: this.barStackGap,
+                reverseSeries: this.barStackReverseSeries,
             },
             areaStack: {
                 mode: this.areaStackMode,
@@ -235,7 +243,8 @@ export class XYChart extends BaseChart {
         return (Object.keys(this.data[0]).find((key) => !this.series.some((s) => s.dataKey === key)) || 'column');
     }
     getLegendSeries() {
-        return this.series.map((series) => {
+        const displaySeries = this.getDisplaySeries();
+        return displaySeries.map((series) => {
             if (series.type === 'line') {
                 return {
                     dataKey: series.dataKey,
@@ -252,10 +261,32 @@ export class XYChart extends BaseChart {
         return this.scaleConfig.x?.type || 'band';
     }
     getVisibleSeries() {
+        const displaySeries = this.getDisplaySeries();
         if (!this.legend) {
+            return displaySeries;
+        }
+        return displaySeries.filter((series) => this.legend.isSeriesVisible(series.dataKey));
+    }
+    getDisplaySeries() {
+        if (!this.barStackReverseSeries) {
+            return this.series;
+        }
+        const barSeries = this.series.filter((entry) => {
+            return entry.type === 'bar';
+        });
+        if (barSeries.length < 2) {
             return this.series;
         }
-        return this.series.filter((series) => this.legend.isSeriesVisible(series.dataKey));
+        const reversedBars = [...barSeries].reverse();
+        let reversedBarIndex = 0;
+        return this.series.map((entry) => {
+            if (entry.type !== 'bar') {
+                return entry;
+            }
+            const nextBar = reversedBars[reversedBarIndex];
+            reversedBarIndex += 1;
+            return nextBar;
+        });
     }
     setupScales() {
         const xKey = this.getXKey();
@@ -509,9 +540,12 @@ export class XYChart extends BaseChart {
                 .append('g')
                 .attr('class', 'area-value-label-layer')
             : null;
-        const { cumulativeDataBySeriesIndex, totalData } = this.computeStackingData(this.data, xKey, barSeries);
+        const { cumulativeDataBySeriesIndex, totalData, rawValuesBySeriesIndex, } = this.computeStackingData(this.data, xKey, barSeries);
         const areaStackingContextBySeries = this.computeAreaStackingContexts(this.data, xKey, areaSeries);
         barSeries.forEach((series, barIndex) => {
+            const nextLayerData = this.barStackMode === 'layer'
+                ? rawValuesBySeriesIndex.get(barIndex + 1)
+                : undefined;
             const stackingContext = {
                 mode: this.barStackMode,
                 seriesIndex: barIndex,
@@ -519,6 +553,7 @@ export class XYChart extends BaseChart {
                 cumulativeData: cumulativeDataBySeriesIndex.get(barIndex) ?? new Map(),
                 totalData,
                 gap: this.barStackGap,
+                nextLayerData,
             };
             series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme, stackingContext);
         });
@@ -534,15 +569,25 @@ export class XYChart extends BaseChart {
     }
     computeStackingData(data, xKey, barSeries) {
         const cumulativeDataBySeriesIndex = new Map();
+        const rawValuesBySeriesIndex = new Map();
         const totalData = new Map();
         data.forEach((dataPoint) => {
             const categoryKey = String(dataPoint[xKey]);
             let total = 0;
-            barSeries.forEach((series) => {
+            barSeries.forEach((series, seriesIndex) => {
                 const value = this.parseValue(dataPoint[series.dataKey]);
                 if (Number.isFinite(value)) {
                     total += value;
                 }
+                // Build per-series raw value maps (used for layer next-layer data)
+                let rawMap = rawValuesBySeriesIndex.get(seriesIndex);
+                if (!rawMap) {
+                    rawMap = new Map();
+                    rawValuesBySeriesIndex.set(seriesIndex, rawMap);
+                }
+                if (Number.isFinite(value)) {
+                    rawMap.set(categoryKey, value);
+                }
             });
             totalData.set(categoryKey, total);
         });
@@ -561,7 +606,11 @@ export class XYChart extends BaseChart {
             });
             cumulativeDataBySeriesIndex.set(seriesIndex, cumulativeForSeries);
         });
-        return { cumulativeDataBySeriesIndex, totalData };
+        return {
+            cumulativeDataBySeriesIndex,
+            totalData,
+            rawValuesBySeriesIndex,
+        };
     }
     computeAreaStackingContexts(data, xKey, areaSeries) {
         const contextMap = new Map();