@internetstiftelsen/charts 0.6.0 → 0.6.1

package/donut-chart.d.ts

@@ -26,9 +26,11 @@ export declare class DonutChart extends BaseChart {
     protected getExportComponents(): ChartComponent[];
     update(data: DataItem[]): void;
     protected getLayoutComponents(): LayoutAwareComponent[];
+    protected prepareLayout(): void;
     protected createExportChart(): BaseChart;
     protected renderChart(): void;
     private resolveFontScale;
+    private getLegendSeries;
     private positionTooltip;
     private buildTooltipContent;
     private renderSegments;

package/donut-chart.js

@@ -129,6 +129,12 @@ export class DonutChart extends BaseChart {
         }
         return components;
     }
+    prepareLayout() {
+        const svgNode = this.svg?.node();
+        if (svgNode && this.legend) {
+            this.legend.estimateLayoutSpace(this.getLegendSeries(), this.theme, this.width, svgNode);
+        }
+    }
     createExportChart() {
         return new DonutChart({
             data: this.data,
@@ -167,11 +173,7 @@ export class DonutChart extends BaseChart {
         }
         if (this.legend) {
             const pos = this.layoutManager.getComponentPosition(this.legend);
-            const legendSeries = this.segments.map((seg) => ({
-                dataKey: seg.label,
-                fill: seg.color,
-            }));
-            this.legend.render(this.svg, legendSeries, this.theme, this.width, pos.x, pos.y);
+            this.legend.render(this.svg, this.getLegendSeries(), this.theme, this.width, pos.x, pos.y);
         }
     }
     resolveFontScale(outerRadius) {
@@ -180,6 +182,14 @@ export class DonutChart extends BaseChart {
         const rawScale = outerRadius / referenceRadius;
         return Math.max(0.5, Math.min(1, rawScale));
     }
+    getLegendSeries() {
+        return this.segments.map((segment) => {
+            return {
+                dataKey: segment.label,
+                fill: segment.color,
+            };
+        });
+    }
     positionTooltip(event, tooltipDiv) {
         const node = tooltipDiv.node();
         if (!node)

package/gauge-chart.d.ts

@@ -112,6 +112,7 @@ export declare class GaugeChart extends BaseChart {
     protected getExportComponents(): ChartComponent[];
     update(data: DataItem[]): void;
     protected getLayoutComponents(): LayoutAwareComponent[];
+    protected prepareLayout(): void;
     protected createExportChart(): BaseChart;
     protected renderChart(): void;
     private buildAriaLabel;
@@ -135,4 +136,5 @@ export declare class GaugeChart extends BaseChart {
     private buildTooltipContent;
     private positionTooltip;
     private renderLegend;
+    private getLegendSeries;
 }

package/gauge-chart.js

@@ -544,6 +544,12 @@ export class GaugeChart extends BaseChart {
         }
         return components;
     }
+    prepareLayout() {
+        const svgNode = this.svg?.node();
+        if (svgNode && this.legend) {
+            this.legend.estimateLayoutSpace(this.getLegendSeries(), this.theme, this.width, svgNode);
+        }
+    }
     createExportChart() {
         return new GaugeChart({
             data: this.data,
@@ -1032,10 +1038,14 @@ export class GaugeChart extends BaseChart {
             return;
         }
         const legendPosition = this.layoutManager.getComponentPosition(this.legend);
-        const legendSeries = this.segments.map((segment) => ({
-            dataKey: segment.legendLabel,
-            fill: segment.color,
-        }));
-        this.legend.render(this.svg, legendSeries, this.theme, this.width, legendPosition.x, legendPosition.y);
+        this.legend.render(this.svg, this.getLegendSeries(), this.theme, this.width, legendPosition.x, legendPosition.y);
+    }
+    getLegendSeries() {
+        return this.segments.map((segment) => {
+            return {
+                dataKey: segment.legendLabel,
+                fill: segment.color,
+            };
+        });
     }
 }

package/legend.d.ts

@@ -7,18 +7,32 @@ export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     readonly exportHooks?: ExportHooks<LegendConfigBase>;
     private readonly marginTop;
     private readonly marginBottom;
-    private readonly itemHeight;
+    private readonly paddingX?;
+    private readonly itemSpacingX?;
+    private readonly itemSpacingY?;
+    private readonly gapBetweenBoxAndText;
     private visibilityState;
     private onToggleCallback?;
+    private estimatedLayout;
+    private estimatedLayoutSignature;
     constructor(config?: LegendConfig);
     getExportConfig(): LegendConfigBase;
     createExportComponent(override?: Partial<LegendConfigBase>): LayoutAwareComponent;
     setToggleCallback(callback: () => void): void;
     isSeriesVisible(dataKey: string): boolean;
+    estimateLayoutSpace(series: LegendSeries[], theme: ChartTheme, width: number, svg: SVGSVGElement): void;
     private getCheckmarkPath;
     /**
      * Returns the space required by the legend
      */
     getRequiredSpace(): ComponentSpace;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, series: LegendSeries[], theme: ChartTheme, width: number, _x?: number, y?: number): void;
+    private computeLayout;
+    private resolveLayoutSettings;
+    private buildLegendItems;
+    private measureLegendItemWidths;
+    private buildRows;
+    private positionRows;
+    private getLayoutSignature;
+    private getFallbackRowHeight;
 }

package/legend.js

@@ -1,3 +1,4 @@
+import { select } from 'd3';
 import { getSeriesColor } from './types.js';
 import { getContrastTextColor, mergeDeep } from './utils.js';
 export class Legend {
@@ -32,11 +33,29 @@ export class Legend {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "itemHeight", {
+        Object.defineProperty(this, "paddingX", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: 15
+            value: void 0
+        });
+        Object.defineProperty(this, "itemSpacingX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "itemSpacingY", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "gapBetweenBoxAndText", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 8
         });
         Object.defineProperty(this, "visibilityState", {
             enumerable: true,
@@ -50,9 +69,24 @@ export class Legend {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "estimatedLayout", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "estimatedLayoutSignature", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         this.position = config?.position || 'bottom';
         this.marginTop = config?.marginTop ?? 20;
         this.marginBottom = config?.marginBottom ?? 10;
+        this.paddingX = config?.paddingX;
+        this.itemSpacingX = config?.itemSpacingX;
+        this.itemSpacingY = config?.itemSpacingY;
         this.exportHooks = config?.exportHooks;
     }
     getExportConfig() {
@@ -60,6 +94,9 @@ export class Legend {
             position: this.position,
             marginTop: this.marginTop,
             marginBottom: this.marginBottom,
+            paddingX: this.paddingX,
+            itemSpacingX: this.itemSpacingX,
+            itemSpacingY: this.itemSpacingY,
         };
     }
     createExportComponent(override) {
@@ -77,6 +114,11 @@ export class Legend {
     isSeriesVisible(dataKey) {
         return this.visibilityState.get(dataKey) ?? true;
     }
+    estimateLayoutSpace(series, theme, width, svg) {
+        const signature = this.getLayoutSignature(series, width, theme);
+        this.estimatedLayout = this.computeLayout(series, theme, width, svg);
+        this.estimatedLayoutSignature = signature;
+    }
     getCheckmarkPath(size) {
         const scale = (size / 24) * 0.7;
         const offsetX = size * 0.15;
@@ -89,56 +131,32 @@ export class Legend {
     getRequiredSpace() {
         return {
             width: 0, // Legend spans full width
-            height: this.marginTop + this.itemHeight + this.marginBottom,
+            height: this.estimatedLayout?.requiredHeight ??
+                this.marginTop + this.marginBottom,
             position: 'bottom',
         };
     }
     render(svg, series, theme, width, _x = 0, y = 0) {
-        const boxSize = theme.legend.boxSize;
-        const gapBetweenBoxAndText = 8;
-        const itemSpacing = 20; // Space between legend items
-        const legendItems = series.map((s) => ({
-            label: s.dataKey,
-            color: getSeriesColor(s),
-            dataKey: s.dataKey,
-        }));
-        legendItems.forEach((item) => {
-            if (!this.visibilityState.has(item.dataKey)) {
-                this.visibilityState.set(item.dataKey, true);
-            }
-        });
-        // Create temporary text elements to measure widths
-        const tempSvg = svg.append('g').style('visibility', 'hidden');
-        const itemWidths = legendItems.map((item) => {
-            const textElem = tempSvg
-                .append('text')
-                .attr('font-size', `${theme.legend.fontSize}px`)
-                .attr('font-family', theme.axis.fontFamily)
-                .text(item.label);
-            const textWidth = textElem.node()?.getBBox().width || 0;
-            textElem.remove();
-            return boxSize + gapBetweenBoxAndText + textWidth;
-        });
-        tempSvg.remove();
-        // Calculate positions for each item
-        const itemPositions = [];
-        let currentX = 0;
-        itemWidths.forEach((itemWidth) => {
-            itemPositions.push(currentX);
-            currentX += itemWidth + itemSpacing;
-        });
-        const totalLegendWidth = currentX - itemSpacing;
-        const legendX = (width - totalLegendWidth) / 2;
+        const svgNode = svg.node();
+        if (!svgNode) {
+            return;
+        }
+        const signature = this.getLayoutSignature(series, width, theme);
+        const layout = this.estimatedLayout && this.estimatedLayoutSignature === signature
+            ? this.estimatedLayout
+            : this.computeLayout(series, theme, width, svgNode);
+        this.estimatedLayout = layout;
+        this.estimatedLayoutSignature = signature;
         const legendY = y + this.marginTop;
         const legend = svg
             .append('g')
             .attr('class', 'legend')
-            .attr('transform', `translate(${legendX}, ${legendY})`);
+            .attr('transform', `translate(0, ${legendY})`);
         const legendGroups = legend
             .selectAll('g')
-            .data(legendItems)
+            .data(layout.positionedItems)
             .join('g')
-            .attr('transform', (_d, i) => `translate(${itemPositions[i]}, 0)`)
+            .attr('transform', (d) => `translate(${d.x}, ${d.y})`)
             .style('cursor', 'pointer')
             .on('click', (_event, d) => {
             const currentState = this.visibilityState.get(d.dataKey) ?? true;
@@ -150,8 +168,8 @@ export class Legend {
         // Add checkbox rect
         legendGroups
             .append('rect')
-            .attr('width', boxSize)
-            .attr('height', boxSize)
+            .attr('width', theme.legend.boxSize)
+            .attr('height', theme.legend.boxSize)
             .attr('fill', (d) => {
             const isVisible = this.visibilityState.get(d.dataKey) ?? true;
             return isVisible ? d.color : theme.legend.uncheckedColor;
@@ -160,7 +178,7 @@ export class Legend {
         // Add checkmark when visible
         legendGroups
             .append('path')
-            .attr('d', this.getCheckmarkPath(boxSize))
+            .attr('d', this.getCheckmarkPath(theme.legend.boxSize))
             .attr('fill', 'none')
             .attr('stroke', (d) => getContrastTextColor(d.color))
             .attr('stroke-width', 2)
@@ -173,10 +191,149 @@ export class Legend {
         // Add label text
         legendGroups
             .append('text')
-            .attr('x', boxSize + gapBetweenBoxAndText)
-            .attr('y', boxSize / 2 + 4)
+            .attr('x', theme.legend.boxSize + this.gapBetweenBoxAndText)
+            .attr('y', theme.legend.boxSize / 2 + 4)
             .attr('font-size', `${theme.legend.fontSize}px`)
             .attr('font-family', theme.axis.fontFamily)
             .text((d) => d.label);
     }
+    computeLayout(series, theme, width, svg) {
+        const settings = this.resolveLayoutSettings(theme);
+        const legendItems = this.buildLegendItems(series);
+        legendItems.forEach((item) => {
+            if (!this.visibilityState.has(item.dataKey)) {
+                this.visibilityState.set(item.dataKey, true);
+            }
+        });
+        const measuredItems = this.measureLegendItemWidths(legendItems, theme, svg);
+        const rows = this.buildRows(measuredItems, width, settings);
+        const positionedItems = this.positionRows(rows, width, settings);
+        const rowCount = Math.max(rows.length, 1);
+        const rowsHeight = rows.length > 0
+            ? rows.reduce((sum, row) => {
+                return sum + row.height;
+            }, 0)
+            : this.getFallbackRowHeight(theme);
+        const requiredHeight = this.marginTop +
+            rowsHeight +
+            Math.max(0, rowCount - 1) * settings.itemSpacingY +
+            this.marginBottom;
+        return {
+            positionedItems,
+            requiredHeight,
+        };
+    }
+    resolveLayoutSettings(theme) {
+        return {
+            paddingX: this.paddingX ?? theme.legend.paddingX,
+            itemSpacingX: this.itemSpacingX ?? theme.legend.itemSpacingX,
+            itemSpacingY: this.itemSpacingY ?? theme.legend.itemSpacingY,
+        };
+    }
+    buildLegendItems(series) {
+        return series.map((item) => ({
+            label: item.dataKey,
+            color: getSeriesColor(item),
+            dataKey: item.dataKey,
+            width: 0,
+            height: 0,
+        }));
+    }
+    measureLegendItemWidths(legendItems, theme, svg) {
+        const tempSvg = select(svg).append('g').style('visibility', 'hidden');
+        const measuredItems = legendItems.map((item) => {
+            const textElem = tempSvg
+                .append('text')
+                .attr('font-size', `${theme.legend.fontSize}px`)
+                .attr('font-family', theme.axis.fontFamily)
+                .text(item.label);
+            const textBBox = textElem.node()?.getBBox();
+            const textWidth = textBBox?.width || 0;
+            const textHeight = textBBox?.height || theme.legend.fontSize;
+            textElem.remove();
+            return {
+                ...item,
+                width: theme.legend.boxSize +
+                    this.gapBetweenBoxAndText +
+                    textWidth,
+                height: Math.max(theme.legend.boxSize, textHeight),
+            };
+        });
+        tempSvg.remove();
+        return measuredItems;
+    }
+    buildRows(legendItems, width, settings) {
+        const rows = [];
+        const availableWidth = Math.max(0, width - settings.paddingX * 2);
+        let currentRow = {
+            items: [],
+            width: 0,
+            height: 0,
+        };
+        legendItems.forEach((item) => {
+            const nextWidth = currentRow.items.length === 0
+                ? item.width
+                : currentRow.width + settings.itemSpacingX + item.width;
+            if (currentRow.items.length > 0 &&
+                nextWidth > availableWidth) {
+                rows.push(currentRow);
+                currentRow = {
+                    items: [item],
+                    width: item.width,
+                    height: item.height,
+                };
+                return;
+            }
+            currentRow.items.push(item);
+            currentRow.width = nextWidth;
+            currentRow.height = Math.max(currentRow.height, item.height);
+        });
+        if (currentRow.items.length > 0) {
+            rows.push(currentRow);
+        }
+        return rows;
+    }
+    positionRows(rows, width, settings) {
+        const positionedItems = [];
+        const availableWidth = Math.max(0, width - settings.paddingX * 2);
+        let accumulatedRowHeight = 0;
+        rows.forEach((row, rowIndex) => {
+            const rowX = settings.paddingX +
+                Math.max(0, (availableWidth - row.width) / 2);
+            const rowY = accumulatedRowHeight + rowIndex * settings.itemSpacingY;
+            let currentX = rowX;
+            row.items.forEach((item, itemIndex) => {
+                const centeredY = rowY + (row.height - item.height) / 2;
+                positionedItems.push({
+                    ...item,
+                    x: currentX,
+                    y: centeredY,
+                });
+                currentX += item.width;
+                if (itemIndex < row.items.length - 1) {
+                    currentX += settings.itemSpacingX;
+                }
+            });
+            accumulatedRowHeight += row.height;
+        });
+        return positionedItems;
+    }
+    getLayoutSignature(series, width, theme) {
+        return [
+            width,
+            theme.legend.boxSize,
+            theme.legend.fontSize,
+            theme.axis.fontFamily,
+            theme.legend.paddingX,
+            theme.legend.itemSpacingX,
+            theme.legend.itemSpacingY,
+            this.paddingX ?? '',
+            this.itemSpacingX ?? '',
+            this.itemSpacingY ?? '',
+            series.map((item) => item.dataKey).join('|'),
+        ].join(':');
+    }
+    getFallbackRowHeight(theme) {
+        return Math.max(theme.legend.boxSize, theme.legend.fontSize);
+    }
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.6.0",
+    "version": "0.6.1",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,
@@ -18,6 +18,7 @@
         "dev": "vite",
         "build": "tsc -b && vite build",
         "lint": "eslint .",
+        "format": "prettier --write ./src",
         "preview": "vite preview",
         "test": "vitest",
         "test:run": "vitest run",

package/pie-chart.d.ts

@@ -59,9 +59,11 @@ export declare class PieChart extends BaseChart {
     protected getExportComponents(): ChartComponent[];
     update(data: DataItem[]): void;
     protected getLayoutComponents(): LayoutAwareComponent[];
+    protected prepareLayout(): void;
     protected createExportChart(): BaseChart;
     protected renderChart(): void;
     private resolveFontScale;
+    private getLegendSeries;
     private resolveSortComparator;
     private renderSegments;
     private handleSegmentKeyNavigation;

package/pie-chart.js

@@ -218,6 +218,12 @@ export class PieChart extends BaseChart {
         }
         return components;
     }
+    prepareLayout() {
+        const svgNode = this.svg?.node();
+        if (svgNode && this.legend) {
+            this.legend.estimateLayoutSpace(this.getLegendSeries(), this.theme, this.width, svgNode);
+        }
+    }
     createExportChart() {
         return new PieChart({
             data: this.data,
@@ -264,11 +270,7 @@ export class PieChart extends BaseChart {
         }
         if (this.legend) {
             const pos = this.layoutManager.getComponentPosition(this.legend);
-            const legendSeries = this.segments.map((seg) => ({
-                dataKey: seg.label,
-                fill: seg.color,
-            }));
-            this.legend.render(this.svg, legendSeries, this.theme, this.width, pos.x, pos.y);
+            this.legend.render(this.svg, this.getLegendSeries(), this.theme, this.width, pos.x, pos.y);
         }
     }
     resolveFontScale(outerRadius) {
@@ -277,6 +279,14 @@ export class PieChart extends BaseChart {
         const rawScale = outerRadius / referenceRadius;
         return Math.max(0.5, Math.min(1, rawScale));
     }
+    getLegendSeries() {
+        return this.segments.map((segment) => {
+            return {
+                dataKey: segment.label,
+                fill: segment.color,
+            };
+        });
+    }
     resolveSortComparator() {
         if (typeof this.sort === 'function') {
             return this.sort;

package/theme.js

@@ -36,6 +36,9 @@ export const defaultTheme = {
         boxSize: 24,
         uncheckedColor: '#d0d0d0',
         fontSize: 14,
+        paddingX: 0,
+        itemSpacingX: 20,
+        itemSpacingY: 8,
     },
     line: {
         strokeWidth: 4,
@@ -115,6 +118,9 @@ export const newspaperTheme = {
         boxSize: 18,
         uncheckedColor: '#d3d3d3',
         fontSize: 13,
+        paddingX: 0,
+        itemSpacingX: 20,
+        itemSpacingY: 8,
     },
     line: {
         strokeWidth: 2.5,

package/types.d.ts

@@ -63,6 +63,9 @@ export type ChartTheme = {
         boxSize: number;
         uncheckedColor: string;
         fontSize: number;
+        paddingX: number;
+        itemSpacingX: number;
+        itemSpacingY: number;
     };
     line: {
         strokeWidth: number;
@@ -227,6 +230,9 @@ export type LegendConfigBase = {
     position?: 'bottom';
     marginTop?: number;
     marginBottom?: number;
+    paddingX?: number;
+    itemSpacingX?: number;
+    itemSpacingY?: number;
 };
 export type LegendConfig = LegendConfigBase & {
     exportHooks?: ExportHooks<LegendConfigBase>;

package/xy-chart.d.ts

@@ -18,6 +18,7 @@ export declare class XYChart extends BaseChart {
     protected prepareLayout(): void;
     protected renderChart(): void;
     private getXKey;
+    private getLegendSeries;
     private getCategoryScaleType;
     private getVisibleSeries;
     private setupScales;

package/xy-chart.js

@@ -129,19 +129,22 @@ export class XYChart extends BaseChart {
         this.update(this.sourceData);
     }
     prepareLayout() {
+        const svgNode = this.svg?.node();
         this.xAxis?.clearEstimatedSpace?.();
-        if (!this.xAxis || !this.svg) {
-            return;
+        if (svgNode && this.xAxis) {
+            const xKey = this.getXKey();
+            const labelKey = this.xAxis.labelKey;
+            const labels = this.data.map((item) => {
+                if (labelKey) {
+                    return item[labelKey];
+                }
+                return item[xKey];
+            });
+            this.xAxis.estimateLayoutSpace?.(labels, this.theme, svgNode);
+        }
+        if (svgNode && this.legend) {
+            this.legend.estimateLayoutSpace(this.getLegendSeries(), this.theme, this.width, svgNode);
         }
-        const xKey = this.getXKey();
-        const labelKey = this.xAxis.labelKey;
-        const labels = this.data.map((item) => {
-            if (labelKey) {
-                return item[labelKey];
-            }
-            return item[xKey];
-        });
-        this.xAxis.estimateLayoutSpace?.(labels, this.theme, this.svg.node());
     }
     renderChart() {
         if (!this.plotArea) {
@@ -198,24 +201,7 @@ export class XYChart extends BaseChart {
         }
         if (this.legend) {
             const legendPos = this.layoutManager.getComponentPosition(this.legend);
-            this.legend.render(this.svg, this.series.map((series) => {
-                if (series.type === 'line') {
-                    return {
-                        dataKey: series.dataKey,
-                        stroke: series.stroke,
-                    };
-                }
-                if (series.type === 'bar') {
-                    return {
-                        dataKey: series.dataKey,
-                        fill: series.fill,
-                    };
-                }
-                return {
-                    dataKey: series.dataKey,
-                    fill: series.fill,
-                };
-            }), this.theme, this.width, legendPos.x, legendPos.y);
+            this.legend.render(this.svg, this.getLegendSeries(), this.theme, this.width, legendPos.x, legendPos.y);
         }
     }
     getXKey() {
@@ -224,6 +210,20 @@ 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) => {
+            if (series.type === 'line') {
+                return {
+                    dataKey: series.dataKey,
+                    stroke: series.stroke,
+                };
+            }
+            return {
+                dataKey: series.dataKey,
+                fill: series.fill,
+            };
+        });
+    }
     getCategoryScaleType() {
         return this.scaleConfig.x?.type || 'band';
     }