@svgrid/grid 3.0.2 → 3.0.4

package/dist/chart-decimate.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Thinning long series before layout, and the one place that knows which
+ * arrays on a spec run parallel to `categories`.
+ *
+ * `buildChart` scales fine (100k line points is ~140 ms of maths); what does
+ * not scale is asking the DOM to hold a mark per point, and past one point
+ * per pixel the extra marks carry no information anyway. So a long line or
+ * area series is reduced to about one point per pixel with an algorithm that
+ * keeps its visual shape (Largest-Triangle-Three-Buckets) or its extremes
+ * (min / max per bucket), and every category-parallel array is picked with the
+ * same indices so tooltips, drill-through and error bars stay aligned.
+ */
+import type { ChartDecimateConfig, ChartSpec } from './chart-types.js';
+/**
+ * Every array on a {@link ChartSeries} indexed by category. Anything that
+ * narrows a spec to a subset of categories (the zoom window, decimation) picks
+ * each of these with the same indices; a key missing here is a mark drawn
+ * against the wrong category, which is why the list is one constant rather
+ * than a convention. `values` is included for completeness.
+ */
+export declare const PER_CATEGORY_SERIES_KEYS: readonly ["values", "rowIds", "upperValues", "lowerValues", "ohlc", "boxes", "errors", "markers", "colors", "lowValues", "targets", "volumes"];
+/** Spec-level arrays indexed by category (see {@link PER_CATEGORY_SERIES_KEYS}). */
+export declare const PER_CATEGORY_SPEC_KEYS: readonly ["waterfallTotals"];
+/**
+ * Narrow a spec to the categories at `indices` (ascending), keeping every
+ * category-parallel array in step. The zoom window and decimation both go
+ * through here, so there is exactly one list of arrays to keep in step.
+ */
+export declare function pickCategories(spec: ChartSpec, indices: ReadonlyArray<number>): ChartSpec;
+/**
+ * Largest-Triangle-Three-Buckets: the indices of the `target` points that best
+ * preserve the visual shape of `values` plotted against their index. The
+ * first and last points are always kept. Non-finite values are skipped as
+ * candidates, so a gap cannot be "chosen" as a representative point.
+ */
+export declare function lttb(values: ReadonlyArray<number>, target: number, xs?: ReadonlyArray<number>): number[];
+/**
+ * The indices of the minimum and maximum in each of `buckets` equal slices of
+ * `values`, plus the first and last point. Keeps every spike, which is what
+ * monitoring data wants and what LTTB will sometimes smooth over.
+ */
+export declare function minMaxIndices(values: ReadonlyArray<number>, buckets: number): number[];
+/**
+ * Thin a spec's line / area series to about one point per pixel of plot
+ * width. Nothing happens below the threshold, for a spec that says
+ * `decimate: false`, or when any series draws bars, candles or boxes (those
+ * marks ARE the data; thinning them would hide categories). Every series is
+ * decimated separately and the union of the kept indices is used, so a spike
+ * that only one series has still survives.
+ */
+export declare function decimateSpec(spec: ChartSpec, plotW: number, cfg?: ChartDecimateConfig | undefined): ChartSpec;

package/dist/chart-decimate.js

