@internetstiftelsen/charts 0.9.2 → 0.10.0

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
@@ -112,6 +116,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

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();
@@ -401,6 +425,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 +491,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;
@@ -459,7 +526,9 @@ export class BaseChart {
         if (options.tooltip && this.tooltip) {
             components.push(this.tooltip);
         }
-        if (options.legend && this.legend) {
+        if (options.legend &&
+            this.legend &&
+            this.shouldIncludeLegendInExport()) {
             components.push(this.legend);
         }
         return components;
@@ -630,25 +699,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 +752,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 +818,7 @@ export class BaseChart {
             this.cleanupDisconnectedLegendContainer();
             return;
         }
-        if (!this.legend.isDisconnectedMode()) {
+        if (!this.hasDisconnectedLegend()) {
             this.cleanupDisconnectedLegendContainer();
             return;
         }
@@ -767,6 +827,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 +988,7 @@ export class BaseChart {
                     this.legend = component;
                 },
                 onRegister: (component) => {
-                    component.setToggleCallback(() => {
-                        this.rerender();
-                    });
+                    component.setStateController(this.legendState);
                 },
             },
         ];

package/dist/chart-group.d.ts

@@ -0,0 +1,121 @@
+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 validateResponsiveConfig;
+    private validateItemResponsiveConfig;
+    private resolveResponsiveConfigForWidth;
+    private resolveMatchedGroupBreakpoints;
+    private resolveVisibleChartEntries;
+    private resolveResponsiveChartEntry;
+    private downloadContent;
+    private getMimeType;
+}
+export {};