@internetstiftelsen/charts 0.7.1 → 0.9.0

package/base-chart.js

@@ -139,12 +139,24 @@ export class BaseChart {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "readyPromise", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: Promise.resolve()
+        });
         Object.defineProperty(this, "disconnectedLegendContainer", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "renderThemeOverride", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         const normalized = normalizeChartData(config.data);
         ChartValidator.validateData(normalized.data);
         this.sourceData = config.data;
@@ -156,6 +168,13 @@ export class BaseChart {
         this.responsiveConfig = config.responsive;
         this.layoutManager = new LayoutManager(this.theme);
     }
+    /**
+     * Adds a component (axis, grid, tooltip, etc.) to the chart
+     */
+    addChild(component) {
+        this.registerBaseComponent(component);
+        return this;
+    }
     /**
      * Renders the chart to the specified target element
      */
@@ -203,8 +222,9 @@ export class BaseChart {
         const renderTheme = this.resolveRenderTheme(responsiveOverrides);
         const overrideComponents = this.createOverrideComponents(mergedComponentOverrides);
         const restoreComponents = this.applyComponentOverrides(overrideComponents);
-        const restoreTheme = this.applyThemeOverride(renderTheme);
+        const restoreTheme = this.applyRenderTheme(renderTheme);
         try {
+            this.setReadyPromise(Promise.resolve());
             // Clear and setup SVG
             this.container.innerHTML = '';
             this.svg = create('svg')
@@ -212,20 +232,34 @@ export class BaseChart {
                 .attr('height', dimensions.svgHeightAttr)
                 .style('display', 'block');
             this.container.appendChild(this.svg.node());
-            this.prepareLayout();
+            const svgNode = this.svg.node();
+            if (!svgNode) {
+                throw new Error('Failed to initialize chart SVG');
+            }
+            this.prepareLayout({
+                svg: this.svg,
+                svgNode,
+            });
             // Calculate layout
             const layoutTheme = {
-                ...this.theme,
+                ...this.renderTheme,
                 width: this.width,
                 height: this.height,
             };
             this.layoutManager = new LayoutManager(layoutTheme);
             const components = this.getLayoutComponents();
-            this.plotArea = this.layoutManager.calculateLayout(components);
+            const plotArea = this.layoutManager.calculateLayout(components);
+            this.plotArea = plotArea;
             // Create plot group
-            this.plotGroup = this.svg.append('g').attr('class', 'chart-plot');
+            const plotGroup = this.svg.append('g').attr('class', 'chart-plot');
+            this.plotGroup = plotGroup;
             // Render chart content
-            this.renderChart();
+            this.renderChart({
+                svg: this.svg,
+                svgNode,
+                plotGroup,
+                plotArea,
+            });
             this.renderDisconnectedLegend();
         }
         finally {
@@ -270,58 +304,84 @@ export class BaseChart {
         }
         return mergeDeep(this.theme, responsiveOverrides.theme);
     }
-    applyThemeOverride(theme) {
+    applyRenderTheme(theme) {
         if (theme === this.theme) {
             return () => { };
         }
-        const originalTheme = this.theme;
-        this.theme = theme;
+        this.renderThemeOverride = theme;
         return () => {
-            this.theme = originalTheme;
+            this.renderThemeOverride = null;
         };
     }
+    get renderTheme() {
+        return this.renderThemeOverride ?? this.theme;
+    }
     /**
      * Get layout-aware components in order
      * Override in subclasses to provide chart-specific components
      */
     getLayoutComponents() {
+        return this.getBaseLayoutComponents({
+            title: true,
+            xAxis: true,
+            yAxis: true,
+            inlineLegend: true,
+        });
+    }
+    getBaseLayoutComponents(options) {
         const components = [];
-        if (this.title) {
+        if (options.title && this.title) {
             components.push(this.title);
         }
-        if (this.xAxis) {
+        if (options.xAxis && this.xAxis) {
             components.push(this.xAxis);
         }
-        if (this.yAxis) {
+        if (options.yAxis && this.yAxis) {
             components.push(this.yAxis);
         }
-        if (this.legend?.isInlineMode()) {
+        if (options.inlineLegend && this.legend?.isInlineMode()) {
             components.push(this.legend);
         }
         return components;
     }
     getExportComponents() {
+        return this.getBaseExportComponents({
+            title: true,
+            grid: true,
+            xAxis: true,
+            yAxis: true,
+            tooltip: true,
+            legend: true,
+        });
+    }
+    getOverrideableComponents() {
+        return this.getExportComponents();
+    }
+    getBaseExportComponents(options) {
         const components = [];
-        if (this.title) {
+        if (options.title && this.title) {
             components.push(this.title);
         }
-        if (this.grid) {
+        if (options.grid && this.grid) {
             components.push(this.grid);
         }
-        if (this.xAxis) {
+        if (options.xAxis && this.xAxis) {
             components.push(this.xAxis);
         }
-        if (this.yAxis) {
+        if (options.yAxis && this.yAxis) {
             components.push(this.yAxis);
         }
-        if (this.tooltip) {
+        if (options.tooltip && this.tooltip) {
             components.push(this.tooltip);
         }
-        if (this.legend) {
+        if (options.legend && this.legend) {
             components.push(this.legend);
         }
         return components;
     }
+    registerBaseComponent(component) {
+        return this.tryRegisterComponent(component, this.getBaseComponentSlots());
+    }
     collectExportOverrides(context) {
         const overrides = new Map();
         const components = this.getExportComponents();
@@ -339,7 +399,7 @@ export class BaseChart {
     }
     collectResponsiveOverrides(context) {
         const beforeRender = this.responsiveConfig?.beforeRender;
-        const components = this.getExportComponents();
+        const components = this.getOverrideableComponents();
         const componentOverrides = new Map();
         if (!beforeRender) {
             return {
@@ -418,38 +478,7 @@ export class BaseChart {
         return overrideComponents;
     }
     applyComponentOverrides(overrides) {
-        if (overrides.size === 0) {
-            return () => { };
-        }
-        const previousState = {
-            title: this.title,
-            grid: this.grid,
-            xAxis: this.xAxis,
-            yAxis: this.yAxis,
-            tooltip: this.tooltip,
-            legend: this.legend,
-        };
-        const resolve = (component) => {
-            if (!component) {
-                return component;
-            }
-            const override = overrides.get(component);
-            return override ?? component;
-        };
-        this.title = resolve(this.title);
-        this.grid = resolve(this.grid);
-        this.xAxis = resolve(this.xAxis);
-        this.yAxis = resolve(this.yAxis);
-        this.tooltip = resolve(this.tooltip);
-        this.legend = resolve(this.legend);
-        return () => {
-            this.title = previousState.title;
-            this.grid = previousState.grid;
-            this.xAxis = previousState.xAxis;
-            this.yAxis = previousState.yAxis;
-            this.tooltip = previousState.tooltip;
-            this.legend = previousState.legend;
-        };
+        return this.applySlotOverrides(overrides, this.getBaseComponentSlots());
     }
     renderExportChart(chart, width, height) {
         const container = document.createElement('div');
@@ -465,18 +494,59 @@ export class BaseChart {
         container.style.visibility = 'hidden';
         document.body.appendChild(container);
         chart.render(`#${containerId}`);
-        const svg = chart.svg?.node();
-        if (!svg) {
+        return chart
+            .whenReady()
+            .then(() => {
+            const svg = chart.svg?.node();
+            if (!svg) {
+                throw new Error('Failed to render export SVG');
+            }
+            return svg;
+        })
+            .finally(() => {
             chart.destroy();
             document.body.removeChild(container);
-            throw new Error('Failed to render export SVG');
+        });
+    }
+    renderTitle(svg) {
+        if (!this.title) {
+            return;
+        }
+        const position = this.layoutManager.getComponentPosition(this.title);
+        this.title.render(svg, this.renderTheme, this.width, position.x, position.y);
+    }
+    renderInlineLegend(svg) {
+        if (!this.legend?.isInlineMode()) {
+            return;
+        }
+        const position = this.layoutManager.getComponentPosition(this.legend);
+        this.legend.render(svg, this.getLegendSeries(), this.renderTheme, this.width, position.x, position.y);
+    }
+    measureInlineLegend(svgNode) {
+        if (!this.legend?.isInlineMode()) {
+            return;
         }
-        chart.destroy();
-        document.body.removeChild(container);
-        return svg;
+        this.legend.estimateLayoutSpace(this.getLegendSeries(), this.renderTheme, this.width, svgNode);
+    }
+    filterVisibleItems(items, getDataKey) {
+        const { legend } = this;
+        if (!legend) {
+            return items;
+        }
+        return items.filter((item) => {
+            return legend.isSeriesVisible(getDataKey(item));
+        });
+    }
+    validateSourceData(_data) { }
+    syncDerivedState(_previousData) { }
+    initializeDataState() {
+        this.validateSourceData(this.sourceData);
+        this.syncDerivedState();
     }
     // Hook for subclasses to update component layout estimates before layout calc
-    prepareLayout() { }
+    prepareLayout(context) {
+        this.measureInlineLegend(context.svgNode);
+    }
     /**
      * Setup ResizeObserver for automatic resize handling
      */
@@ -486,9 +556,15 @@ export class BaseChart {
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
         }
-        this.resizeObserver = new ResizeObserver(() => this.performRender());
+        this.resizeObserver = new ResizeObserver(() => this.rerender());
         this.resizeObserver.observe(this.container);
     }
+    setReadyPromise(promise) {
+        this.readyPromise = promise;
+    }
+    whenReady() {
+        return this.readyPromise;
+    }
     getLegendSeries() {
         return [];
     }
@@ -532,14 +608,17 @@ export class BaseChart {
      * Updates the chart with new data
      */
     update(data) {
+        if (!this.container) {
+            throw new Error('Chart must be rendered before update()');
+        }
+        this.validateSourceData(data);
         const normalized = normalizeChartData(data);
         ChartValidator.validateData(normalized.data);
+        const previousData = this.data;
         this.sourceData = data;
         this.data = normalized.data;
-        if (!this.container) {
-            throw new Error('Chart must be rendered before update()');
-        }
-        this.performRender();
+        this.syncDerivedState(previousData);
+        this.rerender();
     }
     /**
      * Destroys the chart and cleans up resources
@@ -588,10 +667,10 @@ export class BaseChart {
         if (!svgNode) {
             return;
         }
-        this.legend.estimateLayoutSpace(series, this.theme, this.width, svgNode);
+        this.legend.estimateLayoutSpace(series, this.renderTheme, this.width, svgNode);
         const legendHeight = Math.max(1, this.legend.getMeasuredHeight());
         legendSvg.attr('height', legendHeight);
-        this.legend.render(legendSvg, series, this.theme, this.width);
+        this.legend.render(legendSvg, series, this.renderTheme, this.width);
     }
     resolveDisconnectedLegendHost() {
         if (!this.legend || !this.container) {
@@ -638,6 +717,109 @@ export class BaseChart {
         }
         return 0;
     }
+    rerender() {
+        if (!this.container) {
+            return;
+        }
+        this.performRender();
+    }
+    tryRegisterComponent(component, slots) {
+        const slot = slots.find((entry) => entry.type === component.type);
+        if (!slot) {
+            return false;
+        }
+        slot.set(component);
+        slot.onRegister?.(component);
+        return true;
+    }
+    applySlotOverrides(overrides, slots) {
+        if (overrides.size === 0) {
+            return () => { };
+        }
+        const previousState = new Map();
+        slots.forEach((slot) => {
+            previousState.set(slot, slot.get());
+            const current = slot.get();
+            if (!current) {
+                return;
+            }
+            const override = overrides.get(current);
+            if (override) {
+                slot.set(override);
+            }
+        });
+        return () => {
+            slots.forEach((slot) => {
+                slot.set(previousState.get(slot) ?? null);
+            });
+        };
+    }
+    applyArrayComponentOverrides(components, overrides, isComponent) {
+        if (overrides.size === 0) {
+            return () => { };
+        }
+        const previousState = [...components];
+        components.forEach((component, index) => {
+            const override = overrides.get(component);
+            if (override && isComponent(override)) {
+                components[index] = override;
+            }
+        });
+        return () => {
+            components.splice(0, components.length, ...previousState);
+        };
+    }
+    getBaseComponentSlots() {
+        return [
+            {
+                type: 'title',
+                get: () => this.title,
+                set: (component) => {
+                    this.title = component;
+                },
+            },
+            {
+                type: 'grid',
+                get: () => this.grid,
+                set: (component) => {
+                    this.grid = component;
+                },
+            },
+            {
+                type: 'xAxis',
+                get: () => this.xAxis,
+                set: (component) => {
+                    this.xAxis = component;
+                },
+            },
+            {
+                type: 'yAxis',
+                get: () => this.yAxis,
+                set: (component) => {
+                    this.yAxis = component;
+                },
+            },
+            {
+                type: 'tooltip',
+                get: () => this.tooltip,
+                set: (component) => {
+                    this.tooltip = component;
+                },
+            },
+            {
+                type: 'legend',
+                get: () => this.legend,
+                set: (component) => {
+                    this.legend = component;
+                },
+                onRegister: (component) => {
+                    component.setToggleCallback(() => {
+                        this.rerender();
+                    });
+                },
+            },
+        ];
+    }
     /**
      * Exports the chart in the specified format
      * @param format - The export format
@@ -647,7 +829,7 @@ export class BaseChart {
     async export(format, options) {
         let content;
         if (format === 'svg') {
-            content = this.exportSVG(options, 'svg');
+            content = await this.exportSVG(options, 'svg');
         }
         else if (format === 'json') {
             content = this.exportJSON();
@@ -723,7 +905,7 @@ export class BaseChart {
     }
     async exportImage(format, options) {
         const { width, height } = this.exportSize(options);
-        const svg = this.exportSVG(options, format);
+        const svg = await this.exportSVG(options, format);
         const backgroundColor = options?.backgroundColor ??
             (format === 'jpg' ? '#ffffff' : undefined);
         return exportRasterBlob({
@@ -738,7 +920,7 @@ export class BaseChart {
     }
     async exportPDF(options) {
         const { width, height } = this.exportSize(options);
-        const svg = this.exportSVG(options, 'pdf');
+        const svg = await this.exportSVG(options, 'pdf');
         const pngBlob = await exportRasterBlob({
             format: 'png',
             svg,
@@ -754,14 +936,19 @@ export class BaseChart {
             margin: options?.pdfMargin ?? 0,
         });
     }
-    exportSVG(options, formatForHooks = 'svg') {
+    async exportSVG(options, formatForHooks = 'svg') {
         if (!this.svg) {
             throw new Error('Chart must be rendered before export');
         }
+        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 = this.svg.node().cloneNode(true);
+        const clone = liveSvg.cloneNode(true);
         clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
         clone.setAttribute('width', String(exportWidth));
         clone.setAttribute('height', String(exportHeight));
@@ -791,7 +978,7 @@ export class BaseChart {
                 exportChart.addChild(component);
             }
         });
-        const exportSvg = this.renderExportChart(exportChart, exportWidth, exportHeight);
+        const exportSvg = await this.renderExportChart(exportChart, exportWidth, exportHeight);
         exportSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
         exportSvg.setAttribute('width', String(exportWidth));
         exportSvg.setAttribute('height', String(exportHeight));

package/donut-chart.d.ts

@@ -1,6 +1,7 @@
 import type { DataItem, LegendSeries } from './types.js';
-import { BaseChart, type BaseChartConfig } from './base-chart.js';
-import type { ChartComponent, LayoutAwareComponent } from './chart-interface.js';
+import { type BaseChartConfig, type BaseRenderContext } from './base-chart.js';
+import type { ChartComponent } from './chart-interface.js';
+import { RadialChartBase } from './radial-chart-base.js';
 export type DonutConfig = {
     innerRadius?: number;
     padAngle?: number;
@@ -11,7 +12,7 @@ export type DonutChartConfig = BaseChartConfig & {
     valueKey?: string;
     labelKey?: string;
 };
-export declare class DonutChart extends BaseChart {
+export declare class DonutChart extends RadialChartBase {
     private readonly innerRadiusRatio;
     private readonly padAngle;
     private readonly cornerRadius;
@@ -25,14 +26,11 @@ export declare class DonutChart extends BaseChart {
     addChild(component: ChartComponent): this;
     protected getExportComponents(): ChartComponent[];
     update(data: DataItem[]): void;
-    protected getLayoutComponents(): LayoutAwareComponent[];
-    protected prepareLayout(): void;
-    protected createExportChart(): BaseChart;
+    protected createExportChart(): RadialChartBase;
     protected applyComponentOverrides(overrides: Map<ChartComponent, ChartComponent>): () => void;
-    protected renderChart(): void;
-    private resolveFontScale;
+    protected syncDerivedState(): void;
+    protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;
     protected getLegendSeries(): LegendSeries[];
-    private positionTooltip;
     private buildTooltipContent;
     private renderSegments;
 }