@@ -0,0 +1,199 @@
+/**
+ * Every array on a {@link ChartSeries} indexed by category. Anything that
+ * narrows a spec to a subset of categories (the zoom window, decimation) picks
+ * each of these with the same indices; a key missing here is a mark drawn
+ * against the wrong category, which is why the list is one constant rather
+ * than a convention. `values` is included for completeness.
+ */
+export const PER_CATEGORY_SERIES_KEYS = [
+    'values',
+    'rowIds',
+    'upperValues',
+    'lowerValues',
+    'ohlc',
+    'boxes',
+    'errors',
+    'markers',
+    'colors',
+    'lowValues',
+    'targets',
+    'volumes',
+];
+/** Spec-level arrays indexed by category (see {@link PER_CATEGORY_SERIES_KEYS}). */
+export const PER_CATEGORY_SPEC_KEYS = ['waterfallTotals'];
+/**
+ * Narrow a spec to the categories at `indices` (ascending), keeping every
+ * category-parallel array in step. The zoom window and decimation both go
+ * through here, so there is exactly one list of arrays to keep in step.
+ */
+export function pickCategories(spec, indices) {
+    const pick = (arr) => {
+        if (!arr)
+            return undefined;
+        const out = new Array(indices.length);
+        for (let k = 0; k < indices.length; k += 1)
+            out[k] = arr[indices[k]];
+        return out;
+    };
+    const series = spec.series.map((s) => {
+        const next = { ...s, values: pick(s.values) ?? [] };
+        for (const key of PER_CATEGORY_SERIES_KEYS) {
+            if (key === 'values')
+                continue;
+            const arr = s[key];
+            if (arr)
+                next[key] = pick(arr);
+        }
+        return next;
+    });
+    const out = { ...spec, categories: pick(spec.categories) ?? [], series };
+    for (const key of PER_CATEGORY_SPEC_KEYS) {
+        const arr = spec[key];
+        if (arr)
+            out[key] = pick(arr);
+    }
+    return out;
+}
+/**
+ * Largest-Triangle-Three-Buckets: the indices of the `target` points that best
+ * preserve the visual shape of `values` plotted against their index. The
+ * first and last points are always kept. Non-finite values are skipped as
+ * candidates, so a gap cannot be "chosen" as a representative point.
+ */
+export function lttb(values, target, xs) {
+    const n = values.length;
+    // The x of point j: its index unless the caller positions points by value
+    // (a numeric or log axis), where the triangles must use the real spacing.
+    const xAt = (j) => (xs && Number.isFinite(xs[j]) ? xs[j] : j);
+    if (target >= n || n <= 2)
+        return values.map((_, i) => i);
+    if (target < 3)
+        return [0, n - 1];
+    const out = [0];
+    const every = (n - 2) / (target - 2);
+    let a = 0;
+    for (let i = 0; i < target - 2; i += 1) {
+        // The next bucket's centroid is the far corner of every candidate triangle.
+        const nextStart = Math.floor((i + 1) * every) + 1;
+        const nextEnd = Math.min(Math.floor((i + 2) * every) + 1, n);
+        let avgX = 0;
+        let avgY = 0;
+        let cnt = 0;
+        for (let j = nextStart; j < nextEnd; j += 1) {
+            const v = values[j];
+            if (!Number.isFinite(v))
+                continue;
+            avgX += xAt(j);
+            avgY += v;
+            cnt += 1;
+        }
+        if (cnt) {
+            avgX /= cnt;
+            avgY /= cnt;
+        }
+        else {
+            avgX = (xAt(nextStart) + xAt(Math.min(nextEnd, n - 1))) / 2;
+            avgY = values[a];
+        }
+        const start = Math.floor(i * every) + 1;
+        const end = Math.min(Math.floor((i + 1) * every) + 1, n);
+        const ax = xAt(a);
+        const ay = Number.isFinite(values[a]) ? values[a] : 0;
+        let best = -1;
+        let bestArea = -1;
+        for (let j = start; j < end; j += 1) {
+            const v = values[j];
+            if (!Number.isFinite(v))
+                continue;
+            const area = Math.abs((ax - avgX) * (v - ay) - (ax - xAt(j)) * (avgY - ay));
+            if (area > bestArea) {
+                bestArea = area;
+                best = j;
+            }
+        }
+        if (best < 0)
+            best = start;
+        out.push(best);
+        a = best;
+    }
+    out.push(n - 1);
+    return out;
+}
+/**
+ * The indices of the minimum and maximum in each of `buckets` equal slices of
+ * `values`, plus the first and last point. Keeps every spike, which is what
+ * monitoring data wants and what LTTB will sometimes smooth over.
+ */
+export function minMaxIndices(values, buckets) {
+    const n = values.length;
+    if (buckets >= n || n <= 2)
+        return values.map((_, i) => i);
+    const keep = new Set([0, n - 1]);
+    const size = n / Math.max(1, buckets);
+    for (let b = 0; b < buckets; b += 1) {
+        const start = Math.floor(b * size);
+        const end = Math.min(n, Math.floor((b + 1) * size));
+        let lo = -1;
+        let hi = -1;
+        for (let j = start; j < end; j += 1) {
+            const v = values[j];
+            if (!Number.isFinite(v))
+                continue;
+            if (lo < 0 || v < values[lo])
+                lo = j;
+            if (hi < 0 || v > values[hi])
+                hi = j;
+        }
+        if (lo >= 0)
+            keep.add(lo);
+        if (hi >= 0)
+            keep.add(hi);
+    }
+    return [...keep].sort((x, y) => x - y);
+}
+/** The decimation settings a spec asks for, defaults filled in. */
+function resolveDecimate(cfg, plotW) {
+    if (cfg === false)
+        return null;
+    const o = typeof cfg === 'object' ? cfg : {};
+    const target = Math.max(8, Math.round(o.target ?? plotW));
+    return { method: o.method ?? 'lttb', target, threshold: Math.max(target, Math.round(o.threshold ?? target)) };
+}
+/**
+ * Thin a spec's line / area series to about one point per pixel of plot
+ * width. Nothing happens below the threshold, for a spec that says
+ * `decimate: false`, or when any series draws bars, candles or boxes (those
+ * marks ARE the data; thinning them would hide categories). Every series is
+ * decimated separately and the union of the kept indices is used, so a spike
+ * that only one series has still survives.
+ */
+export function decimateSpec(spec, plotW, cfg = spec.decimate) {
+    const opt = resolveDecimate(cfg, plotW);
+    if (!opt)
+        return spec;
+    const n = spec.categories.length;
+    if (n <= opt.threshold || !spec.series.length)
+        return spec;
+    const lineLike = (t) => t === 'line' || t === 'area';
+    if (!lineLike(spec.type) && !spec.series.every((s) => lineLike(s.type)))
+        return spec;
+    if (spec.series.some((s) => (s.type && !lineLike(s.type)) || s.ohlc || s.boxes))
+        return spec;
+    // On a numeric axis the points sit where their values are, so the
+    // triangles are measured in those positions (log10 of them on a log axis).
+    const numeric = (spec.xAxis?.type ?? spec.xType) === 'number';
+    const isLog = numeric && spec.xAxis?.scale === 'log';
+    const xs = numeric
+        ? spec.categories.map((c) => { const v = Number(c); return isLog ? (v > 0 ? Math.log10(v) : Number.NaN) : v; })
+        : undefined;
+    const keep = new Set();
+    for (const s of spec.series) {
+        const idx = opt.method === 'minmax' ? minMaxIndices(s.values, Math.floor(opt.target / 2)) : lttb(s.values, opt.target, xs);
+        for (const i of idx)
+            keep.add(i);
+    }
+    const indices = [...keep].sort((a, b) => a - b);
+    if (indices.length >= n)
+        return spec;
+    return pickCategories(spec, indices);
+}

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

