@svgrid/grid 1.1.0 → 1.1.1

package/dist/cell-render.test.js

@@ -0,0 +1,338 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createCellRender } from './cell-render';
+function makeRow(id, data) {
+    return {
+        id,
+        original: data,
+        getCellValueByColumnId: (colId) => data[colId],
+    };
+}
+function makeColumn(id, def = {}) {
+    return { id, columnDef: { ...def } };
+}
+function makeCtx(overrides = {}) {
+    return {
+        props: {},
+        grid: { id: 'grid' },
+        conditionalColumnStats: new Map(),
+        noteOverrides: {},
+        editorOptionsCache: {},
+        ...overrides,
+    };
+}
+describe('createCellRender / cellConditionalFormat', () => {
+    it('returns null when no conditionalFormats are configured', () => {
+        const cr = createCellRender(makeCtx());
+        const out = cr.cellConditionalFormat(makeRow('r1', { amt: 5 }), makeColumn('amt'), 5);
+        expect(out).toBeNull();
+    });
+    it('returns null when conditionalFormats is an empty array', () => {
+        const cr = createCellRender(makeCtx({ props: { conditionalFormats: [] } }));
+        expect(cr.cellConditionalFormat(makeRow('r', {}), makeColumn('amt'), 1)).toBeNull();
+    });
+    it('resolves a rule format against the value', () => {
+        const formats = [
+            {
+                type: 'rule',
+                columns: ['amt'],
+                when: ({ value }) => Number(value) > 10,
+                background: '#ff0000',
+                fontWeight: 700,
+            },
+        ];
+        const cr = createCellRender(makeCtx({ props: { conditionalFormats: formats } }));
+        const hit = cr.cellConditionalFormat(makeRow('r', { amt: 20 }), makeColumn('amt'), 20);
+        expect(hit?.background).toBe('#ff0000');
+        expect(hit?.fontWeight).toBe(700);
+        const miss = cr.cellConditionalFormat(makeRow('r', { amt: 1 }), makeColumn('amt'), 1);
+        expect(miss).toEqual({});
+    });
+    it('passes the precomputed column stat through to colorScale formats', () => {
+        const formats = [{ type: 'colorScale', min: '#fff', max: '#000' }];
+        const stats = new Map([['amt', { min: 0, max: 100 }]]);
+        const cr = createCellRender(makeCtx({ props: { conditionalFormats: formats }, conditionalColumnStats: stats }));
+        const out = cr.cellConditionalFormat(makeRow('r', { amt: 50 }), makeColumn('amt'), 50);
+        expect(out).not.toBeNull();
+        expect(out?.background).toBeDefined();
+    });
+});
+describe('createCellRender / computeRowClass', () => {
+    it('returns empty string when no rowClass configured', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.computeRowClass(makeRow('r', {}), 0)).toBe('');
+    });
+    it('resolves a string rowClass', () => {
+        const rowClass = vi.fn(() => 'highlight');
+        const cr = createCellRender(makeCtx({ props: { rowClass } }));
+        const row = makeRow('r', { a: 1 });
+        expect(cr.computeRowClass(row, 3)).toBe('highlight');
+        expect(rowClass).toHaveBeenCalledWith({ row: row.original, rowIndex: 3 });
+    });
+    it('resolves an array / object rowClass', () => {
+        const cr = createCellRender(makeCtx({ props: { rowClass: () => ['a', '', 'b'] } }));
+        expect(cr.computeRowClass(makeRow('r', {}), 0)).toBe('a b');
+        const cr2 = createCellRender(makeCtx({ props: { rowClass: () => ({ on: true, off: false }) } }));
+        expect(cr2.computeRowClass(makeRow('r', {}), 0)).toBe('on');
+    });
+});
+describe('createCellRender / computeCellClass', () => {
+    it('returns empty string when cellClass is null/undefined', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.computeCellClass(makeRow('r', {}), makeColumn('a'))).toBe('');
+    });
+    it('resolves a string cellClass', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.computeCellClass(makeRow('r', {}), makeColumn('a', { cellClass: 'red' }))).toBe('red');
+    });
+    it('resolves an array cellClass', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.computeCellClass(makeRow('r', {}), makeColumn('a', { cellClass: ['x', 'y'] }))).toBe('x y');
+    });
+    it('invokes a function cellClass with a minimal cell context', () => {
+        const cellClass = vi.fn((c) => (c.getValue() > 5 ? 'big' : 'small'));
+        const cr = createCellRender(makeCtx());
+        const row = makeRow('r', { score: 9 });
+        expect(cr.computeCellClass(row, makeColumn('score', { cellClass }))).toBe('big');
+        expect(cellClass).toHaveBeenCalledTimes(1);
+        const passed = cellClass.mock.calls[0][0];
+        expect(passed.row).toBe(row);
+        expect(passed.getValue()).toBe(9);
+    });
+    it('returns empty string for an unsupported cellClass type (number)', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.computeCellClass(makeRow('r', {}), makeColumn('a', { cellClass: 123 }))).toBe('');
+    });
+});
+describe('createCellRender / computeCellTooltip', () => {
+    it('returns null when no tooltip configured', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.computeCellTooltip(makeRow('r', {}), makeColumn('a'))).toBeNull();
+    });
+    it('returns a static string tooltip, but null for empty string', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.computeCellTooltip(makeRow('r', {}), makeColumn('a', { tooltip: 'help' }))).toBe('help');
+        expect(cr.computeCellTooltip(makeRow('r', {}), makeColumn('a', { tooltip: '' }))).toBeNull();
+    });
+    it('invokes a function tooltip and stringifies the result', () => {
+        const tooltip = (c) => `val=${c.getValue()}`;
+        const cr = createCellRender(makeCtx());
+        const row = makeRow('r', { a: 42 });
+        expect(cr.computeCellTooltip(row, makeColumn('a', { tooltip }))).toBe('val=42');
+    });
+    it('returns null when the function tooltip returns a falsy value', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.computeCellTooltip(makeRow('r', {}), makeColumn('a', { tooltip: () => '' }))).toBeNull();
+    });
+    it('returns null for an unsupported tooltip type', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.computeCellTooltip(makeRow('r', {}), makeColumn('a', { tooltip: 5 }))).toBeNull();
+    });
+});
+describe('createCellRender / computeCellNote', () => {
+    it('returns null when neither overrides nor notes have an entry', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.computeCellNote(makeRow('r', {}), makeColumn('a'))).toBeNull();
+    });
+    it('prefers the internal note override over props.notes', () => {
+        const cr = createCellRender(makeCtx({
+            noteOverrides: { r: { a: 'overlay' } },
+            props: { notes: { r: { a: 'stored' } } },
+        }));
+        expect(cr.computeCellNote(makeRow('r', {}), makeColumn('a'))).toBe('overlay');
+    });
+    it('treats a blank override as a removal (null)', () => {
+        const cr = createCellRender(makeCtx({
+            noteOverrides: { r: { a: '   ' } },
+            props: { notes: { r: { a: 'stored' } } },
+        }));
+        expect(cr.computeCellNote(makeRow('r', {}), makeColumn('a'))).toBeNull();
+    });
+    it('falls back to props.notes when no override exists', () => {
+        const cr = createCellRender(makeCtx({ props: { notes: { r: { a: 'stored note' } } } }));
+        expect(cr.computeCellNote(makeRow('r', {}), makeColumn('a'))).toBe('stored note');
+    });
+    it('returns null for a whitespace-only stored note', () => {
+        const cr = createCellRender(makeCtx({ props: { notes: { r: { a: '  ' } } } }));
+        expect(cr.computeCellNote(makeRow('r', {}), makeColumn('a'))).toBeNull();
+    });
+    it('returns null when the row or column is absent in the notes map', () => {
+        const cr = createCellRender(makeCtx({ props: { notes: { other: { a: 'x' } } } }));
+        expect(cr.computeCellNote(makeRow('r', {}), makeColumn('a'))).toBeNull();
+        const cr2 = createCellRender(makeCtx({ props: { notes: { r: { b: 'x' } } } }));
+        expect(cr2.computeCellNote(makeRow('r', {}), makeColumn('a'))).toBeNull();
+    });
+});
+describe('createCellRender / getColumnEditorOptions', () => {
+    it('returns [] for a function editorOptions when row has no original', () => {
+        const cr = createCellRender(makeCtx());
+        const col = makeColumn('a', { editorOptions: () => [{ value: 1, label: 'one' }] });
+        expect(cr.getColumnEditorOptions(col, null)).toEqual([]);
+    });
+    it('evaluates a function editorOptions per row', () => {
+        const cr = createCellRender(makeCtx());
+        const col = makeColumn('a', {
+            editorOptions: (data) => [{ value: data.code, label: data.name }],
+        });
+        const row = makeRow('r', { code: 'x', name: 'X' });
+        const opts = cr.getColumnEditorOptions(col, row);
+        expect(opts).toEqual([{ value: 'x', label: 'X' }]);
+    });
+    it('caches normalized static editorOptions and reuses them', () => {
+        const ctx = makeCtx();
+        const cr = createCellRender(ctx);
+        const src = ['a', 'b'];
+        const col = makeColumn('a', { editorOptions: src });
+        const first = cr.getColumnEditorOptions(col);
+        const second = cr.getColumnEditorOptions(col);
+        expect(first).toBe(second); // same cached array reference
+        expect(ctx.editorOptionsCache['a']).toBe(first);
+    });
+    it('re-normalizes when the editorOptions source changes', () => {
+        const ctx = makeCtx();
+        const cr = createCellRender(ctx);
+        const first = cr.getColumnEditorOptions(makeColumn('a', { editorOptions: ['a'] }));
+        const second = cr.getColumnEditorOptions(makeColumn('a', { editorOptions: ['b'] }));
+        expect(first).not.toBe(second);
+    });
+});
+describe('createCellRender / formatListCellValue', () => {
+    it('joins an array of values using the default separator', () => {
+        const cr = createCellRender(makeCtx());
+        const col = makeColumn('a', {
+            editorOptions: [
+                { value: 1, label: 'One' },
+                { value: 2, label: 'Two' },
+            ],
+        });
+        expect(cr.formatListCellValue(col, [1, 2])).toBe('One, Two');
+    });
+    it('honors a custom editorSeparator', () => {
+        const cr = createCellRender(makeCtx());
+        const col = makeColumn('a', {
+            editorSeparator: ' | ',
+            editorOptions: [
+                { value: 1, label: 'One' },
+                { value: 2, label: 'Two' },
+            ],
+        });
+        expect(cr.formatListCellValue(col, [1, 2])).toBe('One | Two');
+    });
+    it('returns empty string for null / empty scalar values', () => {
+        const cr = createCellRender(makeCtx());
+        const col = makeColumn('a', { editorOptions: [] });
+        expect(cr.formatListCellValue(col, null)).toBe('');
+        expect(cr.formatListCellValue(col, '')).toBe('');
+    });
+    it('maps a single scalar value to its label', () => {
+        const cr = createCellRender(makeCtx());
+        const col = makeColumn('a', {
+            editorOptions: [{ value: 'k', label: 'Known' }],
+        });
+        expect(cr.formatListCellValue(col, 'k')).toBe('Known');
+        // unknown value falls back to its string form
+        expect(cr.formatListCellValue(col, 'z')).toBe('z');
+    });
+});
+describe('createCellRender / formatCellValue', () => {
+    const row = makeRow('r', {});
+    it('uses a custom formatter callback when present', () => {
+        const cr = createCellRender(makeCtx());
+        const col = makeColumn('a', {
+            formatter: ({ value }) => `<<${value}>>`,
+        });
+        expect(cr.formatCellValue(col, 7, row)).toBe('<<7>>');
+    });
+    it('coerces a nullish formatter result to empty string', () => {
+        const cr = createCellRender(makeCtx());
+        const col = makeColumn('a', { formatter: () => null });
+        expect(cr.formatCellValue(col, 1, row)).toBe('');
+    });
+    it('masks password columns with bullets, capped at 12', () => {
+        const cr = createCellRender(makeCtx());
+        const col = makeColumn('a', { editorType: 'password' });
+        expect(cr.formatCellValue(col, 'abc', row)).toBe('•••');
+        expect(cr.formatCellValue(col, '', row)).toBe('');
+        expect(cr.formatCellValue(col, 'x'.repeat(50), row)).toBe('•'.repeat(12));
+    });
+    it('stringifies plain values when there is no format config', () => {
+        const cr = createCellRender(makeCtx());
+        const col = makeColumn('a');
+        expect(cr.formatCellValue(col, 'hello', row)).toBe('hello');
+        expect(cr.formatCellValue(col, null, row)).toBe('');
+    });
+    it('applies numeric / currency / percent format configs', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.formatCellValue(makeColumn('a', { format: { type: 'number' } }), 1234.5, row)).toContain('1,234');
+        const cur = cr.formatCellValue(makeColumn('a', { format: { type: 'currency', currency: 'USD' } }), 1000, row);
+        expect(cur).toContain('$');
+        const pct = cr.formatCellValue(makeColumn('a', { format: { type: 'percent' } }), 0.25, row);
+        expect(pct).toContain('%');
+    });
+    it('formats date configs and falls back when the value is not a date', () => {
+        const cr = createCellRender(makeCtx());
+        const dateCol = makeColumn('a', { format: { type: 'date' } });
+        const out = cr.formatCellValue(dateCol, '2024-01-15T00:00:00Z', row);
+        expect(out).toMatch(/2024/);
+        // Unparseable -> returns String(value)
+        expect(cr.formatCellValue(dateCol, 'not-a-date', row)).toBe('not-a-date');
+    });
+    it('formats datetime configs with merged default options', () => {
+        const cr = createCellRender(makeCtx());
+        const col = makeColumn('a', { format: { type: 'datetime' } });
+        const out = cr.formatCellValue(col, '2024-03-10T13:45:00Z', row);
+        expect(out).toMatch(/2024/);
+    });
+});
+describe('createCellRender / formatPinnedValue', () => {
+    it('invokes a formatter with a null row', () => {
+        const cr = createCellRender(makeCtx());
+        const formatter = vi.fn(({ value, row }) => `${value}:${row}`);
+        const col = makeColumn('a', { formatter });
+        expect(cr.formatPinnedValue(col, 5)).toBe('5:null');
+        expect(formatter.mock.calls[0][0].row).toBeNull();
+    });
+    it('masks password pinned values', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.formatPinnedValue(makeColumn('a', { editorType: 'password' }), 'pw')).toBe('••');
+        expect(cr.formatPinnedValue(makeColumn('a', { editorType: 'password' }), '')).toBe('');
+    });
+    it('stringifies when no format config', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.formatPinnedValue(makeColumn('a'), 'total')).toBe('total');
+        expect(cr.formatPinnedValue(makeColumn('a'), null)).toBe('');
+    });
+    it('applies numeric and date format configs', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.formatPinnedValue(makeColumn('a', { format: { type: 'number' } }), 9999)).toContain('9,999');
+        const d = cr.formatPinnedValue(makeColumn('a', { format: { type: 'date' } }), '2022-06-01T00:00:00Z');
+        expect(d).toMatch(/2022/);
+        // unparseable date falls through to String()
+        expect(cr.formatPinnedValue(makeColumn('a', { format: { type: 'date' } }), 'xyz')).toBe('xyz');
+    });
+    it('formats datetime pinned configs', () => {
+        const cr = createCellRender(makeCtx());
+        const out = cr.formatPinnedValue(makeColumn('a', { format: { type: 'datetime' } }), '2021-12-31T08:00:00Z');
+        expect(out).toMatch(/2021/);
+    });
+});
+describe('createCellRender / computePinnedCellClass', () => {
+    it('returns empty string when cellClass is not a function', () => {
+        const cr = createCellRender(makeCtx());
+        expect(cr.computePinnedCellClass({ a: 1 }, makeColumn('a', { cellClass: 'x' }))).toBe('');
+    });
+    it('invokes a function cellClass with a null row and the pinned value', () => {
+        const cr = createCellRender(makeCtx());
+        const cellClass = vi.fn((c) => (c.value > 0 ? 'pos' : 'neg'));
+        const col = makeColumn('a', {
+            cellClass,
+            field: 'a',
+        });
+        expect(cr.computePinnedCellClass({ a: 3 }, col)).toBe('pos');
+        expect(cellClass.mock.calls[0][0].row).toBeNull();
+    });
+    it('coerces a falsy cellClass result to empty string', () => {
+        const cr = createCellRender(makeCtx());
+        const col = makeColumn('a', { cellClass: () => undefined, field: 'a' });
+        expect(cr.computePinnedCellClass({ a: 1 }, col)).toBe('');
+    });
+});

