@internetstiftelsen/charts 0.5.1 → 0.6.1

package/grouped-data.d.ts

@@ -0,0 +1,19 @@
+import type { ChartData, DataItem, GroupedDataGroup } from './types.js';
+export declare const GROUPED_CATEGORY_ID_KEY = "__iis_grouped_category_id__";
+export declare const GROUPED_CATEGORY_LABEL_KEY = "__iis_grouped_category_label__";
+export declare const GROUPED_GROUP_LABEL_KEY = "__iis_grouped_group_label__";
+export declare const GROUPED_GAP_TICK_PREFIX = "__iis_group_gap__";
+export declare const GROUPED_EMPTY_GROUP_ERROR = "Grouped data requires non-empty group names";
+export type DataSchema = {
+    grouped: boolean;
+    categoryKey: string;
+    metricKeys: string[];
+};
+export type NormalizedChartData = {
+    data: DataItem[];
+    schema: DataSchema;
+};
+export declare function hasEmptyGroupNames(data: GroupedDataGroup[]): boolean;
+export declare function isGroupedData(data: unknown): data is GroupedDataGroup[];
+export declare function resolveDataSchema(data: ChartData): DataSchema;
+export declare function normalizeChartData(data: ChartData): NormalizedChartData;

package/grouped-data.js

@@ -0,0 +1,122 @@
+export const GROUPED_CATEGORY_ID_KEY = '__iis_grouped_category_id__';
+export const GROUPED_CATEGORY_LABEL_KEY = '__iis_grouped_category_label__';
+export const GROUPED_GROUP_LABEL_KEY = '__iis_grouped_group_label__';
+export const GROUPED_GAP_TICK_PREFIX = '__iis_group_gap__';
+export const GROUPED_EMPTY_GROUP_ERROR = 'Grouped data requires non-empty group names';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+function hasNonEmptyGroupName(value) {
+    return typeof value === 'string' && value.trim().length > 0;
+}
+export function hasEmptyGroupNames(data) {
+    return data.some((group) => !hasNonEmptyGroupName(group.group));
+}
+function assertNonEmptyGroupNames(data) {
+    if (hasEmptyGroupNames(data)) {
+        throw new Error(GROUPED_EMPTY_GROUP_ERROR);
+    }
+}
+export function isGroupedData(data) {
+    if (!Array.isArray(data) || data.length === 0) {
+        return false;
+    }
+    return data.every((item) => {
+        if (!isRecord(item) || !Array.isArray(item['data'])) {
+            return false;
+        }
+        return item['data'].every((row) => {
+            return isRecord(row);
+        });
+    });
+}
+function resolveFlatSchema(data) {
+    if (data.length === 0) {
+        return {
+            grouped: false,
+            categoryKey: 'column',
+            metricKeys: [],
+        };
+    }
+    const keys = Object.keys(data[0]);
+    const categoryKey = keys[0] ?? 'column';
+    const metricKeys = [];
+    const seen = new Set();
+    data.forEach((row) => {
+        Object.keys(row).forEach((key) => {
+            if (key === categoryKey || seen.has(key)) {
+                return;
+            }
+            seen.add(key);
+            metricKeys.push(key);
+        });
+    });
+    return {
+        grouped: false,
+        categoryKey,
+        metricKeys,
+    };
+}
+function resolveGroupedSchema(data) {
+    let firstRow = null;
+    for (const group of data) {
+        if (group.data.length > 0) {
+            firstRow = group.data[0];
+            break;
+        }
+    }
+    const categoryKey = firstRow ? Object.keys(firstRow)[0] ?? 'category' : 'category';
+    const metricKeys = [];
+    const seen = new Set();
+    data.forEach((group) => {
+        group.data.forEach((row) => {
+            Object.keys(row).forEach((key) => {
+                if (key === categoryKey || seen.has(key)) {
+                    return;
+                }
+                seen.add(key);
+                metricKeys.push(key);
+            });
+        });
+    });
+    return {
+        grouped: true,
+        categoryKey,
+        metricKeys,
+    };
+}
+export function resolveDataSchema(data) {
+    if (isGroupedData(data)) {
+        return resolveGroupedSchema(data);
+    }
+    return resolveFlatSchema(data);
+}
+function normalizeGroupedData(data) {
+    assertNonEmptyGroupNames(data);
+    const schema = resolveGroupedSchema(data);
+    const categoryKey = schema.categoryKey;
+    const normalizedRows = data.flatMap((group, groupIndex) => {
+        return group.data.map((row, rowIndex) => {
+            const categoryLabel = String(row[categoryKey] ?? '');
+            return {
+                [GROUPED_CATEGORY_ID_KEY]: `g${groupIndex}r${rowIndex}`,
+                [GROUPED_CATEGORY_LABEL_KEY]: categoryLabel,
+                [GROUPED_GROUP_LABEL_KEY]: String(group.group ?? ''),
+                ...row,
+            };
+        });
+    });
+    return {
+        data: normalizedRows,
+        schema,
+    };
+}
+export function normalizeChartData(data) {
+    if (isGroupedData(data)) {
+        return normalizeGroupedData(data);
+    }
+    return {
+        data,
+        schema: resolveFlatSchema(data),
+    };
+}

package/grouped-tabular.d.ts

