@internetstiftelsen/charts 0.9.2 → 0.10.1

package/dist/base-chart.d.ts

@@ -1,5 +1,5 @@
 import { type Selection } from 'd3';
-import type { ChartData, DataItem, ChartTheme, ResolvedChartTheme, AxisScaleConfig, ExportFormat, ExportOptions, D3Scale, ExportHookContext, ExportRenderContext, LegendItem, LegendSeries, ResponsiveConfig, ResponsiveRenderContext, DeepPartial } from './types.js';
+import type { ChartData, DataItem, ChartTheme, ResolvedChartTheme, AxisScaleConfig, ExportFormat, ExportOptions, D3Scale, ExportHookContext, ExportRenderContext, LegendItem, LegendMode, LegendSeries, ResponsiveConfig, ResponsiveRenderContext, DeepPartial } from './types.js';
 import type { ChartComponentBase, LayoutAwareComponentBase } from './chart-interface.js';
 import type { XAxis } from './x-axis.js';
 import type { YAxis } from './y-axis.js';
@@ -8,6 +8,7 @@ import type { Tooltip } from './tooltip.js';
 import type { Legend } from './legend.js';
 import type { Title } from './title.js';
 import { LayoutManager, type PlotAreaBounds } from './layout-manager.js';
+import { LegendStateController } from './legend-state.js';
 type VisualExportFormat = 'svg' | 'png' | 'jpg' | 'pdf';
 type RenderDimensions = {
     width: number;
@@ -82,10 +83,13 @@ export declare abstract class BaseChart {
     protected resizeObserver: ResizeObserver | null;
     protected layoutManager: LayoutManager;
     protected plotArea: PlotAreaBounds | null;
+    protected readonly legendState: LegendStateController;
     private readyPromise;
     private disconnectedLegendContainer;
     private renderThemeOverride;
     private renderSizeOverride;
+    private readonly renderCallbacks;
+    private legendModeOverride;
     protected constructor(config: BaseChartConfig);
     /**
      * Adds a component (axis, grid, tooltip, etc.) to the chart
@@ -101,6 +105,7 @@ export declare abstract class BaseChart {
      */
     private performRender;
     protected resolveRenderDimensions(containerRect: DOMRect): RenderDimensions;
+    private pushIfIncluded;
     private resolveAccessibleLabel;
     private syncAccessibleLabelFromSvg;
     protected resolveResponsiveContext(context: {
@@ -112,6 +117,17 @@ export declare abstract class BaseChart {
     private applyRenderTheme;
     protected get renderTheme(): ChartTheme;
     protected get resolvedRenderTheme(): ResolvedChartTheme;
+    protected getLegendMode(): LegendMode | null;
+    protected hasInlineLegend(): boolean;
+    protected hasDisconnectedLegend(): boolean;
+    protected shouldIncludeLegendInExport(): boolean;
+    getConfiguredSize(): {
+        width?: number;
+        height?: number;
+    };
+    setLegendModeOverride(mode: LegendMode | null, rerender?: boolean): this;
+    onRender(callback: () => void): () => void;
+    private notifyRendered;
     /**
      * Get layout-aware components in order
      * Override in subclasses to provide chart-specific components
@@ -193,6 +209,10 @@ export declare abstract class BaseChart {
     private exportImage;
     private exportPDF;
     protected exportSVG(options?: ExportOptions, formatForHooks?: VisualExportFormat): Promise<string>;
+    private requireRenderedSvg;
+    private resolveExportContext;
+    private createExportSvgClone;
+    private populateExportChart;
     protected exportJSON(): string;
 }
 export {};

package/dist/base-chart.js

@@ -7,6 +7,7 @@ import { exportRasterBlob } from './export-image.js';
 import { exportXLSXBlob } from './export-xlsx.js';
 import { exportPDFBlob } from './export-pdf.js';
 import { normalizeChartData } from './grouped-data.js';
+import { LegendStateController } from './legend-state.js';
 import { mergeDeep } from './utils.js';
 function normalizeChartDimension(value, name) {
     if (value === undefined) {
@@ -182,6 +183,12 @@ export class BaseChart {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "legendState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "readyPromise", {
             enumerable: true,
             configurable: true,
@@ -206,6 +213,18 @@ export class BaseChart {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "renderCallbacks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Set()
+        });
+        Object.defineProperty(this, "legendModeOverride", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         const normalized = normalizeChartData(config.data);
         ChartValidator.validateData(normalized.data);
         this.sourceData = config.data;
@@ -217,6 +236,10 @@ export class BaseChart {
         this.height = this.configuredHeight ?? DEFAULT_CHART_HEIGHT;
         this.scaleConfig = config.scales || {};
         this.responsiveConfig = config.responsive;
+        this.legendState = new LegendStateController();
+        this.legendState.subscribe(() => {
+            this.rerender();
+        });
         this.layoutManager = new LayoutManager(this.resolvedRenderTheme);
     }
     /**
@@ -309,6 +332,7 @@ export class BaseChart {
                 plotArea,
             });
             this.renderDisconnectedLegend();
+            this.notifyRendered();
         }
         finally {
             restoreComponents();
@@ -316,22 +340,34 @@ export class BaseChart {
         }
     }
     resolveRenderDimensions(containerRect) {
-        const width = this.renderSizeOverride?.width ??
-            this.configuredWidth ??
-            (containerRect.width || DEFAULT_CHART_WIDTH);
-        const height = this.renderSizeOverride?.height ??
-            this.configuredHeight ??
-            (containerRect.height || DEFAULT_CHART_HEIGHT);
-        return {
-            width,
-            height,
-            svgWidthAttr: this.renderSizeOverride?.width ??
-                this.configuredWidth ??
-                '100%',
-            svgHeightAttr: this.renderSizeOverride?.height ??
-                this.configuredHeight ??
-                '100%',
+        const dimensions = {
+            width: containerRect.width || DEFAULT_CHART_WIDTH,
+            height: containerRect.height || DEFAULT_CHART_HEIGHT,
+            svgWidthAttr: '100%',
+            svgHeightAttr: '100%',
         };
+        if (this.configuredWidth !== undefined) {
+            dimensions.width = this.configuredWidth;
+            dimensions.svgWidthAttr = this.configuredWidth;
+        }
+        if (this.configuredHeight !== undefined) {
+            dimensions.height = this.configuredHeight;
+            dimensions.svgHeightAttr = this.configuredHeight;
+        }
+        if (this.renderSizeOverride?.width !== undefined) {
+            dimensions.width = this.renderSizeOverride.width;
+            dimensions.svgWidthAttr = this.renderSizeOverride.width;
+        }
+        if (this.renderSizeOverride?.height !== undefined) {
+            dimensions.height = this.renderSizeOverride.height;
+            dimensions.svgHeightAttr = this.renderSizeOverride.height;
+        }
+        return dimensions;
+    }
+    pushIfIncluded(components, shouldInclude, component) {
+        if (shouldInclude && component) {
+            components.push(component);
+        }
     }
     resolveAccessibleLabel() {
         const titleText = this.title?.text.trim();
@@ -401,6 +437,49 @@ export class BaseChart {
             height: this.height,
         };
     }
+    getLegendMode() {
+        if (!this.legend) {
+            return null;
+        }
+        return this.legendModeOverride ?? this.legend.mode;
+    }
+    hasInlineLegend() {
+        return this.getLegendMode() === 'inline';
+    }
+    hasDisconnectedLegend() {
+        return this.getLegendMode() === 'disconnected';
+    }
+    shouldIncludeLegendInExport() {
+        const legendMode = this.getLegendMode();
+        return !!this.legend && legendMode !== null && legendMode !== 'hidden';
+    }
+    getConfiguredSize() {
+        return {
+            width: this.configuredWidth,
+            height: this.configuredHeight,
+        };
+    }
+    setLegendModeOverride(mode, rerender = true) {
+        if (this.legendModeOverride === mode) {
+            return this;
+        }
+        this.legendModeOverride = mode;
+        if (rerender) {
+            this.rerender();
+        }
+        return this;
+    }
+    onRender(callback) {
+        this.renderCallbacks.add(callback);
+        return () => {
+            this.renderCallbacks.delete(callback);
+        };
+    }
+    notifyRendered() {
+        this.renderCallbacks.forEach((callback) => {
+            callback();
+        });
+    }
     /**
      * Get layout-aware components in order
      * Override in subclasses to provide chart-specific components
@@ -424,7 +503,7 @@ export class BaseChart {
         if (options.yAxis && this.yAxis) {
             components.push(this.yAxis);
         }
-        if (options.inlineLegend && this.legend?.isInlineMode()) {
+        if (options.inlineLegend && this.legend && this.hasInlineLegend()) {
             components.push(this.legend);
         }
         return components;
@@ -444,24 +523,12 @@ export class BaseChart {
     }
     getBaseExportComponents(options) {
         const components = [];
-        if (options.title && this.title) {
-            components.push(this.title);
-        }
-        if (options.grid && this.grid) {
-            components.push(this.grid);
-        }
-        if (options.xAxis && this.xAxis) {
-            components.push(this.xAxis);
-        }
-        if (options.yAxis && this.yAxis) {
-            components.push(this.yAxis);
-        }
-        if (options.tooltip && this.tooltip) {
-            components.push(this.tooltip);
-        }
-        if (options.legend && this.legend) {
-            components.push(this.legend);
-        }
+        this.pushIfIncluded(components, options.title, this.title);
+        this.pushIfIncluded(components, options.grid, this.grid);
+        this.pushIfIncluded(components, options.xAxis, this.xAxis);
+        this.pushIfIncluded(components, options.yAxis, this.yAxis);
+        this.pushIfIncluded(components, options.tooltip, this.tooltip);
+        this.pushIfIncluded(components, options.legend && this.shouldIncludeLegendInExport(), this.legend);
         return components;
     }
     registerBaseComponent(component) {
@@ -630,25 +697,25 @@ export class BaseChart {
         this.title.render(svg, this.renderTheme, this.width, position.x, position.y);
     }
     renderInlineLegend(svg) {
-        if (!this.legend?.isInlineMode()) {
+        if (!this.legend || !this.hasInlineLegend()) {
             return;
         }
+        const series = this.getLegendSeries();
+        this.legendState.ensureSeries(series.map((entry) => entry.dataKey), { silent: true });
         const position = this.layoutManager.getComponentPosition(this.legend);
-        this.legend.render(svg, this.getLegendSeries(), this.renderTheme, this.width, position.x, position.y);
+        this.legend.render(svg, series, this.renderTheme, this.width, position.x, position.y);
     }
     measureInlineLegend(svgNode) {
-        if (!this.legend?.isInlineMode()) {
+        if (!this.legend || !this.hasInlineLegend()) {
             return;
         }
-        this.legend.estimateLayoutSpace(this.getLegendSeries(), this.renderTheme, this.width, svgNode);
+        const series = this.getLegendSeries();
+        this.legendState.ensureSeries(series.map((entry) => entry.dataKey), { silent: true });
+        this.legend.estimateLayoutSpace(series, this.renderTheme, this.width, svgNode);
     }
     filterVisibleItems(items, getDataKey) {
-        const { legend } = this;
-        if (!legend) {
-            return items;
-        }
         return items.filter((item) => {
-            return legend.isSeriesVisible(getDataKey(item));
+            return this.legendState.isSeriesVisible(getDataKey(item));
         });
     }
     validateSourceData(_data) { }
@@ -683,40 +750,31 @@ export class BaseChart {
         return [];
     }
     getLegendItems() {
-        if (!this.legend) {
-            return [];
-        }
         return this.getLegendSeries().map((series) => {
             return {
                 dataKey: series.dataKey,
                 color: series.stroke || series.fill || '#8884d8',
-                visible: this.legend.isSeriesVisible(series.dataKey),
+                visible: this.legendState.isSeriesVisible(series.dataKey),
             };
         });
     }
     isLegendSeriesVisible(dataKey) {
-        if (!this.legend) {
-            return true;
-        }
-        return this.legend.isSeriesVisible(dataKey);
+        return this.legendState.isSeriesVisible(dataKey);
     }
     setLegendSeriesVisible(dataKey, visible) {
-        this.legend?.setSeriesVisible(dataKey, visible);
+        this.legendState.setSeriesVisible(dataKey, visible);
         return this;
     }
     toggleLegendSeries(dataKey) {
-        this.legend?.toggleSeries(dataKey);
+        this.legendState.toggleSeries(dataKey);
         return this;
     }
     setLegendVisibility(visibility) {
-        this.legend?.setVisibilityMap(visibility);
+        this.legendState.setVisibilityMap(visibility);
         return this;
     }
     onLegendChange(callback) {
-        if (!this.legend) {
-            return () => { };
-        }
-        return this.legend.subscribe(callback);
+        return this.legendState.subscribe(callback);
     }
     /**
      * Updates the chart with new data
@@ -758,7 +816,7 @@ export class BaseChart {
             this.cleanupDisconnectedLegendContainer();
             return;
         }
-        if (!this.legend.isDisconnectedMode()) {
+        if (!this.hasDisconnectedLegend()) {
             this.cleanupDisconnectedLegendContainer();
             return;
         }
@@ -767,6 +825,7 @@ export class BaseChart {
             this.cleanupDisconnectedLegendContainer();
             return;
         }
+        this.legendState.ensureSeries(series.map((entry) => entry.dataKey), { silent: true });
         const legendHost = this.resolveDisconnectedLegendHost();
         if (!legendHost) {
             this.cleanupDisconnectedLegendContainer();
@@ -927,9 +986,7 @@ export class BaseChart {
                     this.legend = component;
                 },
                 onRegister: (component) => {
-                    component.setToggleCallback(() => {
-                        this.rerender();
-                    });
+                    component.setStateController(this.legendState);
                 },
             },
         ];
@@ -1051,27 +1108,10 @@ export class BaseChart {
         });
     }
     async exportSVG(options, formatForHooks = 'svg') {
-        if (!this.svg) {
-            throw new Error('Chart must be rendered before export');
-        }
+        const liveSvg = this.requireRenderedSvg();
         await this.whenReady();
-        const liveSvg = this.svg?.node();
-        if (!liveSvg) {
-            throw new Error('Chart must remain mounted until export completes');
-        }
-        const exportWidth = options?.width ?? this.width;
-        const exportHeight = options?.height ?? this.height;
-        const requiresExportRender = exportWidth !== this.width || exportHeight !== this.height;
-        const clone = liveSvg.cloneNode(true);
-        clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        clone.setAttribute('width', String(exportWidth));
-        clone.setAttribute('height', String(exportHeight));
-        const baseContext = {
-            format: formatForHooks,
-            options,
-            width: exportWidth,
-            height: exportHeight,
-        };
+        const { exportWidth, exportHeight, requiresExportRender, baseContext } = this.resolveExportContext(options, formatForHooks);
+        const clone = this.createExportSvgClone(liveSvg, exportWidth, exportHeight);
         const overrides = this.collectExportOverrides(baseContext);
         if (overrides.size === 0 && !requiresExportRender) {
             this.runExportHooks({
@@ -1086,17 +1126,7 @@ export class BaseChart {
             width: exportWidth,
             height: exportHeight,
         };
-        const components = this.getExportComponents();
-        components.forEach((component) => {
-            const exportable = component;
-            const override = overrides.get(component);
-            if (exportable.createExportComponent) {
-                exportChart.addChild(exportable.createExportComponent(override));
-            }
-            else {
-                exportChart.addChild(component);
-            }
-        });
+        this.populateExportChart(exportChart, overrides);
         const exportSvg = await this.renderExportChart(exportChart, exportWidth, exportHeight);
         exportSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
         exportSvg.setAttribute('width', String(exportWidth));
@@ -1108,6 +1138,49 @@ export class BaseChart {
         this.syncAccessibleLabelFromSvg(exportSvg);
         return exportSvg.outerHTML;
     }
+    requireRenderedSvg() {
+        if (!this.svg) {
+            throw new Error('Chart must be rendered before export');
+        }
+        const liveSvg = this.svg.node();
+        if (!liveSvg) {
+            throw new Error('Chart must remain mounted until export completes');
+        }
+        return liveSvg;
+    }
+    resolveExportContext(options, format) {
+        const exportWidth = options?.width ?? this.width;
+        const exportHeight = options?.height ?? this.height;
+        return {
+            exportWidth,
+            exportHeight,
+            requiresExportRender: exportWidth !== this.width || exportHeight !== this.height,
+            baseContext: {
+                format,
+                options,
+                width: exportWidth,
+                height: exportHeight,
+            },
+        };
+    }
+    createExportSvgClone(liveSvg, width, height) {
+        const clone = liveSvg.cloneNode(true);
+        clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        clone.setAttribute('width', String(width));
+        clone.setAttribute('height', String(height));
+        return clone;
+    }
+    populateExportChart(exportChart, overrides) {
+        this.getExportComponents().forEach((component) => {
+            const exportable = component;
+            const override = overrides.get(component);
+            if (exportable.createExportComponent) {
+                exportChart.addChild(exportable.createExportComponent(override));
+                return;
+            }
+            exportChart.addChild(component);
+        });
+    }
     exportJSON() {
         return JSON.stringify(this.sourceData, null, 2);
     }

package/dist/chart-group.d.ts

@@ -0,0 +1,137 @@
+import type { BaseChart } from './base-chart.js';
+import type { ChartTheme, DeepPartial, ExportOptions, LegendItem } from './types.js';
+type BreakpointRange = {
+    minWidth?: number;
+    maxWidth?: number;
+};
+export type ChartGroupResponsiveBreakpointConfig = BreakpointRange & {
+    cols?: number;
+    gap?: number;
+};
+export type ChartGroupResponsiveBreakpointDefinition = number | ChartGroupResponsiveBreakpointConfig;
+export type ChartGroupResponsiveBreakpoints = Record<string, ChartGroupResponsiveBreakpointDefinition>;
+export type ChartGroupResponsiveConfig = {
+    breakpoints?: ChartGroupResponsiveBreakpoints;
+};
+export type ChartGroupItemResponsiveBreakpointConfig = BreakpointRange & {
+    span?: number;
+    height?: number;
+    hidden?: boolean;
+    order?: number;
+};
+export type ChartGroupItemResponsiveBreakpointDefinition = number | ChartGroupItemResponsiveBreakpointConfig;
+export type ChartGroupItemResponsiveBreakpoints = Record<string, ChartGroupItemResponsiveBreakpointDefinition>;
+export type ChartGroupItemResponsiveConfig = {
+    breakpoints?: ChartGroupItemResponsiveBreakpoints;
+};
+export type ChartGroupConfig = {
+    cols: number;
+    gap?: number;
+    syncY?: boolean;
+    height?: number;
+    chartHeight?: number;
+    theme?: DeepPartial<ChartTheme>;
+    responsive?: ChartGroupResponsiveConfig;
+};
+export type ChartGroupChartOptions = {
+    span?: number;
+    height?: number;
+    hidden?: boolean;
+    order?: number;
+    responsive?: ChartGroupItemResponsiveConfig;
+};
+export type ChartGroupExportFormat = 'svg' | 'png' | 'jpg' | 'pdf';
+export declare class ChartGroup {
+    private readonly cols;
+    private readonly gap;
+    private readonly syncY;
+    private readonly configuredHeight?;
+    private readonly chartHeight;
+    private readonly theme;
+    private readonly responsiveConfig?;
+    private readonly charts;
+    private readonly legendState;
+    private readonly renderCallbacks;
+    private readonly warnedWidthCharts;
+    private readonly warnedColorConflicts;
+    private container;
+    private legend;
+    private title;
+    private resizeObserver;
+    private readyPromise;
+    private childLegendSnapshot;
+    private childYDomainSnapshot;
+    private isRendering;
+    private isSyncingLegend;
+    private hasWarnedIncompatibleYScaleTypes;
+    constructor(config: ChartGroupConfig);
+    addChart(chart: BaseChart, options?: ChartGroupChartOptions): this;
+    addChild(component: {
+        type: string;
+    }): this;
+    render(target: string | HTMLElement): HTMLElement | null;
+    refresh(): HTMLElement | null;
+    whenReady(): Promise<void>;
+    getLegendItems(): LegendItem[];
+    private getLegendItemsForWidth;
+    isLegendSeriesVisible(dataKey: string): boolean;
+    setLegendSeriesVisible(dataKey: string, visible: boolean): this;
+    toggleLegendSeries(dataKey: string): this;
+    setLegendVisibility(visibility: Record<string, boolean>): this;
+    onLegendChange(callback: () => void): () => void;
+    export(format: ChartGroupExportFormat, options?: ExportOptions): Promise<string | Blob | void>;
+    destroy(): void;
+    private bindChartRenderCallback;
+    private resolveContainer;
+    private resolveContainerWidth;
+    private resolveCurrentWidth;
+    private resolveTotalHeightConstraint;
+    private resolveChartAreaHeightConstraint;
+    private resolveSpan;
+    private warnOnExplicitChildWidth;
+    private getAllVerticalXYCharts;
+    private getVerticalXYCharts;
+    private resolveSharedYDomain;
+    private warnIncompatibleYScaleTypes;
+    private applyScaleSyncOverrides;
+    private buildRows;
+    private resolveDefaultChartHeight;
+    private resolveDefaultChartHeightForWidth;
+    private calculateLayout;
+    private collectMergedLegendEntries;
+    private resolveLegendVisibility;
+    private syncLegendStateFromChildren;
+    private applyLegendStateToChildren;
+    private serializeChildLegendState;
+    private serializeChildYDomains;
+    private renderLegendIntoContainer;
+    private renderTitleSvg;
+    private renderLegendSvg;
+    private setupResizeObserver;
+    private exportSVG;
+    private resolveChartOptions;
+    private refreshIfMounted;
+    private prepareRenderState;
+    private createRenderHosts;
+    private appendRenderedSection;
+    private renderLayoutItems;
+    private createChartHost;
+    private createReadyPromise;
+    private requireRenderedContainer;
+    private resolveExportContent;
+    private createRasterExportOptions;
+    private exportPdfContent;
+    private resolveExportLayoutState;
+    private resolveLiveChartHeightOverride;
+    private exportLayoutItems;
+    private composeExportSvg;
+    private validateResponsiveConfig;
+    private validateItemResponsiveConfig;
+    private resolveResponsiveConfigForWidth;
+    private resolveMatchedGroupBreakpoints;
+    private resolveVisibleChartEntries;
+    private resolveResponsiveChartEntry;
+    private downloadContent;
+    private getMimeType;
+}
+export {};