package/dist/chart-export.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/chart-export.test.js

@@ -0,0 +1,302 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { chartToSvgString, chartToPngBlob, downloadChartSvg, downloadChartPng, } from './chart-export';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+/**
+ * Build a small but realistic chart SVG matching the structure
+ * chart-export expects: `svg.sv-grid-chart-svg` with a viewBox, an
+ * interaction hit layer (`.sv-grid-chart-hit`) that the exporter must
+ * strip, plus a few themed nodes.
+ */
+function makeChartSvg(opts = {}) {
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('class', 'sv-grid-chart-svg');
+    svg.setAttribute('viewBox', opts.viewBox ?? '0 0 400 250');
+    const axis = document.createElementNS(SVG_NS, 'text');
+    axis.setAttribute('class', 'sv-grid-chart-axis');
+    axis.textContent = 'A';
+    svg.appendChild(axis);
+    const hit = document.createElementNS(SVG_NS, 'rect');
+    hit.setAttribute('class', 'sv-grid-chart-hit');
+    svg.appendChild(hit);
+    const bar = document.createElementNS(SVG_NS, 'rect');
+    bar.setAttribute('class', 'sv-grid-chart-bar');
+    svg.appendChild(bar);
+    return svg;
+}
+describe('chartToSvgString', () => {
+    it('serializes the chart svg passed directly as an SVGSVGElement', () => {
+        const svg = makeChartSvg();
+        const out = chartToSvgString(svg);
+        expect(out).toContain('<svg');
+        expect(out).toContain('xmlns="http://www.w3.org/2000/svg"');
+    });
+    it('resolves the inner svg.sv-grid-chart-svg from a wrapping element', () => {
+        const wrap = document.createElement('div');
+        wrap.appendChild(makeChartSvg());
+        const out = chartToSvgString(wrap);
+        expect(out).toContain('<svg');
+    });
+    it('falls back to a plain inner <svg> when the class svg is absent', () => {
+        const wrap = document.createElement('div');
+        const svg = document.createElementNS(SVG_NS, 'svg');
+        svg.setAttribute('viewBox', '0 0 100 100');
+        wrap.appendChild(svg);
+        const out = chartToSvgString(wrap);
+        expect(out).toContain('<svg');
+    });
+    it('throws when no <svg> can be found', () => {
+        const div = document.createElement('div');
+        expect(() => chartToSvgString(div)).toThrow(/no <svg> found/);
+    });
+    it('inlines a <style> block with concrete theme colors', () => {
+        const out = chartToSvgString(makeChartSvg());
+        expect(out).toContain('<style');
+        expect(out).toContain('.sv-grid-chart-axis');
+        expect(out).toContain('.sv-grid-chart-datalabel');
+        expect(out).toContain('.sv-grid-chart-donut-total');
+        // default fallbacks used when no --sg-* vars are set in jsdom
+        expect(out).toContain('#0f172a'); // --sg-fg fallback
+        expect(out).toContain('#64748b'); // --sg-muted fallback
+        expect(out).toContain('#e2e8f0'); // --sg-border fallback
+    });
+    it('strips interaction-only hit layers from the export', () => {
+        const out = chartToSvgString(makeChartSvg());
+        expect(out).not.toContain('sv-grid-chart-hit');
+        // but keeps the real content
+        expect(out).toContain('sv-grid-chart-bar');
+    });
+    it('sets width/height from the viewBox and inserts a background rect', () => {
+        const out = chartToSvgString(makeChartSvg({ viewBox: '0 0 400 250' }));
+        expect(out).toContain('width="400"');
+        expect(out).toContain('height="250"');
+        // background rect spans the full size with the default --sg-bg fallback
+        expect(out).toMatch(/<rect[^>]*fill="#ffffff"/);
+    });
+    it('honors a custom background option over the theme default', () => {
+        const out = chartToSvgString(makeChartSvg(), { background: 'tomato' });
+        expect(out).toMatch(/<rect[^>]*fill="tomato"/);
+        expect(out).not.toContain('fill="#ffffff"');
+    });
+    it('falls back to client size / defaults when no usable viewBox', () => {
+        const svg = document.createElementNS(SVG_NS, 'svg');
+        svg.setAttribute('class', 'sv-grid-chart-svg');
+        // No viewBox attribute => baseVal width 0; jsdom clientWidth is 0 too,
+        // so the exporter uses its 520x300 hard fallback.
+        const out = chartToSvgString(svg);
+        expect(out).toContain('width="520"');
+        expect(out).toContain('height="300"');
+    });
+    it('reads --sg-* css variables when present on the element', () => {
+        const svg = makeChartSvg();
+        svg.style.setProperty('--sg-fg', '#112233');
+        svg.style.setProperty('--sg-muted', '#445566');
+        document.body.appendChild(svg);
+        try {
+            const out = chartToSvgString(svg);
+            expect(out).toContain('#112233');
+            expect(out).toContain('#445566');
+        }
+        finally {
+            svg.remove();
+        }
+    });
+});
+describe('downloadChartSvg', () => {
+    let createSpy;
+    let revokeSpy;
+    let clickSpy;
+    beforeEach(() => {
+        vi.useFakeTimers();
+        createSpy = vi
+            .spyOn(URL, 'createObjectURL')
+            .mockReturnValue('blob:fake-url');
+        revokeSpy = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        clickSpy = vi.fn();
+        // jsdom anchors don't navigate; stub click to observe the download.
+        vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(clickSpy);
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.restoreAllMocks();
+    });
+    it('creates a blob url, triggers an anchor download, then revokes', () => {
+        downloadChartSvg(makeChartSvg(), 'my-chart.svg');
+        expect(createSpy).toHaveBeenCalledTimes(1);
+        const blob = createSpy.mock.calls[0][0];
+        expect(blob).toBeInstanceOf(Blob);
+        expect(blob.type).toBe('image/svg+xml');
+        expect(clickSpy).toHaveBeenCalledTimes(1);
+        // revoke is scheduled on a timer
+        expect(revokeSpy).not.toHaveBeenCalled();
+        vi.advanceTimersByTime(1000);
+        expect(revokeSpy).toHaveBeenCalledWith('blob:fake-url');
+    });
+    it('removes the temporary anchor from the DOM after clicking', () => {
+        const before = document.querySelectorAll('a').length;
+        downloadChartSvg(makeChartSvg());
+        expect(document.querySelectorAll('a').length).toBe(before);
+    });
+    it('uses the default filename when none is given', () => {
+        let captured;
+        vi.spyOn(HTMLAnchorElement.prototype, 'download', 'set').mockImplementation(function (v) {
+            captured = v;
+        });
+        downloadChartSvg(makeChartSvg());
+        expect(captured).toBe('chart.svg');
+    });
+});
+describe('chartToPngBlob', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+    function stubImage(behavior) {
+        // jsdom's Image never fires load/error for a blob: src, so replace it
+        // with a controllable fake that triggers the chosen callback.
+        class FakeImage {
+            constructor() {
+                this.onload = null;
+                this.onerror = null;
+                this._src = '';
+            }
+            set src(_v) {
+                this._src = _v;
+                queueMicrotask(() => {
+                    if (behavior === 'load')
+                        this.onload?.();
+                    else
+                        this.onerror?.();
+                });
+            }
+            get src() {
+                return this._src;
+            }
+        }
+        vi.stubGlobal('Image', FakeImage);
+    }
+    it('rejects when the SVG image fails to rasterize', async () => {
+        stubImage('error');
+        vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:x');
+        const revoke = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        await expect(chartToPngBlob(makeChartSvg())).rejects.toThrow(/failed to rasterize/);
+        expect(revoke).toHaveBeenCalledWith('blob:x');
+    });
+    it('rejects when a 2d canvas context is unavailable', async () => {
+        stubImage('load');
+        vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:x');
+        vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+        await expect(chartToPngBlob(makeChartSvg())).rejects.toThrow(/canvas 2d context unavailable/);
+    });
+    it('resolves a PNG blob once drawImage + toBlob succeed', async () => {
+        stubImage('load');
+        vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:x');
+        vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        const drawImage = vi.fn();
+        vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+            drawImage,
+        });
+        vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(function (cb) {
+            cb(new Blob(['png-bytes'], { type: 'image/png' }));
+        });
+        const blob = await chartToPngBlob(makeChartSvg({ viewBox: '0 0 400 250' }), {
+            scale: 3,
+        });
+        expect(blob).toBeInstanceOf(Blob);
+        expect(blob.type).toBe('image/png');
+        expect(drawImage).toHaveBeenCalledTimes(1);
+    });
+    it('rejects when toBlob yields null', async () => {
+        stubImage('load');
+        vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:x');
+        vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+            drawImage: vi.fn(),
+        });
+        vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(function (cb) {
+            cb(null);
+        });
+        await expect(chartToPngBlob(makeChartSvg())).rejects.toThrow(/toBlob failed/);
+    });
+    it('scales the canvas by options.scale (default 2)', async () => {
+        stubImage('load');
+        vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:x');
+        vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+            drawImage: vi.fn(),
+        });
+        let canvasW = -1;
+        let canvasH = -1;
+        vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(function (cb) {
+            canvasW = this.width;
+            canvasH = this.height;
+            cb(new Blob([], { type: 'image/png' }));
+        });
+        // viewBox 400x250, default scale 2 => 800x500
+        await chartToPngBlob(makeChartSvg({ viewBox: '0 0 400 250' }));
+        expect(canvasW).toBe(800);
+        expect(canvasH).toBe(500);
+    });
+    it('falls back to the 520x300 default size when there is no viewBox', async () => {
+        stubImage('load');
+        vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:x');
+        vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+            drawImage: vi.fn(),
+        });
+        let canvasW = -1;
+        let canvasH = -1;
+        vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(function (cb) {
+            canvasW = this.width;
+            canvasH = this.height;
+            cb(new Blob([], { type: 'image/png' }));
+        });
+        // No viewBox + jsdom clientWidth 0 => 520x300 hard fallback, scale 2.
+        const noVb = document.createElementNS(SVG_NS, 'svg');
+        noVb.setAttribute('class', 'sv-grid-chart-svg');
+        await chartToPngBlob(noVb);
+        expect(canvasW).toBe(1040);
+        expect(canvasH).toBe(600);
+    });
+});
+describe('downloadChartPng', () => {
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.restoreAllMocks();
+    });
+    it('rasterizes then downloads via an anchor and revokes the url', async () => {
+        vi.useFakeTimers();
+        // Make chartToPngBlob succeed.
+        class FakeImage {
+            constructor() {
+                this.onload = null;
+                this.onerror = null;
+            }
+            set src(_v) {
+                queueMicrotask(() => this.onload?.());
+            }
+        }
+        vi.stubGlobal('Image', FakeImage);
+        vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:png-url');
+        const revoke = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+        vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+            drawImage: vi.fn(),
+        });
+        vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(function (cb) {
+            cb(new Blob(['p'], { type: 'image/png' }));
+        });
+        const click = vi.fn();
+        vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(click);
+        let filename;
+        vi.spyOn(HTMLAnchorElement.prototype, 'download', 'set').mockImplementation(function (v) {
+            filename = v;
+        });
+        const p = downloadChartPng(makeChartSvg(), 'pic.png');
+        // flush the microtask-driven image onload + promise chain
+        await vi.runAllTimersAsync();
+        await p;
+        expect(click).toHaveBeenCalledTimes(1);
+        expect(filename).toBe('pic.png');
+        vi.advanceTimersByTime(1000);
+        expect(revoke).toHaveBeenCalledWith('blob:png-url');
+    });
+});

package/dist/chart.coverage.test.d.ts

@@ -0,0 +1 @@
+export {};