@internetstiftelsen/charts 0.3.3 → 0.4.1

package/bar.d.ts

@@ -1,7 +1,7 @@
 import type { Selection } from 'd3';
-import type { BarConfig, BarStackingContext, BarValueLabelConfig, ChartTheme, D3Scale, DataItem, Orientation, ScaleType } from './types.js';
+import type { BarConfig, BarStackingContext, BarValueLabelConfig, ChartTheme, D3Scale, DataItem, Orientation, ScaleType, ExportHooks, BarConfigBase } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
-export declare class Bar implements ChartComponent {
+export declare class Bar implements ChartComponent<BarConfigBase> {
     readonly type: "bar";
     readonly dataKey: string;
     readonly fill: string;
@@ -9,7 +9,10 @@ export declare class Bar implements ChartComponent {
     readonly orientation: Orientation;
     readonly maxBarSize?: number;
     readonly valueLabel?: BarValueLabelConfig;
+    readonly exportHooks?: ExportHooks<BarConfigBase>;
     constructor(config: BarConfig);
+    getExportConfig(): BarConfigBase;
+    createExportComponent(override?: Partial<BarConfigBase>): ChartComponent;
     private getScaledPosition;
     render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: D3Scale, y: D3Scale, parseValue: (value: unknown) => number, xScaleType?: ScaleType, theme?: ChartTheme, stackingContext?: BarStackingContext): void;
     private renderVertical;

package/bar.js

@@ -1,4 +1,4 @@
-import { sanitizeForCSS } from './utils.js';
+import { getContrastTextColor, sanitizeForCSS, mergeDeep } from './utils.js';
 export class Bar {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -43,12 +43,36 @@ export class Bar {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "exportHooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.dataKey = config.dataKey;
         this.fill = config.fill || '#8884d8';
         this.colorAdapter = config.colorAdapter;
         this.orientation = config.orientation || 'vertical';
         this.maxBarSize = config.maxBarSize;
         this.valueLabel = config.valueLabel;
+        this.exportHooks = config.exportHooks;
+    }
+    getExportConfig() {
+        return {
+            dataKey: this.dataKey,
+            fill: this.fill,
+            colorAdapter: this.colorAdapter,
+            orientation: this.orientation,
+            maxBarSize: this.maxBarSize,
+            valueLabel: this.valueLabel,
+        };
+    }
+    createExportComponent(override) {
+        const merged = mergeDeep(this.getExportConfig(), override);
+        return new Bar({
+            ...merged,
+            exportHooks: this.exportHooks,
+        });
     }
     getScaledPosition(data, key, scale, scaleType) {
         const value = data[key];
@@ -338,7 +362,7 @@ export class Bar {
         const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
         const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
         const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
-        const color = config.color ?? theme.valueLabel.color;
+        const defaultLabelColor = config.color ?? theme.valueLabel.color;
         const background = config.background ?? theme.valueLabel.background;
         const border = config.border ?? theme.valueLabel.border;
         const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
@@ -346,11 +370,14 @@ export class Bar {
         const labelGroup = plotGroup
             .append('g')
             .attr('class', `bar-value-labels-${sanitizeForCSS(this.dataKey)}`);
-        data.forEach((d) => {
+        data.forEach((d, i) => {
             const categoryKey = String(d[xKey]);
             const value = parseValue(d[this.dataKey]);
             const valueText = String(value);
             const xPos = this.getScaledPosition(d, xKey, x, xScaleType);
+            const barColor = this.colorAdapter
+                ? this.colorAdapter(d, i)
+                : this.fill;
             // Calculate bar position based on stacking mode
             let barTop;
             let barBottom;
@@ -473,6 +500,9 @@ export class Bar {
             }
             tempText.remove();
             if (shouldRender) {
+                const labelColor = position === 'inside' && config.color === undefined
+                    ? getContrastTextColor(barColor)
+                    : defaultLabelColor;
                 const group = labelGroup.append('g');
                 if (position === 'outside') {
                     // Draw rounded rectangle background
@@ -498,7 +528,7 @@ export class Bar {
                     .style('font-size', `${fontSize}px`)
                     .style('font-family', fontFamily)
                     .style('font-weight', fontWeight)
-                    .style('fill', color)
+                    .style('fill', labelColor)
                     .style('pointer-events', 'none')
                     .text(valueText);
             }
@@ -550,7 +580,7 @@ export class Bar {
         const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
         const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
         const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
-        const color = config.color ?? theme.valueLabel.color;
+        const defaultLabelColor = config.color ?? theme.valueLabel.color;
         const background = config.background ?? theme.valueLabel.background;
         const border = config.border ?? theme.valueLabel.border;
         const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
@@ -558,11 +588,14 @@ export class Bar {
         const labelGroup = plotGroup
             .append('g')
             .attr('class', `bar-value-labels-${sanitizeForCSS(this.dataKey)}`);
-        data.forEach((d) => {
+        data.forEach((d, i) => {
             const categoryKey = String(d[xKey]);
             const value = parseValue(d[this.dataKey]);
             const valueText = String(value);
             const yPos = this.getScaledPosition(d, xKey, y, yScaleType);
+            const barColor = this.colorAdapter
+                ? this.colorAdapter(d, i)
+                : this.fill;
             // Calculate bar position based on stacking mode
             let barLeft;
             let barRight;
@@ -687,6 +720,9 @@ export class Bar {
             }
             tempText.remove();
             if (shouldRender) {
+                const labelColor = position === 'inside' && config.color === undefined
+                    ? getContrastTextColor(barColor)
+                    : defaultLabelColor;
                 const group = labelGroup.append('g');
                 if (position === 'outside') {
                     // Draw rounded rectangle background
@@ -712,7 +748,7 @@ export class Bar {
                     .style('font-size', `${fontSize}px`)
                     .style('font-family', fontFamily)
                     .style('font-weight', fontWeight)
-                    .style('fill', color)
+                    .style('fill', labelColor)
                     .style('pointer-events', 'none')
                     .text(valueText);
             }

package/base-chart.d.ts

@@ -1,5 +1,5 @@
 import { type Selection } from 'd3';
-import type { DataItem, ChartTheme, AxisScaleConfig, ExportFormat, ExportOptions, D3Scale } from './types.js';
+import type { DataItem, ChartTheme, AxisScaleConfig, ExportFormat, ExportOptions, D3Scale, ExportHookContext, ExportRenderContext } from './types.js';
 import type { ChartComponent, LayoutAwareComponent } from './chart-interface.js';
 import type { XAxis } from './x-axis.js';
 import type { YAxis } from './y-axis.js';
@@ -54,6 +54,10 @@ export declare abstract class BaseChart {
      * Override in subclasses to provide chart-specific components
      */
     protected getLayoutComponents(): LayoutAwareComponent[];
+    protected getExportComponents(): ChartComponent[];
+    protected collectExportOverrides(context: ExportRenderContext): Map<ChartComponent, Record<string, unknown>>;
+    protected runExportHooks(context: ExportHookContext): void;
+    private renderExportChart;
     protected prepareLayout(): void;
     /**
      * Setup ResizeObserver for automatic resize handling
@@ -63,6 +67,7 @@ export declare abstract class BaseChart {
      * Subclasses must implement this method to define their rendering logic
      */
     protected abstract renderChart(): void;
+    protected abstract createExportChart(): BaseChart;
     /**
      * Updates the chart with new data
      */
@@ -83,6 +88,6 @@ export declare abstract class BaseChart {
      * Downloads the exported content as a file
      */
     private downloadContent;
-    protected exportSVG(): string;
+    protected exportSVG(options?: ExportOptions): string;
     protected exportJSON(): string;
 }

package/base-chart.js

@@ -185,16 +185,87 @@ export class BaseChart {
      */
     getLayoutComponents() {
         const components = [];
-        if (this.title)
+        if (this.title) {
             components.push(this.title);
-        if (this.xAxis)
+        }
+        if (this.xAxis) {
             components.push(this.xAxis);
-        if (this.yAxis)
+        }
+        if (this.yAxis) {
             components.push(this.yAxis);
-        if (this.legend)
+        }
+        if (this.legend) {
             components.push(this.legend);
+        }
         return components;
     }
+    getExportComponents() {
+        const components = [];
+        if (this.title) {
+            components.push(this.title);
+        }
+        if (this.grid) {
+            components.push(this.grid);
+        }
+        if (this.xAxis) {
+            components.push(this.xAxis);
+        }
+        if (this.yAxis) {
+            components.push(this.yAxis);
+        }
+        if (this.tooltip) {
+            components.push(this.tooltip);
+        }
+        if (this.legend) {
+            components.push(this.legend);
+        }
+        return components;
+    }
+    collectExportOverrides(context) {
+        const overrides = new Map();
+        const components = this.getExportComponents();
+        components.forEach((component) => {
+            const exportable = component;
+            const currentConfig = exportable.getExportConfig?.() ?? {};
+            const result = component.exportHooks?.beforeRender?.call(component, context, currentConfig);
+            if (result &&
+                typeof result === 'object' &&
+                exportable.createExportComponent) {
+                overrides.set(component, result);
+            }
+        });
+        return overrides;
+    }
+    runExportHooks(context) {
+        const components = this.getExportComponents();
+        components.forEach((component) => {
+            component.exportHooks?.before?.call(component, context);
+        });
+    }
+    renderExportChart(chart, width, height) {
+        const container = document.createElement('div');
+        const containerId = `chart-export-${Math.random()
+            .toString(36)
+            .slice(2)}`;
+        container.id = containerId;
+        container.style.position = 'absolute';
+        container.style.left = '-99999px';
+        container.style.top = '0';
+        container.style.width = `${width}px`;
+        container.style.height = `${height}px`;
+        container.style.visibility = 'hidden';
+        document.body.appendChild(container);
+        chart.render(`#${containerId}`);
+        const svg = chart.svg?.node();
+        if (!svg) {
+            chart.destroy();
+            document.body.removeChild(container);
+            throw new Error('Failed to render export SVG');
+        }
+        chart.destroy();
+        document.body.removeChild(container);
+        return svg;
+    }
     // Hook for subclasses to update component layout estimates before layout calc
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     prepareLayout() { }
@@ -255,7 +326,7 @@ export class BaseChart {
      * @returns The exported content as a string if download is false/undefined, void if download is true
      */
     export(format, options) {
-        const content = format === 'svg' ? this.exportSVG() : this.exportJSON();
+        const content = format === 'svg' ? this.exportSVG(options) : this.exportJSON();
         if (options?.download) {
             this.downloadContent(content, format, options);
             return;
@@ -277,15 +348,52 @@ export class BaseChart {
         document.body.removeChild(link);
         URL.revokeObjectURL(url);
     }
-    exportSVG() {
+    exportSVG(options) {
         if (!this.svg) {
             throw new Error('Chart must be rendered before export');
         }
+        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);
         clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        clone.setAttribute('width', String(this.width));
-        clone.setAttribute('height', String(this.height));
-        return clone.outerHTML;
+        clone.setAttribute('width', String(exportWidth));
+        clone.setAttribute('height', String(exportHeight));
+        const baseContext = {
+            format: 'svg',
+            options,
+            width: exportWidth,
+            height: exportHeight,
+        };
+        const overrides = this.collectExportOverrides(baseContext);
+        if (overrides.size === 0 && !requiresExportRender) {
+            this.runExportHooks({
+                ...baseContext,
+                svg: clone,
+            });
+            return clone.outerHTML;
+        }
+        const exportChart = this.createExportChart();
+        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);
+            }
+        });
+        const exportSvg = this.renderExportChart(exportChart, exportWidth, exportHeight);
+        exportSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        exportSvg.setAttribute('width', String(exportWidth));
+        exportSvg.setAttribute('height', String(exportHeight));
+        this.runExportHooks({
+            ...baseContext,
+            svg: exportSvg,
+        });
+        return exportSvg.outerHTML;
     }
     exportJSON() {
         return JSON.stringify({

package/chart-interface.d.ts

@@ -1,11 +1,13 @@
-export interface ChartComponent {
+import type { ExportHooks } from './types.js';
+export interface ChartComponent<TConfig = any> {
     type: 'line' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'title' | 'donutCenterContent';
+    exportHooks?: ExportHooks<TConfig>;
 }
 export type ComponentSpace = {
     width: number;
     height: number;
     position: 'top' | 'bottom' | 'left' | 'right';
 };
-export interface LayoutAwareComponent extends ChartComponent {
+export interface LayoutAwareComponent<TConfig = any> extends ChartComponent<TConfig> {
     getRequiredSpace(): ComponentSpace;
 }

package/donut-center-content.d.ts

@@ -1,5 +1,5 @@
 import { type Selection } from 'd3';
-import type { ChartTheme } from './types.js';
+import type { ChartTheme, ExportHooks } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 type TextStyle = {
     fontSize?: number;
@@ -7,7 +7,7 @@ type TextStyle = {
     fontFamily?: string;
     color?: string;
 };
-export type DonutCenterContentConfig = {
+export type DonutCenterContentConfigBase = {
     mainValue?: string;
     title?: string;
     subtitle?: string;
@@ -15,13 +15,19 @@ export type DonutCenterContentConfig = {
     titleStyle?: TextStyle;
     subtitleStyle?: TextStyle;
 };
-export declare class DonutCenterContent implements ChartComponent {
+export type DonutCenterContentConfig = DonutCenterContentConfigBase & {
+    exportHooks?: ExportHooks<DonutCenterContentConfigBase>;
+};
+export declare class DonutCenterContent implements ChartComponent<DonutCenterContentConfigBase> {
     readonly type: "donutCenterContent";
     readonly mainValue?: string;
     readonly title?: string;
     readonly subtitle?: string;
+    readonly exportHooks?: ExportHooks<DonutCenterContentConfigBase>;
     private readonly config;
     constructor(config?: DonutCenterContentConfig);
+    getExportConfig(): DonutCenterContentConfigBase;
+    createExportComponent(override?: Partial<DonutCenterContentConfigBase>): ChartComponent;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, cx: number, cy: number, theme: ChartTheme): void;
 }
 export {};

package/donut-center-content.js

@@ -1,3 +1,4 @@
+import { mergeDeep } from './utils.js';
 export class DonutCenterContent {
     constructor(config = {}) {
         Object.defineProperty(this, "type", {
@@ -24,6 +25,12 @@ export class DonutCenterContent {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "exportHooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "config", {
             enumerable: true,
             configurable: true,
@@ -33,8 +40,26 @@ export class DonutCenterContent {
         this.mainValue = config.mainValue;
         this.title = config.title;
         this.subtitle = config.subtitle;
+        this.exportHooks = config.exportHooks;
         this.config = config;
     }
+    getExportConfig() {
+        return {
+            mainValue: this.mainValue,
+            title: this.title,
+            subtitle: this.subtitle,
+            mainValueStyle: this.config.mainValueStyle,
+            titleStyle: this.config.titleStyle,
+            subtitleStyle: this.config.subtitleStyle,
+        };
+    }
+    createExportComponent(override) {
+        const merged = mergeDeep(this.getExportConfig(), override);
+        return new DonutCenterContent({
+            ...merged,
+            exportHooks: this.exportHooks,
+        });
+    }
     render(svg, cx, cy, theme) {
         const defaults = theme.donut.centerContent;
         const elements = [];

package/donut-chart.d.ts

@@ -23,8 +23,10 @@ export declare class DonutChart extends BaseChart {
     private validateDonutData;
     private prepareSegments;
     addChild(component: ChartComponent): this;
+    protected getExportComponents(): ChartComponent[];
     update(data: DataItem[]): void;
     protected getLayoutComponents(): LayoutAwareComponent[];
+    protected createExportChart(): BaseChart;
     protected renderChart(): void;
     private positionTooltip;
     private buildTooltipContent;

package/donut-chart.js

@@ -97,6 +97,22 @@ export class DonutChart extends BaseChart {
         }
         return this;
     }
+    getExportComponents() {
+        const components = [];
+        if (this.title) {
+            components.push(this.title);
+        }
+        if (this.centerContent) {
+            components.push(this.centerContent);
+        }
+        if (this.tooltip) {
+            components.push(this.tooltip);
+        }
+        if (this.legend) {
+            components.push(this.legend);
+        }
+        return components;
+    }
     update(data) {
         this.data = data;
         this.validateDonutData();
@@ -105,12 +121,27 @@ export class DonutChart extends BaseChart {
     }
     getLayoutComponents() {
         const components = [];
-        if (this.title)
+        if (this.title) {
             components.push(this.title);
-        if (this.legend)
+        }
+        if (this.legend) {
             components.push(this.legend);
+        }
         return components;
     }
+    createExportChart() {
+        return new DonutChart({
+            data: this.data,
+            theme: this.theme,
+            donut: {
+                innerRadius: this.innerRadiusRatio,
+                padAngle: this.padAngle,
+                cornerRadius: this.cornerRadius,
+            },
+            valueKey: this.valueKey,
+            labelKey: this.labelKey,
+        });
+    }
     renderChart() {
         if (!this.plotArea || !this.svg || !this.plotGroup) {
             throw new Error('Plot area not calculated');

package/grid.d.ts

@@ -1,10 +1,13 @@
 import { type Selection } from 'd3';
-import type { GridConfig, ChartTheme, D3Scale } from './types.js';
+import type { GridConfig, ChartTheme, D3Scale, ExportHooks, GridConfigBase } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
-export declare class Grid implements ChartComponent {
+export declare class Grid implements ChartComponent<GridConfigBase> {
     readonly type: "grid";
     readonly horizontal: boolean;
     readonly vertical: boolean;
+    readonly exportHooks?: ExportHooks<GridConfigBase>;
     constructor(config?: GridConfig);
+    getExportConfig(): GridConfigBase;
+    createExportComponent(override?: Partial<GridConfigBase>): ChartComponent;
     render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, x: D3Scale, y: D3Scale, theme: ChartTheme): void;
 }

package/grid.js

@@ -1,4 +1,5 @@
 import { axisBottom, axisLeft } from 'd3';
+import { mergeDeep } from './utils.js';
 export class Grid {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -19,8 +20,28 @@ export class Grid {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "exportHooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.horizontal = config?.horizontal ?? true;
         this.vertical = config?.vertical ?? true;
+        this.exportHooks = config?.exportHooks;
+    }
+    getExportConfig() {
+        return {
+            horizontal: this.horizontal,
+            vertical: this.vertical,
+        };
+    }
+    createExportComponent(override) {
+        const merged = mergeDeep(this.getExportConfig(), override);
+        return new Grid({
+            ...merged,
+            exportHooks: this.exportHooks,
+        });
     }
     render(plotGroup, x, y, theme) {
         // Get plot area dimensions from the scale ranges

package/legend.d.ts

@@ -1,19 +1,21 @@
 import { type Selection } from 'd3';
-import type { LegendConfig, ChartTheme, LegendSeries } from './types.js';
+import type { LegendConfig, ChartTheme, LegendSeries, ExportHooks, LegendConfigBase } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
-export declare class Legend implements LayoutAwareComponent {
+export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     readonly type: "legend";
     readonly position: LegendConfig['position'];
+    readonly exportHooks?: ExportHooks<LegendConfigBase>;
     private readonly marginTop;
     private readonly marginBottom;
     private readonly itemHeight;
     private visibilityState;
     private onToggleCallback?;
     constructor(config?: LegendConfig);
+    getExportConfig(): LegendConfigBase;
+    createExportComponent(override?: Partial<LegendConfigBase>): LayoutAwareComponent;
     setToggleCallback(callback: () => void): void;
     isSeriesVisible(dataKey: string): boolean;
     private getCheckmarkPath;
-    private parseColor;
     /**
      * Returns the space required by the legend
      */

package/legend.js

@@ -1,4 +1,5 @@
 import { getSeriesColor } from './types.js';
+import { getContrastTextColor, mergeDeep } from './utils.js';
 export class Legend {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -13,6 +14,12 @@ export class Legend {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "exportHooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "marginTop", {
             enumerable: true,
             configurable: true,
@@ -46,6 +53,23 @@ export class Legend {
         this.position = config?.position || 'bottom';
         this.marginTop = config?.marginTop ?? 20;
         this.marginBottom = config?.marginBottom ?? 10;
+        this.exportHooks = config?.exportHooks;
+    }
+    getExportConfig() {
+        return {
+            position: this.position,
+            marginTop: this.marginTop,
+            marginBottom: this.marginBottom,
+        };
+    }
+    createExportComponent(override) {
+        const merged = mergeDeep(this.getExportConfig(), override);
+        const legend = new Legend({
+            ...merged,
+            exportHooks: this.exportHooks,
+        });
+        legend.visibilityState = new Map(this.visibilityState);
+        return legend;
     }
     setToggleCallback(callback) {
         this.onToggleCallback = callback;
@@ -59,29 +83,6 @@ export class Legend {
         const offsetY = size * 0.15;
         return `M ${4 * scale + offsetX} ${12 * scale + offsetY} L ${9 * scale + offsetX} ${17 * scale + offsetY} L ${20 * scale + offsetX} ${6 * scale + offsetY}`;
     }
-    parseColor(color) {
-        // Handle hex colors
-        if (color.startsWith('#')) {
-            const hex = color.slice(1);
-            const r = parseInt(hex.slice(0, 2), 16);
-            const g = parseInt(hex.slice(2, 4), 16);
-            const b = parseInt(hex.slice(4, 6), 16);
-            return { r, g, b };
-        }
-        // Handle rgb/rgba colors
-        if (color.startsWith('rgb')) {
-            const match = color.match(/\d+/g);
-            if (match) {
-                return {
-                    r: parseInt(match[0]),
-                    g: parseInt(match[1]),
-                    b: parseInt(match[2]),
-                };
-            }
-        }
-        // Default to black if we can't parse
-        return { r: 0, g: 0, b: 0 };
-    }
     /**
      * Returns the space required by the legend
      */
@@ -161,13 +162,7 @@ export class Legend {
             .append('path')
             .attr('d', this.getCheckmarkPath(boxSize))
             .attr('fill', 'none')
-            .attr('stroke', (d) => {
-            // Calculate luminance to determine if we need black or white checkmark
-            const color = d.color;
-            const rgb = this.parseColor(color);
-            const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
-            return luminance > 0.5 ? '#000' : '#fff';
-        })
+            .attr('stroke', (d) => getContrastTextColor(d.color))
             .attr('stroke-width', 2)
             .attr('stroke-linecap', 'round')
             .attr('stroke-linejoin', 'round')

package/line.d.ts

@@ -1,13 +1,16 @@
 import { type Selection } from 'd3';
-import type { LineConfig, DataItem, D3Scale, ScaleType, ChartTheme, LineValueLabelConfig } from './types.js';
+import type { LineConfig, DataItem, D3Scale, ScaleType, ChartTheme, LineValueLabelConfig, ExportHooks, LineConfigBase } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
-export declare class Line implements ChartComponent {
+export declare class Line implements ChartComponent<LineConfigBase> {
     readonly type: "line";
     readonly dataKey: string;
     readonly stroke: string;
     readonly strokeWidth?: number;
     readonly valueLabel?: LineValueLabelConfig;
+    readonly exportHooks?: ExportHooks<LineConfigBase>;
     constructor(config: LineConfig);
+    getExportConfig(): LineConfigBase;
+    createExportComponent(override?: Partial<LineConfigBase>): ChartComponent;
     render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: D3Scale, y: D3Scale, parseValue: (value: unknown) => number, xScaleType: ScaleType | undefined, theme: ChartTheme): void;
     private renderValueLabels;
 }

package/line.js

@@ -1,5 +1,5 @@
 import { line } from 'd3';
-import { sanitizeForCSS } from './utils.js';
+import { sanitizeForCSS, mergeDeep } from './utils.js';
 export class Line {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -32,10 +32,32 @@ export class Line {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "exportHooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.dataKey = config.dataKey;
         this.stroke = config.stroke || '#8884d8';
         this.strokeWidth = config.strokeWidth;
         this.valueLabel = config.valueLabel;
+        this.exportHooks = config.exportHooks;
+    }
+    getExportConfig() {
+        return {
+            dataKey: this.dataKey,
+            stroke: this.stroke,
+            strokeWidth: this.strokeWidth,
+            valueLabel: this.valueLabel,
+        };
+    }
+    createExportComponent(override) {
+        const merged = mergeDeep(this.getExportConfig(), override);
+        return new Line({
+            ...merged,
+            exportHooks: this.exportHooks,
+        });
     }
     render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme) {
         const getXPosition = (d) => {

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.3.3",
+    "version": "0.4.1",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,

package/title.d.ts

@@ -1,9 +1,10 @@
 import { type Selection } from 'd3';
-import type { TitleConfig, ChartTheme } from './types.js';
+import type { TitleConfig, ChartTheme, ExportHooks, TitleConfigBase } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
-export declare class Title implements LayoutAwareComponent {
+export declare class Title implements LayoutAwareComponent<TitleConfigBase> {
     readonly type: "title";
     readonly text: string;
+    readonly exportHooks?: ExportHooks<TitleConfigBase>;
     private readonly fontSize;
     private readonly fontWeight;
     private readonly fontFamily?;
@@ -11,6 +12,8 @@ export declare class Title implements LayoutAwareComponent {
     private readonly marginTop;
     private readonly marginBottom;
     constructor(config: TitleConfig);
+    getExportConfig(): TitleConfigBase;
+    createExportComponent(override?: Partial<TitleConfigBase>): LayoutAwareComponent;
     /**
      * Returns the space required by the title
      */

package/title.js

@@ -1,3 +1,4 @@
+import { mergeDeep } from './utils.js';
 export class Title {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -12,6 +13,12 @@ export class Title {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "exportHooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "fontSize", {
             enumerable: true,
             configurable: true,
@@ -55,6 +62,25 @@ export class Title {
         this.align = config.align ?? 'center';
         this.marginTop = config.marginTop ?? 10;
         this.marginBottom = config.marginBottom ?? 15;
+        this.exportHooks = config.exportHooks;
+    }
+    getExportConfig() {
+        return {
+            text: this.text,
+            fontSize: this.fontSize,
+            fontWeight: this.fontWeight,
+            fontFamily: this.fontFamily,
+            align: this.align,
+            marginTop: this.marginTop,
+            marginBottom: this.marginBottom,
+        };
+    }
+    createExportComponent(override) {
+        const merged = mergeDeep(this.getExportConfig(), override);
+        return new Title({
+            ...merged,
+            exportHooks: this.exportHooks,
+        });
     }
     /**
      * Returns the space required by the title

package/tooltip.d.ts

@@ -1,10 +1,10 @@
 import { type Selection } from 'd3';
-import type { TooltipConfig, DataItem, DataValue, D3Scale, ChartTheme } from './types.js';
+import type { TooltipConfig, DataItem, DataValue, D3Scale, ChartTheme, ExportHooks, TooltipConfigBase } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 import type { Line } from './line.js';
 import type { Bar } from './bar.js';
 import type { PlotAreaBounds } from './layout-manager.js';
-export declare class Tooltip implements ChartComponent {
+export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     readonly id = "iisChartTooltip";
     readonly type: "tooltip";
     readonly formatter?: (dataKey: string, value: DataValue, data: DataItem) => string;
@@ -14,8 +14,11 @@ export declare class Tooltip implements ChartComponent {
         stroke?: string;
         fill?: string;
     }[]) => string;
+    readonly exportHooks?: ExportHooks<TooltipConfigBase>;
     private tooltipDiv;
     constructor(config?: TooltipConfig);
+    getExportConfig(): TooltipConfigBase;
+    createExportComponent(override?: Partial<TooltipConfigBase>): ChartComponent;
     initialize(theme: ChartTheme): void;
     attachToArea(svg: Selection<SVGSVGElement, undefined, null, undefined>, data: DataItem[], series: (Line | Bar)[], xKey: string, x: D3Scale, y: D3Scale, theme: ChartTheme, plotArea: PlotAreaBounds, parseValue: (value: unknown) => number, isHorizontal?: boolean): void;
     cleanup(): void;

package/tooltip.js

@@ -1,6 +1,6 @@
 import { pointer, select } from 'd3';
 import { getSeriesColor } from './types.js';
-import { sanitizeForCSS } from './utils.js';
+import { sanitizeForCSS, mergeDeep } from './utils.js';
 export class Tooltip {
     constructor(config) {
         Object.defineProperty(this, "id", {
@@ -33,6 +33,12 @@ export class Tooltip {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "exportHooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "tooltipDiv", {
             enumerable: true,
             configurable: true,
@@ -42,6 +48,21 @@ export class Tooltip {
         this.formatter = config?.formatter;
         this.labelFormatter = config?.labelFormatter;
         this.customFormatter = config?.customFormatter;
+        this.exportHooks = config?.exportHooks;
+    }
+    getExportConfig() {
+        return {
+            formatter: this.formatter,
+            labelFormatter: this.labelFormatter,
+            customFormatter: this.customFormatter,
+        };
+    }
+    createExportComponent(override) {
+        const merged = mergeDeep(this.getExportConfig(), override);
+        return new Tooltip({
+            ...merged,
+            exportHooks: this.exportHooks,
+        });
     }
     initialize(theme) {
         this.cleanup();

package/types.d.ts

@@ -4,6 +4,21 @@ export type ExportFormat = 'svg' | 'json';
 export type ExportOptions = {
     download?: boolean;
     filename?: string;
+    width?: number;
+    height?: number;
+};
+export type ExportRenderContext = {
+    format: ExportFormat;
+    options?: ExportOptions;
+    width: number;
+    height: number;
+};
+export type ExportHookContext = ExportRenderContext & {
+    svg: SVGSVGElement;
+};
+export type ExportHooks<TConfig = Record<string, unknown>> = {
+    beforeRender?: (context: ExportRenderContext, currentConfig: TConfig) => void | Partial<TConfig>;
+    before?: (context: ExportHookContext) => void;
 };
 export type ColorPalette = string[];
 export type ChartTheme = {
@@ -94,13 +109,16 @@ export type BarValueLabelConfig = ValueLabelConfig & {
     position?: 'inside' | 'outside';
     insidePosition?: 'top' | 'middle' | 'bottom';
 };
-export type LineConfig = {
+export type LineConfigBase = {
     dataKey: string;
     stroke?: string;
     strokeWidth?: number;
     valueLabel?: LineValueLabelConfig;
 };
-export type BarConfig = {
+export type LineConfig = LineConfigBase & {
+    exportHooks?: ExportHooks<LineConfigBase>;
+};
+export type BarConfigBase = {
     dataKey: string;
     fill?: string;
     colorAdapter?: (data: DataItem, index: number) => string;
@@ -108,6 +126,9 @@ export type BarConfig = {
     maxBarSize?: number;
     valueLabel?: BarValueLabelConfig;
 };
+export type BarConfig = BarConfigBase & {
+    exportHooks?: ExportHooks<BarConfigBase>;
+};
 export type BarStackConfig = {
     mode?: BarStackMode;
     gap?: number;
@@ -117,7 +138,7 @@ export declare function getSeriesColor(series: {
     fill?: string;
 }): string;
 export type LabelOversizedBehavior = 'truncate' | 'wrap' | 'hide';
-export type XAxisConfig = {
+export type XAxisConfigBase = {
     dataKey?: string;
     rotatedLabels?: boolean;
     maxLabelWidth?: number;
@@ -127,17 +148,26 @@ export type XAxisConfig = {
     minLabelGap?: number;
     preserveEndLabels?: boolean;
 };
-export type YAxisConfig = {
+export type XAxisConfig = XAxisConfigBase & {
+    exportHooks?: ExportHooks<XAxisConfigBase>;
+};
+export type YAxisConfigBase = {
     tickFormat?: string | ((value: number) => string) | null;
     rotatedLabels?: boolean;
     maxLabelWidth?: number;
     oversizedBehavior?: LabelOversizedBehavior;
 };
-export type GridConfig = {
+export type YAxisConfig = YAxisConfigBase & {
+    exportHooks?: ExportHooks<YAxisConfigBase>;
+};
+export type GridConfigBase = {
     horizontal?: boolean;
     vertical?: boolean;
 };
-export type TooltipConfig = {
+export type GridConfig = GridConfigBase & {
+    exportHooks?: ExportHooks<GridConfigBase>;
+};
+export type TooltipConfigBase = {
     formatter?: (dataKey: string, value: DataValue, data: DataItem) => string;
     labelFormatter?: (label: string, data: DataItem) => string;
     customFormatter?: (data: DataItem, series: {
@@ -146,17 +176,23 @@ export type TooltipConfig = {
         fill?: string;
     }[]) => string;
 };
-export type LegendConfig = {
+export type TooltipConfig = TooltipConfigBase & {
+    exportHooks?: ExportHooks<TooltipConfigBase>;
+};
+export type LegendConfigBase = {
     position?: 'bottom';
     marginTop?: number;
     marginBottom?: number;
 };
+export type LegendConfig = LegendConfigBase & {
+    exportHooks?: ExportHooks<LegendConfigBase>;
+};
 export type LegendSeries = {
     dataKey: string;
     stroke?: string;
     fill?: string;
 };
-export type TitleConfig = {
+export type TitleConfigBase = {
     text: string;
     fontSize?: number;
     fontWeight?: string;
@@ -165,6 +201,9 @@ export type TitleConfig = {
     marginTop?: number;
     marginBottom?: number;
 };
+export type TitleConfig = TitleConfigBase & {
+    exportHooks?: ExportHooks<TitleConfigBase>;
+};
 export type ScaleType = 'band' | 'linear' | 'time' | 'log';
 export type D3Scale = any;
 export type ScaleDomainValue = string | number | Date;

package/utils.d.ts

@@ -60,3 +60,5 @@ export declare function breakWord(word: string, maxWidth: number, fontSize: stri
  * @returns Array of lines
  */
 export declare function wrapText(text: string, maxWidth: number, fontSize: string | number, fontFamily: string, fontWeight: string, svg: SVGSVGElement): string[];
+export declare function getContrastTextColor(backgroundColor: string, lightTextColor?: string, darkTextColor?: string): string;
+export declare function mergeDeep<T extends Record<string, unknown>>(base: T, override?: Partial<T>): T;

package/utils.js

@@ -168,3 +168,63 @@ export function wrapText(text, maxWidth, fontSize, fontFamily, fontWeight, svg)
     }
     return lines.length > 0 ? lines : [text];
 }
+function parseColorToRGB(color) {
+    const normalizedColor = color.trim();
+    if (normalizedColor.startsWith('#')) {
+        const hex = normalizedColor.slice(1);
+        if (hex.length === 3) {
+            const r = parseInt(hex[0] + hex[0], 16);
+            const g = parseInt(hex[1] + hex[1], 16);
+            const b = parseInt(hex[2] + hex[2], 16);
+            return { r, g, b };
+        }
+        if (hex.length === 6) {
+            const r = parseInt(hex.slice(0, 2), 16);
+            const g = parseInt(hex.slice(2, 4), 16);
+            const b = parseInt(hex.slice(4, 6), 16);
+            return { r, g, b };
+        }
+    }
+    if (normalizedColor.startsWith('rgb')) {
+        const matches = normalizedColor.match(/\d+/g);
+        if (matches && matches.length >= 3) {
+            return {
+                r: parseInt(matches[0], 10),
+                g: parseInt(matches[1], 10),
+                b: parseInt(matches[2], 10),
+            };
+        }
+    }
+    // Fallback matches legend behavior: unknown colors are treated as dark.
+    return { r: 0, g: 0, b: 0 };
+}
+export function getContrastTextColor(backgroundColor, lightTextColor = '#fff', darkTextColor = '#000') {
+    const { r, g, b } = parseColorToRGB(backgroundColor);
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    if (luminance > 0.5) {
+        return darkTextColor;
+    }
+    return lightTextColor;
+}
+export function mergeDeep(base, override) {
+    if (!override) {
+        return { ...base };
+    }
+    const result = { ...base };
+    Object.keys(override).forEach((key) => {
+        const overrideValue = override[key];
+        const baseValue = base[key];
+        if (overrideValue &&
+            typeof overrideValue === 'object' &&
+            !Array.isArray(overrideValue) &&
+            baseValue &&
+            typeof baseValue === 'object' &&
+            !Array.isArray(baseValue)) {
+            result[key] = mergeDeep(baseValue, overrideValue);
+        }
+        else if (overrideValue !== undefined) {
+            result[key] = overrideValue;
+        }
+    });
+    return result;
+}

package/x-axis.d.ts

@@ -1,7 +1,7 @@
 import { type Selection } from 'd3';
-import type { XAxisConfig, ChartTheme, D3Scale } from './types.js';
+import type { XAxisConfig, ChartTheme, D3Scale, ExportHooks, XAxisConfigBase } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
-export declare class XAxis implements LayoutAwareComponent {
+export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     readonly type: "xAxis";
     readonly dataKey?: string;
     private readonly rotatedLabels;
@@ -15,7 +15,10 @@ export declare class XAxis implements LayoutAwareComponent {
     private readonly autoHideOverlapping;
     private readonly minLabelGap;
     private readonly preserveEndLabels;
+    readonly exportHooks?: ExportHooks<XAxisConfigBase>;
     constructor(config?: XAxisConfig);
+    getExportConfig(): XAxisConfigBase;
+    createExportComponent(override?: Partial<XAxisConfigBase>): LayoutAwareComponent;
     /**
      * Returns the space required by the x-axis
      */

package/x-axis.js

@@ -1,5 +1,5 @@
 import { axisBottom } from 'd3';
-import { measureTextWidth, truncateText, wrapText } from './utils.js';
+import { measureTextWidth, truncateText, wrapText, mergeDeep } from './utils.js';
 export class XAxis {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -81,6 +81,12 @@ export class XAxis {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "exportHooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.dataKey = config?.dataKey;
         this.rotatedLabels = config?.rotatedLabels ?? false;
         this.maxLabelWidth = config?.maxLabelWidth;
@@ -89,6 +95,26 @@ export class XAxis {
         this.autoHideOverlapping = config?.autoHideOverlapping ?? false;
         this.minLabelGap = config?.minLabelGap ?? 8;
         this.preserveEndLabels = config?.preserveEndLabels ?? true;
+        this.exportHooks = config?.exportHooks;
+    }
+    getExportConfig() {
+        return {
+            dataKey: this.dataKey,
+            rotatedLabels: this.rotatedLabels,
+            maxLabelWidth: this.maxLabelWidth,
+            oversizedBehavior: this.oversizedBehavior,
+            tickFormat: this.tickFormat,
+            autoHideOverlapping: this.autoHideOverlapping,
+            minLabelGap: this.minLabelGap,
+            preserveEndLabels: this.preserveEndLabels,
+        };
+    }
+    createExportComponent(override) {
+        const merged = mergeDeep(this.getExportConfig(), override);
+        return new XAxis({
+            ...merged,
+            exportHooks: this.exportHooks,
+        });
     }
     /**
      * Returns the space required by the x-axis
@@ -153,10 +179,8 @@ export class XAxis {
         const textHeight = lineHeight * maxLines;
         if (this.rotatedLabels) {
             const radians = Math.PI / 4;
-            const verticalFootprint = Math.sin(radians) * maxWidth +
-                Math.cos(radians) * textHeight;
-            this.estimatedHeight =
-                this.tickPadding + verticalFootprint + 5;
+            const verticalFootprint = Math.sin(radians) * maxWidth + Math.cos(radians) * textHeight;
+            this.estimatedHeight = this.tickPadding + verticalFootprint + 5;
         }
         else {
             this.estimatedHeight = this.tickPadding + textHeight + 5;

package/xy-chart.d.ts

@@ -10,6 +10,8 @@ export declare class XYChart extends BaseChart {
     private barStackGap;
     constructor(config: XYChartConfig);
     addChild(component: ChartComponent): this;
+    protected getExportComponents(): ChartComponent[];
+    protected createExportChart(): BaseChart;
     private rerender;
     protected prepareLayout(): void;
     protected renderChart(): void;

package/xy-chart.js

@@ -68,6 +68,40 @@ export class XYChart extends BaseChart {
         }
         return this;
     }
+    getExportComponents() {
+        const components = [];
+        if (this.title) {
+            components.push(this.title);
+        }
+        if (this.grid) {
+            components.push(this.grid);
+        }
+        components.push(...this.series);
+        if (this.xAxis) {
+            components.push(this.xAxis);
+        }
+        if (this.yAxis) {
+            components.push(this.yAxis);
+        }
+        if (this.tooltip) {
+            components.push(this.tooltip);
+        }
+        if (this.legend) {
+            components.push(this.legend);
+        }
+        return components;
+    }
+    createExportChart() {
+        return new XYChart({
+            data: this.data,
+            theme: this.theme,
+            scales: this.scaleConfig,
+            barStack: {
+                mode: this.barStackMode,
+                gap: this.barStackGap,
+            },
+        });
+    }
     rerender() {
         this.update(this.data);
     }

package/y-axis.d.ts

@@ -1,7 +1,7 @@
 import { type Selection } from 'd3';
-import type { ChartTheme, YAxisConfig, D3Scale } from './types.js';
+import type { ChartTheme, YAxisConfig, D3Scale, ExportHooks, YAxisConfigBase } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
-export declare class YAxis implements LayoutAwareComponent {
+export declare class YAxis implements LayoutAwareComponent<YAxisConfigBase> {
     readonly type: "yAxis";
     private readonly tickPadding;
     private readonly fontSize;
@@ -9,7 +9,10 @@ export declare class YAxis implements LayoutAwareComponent {
     private readonly tickFormat;
     private readonly rotatedLabels;
     private readonly oversizedBehavior;
+    readonly exportHooks?: ExportHooks<YAxisConfigBase>;
     constructor(config?: YAxisConfig);
+    getExportConfig(): YAxisConfigBase;
+    createExportComponent(override?: Partial<YAxisConfigBase>): LayoutAwareComponent;
     /**
      * Returns the space required by the y-axis
      */

package/y-axis.js

@@ -1,5 +1,5 @@
 import { axisLeft } from 'd3';
-import { measureTextWidth, truncateText, wrapText } from './utils.js';
+import { measureTextWidth, truncateText, wrapText, mergeDeep } from './utils.js';
 export class YAxis {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -45,10 +45,32 @@ export class YAxis {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "exportHooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.tickFormat = config?.tickFormat ?? null;
         this.rotatedLabels = config?.rotatedLabels ?? false;
         this.maxLabelWidth = config?.maxLabelWidth ?? 40; // Default 40 for backward compatibility
         this.oversizedBehavior = config?.oversizedBehavior ?? 'truncate';
+        this.exportHooks = config?.exportHooks;
+    }
+    getExportConfig() {
+        return {
+            tickFormat: this.tickFormat,
+            rotatedLabels: this.rotatedLabels,
+            maxLabelWidth: this.maxLabelWidth,
+            oversizedBehavior: this.oversizedBehavior,
+        };
+    }
+    createExportComponent(override) {
+        const merged = mergeDeep(this.getExportConfig(), override);
+        return new YAxis({
+            ...merged,
+            exportHooks: this.exportHooks,
+        });
     }
     /**
      * Returns the space required by the y-axis