@@ -0,0 +1,26 @@
+import type { GroupedDataGroup } from './types.js';
+export type GroupedSheetRow = {
+    kind: 'data';
+    values: unknown[];
+};
+export type GroupedSheetModel = {
+    headers: string[];
+    metricKeys: string[];
+    categoryKey: string;
+    rows: GroupedSheetRow[];
+    matrix: unknown[][];
+};
+export type GroupedRebuildResult = {
+    ok: true;
+    data: GroupedDataGroup[];
+} | {
+    ok: false;
+    error: 'FIRST_ROW_BLANK_GROUP';
+};
+export type GroupedTabularData = {
+    columns: string[];
+    rows: string[][];
+};
+export declare function buildGroupedSheetModel(data: GroupedDataGroup[], preferredMetricOrder?: string[]): GroupedSheetModel;
+export declare function rebuildGroupedDataFromSheet(matrix: unknown[][], categoryKey: string, metricKeys: string[]): GroupedRebuildResult;
+export declare function toGroupedTabularData(data: GroupedDataGroup[], preferredMetricOrder?: string[]): GroupedTabularData;

package/grouped-tabular.js

@@ -0,0 +1,149 @@
+import { GROUPED_EMPTY_GROUP_ERROR, hasEmptyGroupNames, resolveDataSchema, } from './grouped-data.js';
+function isBlankValue(value) {
+    if (value === null || value === undefined) {
+        return true;
+    }
+    if (typeof value === 'string') {
+        return value.trim() === '';
+    }
+    return false;
+}
+function asString(value) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    return String(value);
+}
+function rowHasMetricContent(values) {
+    return values.some((value) => !isBlankValue(value));
+}
+function applyMetricOrder(metricKeys, preferredOrder) {
+    if (!preferredOrder || preferredOrder.length === 0) {
+        return metricKeys;
+    }
+    const ordered = [];
+    const seen = new Set();
+    preferredOrder.forEach((key) => {
+        if (metricKeys.includes(key) && !seen.has(key)) {
+            seen.add(key);
+            ordered.push(key);
+        }
+    });
+    metricKeys.forEach((key) => {
+        if (!seen.has(key)) {
+            seen.add(key);
+            ordered.push(key);
+        }
+    });
+    return ordered;
+}
+export function buildGroupedSheetModel(data, preferredMetricOrder) {
+    if (hasEmptyGroupNames(data)) {
+        throw new Error(GROUPED_EMPTY_GROUP_ERROR);
+    }
+    const schema = resolveDataSchema(data);
+    const metricKeys = applyMetricOrder(schema.metricKeys, preferredMetricOrder);
+    const categoryKey = schema.categoryKey;
+    const headers = ['', '', ...metricKeys];
+    const rows = [];
+    data.forEach((group) => {
+        group.data.forEach((row, rowIndex) => {
+            const values = [
+                rowIndex === 0 ? group.group : '',
+                row[categoryKey] ?? '',
+                ...metricKeys.map((metricKey) => row[metricKey] ?? ''),
+            ];
+            rows.push({
+                kind: 'data',
+                values,
+            });
+        });
+    });
+    return {
+        headers,
+        metricKeys,
+        categoryKey,
+        rows,
+        matrix: rows.map((row) => row.values),
+    };
+}
+export function rebuildGroupedDataFromSheet(matrix, categoryKey, metricKeys) {
+    const groups = [];
+    let currentGroup = '';
+    matrix.forEach((row) => {
+        const groupCell = row[0];
+        const categoryCell = row[1];
+        const metricCells = metricKeys.map((_, index) => row[index + 2]);
+        const hasCategory = !isBlankValue(categoryCell);
+        const hasMetrics = rowHasMetricContent(metricCells);
+        const hasGroup = !isBlankValue(groupCell);
+        if (!hasCategory && !hasMetrics) {
+            return;
+        }
+        if (hasGroup) {
+            currentGroup = asString(groupCell);
+        }
+        else if (!currentGroup) {
+            groups.length = 0;
+            return;
+        }
+        const groupName = currentGroup;
+        if (!groupName) {
+            return;
+        }
+        let targetGroup = groups[groups.length - 1];
+        if (!targetGroup || targetGroup.group !== groupName) {
+            targetGroup = {
+                group: groupName,
+                data: [],
+            };
+            groups.push(targetGroup);
+        }
+        const rebuiltRow = {
+            [categoryKey]: categoryCell ?? '',
+        };
+        metricKeys.forEach((metricKey, index) => {
+            rebuiltRow[metricKey] = metricCells[index] ?? '';
+        });
+        targetGroup.data.push(rebuiltRow);
+    });
+    const firstDataRow = matrix.find((row) => {
+        const categoryCell = row[1];
+        const metricCells = metricKeys.map((_, index) => row[index + 2]);
+        return !isBlankValue(categoryCell) || rowHasMetricContent(metricCells);
+    });
+    if (firstDataRow && isBlankValue(firstDataRow[0])) {
+        return {
+            ok: false,
+            error: 'FIRST_ROW_BLANK_GROUP',
+        };
+    }
+    return {
+        ok: true,
+        data: groups,
+    };
+}
+function normalizeTableValue(value) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    if (value instanceof Date) {
+        return value.toISOString();
+    }
+    if (typeof value === 'object') {
+        try {
+            return JSON.stringify(value);
+        }
+        catch {
+            return String(value);
+        }
+    }
+    return String(value);
+}
+export function toGroupedTabularData(data, preferredMetricOrder) {
+    const model = buildGroupedSheetModel(data, preferredMetricOrder);
+    return {
+        columns: model.headers,
+        rows: model.matrix.map((row) => row.map((value) => normalizeTableValue(value))),
+    };
+}

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.5.1",
+    "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",