@internetstiftelsen/charts 0.10.0 → 0.11.0

package/dist/base-chart.d.ts

@@ -105,6 +105,7 @@ export declare abstract class BaseChart {
      */
     private performRender;
     protected resolveRenderDimensions(containerRect: DOMRect): RenderDimensions;
+    private pushIfIncluded;
     private resolveAccessibleLabel;
     private syncAccessibleLabelFromSvg;
     protected resolveResponsiveContext(context: {
@@ -208,6 +209,10 @@ export declare abstract class BaseChart {
     private exportImage;
     private exportPDF;
     protected exportSVG(options?: ExportOptions, formatForHooks?: VisualExportFormat): Promise<string>;
+    private requireRenderedSvg;
+    private resolveExportContext;
+    private createExportSvgClone;
+    private populateExportChart;
     protected exportJSON(): string;
 }
 export {};

package/dist/base-chart.js

@@ -340,22 +340,34 @@ export class BaseChart {
         }
     }
     resolveRenderDimensions(containerRect) {
-        const width = this.renderSizeOverride?.width ??
-            this.configuredWidth ??
-            (containerRect.width || DEFAULT_CHART_WIDTH);
-        const height = this.renderSizeOverride?.height ??
-            this.configuredHeight ??
-            (containerRect.height || DEFAULT_CHART_HEIGHT);
-        return {
-            width,
-            height,
-            svgWidthAttr: this.renderSizeOverride?.width ??
-                this.configuredWidth ??
-                '100%',
-            svgHeightAttr: this.renderSizeOverride?.height ??
-                this.configuredHeight ??
-                '100%',
+        const dimensions = {
+            width: containerRect.width || DEFAULT_CHART_WIDTH,
+            height: containerRect.height || DEFAULT_CHART_HEIGHT,
+            svgWidthAttr: '100%',
+            svgHeightAttr: '100%',
         };
+        if (this.configuredWidth !== undefined) {
+            dimensions.width = this.configuredWidth;
+            dimensions.svgWidthAttr = this.configuredWidth;
+        }
+        if (this.configuredHeight !== undefined) {
+            dimensions.height = this.configuredHeight;
+            dimensions.svgHeightAttr = this.configuredHeight;
+        }
+        if (this.renderSizeOverride?.width !== undefined) {
+            dimensions.width = this.renderSizeOverride.width;
+            dimensions.svgWidthAttr = this.renderSizeOverride.width;
+        }
+        if (this.renderSizeOverride?.height !== undefined) {
+            dimensions.height = this.renderSizeOverride.height;
+            dimensions.svgHeightAttr = this.renderSizeOverride.height;
+        }
+        return dimensions;
+    }
+    pushIfIncluded(components, shouldInclude, component) {
+        if (shouldInclude && component) {
+            components.push(component);
+        }
     }
     resolveAccessibleLabel() {
         const titleText = this.title?.text.trim();
@@ -511,26 +523,12 @@ export class BaseChart {
     }
     getBaseExportComponents(options) {
         const components = [];
-        if (options.title && this.title) {
-            components.push(this.title);
-        }
-        if (options.grid && this.grid) {
-            components.push(this.grid);
-        }
-        if (options.xAxis && this.xAxis) {
-            components.push(this.xAxis);
-        }
-        if (options.yAxis && this.yAxis) {
-            components.push(this.yAxis);
-        }
-        if (options.tooltip && this.tooltip) {
-            components.push(this.tooltip);
-        }
-        if (options.legend &&
-            this.legend &&
-            this.shouldIncludeLegendInExport()) {
-            components.push(this.legend);
-        }
+        this.pushIfIncluded(components, options.title, this.title);
+        this.pushIfIncluded(components, options.grid, this.grid);
+        this.pushIfIncluded(components, options.xAxis, this.xAxis);
+        this.pushIfIncluded(components, options.yAxis, this.yAxis);
+        this.pushIfIncluded(components, options.tooltip, this.tooltip);
+        this.pushIfIncluded(components, options.legend && this.shouldIncludeLegendInExport(), this.legend);
         return components;
     }
     registerBaseComponent(component) {
@@ -739,7 +737,17 @@ export class BaseChart {
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
         }
-        this.resizeObserver = new ResizeObserver(() => this.rerender());
+        this.resizeObserver = new ResizeObserver(() => {
+            if (!this.container) {
+                return;
+            }
+            const nextDimensions = this.resolveRenderDimensions(this.container.getBoundingClientRect());
+            if (nextDimensions.width === this.width &&
+                nextDimensions.height === this.height) {
+                return;
+            }
+            this.rerender();
+        });
         this.resizeObserver.observe(this.container);
     }
     setReadyPromise(promise) {
@@ -1110,27 +1118,10 @@ export class BaseChart {
         });
     }
     async exportSVG(options, formatForHooks = 'svg') {
-        if (!this.svg) {
-            throw new Error('Chart must be rendered before export');
-        }
+        const liveSvg = this.requireRenderedSvg();
         await this.whenReady();
-        const liveSvg = this.svg?.node();
-        if (!liveSvg) {
-            throw new Error('Chart must remain mounted until export completes');
-        }
-        const exportWidth = options?.width ?? this.width;
-        const exportHeight = options?.height ?? this.height;
-        const requiresExportRender = exportWidth !== this.width || exportHeight !== this.height;
-        const clone = liveSvg.cloneNode(true);
-        clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        clone.setAttribute('width', String(exportWidth));
-        clone.setAttribute('height', String(exportHeight));
-        const baseContext = {
-            format: formatForHooks,
-            options,
-            width: exportWidth,
-            height: exportHeight,
-        };
+        const { exportWidth, exportHeight, requiresExportRender, baseContext } = this.resolveExportContext(options, formatForHooks);
+        const clone = this.createExportSvgClone(liveSvg, exportWidth, exportHeight);
         const overrides = this.collectExportOverrides(baseContext);
         if (overrides.size === 0 && !requiresExportRender) {
             this.runExportHooks({
@@ -1145,17 +1136,7 @@ export class BaseChart {
             width: exportWidth,
             height: exportHeight,
         };
-        const components = this.getExportComponents();
-        components.forEach((component) => {
-            const exportable = component;
-            const override = overrides.get(component);
-            if (exportable.createExportComponent) {
-                exportChart.addChild(exportable.createExportComponent(override));
-            }
-            else {
-                exportChart.addChild(component);
-            }
-        });
+        this.populateExportChart(exportChart, overrides);
         const exportSvg = await this.renderExportChart(exportChart, exportWidth, exportHeight);
         exportSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
         exportSvg.setAttribute('width', String(exportWidth));
@@ -1167,6 +1148,49 @@ export class BaseChart {
         this.syncAccessibleLabelFromSvg(exportSvg);
         return exportSvg.outerHTML;
     }
+    requireRenderedSvg() {
+        if (!this.svg) {
+            throw new Error('Chart must be rendered before export');
+        }
+        const liveSvg = this.svg.node();
+        if (!liveSvg) {
+            throw new Error('Chart must remain mounted until export completes');
+        }
+        return liveSvg;
+    }
+    resolveExportContext(options, format) {
+        const exportWidth = options?.width ?? this.width;
+        const exportHeight = options?.height ?? this.height;
+        return {
+            exportWidth,
+            exportHeight,
+            requiresExportRender: exportWidth !== this.width || exportHeight !== this.height,
+            baseContext: {
+                format,
+                options,
+                width: exportWidth,
+                height: exportHeight,
+            },
+        };
+    }
+    createExportSvgClone(liveSvg, width, height) {
+        const clone = liveSvg.cloneNode(true);
+        clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        clone.setAttribute('width', String(width));
+        clone.setAttribute('height', String(height));
+        return clone;
+    }
+    populateExportChart(exportChart, overrides) {
+        this.getExportComponents().forEach((component) => {
+            const exportable = component;
+            const override = overrides.get(component);
+            if (exportable.createExportComponent) {
+                exportChart.addChild(exportable.createExportComponent(override));
+                return;
+            }
+            exportChart.addChild(component);
+        });
+    }
     exportJSON() {
         return JSON.stringify(this.sourceData, null, 2);
     }

package/dist/chart-group.d.ts

@@ -109,6 +109,22 @@ export declare class ChartGroup {
     private renderLegendSvg;
     private setupResizeObserver;
     private exportSVG;
+    private resolveChartOptions;
+    private refreshIfMounted;
+    private prepareRenderState;
+    private createRenderHosts;
+    private appendRenderedSection;
+    private renderLayoutItems;
+    private createChartHost;
+    private createReadyPromise;
+    private requireRenderedContainer;
+    private resolveExportContent;
+    private createRasterExportOptions;
+    private exportPdfContent;
+    private resolveExportLayoutState;
+    private resolveLiveChartHeightOverride;
+    private exportLayoutItems;
+    private composeExportSvg;
     private validateResponsiveConfig;
     private validateItemResponsiveConfig;
     private resolveResponsiveConfigForWidth;

package/dist/chart-group.js

@@ -240,25 +240,16 @@ export class ChartGroup {
         });
     }
     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');
+        const resolvedOptions = this.resolveChartOptions(options);
         this.warnOnExplicitChildWidth(chart);
         chart.setLegendModeOverride('hidden', false);
         this.validateItemResponsiveConfig(options?.responsive);
         this.charts.push({
             chart,
-            span,
-            height,
-            hidden,
-            order,
-            responsive: options?.responsive,
+            ...resolvedOptions,
         });
         this.bindChartRenderCallback(chart);
-        if (this.container) {
-            this.refresh();
-        }
+        this.refreshIfMounted();
         return this;
     }
     addChild(component) {
@@ -294,78 +285,18 @@ export class ChartGroup {
             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);
+        const { width, renderedTitle, renderedLegend, layout, totalHeight } = this.prepareRenderState(container);
         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`;
+            const { root, chartLayer } = this.createRenderHosts(totalHeight, layout.chartHeight);
+            this.appendRenderedSection(root, 'chart-group__title', renderedTitle);
             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.renderLayoutItems(chartLayer, layout.items);
+            this.appendRenderedSection(root, 'chart-group__legend', renderedLegend);
+            this.readyPromise = this.createReadyPromise();
             this.syncLegendStateFromChildren();
             this.childYDomainSnapshot = this.serializeChildYDomains(width);
         }
@@ -408,43 +339,11 @@ export class ChartGroup {
         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');
-        }
+        const container = this.requireRenderedContainer(options);
         await this.whenReady();
-        const width = options?.width ?? this.resolveContainerWidth(this.container);
+        const width = options?.width ?? this.resolveContainerWidth(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,
-            });
-        }
+        const content = await this.resolveExportContent(format, svg, width, height, options);
         if (options?.download) {
             this.downloadContent(content, format, options);
             return;
@@ -878,27 +777,189 @@ export class ChartGroup {
     }
     async exportSVG(width, options) {
         this.applyScaleSyncOverrides(width);
+        const exportLayoutState = this.resolveExportLayoutState(width);
+        const layout = this.calculateLayout(width, exportLayoutState.chartAreaHeight, exportLayoutState.defaultChartHeightOverride);
+        const childSvgs = await this.exportLayoutItems(layout.items, options);
+        const totalHeight = exportLayoutState.titleHeight +
+            layout.chartHeight +
+            exportLayoutState.legendHeight;
+        const exportSvg = this.composeExportSvg(width, totalHeight, layout.chartHeight, exportLayoutState, childSvgs);
+        return {
+            svg: exportSvg.outerHTML,
+            height: totalHeight,
+        };
+    }
+    resolveChartOptions(options) {
+        return {
+            span: normalizePositiveInteger(options?.span ?? 1, 'ChartGroup span'),
+            height: normalizeOptionalItemHeight(options?.height),
+            hidden: options?.hidden ?? false,
+            order: normalizeFiniteNumber(options?.order ?? this.charts.length, 'ChartGroup order'),
+            responsive: options?.responsive,
+        };
+    }
+    refreshIfMounted() {
+        if (this.container) {
+            this.refresh();
+        }
+    }
+    prepareRenderState(container) {
+        const width = this.resolveContainerWidth(container);
+        const renderedTitle = this.renderTitleSvg(width);
+        const renderedLegend = this.renderLegendSvg(width);
+        const chartAreaHeight = this.resolveChartAreaHeightConstraint(this.resolveTotalHeightConstraint(container.getBoundingClientRect()), renderedTitle?.height ?? 0, renderedLegend?.height ?? 0);
+        const layout = this.calculateLayout(width, chartAreaHeight);
+        const totalHeight = (renderedTitle?.height ?? 0) +
+            layout.chartHeight +
+            (renderedLegend?.height ?? 0);
+        return {
+            width,
+            renderedTitle,
+            renderedLegend,
+            layout,
+            totalHeight,
+        };
+    }
+    createRenderHosts(totalHeight, chartHeight) {
+        const root = document.createElement('div');
+        root.className = 'chart-group';
+        root.style.width = '100%';
+        root.style.height = `${totalHeight}px`;
+        const chartLayer = document.createElement('div');
+        chartLayer.className = 'chart-group__charts';
+        chartLayer.style.position = 'relative';
+        chartLayer.style.width = '100%';
+        chartLayer.style.height = `${chartHeight}px`;
+        return { root, chartLayer };
+    }
+    appendRenderedSection(root, className, section) {
+        if (!section) {
+            return;
+        }
+        const host = document.createElement('div');
+        host.className = className;
+        host.style.width = '100%';
+        host.appendChild(section.svg);
+        root.appendChild(host);
+    }
+    renderLayoutItems(chartLayer, items) {
+        items.forEach((item) => {
+            const chartHost = this.createChartHost(item);
+            chartLayer.appendChild(chartHost);
+            item.chart.setLegendModeOverride('hidden', false);
+            item.chart.render(chartHost);
+        });
+    }
+    createChartHost(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: () => ({}),
+                };
+            },
+        });
+        return chartHost;
+    }
+    createReadyPromise() {
+        return Promise.all(this.charts.map(({ chart }) => chart.whenReady())).then(() => undefined);
+    }
+    requireRenderedContainer(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');
+        }
+        return this.container;
+    }
+    async resolveExportContent(format, svg, width, height, options) {
+        if (format === 'svg') {
+            return svg;
+        }
+        const rasterOptions = this.createRasterExportOptions(svg, width, height, options);
+        if (format === 'pdf') {
+            return this.exportPdfContent(rasterOptions, width, height, options);
+        }
+        return exportRasterBlob({
+            format,
+            ...rasterOptions,
+        });
+    }
+    createRasterExportOptions(svg, width, height, options) {
+        return {
+            svg,
+            width,
+            height,
+            pixelRatio: options?.pixelRatio ?? 1,
+            backgroundColor: options?.backgroundColor,
+            jpegQuality: options?.jpegQuality ?? 0.92,
+        };
+    }
+    async exportPdfContent(rasterOptions, width, height, options) {
+        const pngBlob = await exportRasterBlob({
+            format: 'png',
+            ...rasterOptions,
+        });
+        return exportPDFBlob(pngBlob, {
+            width,
+            height,
+            margin: options?.pdfMargin ?? 0,
+        });
+    }
+    resolveExportLayoutState(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);
+            return {
+                renderedTitle,
+                renderedLegend,
+                titleHeight,
+                legendHeight,
+                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 defaultChartHeightOverride = this.resolveLiveChartHeightOverride();
+        return {
+            renderedTitle,
+            renderedLegend,
+            titleHeight,
+            legendHeight,
+            defaultChartHeightOverride,
+        };
+    }
+    resolveLiveChartHeightOverride() {
+        if (!this.container) {
+            return undefined;
+        }
+        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) {
+            return undefined;
         }
-        const layout = this.calculateLayout(width, chartAreaHeight, defaultChartHeightOverride);
-        const childSvgs = await Promise.all(layout.items.map(async (item) => {
+        return this.resolveDefaultChartHeightForWidth(liveWidth, liveChartAreaHeight);
+    }
+    async exportLayoutItems(items, options) {
+        return Promise.all(items.map(async (item) => {
             const svg = await item.chart.export('svg', {
                 ...options,
                 width: item.width,
@@ -913,7 +974,8 @@ export class ChartGroup {
                 svg,
             };
         }));
-        const totalHeight = titleHeight + layout.chartHeight + legendHeight;
+    }
+    composeExportSvg(width, totalHeight, chartHeight, state, childSvgs) {
         const parser = new DOMParser();
         const exportSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
         exportSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
@@ -921,30 +983,26 @@ export class ChartGroup {
         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));
+        if (state.renderedTitle) {
+            state.renderedTitle.svg.setAttribute('x', '0');
+            state.renderedTitle.svg.setAttribute('y', '0');
+            exportSvg.appendChild(document.importNode(state.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);
+            const imported = document.importNode(parsed.documentElement, true);
             imported.setAttribute('x', String(item.x));
-            imported.setAttribute('y', String(titleHeight + item.y));
+            imported.setAttribute('y', String(state.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));
+        if (state.renderedLegend) {
+            state.renderedLegend.svg.setAttribute('x', '0');
+            state.renderedLegend.svg.setAttribute('y', String(state.titleHeight + chartHeight));
+            exportSvg.appendChild(document.importNode(state.renderedLegend.svg, true));
         }
-        return {
-            svg: exportSvg.outerHTML,
-            height: totalHeight,
-        };
+        return exportSvg;
     }
     validateResponsiveConfig(responsive) {
         const breakpoints = responsive?.breakpoints;

package/dist/donut-center-content.d.ts

@@ -29,5 +29,6 @@ export declare class DonutCenterContent implements ChartComponent<DonutCenterCon
     getExportConfig(): DonutCenterContentConfigBase;
     createExportComponent(override?: Partial<DonutCenterContentConfigBase>): ChartComponent<DonutCenterContentConfigBase>;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, cx: number, cy: number, theme: ChartTheme, fontScale?: number): void;
+    private buildElement;
 }
 export {};