@internetstiftelsen/charts 0.5.1 → 0.6.0

package/x-axis.js

@@ -1,6 +1,23 @@
 import { axisBottom } from 'd3';
 import { measureTextWidth, truncateText, wrapText, mergeDeep } from './utils.js';
+import { GROUPED_CATEGORY_ID_KEY, GROUPED_CATEGORY_LABEL_KEY, GROUPED_GAP_TICK_PREFIX, GROUPED_GROUP_LABEL_KEY, } from './grouped-data.js';
 export class XAxis {
+    resolveGroupLabelStyle(theme) {
+        const axisGroupLabel = theme.axis.groupLabel;
+        const fontFamily = axisGroupLabel?.fontFamily ?? theme.axis.fontFamily;
+        const fontWeight = axisGroupLabel?.fontWeight ?? '700';
+        const parsedFontSize = parseFloat(axisGroupLabel?.fontSize ?? theme.axis.fontSize);
+        const fontSize = Number.isFinite(parsedFontSize)
+            ? parsedFontSize
+            : this.fontSize;
+        const color = axisGroupLabel?.color ?? '#111827';
+        return {
+            fontFamily,
+            fontWeight,
+            fontSize,
+            color,
+        };
+    }
     constructor(config) {
         Object.defineProperty(this, "type", {
             enumerable: true,
@@ -14,6 +31,30 @@ export class XAxis {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "labelKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "groupLabelKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "showGroupLabels", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "groupLabelGap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "rotatedLabels", {
             enumerable: true,
             configurable: true,
@@ -88,6 +129,10 @@ export class XAxis {
             value: void 0
         });
         this.dataKey = config?.dataKey;
+        this.labelKey = config?.labelKey;
+        this.groupLabelKey = config?.groupLabelKey;
+        this.showGroupLabels = config?.showGroupLabels ?? false;
+        this.groupLabelGap = config?.groupLabelGap ?? 10;
         this.rotatedLabels = config?.rotatedLabels ?? false;
         this.maxLabelWidth = config?.maxLabelWidth;
         this.oversizedBehavior = config?.oversizedBehavior ?? 'truncate';
@@ -100,6 +145,10 @@ export class XAxis {
     getExportConfig() {
         return {
             dataKey: this.dataKey,
+            labelKey: this.labelKey,
+            groupLabelKey: this.groupLabelKey,
+            showGroupLabels: this.showGroupLabels,
+            groupLabelGap: this.groupLabelGap,
             rotatedLabels: this.rotatedLabels,
             maxLabelWidth: this.maxLabelWidth,
             oversizedBehavior: this.oversizedBehavior,
@@ -137,6 +186,9 @@ export class XAxis {
             this.wrapLineCount > 1) {
             height += (this.wrapLineCount - 1) * this.fontSize * 1.2;
         }
+        if (this.showGroupLabels) {
+            height += this.groupLabelGap + this.fontSize + 5;
+        }
         return {
             width: 0, // X-axis spans full width
             height,
@@ -185,18 +237,33 @@ export class XAxis {
         else {
             this.estimatedHeight = this.tickPadding + textHeight + 5;
         }
+        if (this.showGroupLabels) {
+            const groupLabelStyle = this.resolveGroupLabelStyle(theme);
+            this.estimatedHeight +=
+                this.groupLabelGap + groupLabelStyle.fontSize + 5;
+        }
         this.wrapLineCount = Math.max(this.wrapLineCount, maxLines);
     }
     clearEstimatedSpace() {
         this.estimatedHeight = null;
     }
-    render(svg, x, theme, yPosition) {
+    render(svg, x, theme, yPosition, data = []) {
+        const labelLookup = this.buildLabelLookup(data);
         const axisGenerator = axisBottom(x)
             .tickSizeOuter(0)
             .tickSize(0)
             .tickPadding(this.tickPadding);
-        // Apply tick formatting if specified
-        if (this.tickFormat) {
+        if (labelLookup) {
+            axisGenerator.tickFormat((value) => {
+                const key = String(value);
+                if (!labelLookup.has(key)) {
+                    return '';
+                }
+                return labelLookup.get(key) ?? '';
+            });
+        }
+        else if (this.tickFormat) {
+            // Apply tick formatting if specified
             if (typeof this.tickFormat === 'function') {
                 axisGenerator.tickFormat(this.tickFormat);
             }
@@ -226,6 +293,110 @@ export class XAxis {
         // Apply auto-hiding for overlapping labels
         this.applyAutoHiding(axis, x);
         axis.selectAll('.domain').remove();
+        if (this.showGroupLabels) {
+            this.renderGroupLabels(svg, x, theme, yPosition, data);
+        }
+    }
+    buildLabelLookup(data) {
+        if (!this.dataKey || data.length === 0) {
+            return null;
+        }
+        const labelKey = this.labelKey ??
+            (this.dataKey === GROUPED_CATEGORY_ID_KEY
+                ? GROUPED_CATEGORY_LABEL_KEY
+                : undefined);
+        if (!labelKey) {
+            return null;
+        }
+        const lookup = new Map();
+        data.forEach((row) => {
+            const rawDomainValue = row[this.dataKey];
+            const labelValue = row[labelKey];
+            lookup.set(String(rawDomainValue), String(labelValue ?? ''));
+        });
+        return lookup;
+    }
+    renderGroupLabels(svg, x, theme, yPosition, data) {
+        const groupRanges = this.buildGroupRanges(x, data);
+        if (groupRanges.length === 0) {
+            return;
+        }
+        const yOffset = this.tickPadding + this.fontSize + this.groupLabelGap;
+        const groupLabelStyle = this.resolveGroupLabelStyle(theme);
+        const groupLayer = svg
+            .append('g')
+            .attr('class', 'x-axis-group-labels')
+            .attr('transform', `translate(0,${yPosition})`);
+        groupLayer
+            .selectAll('text')
+            .data(groupRanges)
+            .join('text')
+            .attr('x', (range) => (range.start + range.end) / 2)
+            .attr('y', yOffset + groupLabelStyle.fontSize)
+            .attr('text-anchor', 'middle')
+            .attr('font-size', groupLabelStyle.fontSize)
+            .attr('font-family', groupLabelStyle.fontFamily)
+            .attr('font-weight', groupLabelStyle.fontWeight)
+            .attr('fill', groupLabelStyle.color)
+            .text((range) => range.label);
+    }
+    buildGroupRanges(scale, data) {
+        if (!this.dataKey ||
+            data.length === 0 ||
+            typeof scale.domain !== 'function' ||
+            typeof scale.bandwidth !== 'function') {
+            return [];
+        }
+        const groupLabelKey = this.groupLabelKey ??
+            (this.dataKey === GROUPED_CATEGORY_ID_KEY
+                ? GROUPED_GROUP_LABEL_KEY
+                : undefined);
+        if (!groupLabelKey) {
+            return [];
+        }
+        const domain = scale.domain().map((value) => String(value));
+        const bandwidth = scale.bandwidth();
+        if (domain.length === 0 || bandwidth <= 0) {
+            return [];
+        }
+        const groupLookup = new Map();
+        data.forEach((row) => {
+            groupLookup.set(String(row[this.dataKey]), String(row[groupLabelKey] ?? ''));
+        });
+        const ranges = [];
+        let currentLabel = null;
+        let startIndex = 0;
+        const pushRange = (from, to, label) => {
+            const startValue = domain[from];
+            const endValue = domain[to];
+            const start = scale(startValue);
+            const end = scale(endValue);
+            if (start === undefined || end === undefined) {
+                return;
+            }
+            ranges.push({
+                label,
+                start: start,
+                end: end + bandwidth,
+            });
+        };
+        domain.forEach((domainValue, index) => {
+            const groupLabel = groupLookup.get(domainValue) ?? '';
+            if (currentLabel === null) {
+                currentLabel = groupLabel;
+                startIndex = index;
+                return;
+            }
+            if (groupLabel !== currentLabel) {
+                pushRange(startIndex, index - 1, currentLabel);
+                currentLabel = groupLabel;
+                startIndex = index;
+            }
+        });
+        if (currentLabel !== null) {
+            pushRange(startIndex, domain.length - 1, currentLabel);
+        }
+        return ranges.filter((range) => range.label.trim() !== '');
     }
     applyLabelConstraints(axisGroup, svg, fontSize, fontFamily, fontWeight) {
         if (!this.maxLabelWidth)
@@ -288,15 +459,36 @@ export class XAxis {
     applyAutoHiding(axisGroup, scale) {
         if (!this.autoHideOverlapping)
             return;
-        const textElements = axisGroup
-            .selectAll('text')
+        const tickElements = axisGroup
+            .selectAll('.tick')
             .nodes();
-        const labelCount = textElements.length;
-        if (labelCount <= 1)
+        const labelEntries = tickElements
+            .map((tickElement) => {
+            const textElement = tickElement.querySelector('text');
+            const tickValue = String(tickElement
+                .__data__ ?? '');
+            const isSyntheticGapTick = tickValue.startsWith(GROUPED_GAP_TICK_PREFIX);
+            if (isSyntheticGapTick && textElement) {
+                textElement.style.visibility = 'hidden';
+            }
+            return {
+                textElement,
+                isSyntheticGapTick,
+            };
+        })
+            .filter((entry) => {
+            return !entry.isSyntheticGapTick && entry.textElement !== null;
+        })
+            .map((entry) => {
+            return entry.textElement;
+        });
+        const labelCount = labelEntries.length;
+        if (labelCount <= 1) {
             return;
+        }
         // Measure all label widths
         let maxLabelWidth = 0;
-        for (const textEl of textElements) {
+        for (const textEl of labelEntries) {
             const bbox = textEl.getBBox();
             // For rotated labels, use the horizontal footprint
             const effectiveWidth = this.rotatedLabels
@@ -304,11 +496,9 @@ export class XAxis {
                 : bbox.width;
             maxLabelWidth = Math.max(maxLabelWidth, effectiveWidth);
         }
-        // Calculate available space per label
-        const bandwidth = typeof scale.bandwidth === 'function' ? scale.bandwidth() : 0;
-        const availableSpace = bandwidth > 0
-            ? bandwidth
-            : (scale.range()[1] - scale.range()[0]) / labelCount;
+        // Calculate available space per real label only.
+        // This deliberately ignores synthetic grouped-gap ticks.
+        const availableSpace = (scale.range()[1] - scale.range()[0]) / labelCount;
         // Calculate skip interval
         const requiredSpace = maxLabelWidth + this.minLabelGap;
         const skipInterval = Math.ceil(requiredSpace / availableSpace);
@@ -316,7 +506,7 @@ export class XAxis {
         if (skipInterval <= 1)
             return;
         // Apply visibility
-        textElements.forEach((textEl, index) => {
+        labelEntries.forEach((textEl, index) => {
             const isFirst = index === 0;
             const isLast = index === labelCount - 1;
             const isAtInterval = index % skipInterval === 0;
@@ -336,7 +526,7 @@ export class XAxis {
             if (lastVisibleIntervalIndex !== labelCount - 1 &&
                 labelCount - 1 - lastVisibleIntervalIndex < skipInterval) {
                 // Hide the last interval label to avoid overlap with preserved last label
-                const textEl = textElements[lastVisibleIntervalIndex];
+                const textEl = labelEntries[lastVisibleIntervalIndex];
                 if (textEl && lastVisibleIntervalIndex !== 0) {
                     textEl.style.visibility = 'hidden';
                 }

package/xy-chart.d.ts

@@ -1,13 +1,15 @@
-import type { BarStackConfig } from './types.js';
 import { BaseChart, type BaseChartConfig } from './base-chart.js';
 import type { ChartComponent } from './chart-interface.js';
+import { type AreaStackConfig, type BarStackConfig } from './types.js';
 export type XYChartConfig = BaseChartConfig & {
     barStack?: BarStackConfig;
+    areaStack?: AreaStackConfig;
 };
 export declare class XYChart extends BaseChart {
     private readonly series;
     private barStackMode;
     private barStackGap;
+    private areaStackMode;
     constructor(config: XYChartConfig);
     addChild(component: ChartComponent): this;
     protected getExportComponents(): ChartComponent[];
@@ -16,9 +18,16 @@ export declare class XYChart extends BaseChart {
     protected prepareLayout(): void;
     protected renderChart(): void;
     private getXKey;
+    private getCategoryScaleType;
+    private getVisibleSeries;
     private setupScales;
     private isHorizontalOrientation;
+    private collectSeriesValues;
+    private getStackedAreaGroups;
+    private buildBandDomainWithGroupGaps;
     private createScale;
+    private getSeriesTooltipValue;
     private renderSeries;
     private computeStackingData;
+    private computeAreaStackingContexts;
 }