@@ -0,0 +1,47 @@
+/**
+ * PDF and print for a rendered chart, with no PDF library.
+ *
+ * A one-page PDF is a short text file with one binary blob in it, so the
+ * writer here is the whole format we need: a catalog, a page, a Helvetica
+ * font, one image XObject and a content stream that places the text and the
+ * image. The chart is rasterised through the existing PNG path and re-encoded
+ * as JPEG, which the PDF embeds as-is under `/DCTDecode`; nothing needs zlib.
+ * JPEG has no alpha, so the chart background is always painted.
+ *
+ * Print opens a window with the standalone SVG and calls `print()`.
+ */
+import { type ChartExportOptions } from './chart-export.js';
+/** Options for the PDF: page, orientation, the text around the chart. */
+export type ChartPdfOptions = ChartExportOptions & {
+    /** Paper size. Default A4. */
+    page?: 'A4' | 'Letter';
+    /** Default: whichever fits the chart's aspect ratio better. */
+    orientation?: 'portrait' | 'landscape';
+    title?: string;
+    subtitle?: string;
+    caption?: string;
+    /** JPEG quality, 0..1. Default 0.92. */
+    quality?: number;
+};
+/**
+ * Assemble a one-page PDF from a JPEG and the text around it. Exported for
+ * tests and for callers that already have a JPEG; `chartToPdfBlob` is the
+ * one that starts from a chart element.
+ */
+export declare function buildChartPdf(jpeg: {
+    bytes: Uint8Array;
+    width: number;
+    height: number;
+}, opts?: Pick<ChartPdfOptions, 'page' | 'orientation' | 'title' | 'subtitle' | 'caption'>): Uint8Array;
+/** The chart as a one-page PDF `Blob`. */
+export declare function chartToPdfBlob(source: SVGSVGElement | HTMLElement, options?: ChartPdfOptions): Promise<Blob>;
+/** Download the chart as a `.pdf` file. */
+export declare function downloadChartPdf(source: SVGSVGElement | HTMLElement, filename?: string, options?: ChartPdfOptions): Promise<void>;
+/**
+ * Print the chart: a new window with the standalone SVG (and the title
+ * above it), sized to the page, that opens the print dialog once it has
+ * drawn. Returns false when the window was blocked.
+ */
+export declare function printChart(source: SVGSVGElement | HTMLElement, options?: ChartExportOptions & {
+    title?: string;
+}): boolean;

