@internetstiftelsen/charts 0.9.2 → 0.10.0

package/dist/chart-group.js

@@ -0,0 +1,1097 @@
+import { create } from 'd3';
+import { exportRasterBlob } from './export-image.js';
+import { exportPDFBlob } from './export-pdf.js';
+import { LegendStateController } from './legend-state.js';
+import { DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, defaultTheme, } from './theme.js';
+import { ChartValidator } from './validation.js';
+import { mergeDeep } from './utils.js';
+import { XYChart } from './xy-chart.js';
+function normalizePositiveInteger(value, name) {
+    if (!Number.isInteger(value) || value <= 0) {
+        throw new Error(`${name} must be a positive integer`);
+    }
+    return value;
+}
+function normalizeFiniteNumber(value, name) {
+    if (!Number.isFinite(value)) {
+        throw new Error(`${name} must be a finite number`);
+    }
+    return value;
+}
+function normalizeNonNegativeNumber(value, name) {
+    if (!Number.isFinite(value) || value < 0) {
+        throw new Error(`${name} must be a non-negative finite number`);
+    }
+    return value;
+}
+function normalizeOptionalHeight(value, name) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (!Number.isFinite(value) || value <= 0) {
+        throw new Error(`${name} must be a positive finite number`);
+    }
+    return value;
+}
+function normalizeOptionalItemHeight(value) {
+    return normalizeOptionalHeight(value, 'ChartGroup item height');
+}
+function normalizeBreakpointRange(definition) {
+    if (typeof definition === 'number') {
+        return Number.isFinite(definition) ? { minWidth: definition } : null;
+    }
+    if (!definition || typeof definition !== 'object') {
+        return null;
+    }
+    const minWidth = Number.isFinite(definition.minWidth)
+        ? definition.minWidth
+        : undefined;
+    const maxWidth = Number.isFinite(definition.maxWidth)
+        ? definition.maxWidth
+        : undefined;
+    if (minWidth === undefined && maxWidth === undefined) {
+        return null;
+    }
+    return {
+        minWidth,
+        maxWidth,
+    };
+}
+function normalizeChartGroupBreakpoint(definition) {
+    const range = normalizeBreakpointRange(definition);
+    if (!range) {
+        return null;
+    }
+    if (typeof definition === 'number') {
+        return range;
+    }
+    return {
+        ...definition,
+        ...range,
+    };
+}
+function normalizeChartGroupItemBreakpoint(definition) {
+    const range = normalizeBreakpointRange(definition);
+    if (!range) {
+        return null;
+    }
+    if (typeof definition === 'number') {
+        return range;
+    }
+    return {
+        ...definition,
+        ...range,
+    };
+}
+function matchesBreakpoint(width, config) {
+    const matchesMinWidth = config.minWidth === undefined || width >= config.minWidth;
+    const matchesMaxWidth = config.maxWidth === undefined || width <= config.maxWidth;
+    return matchesMinWidth && matchesMaxWidth;
+}
+export class ChartGroup {
+    constructor(config) {
+        Object.defineProperty(this, "cols", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "gap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "syncY", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "configuredHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "chartHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "theme", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "responsiveConfig", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "charts", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "legendState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new LegendStateController()
+        });
+        Object.defineProperty(this, "renderCallbacks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "warnedWidthCharts", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new WeakSet()
+        });
+        Object.defineProperty(this, "warnedColorConflicts", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Set()
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "legend", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "title", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "resizeObserver", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "readyPromise", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: Promise.resolve()
+        });
+        Object.defineProperty(this, "childLegendSnapshot", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "childYDomainSnapshot", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "isRendering", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "isSyncingLegend", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "hasWarnedIncompatibleYScaleTypes", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        this.cols = normalizePositiveInteger(config.cols, 'ChartGroup cols');
+        this.gap = normalizeNonNegativeNumber(config.gap ?? 20, 'ChartGroup gap');
+        this.syncY = config.syncY ?? false;
+        this.configuredHeight = normalizeOptionalHeight(config.height, 'ChartGroup height');
+        this.chartHeight = normalizeNonNegativeNumber(config.chartHeight ?? DEFAULT_CHART_HEIGHT, 'ChartGroup chartHeight');
+        this.theme = mergeDeep(defaultTheme, config.theme);
+        this.responsiveConfig = config.responsive;
+        this.validateResponsiveConfig(this.responsiveConfig);
+        this.legendState.subscribe(() => {
+            if (this.isSyncingLegend) {
+                return;
+            }
+            this.applyLegendStateToChildren();
+            this.renderLegendIntoContainer();
+            this.childLegendSnapshot = this.serializeChildLegendState(this.resolveCurrentWidth());
+        });
+    }
+    addChart(chart, options) {
+        const span = normalizePositiveInteger(options?.span ?? 1, 'ChartGroup span');
+        const height = normalizeOptionalItemHeight(options?.height);
+        const hidden = options?.hidden ?? false;
+        const order = normalizeFiniteNumber(options?.order ?? this.charts.length, 'ChartGroup order');
+        this.warnOnExplicitChildWidth(chart);
+        chart.setLegendModeOverride('hidden', false);
+        this.validateItemResponsiveConfig(options?.responsive);
+        this.charts.push({
+            chart,
+            span,
+            height,
+            hidden,
+            order,
+            responsive: options?.responsive,
+        });
+        this.bindChartRenderCallback(chart);
+        if (this.container) {
+            this.refresh();
+        }
+        return this;
+    }
+    addChild(component) {
+        if (component.type === 'title') {
+            this.title = component;
+            if (this.container) {
+                this.refresh();
+            }
+            return this;
+        }
+        if (component.type === 'legend') {
+            const legend = component;
+            if (legend.mode === 'disconnected') {
+                throw new Error('ChartGroup does not support disconnected legends in v1');
+            }
+            legend.setStateController(this.legendState);
+            this.legend = legend;
+            if (this.container) {
+                this.refresh();
+            }
+            return this;
+        }
+        throw new Error('ChartGroup only supports Title and Legend via addChild()');
+    }
+    render(target) {
+        this.container = this.resolveContainer(target);
+        this.refresh();
+        this.setupResizeObserver();
+        return this.container;
+    }
+    refresh() {
+        if (!this.container) {
+            return null;
+        }
+        const container = this.container;
+        const containerRect = container.getBoundingClientRect();
+        const width = this.resolveContainerWidth(container);
+        const renderedTitle = this.renderTitleSvg(width);
+        const renderedLegend = this.renderLegendSvg(width);
+        const totalHeightConstraint = this.resolveTotalHeightConstraint(containerRect);
+        const chartAreaHeight = totalHeightConstraint === undefined
+            ? undefined
+            : Math.max(1, totalHeightConstraint -
+                (renderedTitle?.height ?? 0) -
+                (renderedLegend?.height ?? 0));
+        const layout = this.calculateLayout(width, chartAreaHeight);
+        const totalHeight = (renderedTitle?.height ?? 0) +
+            layout.chartHeight +
+            (renderedLegend?.height ?? 0);
+        this.isRendering = true;
+        try {
+            this.applyScaleSyncOverrides(width);
+            container.innerHTML = '';
+            const root = document.createElement('div');
+            root.className = 'chart-group';
+            root.style.width = '100%';
+            root.style.height = `${totalHeight}px`;
+            if (renderedTitle) {
+                const titleHost = document.createElement('div');
+                titleHost.className = 'chart-group__title';
+                titleHost.style.width = '100%';
+                titleHost.appendChild(renderedTitle.svg);
+                root.appendChild(titleHost);
+            }
+            const chartLayer = document.createElement('div');
+            chartLayer.className = 'chart-group__charts';
+            chartLayer.style.position = 'relative';
+            chartLayer.style.width = '100%';
+            chartLayer.style.height = `${layout.chartHeight}px`;
+            root.appendChild(chartLayer);
+            container.appendChild(root);
+            layout.items.forEach((item) => {
+                const chartHost = document.createElement('div');
+                chartHost.className = 'chart-group__item';
+                chartHost.style.position = 'absolute';
+                chartHost.style.left = `${item.x}px`;
+                chartHost.style.top = `${item.y}px`;
+                chartHost.style.width = `${item.width}px`;
+                chartHost.style.height = `${item.height}px`;
+                Object.defineProperty(chartHost, 'getBoundingClientRect', {
+                    configurable: true,
+                    value: () => {
+                        return {
+                            x: item.x,
+                            y: item.y,
+                            top: item.y,
+                            left: item.x,
+                            right: item.x + item.width,
+                            bottom: item.y + item.height,
+                            width: item.width,
+                            height: item.height,
+                            toJSON: () => ({}),
+                        };
+                    },
+                });
+                chartLayer.appendChild(chartHost);
+                item.chart.setLegendModeOverride('hidden', false);
+                item.chart.render(chartHost);
+            });
+            if (renderedLegend) {
+                const legendHost = document.createElement('div');
+                legendHost.className = 'chart-group__legend';
+                legendHost.style.width = '100%';
+                legendHost.appendChild(renderedLegend.svg);
+                root.appendChild(legendHost);
+            }
+            this.readyPromise = Promise.all(this.charts.map(({ chart }) => chart.whenReady())).then(() => undefined);
+            this.syncLegendStateFromChildren();
+            this.childYDomainSnapshot = this.serializeChildYDomains(width);
+        }
+        finally {
+            this.isRendering = false;
+        }
+        return container;
+    }
+    whenReady() {
+        return this.readyPromise;
+    }
+    getLegendItems() {
+        return this.getLegendItemsForWidth(this.resolveCurrentWidth());
+    }
+    getLegendItemsForWidth(width) {
+        return this.collectMergedLegendEntries(width).map((entry) => {
+            return {
+                dataKey: entry.dataKey,
+                color: entry.color,
+                visible: this.resolveLegendVisibility(entry),
+            };
+        });
+    }
+    isLegendSeriesVisible(dataKey) {
+        return this.legendState.isSeriesVisible(dataKey);
+    }
+    setLegendSeriesVisible(dataKey, visible) {
+        this.legendState.setSeriesVisible(dataKey, visible);
+        return this;
+    }
+    toggleLegendSeries(dataKey) {
+        this.legendState.toggleSeries(dataKey);
+        return this;
+    }
+    setLegendVisibility(visibility) {
+        this.legendState.setVisibilityMap(visibility);
+        return this;
+    }
+    onLegendChange(callback) {
+        return this.legendState.subscribe(callback);
+    }
+    async export(format, options) {
+        if (!this.container) {
+            throw new Error('ChartGroup must be rendered before export()');
+        }
+        if (options?.height !== undefined) {
+            throw new Error('ChartGroup export height is layout-derived and cannot be overridden in v1');
+        }
+        await this.whenReady();
+        const width = options?.width ?? this.resolveContainerWidth(this.container);
+        const { svg, height } = await this.exportSVG(width, options);
+        let content = svg;
+        if (format === 'png' || format === 'jpg') {
+            content = await exportRasterBlob({
+                format,
+                svg,
+                width,
+                height,
+                pixelRatio: options?.pixelRatio ?? 1,
+                backgroundColor: options?.backgroundColor,
+                jpegQuality: options?.jpegQuality ?? 0.92,
+            });
+        }
+        if (format === 'pdf') {
+            const pngBlob = await exportRasterBlob({
+                format: 'png',
+                svg,
+                width,
+                height,
+                pixelRatio: options?.pixelRatio ?? 1,
+                backgroundColor: options?.backgroundColor,
+                jpegQuality: options?.jpegQuality ?? 0.92,
+            });
+            content = await exportPDFBlob(pngBlob, {
+                width,
+                height,
+                margin: options?.pdfMargin ?? 0,
+            });
+        }
+        if (options?.download) {
+            this.downloadContent(content, format, options);
+            return;
+        }
+        return content;
+    }
+    destroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        this.renderCallbacks.forEach((cleanup) => {
+            cleanup();
+        });
+        this.renderCallbacks.clear();
+        this.charts.forEach(({ chart }) => {
+            chart.setLegendModeOverride(null, false);
+            if (chart instanceof XYChart) {
+                chart.setScaleConfigOverride(null, false);
+            }
+            chart.destroy();
+        });
+        if (this.container) {
+            this.container.innerHTML = '';
+        }
+        this.container = null;
+        this.childLegendSnapshot = '';
+        this.childYDomainSnapshot = '';
+    }
+    bindChartRenderCallback(chart) {
+        if (this.renderCallbacks.has(chart)) {
+            return;
+        }
+        const cleanup = chart.onRender(() => {
+            if (this.isRendering || this.isSyncingLegend || !this.container) {
+                return;
+            }
+            if (this.syncY) {
+                const nextYDomainSnapshot = this.serializeChildYDomains(this.resolveCurrentWidth());
+                if (nextYDomainSnapshot !== this.childYDomainSnapshot) {
+                    this.refresh();
+                    return;
+                }
+            }
+            const nextSnapshot = this.serializeChildLegendState(this.resolveCurrentWidth());
+            if (nextSnapshot === this.childLegendSnapshot) {
+                return;
+            }
+            this.refresh();
+        });
+        this.renderCallbacks.set(chart, cleanup);
+    }
+    resolveContainer(target) {
+        if (target instanceof HTMLElement) {
+            return target;
+        }
+        const container = document.querySelector(target);
+        if (!container) {
+            throw new Error(`Container "${target}" not found`);
+        }
+        if (!(container instanceof HTMLElement)) {
+            throw new Error(`Container "${target}" is not an HTMLElement`);
+        }
+        return container;
+    }
+    resolveContainerWidth(container) {
+        return container.getBoundingClientRect().width || DEFAULT_CHART_WIDTH;
+    }
+    resolveCurrentWidth() {
+        if (this.container) {
+            return this.resolveContainerWidth(this.container);
+        }
+        return DEFAULT_CHART_WIDTH;
+    }
+    resolveTotalHeightConstraint(containerRect) {
+        if (this.configuredHeight !== undefined) {
+            return this.configuredHeight;
+        }
+        return containerRect.height > 0 ? containerRect.height : undefined;
+    }
+    resolveChartAreaHeightConstraint(totalHeightConstraint, titleHeight, legendHeight) {
+        if (totalHeightConstraint === undefined) {
+            return undefined;
+        }
+        return Math.max(1, totalHeightConstraint - titleHeight - legendHeight);
+    }
+    resolveSpan(span, cols) {
+        return Math.min(span, cols);
+    }
+    warnOnExplicitChildWidth(chart) {
+        const configuredWidth = chart.getConfiguredSize().width;
+        if (configuredWidth === undefined ||
+            this.warnedWidthCharts.has(chart)) {
+            return;
+        }
+        this.warnedWidthCharts.add(chart);
+        ChartValidator.warn('ChartGroup: explicit child chart widths are ignored inside grouped layouts');
+    }
+    getAllVerticalXYCharts() {
+        return this.charts
+            .map(({ chart }) => chart)
+            .filter((chart) => chart instanceof XYChart)
+            .filter((chart) => chart.getOrientation() === 'vertical');
+    }
+    getVerticalXYCharts(width) {
+        return this.resolveVisibleChartEntries(width)
+            .map(({ chart }) => chart)
+            .filter((chart) => chart instanceof XYChart)
+            .filter((chart) => chart.getOrientation() === 'vertical');
+    }
+    resolveSharedYDomain(width) {
+        if (!this.syncY) {
+            return null;
+        }
+        const charts = this.getVerticalXYCharts(width);
+        const domains = [];
+        let sharedScaleType = null;
+        for (const chart of charts) {
+            const scaleType = chart.getValueAxisScaleType();
+            if (scaleType !== 'linear' && scaleType !== 'log') {
+                this.warnIncompatibleYScaleTypes();
+                return null;
+            }
+            if (sharedScaleType === null) {
+                sharedScaleType = scaleType;
+            }
+            else if (sharedScaleType !== scaleType) {
+                this.warnIncompatibleYScaleTypes();
+                return null;
+            }
+            const domain = chart.getBaseValueAxisDomain();
+            if (!domain) {
+                continue;
+            }
+            domains.push(domain);
+        }
+        if (domains.length === 0) {
+            return null;
+        }
+        return [
+            Math.min(...domains.map((domain) => domain[0])),
+            Math.max(...domains.map((domain) => domain[1])),
+        ];
+    }
+    warnIncompatibleYScaleTypes() {
+        if (this.hasWarnedIncompatibleYScaleTypes) {
+            return;
+        }
+        this.hasWarnedIncompatibleYScaleTypes = true;
+        ChartValidator.warn('ChartGroup: syncY requires all synced XY child charts to use the same vertical numeric scale type');
+    }
+    applyScaleSyncOverrides(width) {
+        const syncedCharts = new Set(this.getVerticalXYCharts(width));
+        const sharedDomain = this.resolveSharedYDomain(width);
+        this.getAllVerticalXYCharts().forEach((chart) => {
+            if (!sharedDomain || !syncedCharts.has(chart)) {
+                chart.setScaleConfigOverride(null, false);
+                return;
+            }
+            chart.setScaleConfigOverride({
+                y: {
+                    domain: sharedDomain,
+                    nice: false,
+                },
+            }, false);
+        });
+    }
+    buildRows(entries, width, cols, gap) {
+        const availableWidth = Math.max(1, width - gap * Math.max(0, cols - 1));
+        const columnWidth = availableWidth / cols;
+        const rows = [];
+        let currentRow = [];
+        let currentCol = 0;
+        let currentX = 0;
+        entries.forEach((entry) => {
+            const span = this.resolveSpan(entry.span, cols);
+            if (currentRow.length > 0 && currentCol + span > cols) {
+                rows.push(currentRow);
+                currentRow = [];
+                currentCol = 0;
+                currentX = 0;
+            }
+            const itemWidth = columnWidth * span + gap * (span - 1);
+            currentRow.push({
+                ...entry,
+                span,
+                width: itemWidth,
+                x: currentX,
+            });
+            currentCol += span;
+            currentX += itemWidth + gap;
+            if (currentCol >= cols) {
+                rows.push(currentRow);
+                currentRow = [];
+                currentCol = 0;
+                currentX = 0;
+            }
+        });
+        if (currentRow.length > 0) {
+            rows.push(currentRow);
+        }
+        return rows;
+    }
+    resolveDefaultChartHeight(rowCount, gap, availableChartHeight) {
+        if (availableChartHeight === undefined || rowCount === 0) {
+            return this.chartHeight;
+        }
+        return Math.max(1, (availableChartHeight - gap * Math.max(0, rowCount - 1)) / rowCount);
+    }
+    resolveDefaultChartHeightForWidth(width, availableChartHeight) {
+        const resolvedConfig = this.resolveResponsiveConfigForWidth(width);
+        const entries = this.resolveVisibleChartEntries(width, resolvedConfig);
+        const rows = this.buildRows(entries, width, resolvedConfig.cols, resolvedConfig.gap);
+        return this.resolveDefaultChartHeight(rows.length, resolvedConfig.gap, availableChartHeight);
+    }
+    calculateLayout(width, availableChartHeight, defaultChartHeightOverride) {
+        const resolvedConfig = this.resolveResponsiveConfigForWidth(width);
+        const entries = this.resolveVisibleChartEntries(width, resolvedConfig);
+        const rows = this.buildRows(entries, width, resolvedConfig.cols, resolvedConfig.gap);
+        const defaultChartHeight = defaultChartHeightOverride ??
+            this.resolveDefaultChartHeight(rows.length, resolvedConfig.gap, availableChartHeight);
+        const items = [];
+        let currentY = 0;
+        rows.forEach((row, rowIndex) => {
+            const rowHeight = Math.max(...row.map((item) => {
+                return (item.height ??
+                    item.chart.getConfiguredSize().height ??
+                    defaultChartHeight);
+            }), 0);
+            row.forEach((item) => {
+                items.push({
+                    ...item,
+                    height: item.height ??
+                        item.chart.getConfiguredSize().height ??
+                        defaultChartHeight,
+                    y: currentY,
+                });
+            });
+            currentY += rowHeight;
+            if (rowIndex < rows.length - 1) {
+                currentY += resolvedConfig.gap;
+            }
+        });
+        return {
+            items,
+            chartHeight: currentY,
+            totalHeight: currentY,
+            width,
+        };
+    }
+    collectMergedLegendEntries(width) {
+        const entries = [];
+        const seen = new Map();
+        this.resolveVisibleChartEntries(width).forEach(({ chart }) => {
+            chart.getLegendItems().forEach((item) => {
+                const existing = seen.get(item.dataKey);
+                if (!existing) {
+                    const entry = {
+                        dataKey: item.dataKey,
+                        color: item.color,
+                        fallbackVisible: item.visible,
+                    };
+                    entries.push(entry);
+                    seen.set(item.dataKey, entry);
+                    return;
+                }
+                if (existing.color !== item.color &&
+                    !this.warnedColorConflicts.has(item.dataKey)) {
+                    this.warnedColorConflicts.add(item.dataKey);
+                    ChartValidator.warn(`ChartGroup: legend key "${item.dataKey}" has conflicting colors across child charts; using the first color`);
+                }
+            });
+        });
+        return entries;
+    }
+    resolveLegendVisibility(entry) {
+        if (this.legendState.hasSeries(entry.dataKey)) {
+            return this.legendState.isSeriesVisible(entry.dataKey);
+        }
+        return entry.fallbackVisible;
+    }
+    syncLegendStateFromChildren() {
+        this.isSyncingLegend = true;
+        try {
+            const width = this.resolveCurrentWidth();
+            const entries = this.collectMergedLegendEntries(width);
+            const visibility = {};
+            entries.forEach((entry) => {
+                visibility[entry.dataKey] = this.resolveLegendVisibility(entry);
+            });
+            this.legendState.setVisibilityMap(visibility, { silent: true });
+            this.applyLegendStateToChildren();
+            this.renderLegendIntoContainer();
+            this.childLegendSnapshot = this.serializeChildLegendState(width);
+        }
+        finally {
+            this.isSyncingLegend = false;
+        }
+    }
+    applyLegendStateToChildren() {
+        this.isSyncingLegend = true;
+        try {
+            const visibility = this.legendState.toVisibilityMap();
+            this.charts.forEach(({ chart }) => {
+                chart.getLegendItems().forEach((item) => {
+                    const nextVisible = visibility[item.dataKey];
+                    if (nextVisible === undefined ||
+                        item.visible === nextVisible) {
+                        return;
+                    }
+                    chart.setLegendSeriesVisible(item.dataKey, nextVisible);
+                });
+            });
+        }
+        finally {
+            this.isSyncingLegend = false;
+        }
+    }
+    serializeChildLegendState(width) {
+        return this.resolveVisibleChartEntries(width)
+            .map(({ chart }, chartIndex) => {
+            const items = chart.getLegendItems().map((item) => {
+                return `${item.dataKey}:${item.color}:${item.visible}`;
+            });
+            return `${chartIndex}[${items.join(',')}]`;
+        })
+            .join('|');
+    }
+    serializeChildYDomains(width) {
+        return this.getVerticalXYCharts(width)
+            .map((chart, index) => {
+            const scaleType = chart.getValueAxisScaleType() ?? 'none';
+            const domain = chart.getBaseValueAxisDomain();
+            return `${index}:${scaleType}:${domain?.join(',') ?? ''}`;
+        })
+            .join('|');
+    }
+    renderLegendIntoContainer() {
+        if (!this.container) {
+            return;
+        }
+        const root = this.container.querySelector('.chart-group');
+        if (!root) {
+            return;
+        }
+        const existingLegendHost = root.querySelector('.chart-group__legend');
+        existingLegendHost?.remove();
+        const renderedLegend = this.renderLegendSvg(this.resolveContainerWidth(this.container));
+        if (!renderedLegend) {
+            return;
+        }
+        const legendHost = document.createElement('div');
+        legendHost.className = 'chart-group__legend';
+        legendHost.style.width = '100%';
+        legendHost.appendChild(renderedLegend.svg);
+        root.appendChild(legendHost);
+    }
+    renderTitleSvg(width) {
+        if (!this.title || !this.title.display) {
+            return null;
+        }
+        const height = Math.max(1, this.title.getRequiredSpace().height);
+        const svg = create('svg')
+            .attr('width', width)
+            .attr('height', height)
+            .style('display', 'block');
+        const svgNode = svg.node();
+        if (!svgNode) {
+            return null;
+        }
+        this.title.render(svg, this.theme, width);
+        return {
+            height,
+            svg: svgNode,
+        };
+    }
+    renderLegendSvg(width) {
+        if (!this.legend || this.legend.mode === 'hidden') {
+            return null;
+        }
+        const items = this.getLegendItemsForWidth(width);
+        if (items.length === 0) {
+            return null;
+        }
+        const tempHost = document.createElement('div');
+        tempHost.style.position = 'absolute';
+        tempHost.style.left = '-99999px';
+        tempHost.style.top = '0';
+        tempHost.style.visibility = 'hidden';
+        document.body.appendChild(tempHost);
+        const svg = create('svg')
+            .attr('width', width)
+            .style('display', 'block');
+        const svgNode = svg.node();
+        if (!svgNode) {
+            document.body.removeChild(tempHost);
+            return null;
+        }
+        tempHost.appendChild(svgNode);
+        try {
+            const series = items.map((item) => {
+                return {
+                    dataKey: item.dataKey,
+                    fill: item.color,
+                };
+            });
+            this.legend.estimateLayoutSpace(series, this.theme, width, svgNode);
+            const height = Math.max(1, this.legend.getMeasuredHeight());
+            svg.attr('height', height);
+            this.legend.render(svg, series, this.theme, width);
+            return {
+                height,
+                svg: svgNode,
+            };
+        }
+        finally {
+            document.body.removeChild(tempHost);
+        }
+    }
+    setupResizeObserver() {
+        if (!this.container) {
+            return;
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            this.refresh();
+        });
+        this.resizeObserver.observe(this.container);
+    }
+    async exportSVG(width, options) {
+        this.applyScaleSyncOverrides(width);
+        const renderedTitle = this.renderTitleSvg(width);
+        const renderedLegend = this.renderLegendSvg(width);
+        const titleHeight = renderedTitle?.height ?? 0;
+        const legendHeight = renderedLegend?.height ?? 0;
+        let chartAreaHeight;
+        let defaultChartHeightOverride;
+        if (this.configuredHeight !== undefined) {
+            chartAreaHeight = this.resolveChartAreaHeightConstraint(this.configuredHeight, titleHeight, legendHeight);
+        }
+        else if (this.container) {
+            const liveWidth = this.resolveContainerWidth(this.container);
+            const liveTitle = this.renderTitleSvg(liveWidth);
+            const liveLegend = this.renderLegendSvg(liveWidth);
+            const liveChartAreaHeight = this.resolveChartAreaHeightConstraint(this.resolveTotalHeightConstraint(this.container.getBoundingClientRect()), liveTitle?.height ?? 0, liveLegend?.height ?? 0);
+            if (liveChartAreaHeight !== undefined) {
+                defaultChartHeightOverride =
+                    this.resolveDefaultChartHeightForWidth(liveWidth, liveChartAreaHeight);
+            }
+        }
+        const layout = this.calculateLayout(width, chartAreaHeight, defaultChartHeightOverride);
+        const childSvgs = await Promise.all(layout.items.map(async (item) => {
+            const svg = await item.chart.export('svg', {
+                ...options,
+                width: item.width,
+                height: item.height,
+                download: false,
+            });
+            if (typeof svg !== 'string') {
+                throw new Error('ChartGroup child export did not return SVG');
+            }
+            return {
+                ...item,
+                svg,
+            };
+        }));
+        const totalHeight = titleHeight + layout.chartHeight + legendHeight;
+        const parser = new DOMParser();
+        const exportSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        exportSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        exportSvg.setAttribute('width', String(width));
+        exportSvg.setAttribute('height', String(totalHeight));
+        exportSvg.setAttribute('role', 'img');
+        exportSvg.setAttribute('aria-label', this.title?.text.trim() || 'Chart group');
+        if (renderedTitle) {
+            renderedTitle.svg.setAttribute('x', '0');
+            renderedTitle.svg.setAttribute('y', '0');
+            exportSvg.appendChild(document.importNode(renderedTitle.svg, true));
+        }
+        childSvgs.forEach((item) => {
+            const parsed = parser.parseFromString(item.svg, 'image/svg+xml');
+            const childSvg = parsed.documentElement;
+            const imported = document.importNode(childSvg, true);
+            imported.setAttribute('x', String(item.x));
+            imported.setAttribute('y', String(titleHeight + item.y));
+            imported.setAttribute('width', String(item.width));
+            imported.setAttribute('height', String(item.height));
+            exportSvg.appendChild(imported);
+        });
+        if (renderedLegend) {
+            renderedLegend.svg.setAttribute('x', '0');
+            renderedLegend.svg.setAttribute('y', String(titleHeight + layout.chartHeight));
+            exportSvg.appendChild(document.importNode(renderedLegend.svg, true));
+        }
+        return {
+            svg: exportSvg.outerHTML,
+            height: totalHeight,
+        };
+    }
+    validateResponsiveConfig(responsive) {
+        const breakpoints = responsive?.breakpoints;
+        if (!breakpoints) {
+            return;
+        }
+        Object.entries(breakpoints).forEach(([name, definition]) => {
+            const config = normalizeChartGroupBreakpoint(definition);
+            if (!config) {
+                return;
+            }
+            if (config.cols !== undefined) {
+                normalizePositiveInteger(config.cols, `ChartGroup breakpoint "${name}" cols`);
+            }
+            if (config.gap !== undefined) {
+                normalizeNonNegativeNumber(config.gap, `ChartGroup breakpoint "${name}" gap`);
+            }
+        });
+    }
+    validateItemResponsiveConfig(responsive) {
+        const breakpoints = responsive?.breakpoints;
+        if (!breakpoints) {
+            return;
+        }
+        Object.entries(breakpoints).forEach(([name, definition]) => {
+            const config = normalizeChartGroupItemBreakpoint(definition);
+            if (!config) {
+                return;
+            }
+            if (config.span !== undefined) {
+                normalizePositiveInteger(config.span, `ChartGroup item breakpoint "${name}" span`);
+            }
+            if (config.height !== undefined) {
+                normalizeOptionalHeight(config.height, `ChartGroup item breakpoint "${name}" height`);
+            }
+            if (config.order !== undefined) {
+                normalizeFiniteNumber(config.order, `ChartGroup item breakpoint "${name}" order`);
+            }
+        });
+    }
+    resolveResponsiveConfigForWidth(width) {
+        let cols = this.cols;
+        let gap = this.gap;
+        const matchedBreakpoints = this.resolveMatchedGroupBreakpoints(width);
+        matchedBreakpoints.forEach(({ config, name }) => {
+            if (config.cols !== undefined) {
+                cols = normalizePositiveInteger(config.cols, `ChartGroup breakpoint "${name}" cols`);
+            }
+            if (config.gap !== undefined) {
+                gap = normalizeNonNegativeNumber(config.gap, `ChartGroup breakpoint "${name}" gap`);
+            }
+        });
+        return {
+            cols,
+            gap,
+            activeBreakpoints: matchedBreakpoints.map(({ name }) => name),
+            breakpoint: matchedBreakpoints.length > 0
+                ? matchedBreakpoints[matchedBreakpoints.length - 1].name
+                : null,
+        };
+    }
+    resolveMatchedGroupBreakpoints(width) {
+        const breakpoints = this.responsiveConfig?.breakpoints;
+        if (!breakpoints) {
+            return [];
+        }
+        return Object.entries(breakpoints).flatMap(([name, definition]) => {
+            const config = normalizeChartGroupBreakpoint(definition);
+            if (!config || !matchesBreakpoint(width, config)) {
+                return [];
+            }
+            return [{ name, config }];
+        });
+    }
+    resolveVisibleChartEntries(width, responsiveConfig = this.resolveResponsiveConfigForWidth(width)) {
+        const visibleEntries = this.charts.flatMap((entry, sourceIndex) => {
+            const resolvedEntry = this.resolveResponsiveChartEntry(entry, sourceIndex, width, responsiveConfig.cols);
+            return resolvedEntry ? [resolvedEntry] : [];
+        });
+        visibleEntries.sort((left, right) => {
+            if (left.order !== right.order) {
+                return left.order - right.order;
+            }
+            return left.sourceIndex - right.sourceIndex;
+        });
+        return visibleEntries;
+    }
+    resolveResponsiveChartEntry(entry, sourceIndex, width, cols) {
+        let span = entry.span;
+        let height = entry.height;
+        let hidden = entry.hidden;
+        let order = entry.order;
+        Object.entries(entry.responsive?.breakpoints ?? {}).forEach(([name, definition]) => {
+            const config = normalizeChartGroupItemBreakpoint(definition);
+            if (!config || !matchesBreakpoint(width, config)) {
+                return;
+            }
+            if (config.span !== undefined) {
+                span = normalizePositiveInteger(config.span, `ChartGroup item breakpoint "${name}" span`);
+            }
+            if (config.height !== undefined) {
+                height = normalizeOptionalHeight(config.height, `ChartGroup item breakpoint "${name}" height`);
+            }
+            if (config.hidden !== undefined) {
+                hidden = config.hidden;
+            }
+            if (config.order !== undefined) {
+                order = normalizeFiniteNumber(config.order, `ChartGroup item breakpoint "${name}" order`);
+            }
+        });
+        if (hidden) {
+            return null;
+        }
+        return {
+            ...entry,
+            span: this.resolveSpan(span, cols),
+            height,
+            hidden,
+            order,
+            sourceIndex,
+        };
+    }
+    downloadContent(content, format, options) {
+        const mimeType = this.getMimeType(format);
+        const blob = content instanceof Blob
+            ? content
+            : new Blob([content], { type: mimeType });
+        const filename = options.filename || `chart-group.${format}`;
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+    }
+    getMimeType(format) {
+        if (format === 'svg') {
+            return 'image/svg+xml';
+        }
+        if (format === 'png') {
+            return 'image/png';
+        }
+        if (format === 'jpg') {
+            return 'image/jpeg';
+        }
+        return 'application/pdf';
+    }
+}