package/dist/chart-export-pdf.js

@@ -0,0 +1,187 @@
+/**
+ * PDF and print for a rendered chart, with no PDF library.
+ *
+ * A one-page PDF is a short text file with one binary blob in it, so the
+ * writer here is the whole format we need: a catalog, a page, a Helvetica
+ * font, one image XObject and a content stream that places the text and the
+ * image. The chart is rasterised through the existing PNG path and re-encoded
+ * as JPEG, which the PDF embeds as-is under `/DCTDecode`; nothing needs zlib.
+ * JPEG has no alpha, so the chart background is always painted.
+ *
+ * Print opens a window with the standalone SVG and calls `print()`.
+ */
+import { chartToPngBlob, chartToSvgString } from './chart-export.js';
+const PAGES = { A4: [595.28, 841.89], Letter: [612, 792] };
+/** Latin-1 bytes of a string; anything outside it becomes `?`. */
+function latin1(s) {
+    const out = new Uint8Array(s.length);
+    for (let i = 0; i < s.length; i += 1) {
+        const c = s.charCodeAt(i);
+        out[i] = c < 256 ? c : 63;
+    }
+    return out;
+}
+/** A PDF string literal: parentheses and backslashes escaped. */
+function pdfText(s) {
+    return '(' + s.replace(/[\\()]/g, (m) => '\\' + m).replace(/[\r\n]+/g, ' ') + ')';
+}
+/** Roughly how wide Helvetica text is at a size, for fitting a line. */
+function textWidth(s, size) {
+    return s.length * size * 0.5;
+}
+/** Re-encode a PNG blob as JPEG on a painted background. */
+function pngToJpeg(png, background, quality) {
+    return new Promise((resolve, reject) => {
+        const url = URL.createObjectURL(png);
+        const img = new Image();
+        img.onload = () => {
+            const canvas = document.createElement('canvas');
+            canvas.width = img.naturalWidth || img.width;
+            canvas.height = img.naturalHeight || img.height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                URL.revokeObjectURL(url);
+                reject(new Error('canvas 2d context unavailable'));
+                return;
+            }
+            ctx.fillStyle = background;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, 0, 0);
+            URL.revokeObjectURL(url);
+            canvas.toBlob((blob) => {
+                if (!blob) {
+                    reject(new Error('toBlob failed'));
+                    return;
+                }
+                blob.arrayBuffer().then((buf) => resolve({ bytes: new Uint8Array(buf), width: canvas.width, height: canvas.height }), reject);
+            }, 'image/jpeg', quality);
+        };
+        img.onerror = () => { URL.revokeObjectURL(url); reject(new Error('failed to decode chart PNG')); };
+        img.src = url;
+    });
+}
+/**
+ * Assemble a one-page PDF from a JPEG and the text around it. Exported for
+ * tests and for callers that already have a JPEG; `chartToPdfBlob` is the
+ * one that starts from a chart element.
+ */
+export function buildChartPdf(jpeg, opts = {}) {
+    const [pw0, ph0] = PAGES[opts.page ?? 'A4'];
+    const landscape = opts.orientation ? opts.orientation === 'landscape' : jpeg.width / jpeg.height > pw0 / ph0;
+    const pw = landscape ? ph0 : pw0;
+    const ph = landscape ? pw0 : ph0;
+    const margin = 40;
+    const title = (opts.title ?? '').trim();
+    const subtitle = (opts.subtitle ?? '').trim();
+    const caption = (opts.caption ?? '').trim();
+    // Text block at the top, image below it, caption at the foot.
+    let y = ph - margin;
+    const content = [];
+    const line = (text, size, gray) => {
+        y -= size + 4;
+        content.push(`BT /F1 ${size} Tf ${gray} g ${margin} ${y.toFixed(2)} Td ${pdfText(text)} Tj ET`);
+    };
+    if (title)
+        line(title, 16, 0);
+    if (subtitle)
+        line(subtitle, 11, 0.4);
+    if (title || subtitle)
+        y -= 8;
+    const footer = caption ? 20 : 0;
+    const availW = pw - margin * 2;
+    const availH = y - margin - footer;
+    const scale = Math.min(availW / jpeg.width, availH / jpeg.height);
+    const iw = jpeg.width * scale;
+    const ih = jpeg.height * scale;
+    const ix = margin + (availW - iw) / 2;
+    const iy = y - ih;
+    content.push(`q ${iw.toFixed(2)} 0 0 ${ih.toFixed(2)} ${ix.toFixed(2)} ${iy.toFixed(2)} cm /Im1 Do Q`);
+    if (caption) {
+        const size = 9;
+        const text = textWidth(caption, size) > availW ? caption.slice(0, Math.floor(availW / (size * 0.5)) - 3) + '...' : caption;
+        content.push(`BT /F1 ${size} Tf 0.4 g ${margin} ${(margin - 4).toFixed(2)} Td ${pdfText(text)} Tj ET`);
+    }
+    const stream = content.join('\n');
+    const objects = [];
+    const offsets = [];
+    let length = 0;
+    const push = (part) => {
+        objects.push(part);
+        length += typeof part === 'string' ? part.length : part.length;
+    };
+    push('%PDF-1.4\n%âãÏÓ\n');
+    const obj = (n, body, bin) => {
+        offsets[n] = length;
+        push(`${n} 0 obj\n${body}\n`);
+        if (bin) {
+            push('stream\n');
+            push(bin);
+            push('\nendstream\n');
+        }
+        push('endobj\n');
+    };
+    obj(1, '<< /Type /Catalog /Pages 2 0 R >>');
+    obj(2, '<< /Type /Pages /Kids [3 0 R] /Count 1 >>');
+    obj(3, `<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ${pw.toFixed(2)} ${ph.toFixed(2)}] /Resources << /XObject << /Im1 4 0 R >> /Font << /F1 5 0 R >> >> /Contents 6 0 R >>`);
+    obj(4, `<< /Type /XObject /Subtype /Image /Width ${jpeg.width} /Height ${jpeg.height} /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /DCTDecode /Length ${jpeg.bytes.length} >>`, jpeg.bytes);
+    obj(5, '<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica /Encoding /WinAnsiEncoding >>');
+    obj(6, `<< /Length ${stream.length} >>`, latin1(stream));
+    const xref = length;
+    push(`xref\n0 7\n0000000000 65535 f \n`);
+    for (let n = 1; n <= 6; n += 1)
+        push(`${String(offsets[n]).padStart(10, '0')} 00000 n \n`);
+    push(`trailer\n<< /Size 7 /Root 1 0 R >>\nstartxref\n${xref}\n%%EOF\n`);
+    const out = new Uint8Array(new ArrayBuffer(length));
+    let at = 0;
+    for (const part of objects) {
+        const bytes = typeof part === 'string' ? latin1(part) : part;
+        out.set(bytes, at);
+        at += bytes.length;
+    }
+    return out;
+}
+/** The chart as a one-page PDF `Blob`. */
+export async function chartToPdfBlob(source, options = {}) {
+    const svg = source instanceof SVGSVGElement ? source : (source.querySelector('svg.sv-grid-chart-svg') ?? source.querySelector('svg'));
+    const background = options.background ?? (svg ? getComputedStyle(svg).getPropertyValue('--sg-bg').trim() || '#ffffff' : '#ffffff');
+    const png = await chartToPngBlob(source, { ...options, background, scale: options.scale ?? 2 });
+    const jpeg = await pngToJpeg(png, background, options.quality ?? 0.92);
+    const bytes = buildChartPdf(jpeg, options);
+    return new Blob([bytes.buffer], { type: 'application/pdf' });
+}
+/** Download the chart as a `.pdf` file. */
+export async function downloadChartPdf(source, filename = 'chart.pdf', options = {}) {
+    const blob = await chartToPdfBlob(source, options);
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+/**
+ * Print the chart: a new window with the standalone SVG (and the title
+ * above it), sized to the page, that opens the print dialog once it has
+ * drawn. Returns false when the window was blocked.
+ */
+export function printChart(source, options = {}) {
+    const svg = chartToSvgString(source, options);
+    const win = window.open('', '_blank', 'width=900,height=700');
+    if (!win)
+        return false;
+    const esc = (s) => s.replace(/[&<>]/g, (m) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' })[m]);
+    win.document.write(`<!doctype html><html><head><meta charset="utf-8"><title>${esc(options.title ?? 'Chart')}</title>` +
+        `<style>body{margin:24px;font-family:system-ui,sans-serif}h1{font-size:16px;margin:0 0 12px}svg{max-width:100%;height:auto}@page{margin:12mm}</style></head><body>` +
+        (options.title ? `<h1>${esc(options.title)}</h1>` : '') +
+        svg +
+        `</body></html>`);
+    win.document.close();
+    const go = () => { win.focus(); win.print(); };
+    if (win.document.readyState === 'complete')
+        setTimeout(go, 50);
+    else
+        win.addEventListener('load', () => setTimeout(go, 50));
+    return true;
+}

package/dist/chart-export.d.ts

@@ -31,7 +31,8 @@ export declare function downloadChartPng(source: SVGSVGElement | HTMLElement, fi
  *
  * A series that carries more than one number per category widens instead of
  * losing them. `ohlc` becomes four columns, `boxes` five plus its outliers,
- * `errors` two. This used to write `values` and nothing else, which quietly
+ * `errors` two, `lowValues` a low / high pair, `targets` a value / target
+ * pair. This used to write `values` and nothing else, which quietly
  * made "Export CSV" on a candlestick chart hand back the closing prices only -
  * the screen-reader table was given the four real numbers on purpose and the
  * export, which is what people actually take away, was not.

package/dist/chart-export.js

@@ -123,7 +123,9 @@ export async function downloadChartPng(source, filename = 'chart.png', options =
     setTimeout(() => URL.revokeObjectURL(url), 1000);
 }
 const csvCell = (v) => {
-    const s = v == null ? '' : String(v);
+    // A gap is an empty cell: `null` already was, and a NaN gap (the way a
+    // forecast series marks the months before it starts) wrote the word "NaN".
+    const s = v == null || (typeof v === 'number' && !Number.isFinite(v)) ? '' : String(v);
     return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
 };
 /**
@@ -132,7 +134,8 @@ const csvCell = (v) => {
  *
  * A series that carries more than one number per category widens instead of
  * losing them. `ohlc` becomes four columns, `boxes` five plus its outliers,
- * `errors` two. This used to write `values` and nothing else, which quietly
+ * `errors` two, `lowValues` a low / high pair, `targets` a value / target
+ * pair. This used to write `values` and nothing else, which quietly
  * made "Export CSV" on a candlestick chart hand back the closing prices only -
  * the screen-reader table was given the four real numbers on purpose and the
  * export, which is what people actually take away, was not.
@@ -165,11 +168,15 @@ export function chartSpecToCsv(spec) {
     const header = ['Category'];
     for (const s of series) {
         if (s.ohlc)
-            header.push(`${s.label} Open`, `${s.label} High`, `${s.label} Low`, `${s.label} Close`);
+            header.push(`${s.label} Open`, `${s.label} High`, `${s.label} Low`, `${s.label} Close`, ...(s.volumes ? [`${s.label} Volume`] : []));
         else if (s.boxes)
             header.push(`${s.label} Min`, `${s.label} Q1`, `${s.label} Median`, `${s.label} Q3`, `${s.label} Max`, `${s.label} Outliers`);
         else if (s.errors)
             header.push(s.label, `${s.label} Low`, `${s.label} High`);
+        else if (s.lowValues)
+            header.push(`${s.label} low`, `${s.label} high`);
+        else if (s.targets)
+            header.push(s.label, `${s.label} target`);
         else
             header.push(s.label);
     }
@@ -179,6 +186,8 @@ export function chartSpecToCsv(spec) {
             if (s.ohlc) {
                 const k = s.ohlc[i];
                 cells.push(k?.o ?? '', k?.h ?? '', k?.l ?? '', k?.c ?? '');
+                if (s.volumes)
+                    cells.push(s.volumes[i] ?? '');
             }
             else if (s.boxes) {
                 const b = s.boxes[i];
@@ -192,6 +201,12 @@ export function chartSpecToCsv(spec) {
                 const hi = e == null ? '' : typeof e === 'number' ? (v ?? 0) + Math.abs(e) : Math.max(e.lo, e.hi);
                 cells.push(v ?? '', lo, hi);
             }
+            else if (s.lowValues) {
+                cells.push(s.lowValues[i] ?? '', s.values[i] ?? '');
+            }
+            else if (s.targets) {
+                cells.push(s.values[i] ?? '', s.targets[i] ?? '');
+            }
             else {
                 cells.push(s.values[i] ?? '');
             }

package/dist/chart-financial.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Price-chart helpers: candle transforms, calendar resampling and the
+ * row-to-candlestick adapter. Indicators live in chart-indicators. DOM-free.
+ */
+import type { ChartSpec, OhlcBar, SeriesOverlay } from './chart-types.js';
+import { type ChartTimeBucket } from './chart-stats.js';
+import type { ChartIndicatorSpec } from './chart-indicators.js';
+/**
+ * Heikin-Ashi ("average bar") candles from ordinary OHLC bars. Each close is
+ * the mean of the four prices, each open the midpoint of the previous
+ * Heikin-Ashi body, and the high / low stretch to include both. Runs of one
+ * colour then read as trends, at the cost of the true open and close.
+ * `null` bars (gaps) stay null and reset the chain.
+ */
+export declare function heikinAshi(bars: ReadonlyArray<OhlcBar | null>): Array<OhlcBar | null>;
+/**
+ * Roll daily (or finer) bars up to a coarser calendar bucket: the first
+ * open, the highest high, the lowest low, the last close, the summed volume.
+ * Categories are ISO dates and come back as the bucket starts (`bucketStart`),
+ * sorted; bars whose date does not parse are dropped. Pass `volumes` to get
+ * them summed alongside.
+ */
+export declare function resampleOhlc(categories: ReadonlyArray<string>, ohlc: ReadonlyArray<OhlcBar | null>, opts: {
+    bucket: ChartTimeBucket;
+    volumes?: ReadonlyArray<number>;
+}): {
+    categories: string[];
+    ohlc: Array<OhlcBar | null>;
+    volumes?: number[];
+};
+/** What the grid's chart panel stores for a price chart: the column ids. */
+export type OhlcColumns = {
+    open: string | null;
+    high: string | null;
+    low: string | null;
+    close: string | null;
+    volume: string | null;
+};
+/**
+ * Guess the price columns from their names: the first numeric column called
+ * open / high / low / close (or last, price) / volume. What the chart panel
+ * shows before the reader picks anything; a picked column always wins.
+ */
+export declare function guessOhlcColumns(measures: ReadonlyArray<{
+    id: string;
+    field: string;
+    label: string;
+}>, picked?: Partial<OhlcColumns> | null): OhlcColumns;
+/**
+ * The `rowsToDirectSpec` options for the grid panel's price chart, or null
+ * while a price column is still unpicked. `fieldOf` maps a column id to its
+ * field name; the date column is the category.
+ */
+export declare function ohlcDirectOptions(fieldOf: (id: string | null) => string | null | undefined, dateId: string | null, cols: OhlcColumns, extra: {
+    bucket?: ChartTimeBucket | null;
+    candleStyle?: ChartSpec['candleStyle'] | null;
+}): {
+    category: string;
+    ohlc: NonNullable<Parameters<typeof import('./chart.js').rowsToDirectSpec>[2]['ohlc']>;
+} | null;
+/** The indicator names the grid's chart panel offers. */
+export type ChartPanelIndicator = 'volume' | 'rsi' | 'macd' | 'stochastic' | 'atr' | 'obv' | 'sma' | 'ema' | 'bb' | 'vwap';
+/**
+ * Split the panel's indicator list into the panes that go under the price
+ * (in order) and the one overlay that rides on it (a series carries a single
+ * `overlay`, so the first overlay kind wins).
+ */
+export declare function splitPanelIndicators(kinds: ReadonlyArray<ChartPanelIndicator>): {
+    panes: ChartIndicatorSpec[];
+    overlay: SeriesOverlay | null;
+};
+/**
+ * A candlestick spec straight from rows: one bar per date (sorted), with the
+ * volume alongside when a field is named, optionally rolled up to a calendar
+ * bucket first. The x axis is ordinal-time, so weekends and holidays leave no
+ * gaps.
+ */
+export declare function rowsToOhlcSpec<T extends Record<string, unknown>>(rows: ReadonlyArray<T>, opts: {
+    date: keyof T & string;
+    open: keyof T & string;
+    high: keyof T & string;
+    low: keyof T & string;
+    close: keyof T & string;
+    volume?: keyof T & string;
+    bucket?: ChartTimeBucket;
+    /** The series label. Default "Price". */
+    label?: string;
+    type?: 'candlestick' | 'ohlc';
+    candleStyle?: ChartSpec['candleStyle'];
+    lastPriceLine?: boolean;
+}): ChartSpec;