@svgrid/grid 3.0.2 → 3.0.4

package/dist/chart-financial.js

@@ -0,0 +1,175 @@
+import { bucketStart } from './chart-stats.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 function heikinAshi(bars) {
+    const out = new Array(bars.length);
+    let prev = null;
+    for (let i = 0; i < bars.length; i += 1) {
+        const b = bars[i];
+        if (!b || ![b.o, b.h, b.l, b.c].every(Number.isFinite)) {
+            out[i] = null;
+            prev = null;
+            continue;
+        }
+        const c = (b.o + b.h + b.l + b.c) / 4;
+        const o = prev ? (prev.o + prev.c) / 2 : (b.o + b.c) / 2;
+        const ha = { o, c, h: Math.max(b.h, o, c), l: Math.min(b.l, o, c) };
+        out[i] = ha;
+        prev = ha;
+    }
+    return out;
+}
+/**
+ * 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 function resampleOhlc(categories, ohlc, opts) {
+    const groups = new Map();
+    const order = [];
+    for (let i = 0; i < categories.length; i += 1) {
+        const t = Date.parse(categories[i]);
+        if (!Number.isFinite(t))
+            continue;
+        const key = bucketStart(t, opts.bucket);
+        if (!key)
+            continue;
+        let g = groups.get(key);
+        if (!g) {
+            g = { bar: null, vol: 0, first: Infinity, last: -Infinity };
+            groups.set(key, g);
+            order.push([key, Date.parse(key)]);
+        }
+        const b = ohlc[i];
+        if (b) {
+            // Rows may arrive out of order: the open is the EARLIEST bar's and the
+            // close the LATEST bar's, by date, not by position.
+            if (!g.bar)
+                g.bar = { ...b };
+            else {
+                g.bar.h = Math.max(g.bar.h, b.h);
+                g.bar.l = Math.min(g.bar.l, b.l);
+                if (t >= g.last)
+                    g.bar.c = b.c;
+                if (t <= g.first)
+                    g.bar.o = b.o;
+            }
+            if (t > g.last)
+                g.last = t;
+            if (t < g.first)
+                g.first = t;
+        }
+        const v = opts.volumes?.[i];
+        if (Number.isFinite(v))
+            g.vol += v;
+    }
+    order.sort((a, b) => a[1] - b[1]);
+    const out = {
+        categories: order.map(([k]) => k),
+        ohlc: order.map(([k]) => groups.get(k).bar),
+        ...(opts.volumes ? { volumes: order.map(([k]) => groups.get(k).vol) } : {}),
+    };
+    return out;
+}
+/**
+ * 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 function guessOhlcColumns(measures, picked) {
+    const guess = (re) => measures.find((m) => re.test(m.field) || re.test(m.label))?.id ?? null;
+    return {
+        open: picked?.open ?? guess(/open/i),
+        high: picked?.high ?? guess(/high/i),
+        low: picked?.low ?? guess(/low/i),
+        close: picked?.close ?? guess(/close|last|price/i),
+        volume: picked?.volume ?? guess(/vol/i),
+    };
+}
+/**
+ * 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 function ohlcDirectOptions(fieldOf, dateId, cols, extra) {
+    const date = fieldOf(dateId);
+    const open = fieldOf(cols.open);
+    const high = fieldOf(cols.high);
+    const low = fieldOf(cols.low);
+    const close = fieldOf(cols.close);
+    if (!date || !open || !high || !low || !close)
+        return null;
+    const volume = fieldOf(cols.volume);
+    return {
+        category: date,
+        ohlc: {
+            open, high, low, close,
+            ...(volume ? { volume } : {}),
+            ...(extra.bucket ? { bucket: extra.bucket } : {}),
+            ...(extra.candleStyle ? { candleStyle: extra.candleStyle } : {}),
+            lastPriceLine: true,
+        },
+    };
+}
+/**
+ * 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 function splitPanelIndicators(kinds) {
+    const OVERLAY = { sma: 'sma:20', ema: 'ema:20', bb: 'bb:20:2', vwap: 'vwap' };
+    const panes = [];
+    let overlay = null;
+    for (const k of kinds) {
+        const o = OVERLAY[k];
+        if (o) {
+            overlay ?? (overlay = o);
+            continue;
+        }
+        if (k === 'volume' || k === 'rsi' || k === 'macd' || k === 'stochastic' || k === 'atr' || k === 'obv')
+            panes.push({ kind: k });
+    }
+    return { panes, overlay };
+}
+/**
+ * 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 function rowsToOhlcSpec(rows, opts) {
+    const num = (v) => (typeof v === 'number' ? v : Number(v));
+    const sorted = rows
+        .map((r) => ({ r, t: Date.parse(String(r[opts.date])) }))
+        .filter((x) => Number.isFinite(x.t))
+        .sort((a, b) => a.t - b.t);
+    let categories = sorted.map((x) => new Date(x.t).toISOString().slice(0, 10));
+    let ohlc = sorted.map(({ r }) => {
+        const b = { o: num(r[opts.open]), h: num(r[opts.high]), l: num(r[opts.low]), c: num(r[opts.close]) };
+        return [b.o, b.h, b.l, b.c].every(Number.isFinite) ? b : null;
+    });
+    let volumes = opts.volume ? sorted.map(({ r }) => num(r[opts.volume])) : undefined;
+    if (opts.bucket) {
+        const rolled = resampleOhlc(categories, ohlc, { bucket: opts.bucket, volumes });
+        categories = rolled.categories;
+        ohlc = rolled.ohlc;
+        volumes = rolled.volumes;
+    }
+    const label = opts.label ?? 'Price';
+    const series = { label, values: ohlc.map((b) => (b ? b.c : Number.NaN)), ohlc, ...(volumes ? { volumes } : {}) };
+    return {
+        type: opts.type ?? 'candlestick',
+        categories,
+        series: [series],
+        xType: 'ordinal-time',
+        ...(opts.candleStyle ? { candleStyle: opts.candleStyle } : {}),
+        ...(opts.lastPriceLine ? { lastPriceLine: true } : {}),
+    };
+}

package/dist/chart-flow.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Flow layouts: waterfall, funnel and sankey.
+ */
+import type { ChartGeometry, LayoutCtx } from './chart-types.js';
+/** @internal Lay out the waterfall family. Called by buildChart. */
+export declare function layoutWaterfall(ctx: LayoutCtx): ChartGeometry;
+/** @internal Lay out the funnel family. Called by buildChart. */
+export declare function layoutFunnel(ctx: LayoutCtx): ChartGeometry;
+/** @internal Lay out the sankey family. Called by buildChart. */
+export declare function layoutSankey(ctx: LayoutCtx): ChartGeometry;

package/dist/chart-flow.js

@@ -0,0 +1,298 @@
+import { round, niceScale, formatChartValue, pickContrastText, DEFAULT_PALETTE } from './chart-scale.js';
+// ---- Waterfall ----------------------------------------------------
+// First series provides the values. Each non-total bar starts at the
+// running cumulative sum; total bars (waterfallTotals[i]) span from 0 to
+// that sum, and a total with a value of its own sets the sum to it first
+// (the opening balance of a bridge, or a subtotal supplied by the caller).
+// Color is derived from sign + total flag, with optional palette overrides
+// via spec.waterfallColors.
+/** @internal Lay out the waterfall family. Called by buildChart. */
+export function layoutWaterfall(ctx) {
+    const { spec, series, width, height, empty, frame, axes } = ctx;
+    const src = series[0];
+    if (!src)
+        return { ...empty };
+    const colors = spec.waterfallColors ?? {};
+    const positive = colors.positive ?? '#16a34a';
+    const negative = colors.negative ?? '#ef4444';
+    const total = colors.total ?? '#475569';
+    const maxLabel = spec.categories.reduce((m, c) => Math.max(m, c.length), 0);
+    const padL = 48 + (axes.y.title ? 16 : 0);
+    const padR = 12;
+    const padT = 10 + frame.top;
+    const plotW = Math.max(1, width - padL - padR);
+    // The same rule as a bar chart: labels tilt when the widest does not fit
+    // its slot. Judged by count alone, nine categories on a 900px chart were
+    // flagged as rotated with no angle to go with it, and drew truncated.
+    const xLabelRotated = typeof axes.x.labelRotation === 'number' ? axes.x.labelRotation !== 0 : maxLabel * 6.2 + 8 > plotW / Math.max(1, spec.categories.length);
+    const xLabelAngle = typeof axes.x.labelRotation === 'number' ? axes.x.labelRotation : xLabelRotated ? -40 : 0;
+    const padB = (xLabelRotated ? 54 : 28) + (axes.x.title ? 16 : 0) + frame.bottom;
+    const plotH = Math.max(1, height - padT - padB);
+    const plot = { x: padL, y: padT, w: plotW, h: plotH };
+    // Compute the running cumulative + per-bar (from, to) pairs.
+    const totals = spec.waterfallTotals ?? [];
+    const pairs = [];
+    let cum = 0;
+    spec.categories.forEach((_, i) => {
+        const v = src.values[i] ?? 0;
+        const isTotal = !!totals[i];
+        if (isTotal) {
+            // An opening "Revenue 4300" is a total with a value: it anchors the
+            // running sum. Read as a computed subtotal it drew as zero and every
+            // bar after it hung below the axis.
+            if (Number.isFinite(v) && v !== 0)
+                cum = v;
+            pairs.push({ from: 0, to: cum, value: cum, isTotal: true });
+        }
+        else {
+            pairs.push({ from: cum, to: cum + v, value: v, isTotal: false });
+            cum += v;
+        }
+    });
+    // Y-axis domain spans every visited level (including 0).
+    let dMin = 0, dMax = 0;
+    for (const p of pairs) {
+        if (p.from < dMin)
+            dMin = p.from;
+        if (p.to < dMin)
+            dMin = p.to;
+        if (p.from > dMax)
+            dMax = p.from;
+        if (p.to > dMax)
+            dMax = p.to;
+    }
+    const dom = niceScale(dMin, dMax);
+    const yOfW = (v) => round(padT + plotH - ((v - dom.min) / (dom.max - dom.min || 1)) * plotH);
+    const slotW = plotW / Math.max(1, spec.categories.length);
+    const barPad = slotW * 0.2;
+    const barW = Math.max(1, slotW - barPad);
+    const bars = pairs.map((p, i) => {
+        const yTop = yOfW(Math.max(p.from, p.to));
+        const yBot = yOfW(Math.min(p.from, p.to));
+        const x = padL + slotW * i + barPad / 2;
+        const color = p.isTotal ? total : p.value >= 0 ? positive : negative;
+        return {
+            x: round(x), y: yTop, w: round(barW), h: Math.max(1, yBot - yTop),
+            color, label: spec.categories[i] ?? String(i), series: src.label, value: p.value, index: i,
+        };
+    });
+    // Thin connector lines between bar tops -> running total reads cleanly.
+    const connectors = [{
+            path: pairs
+                .map((p, i) => {
+                const x0 = padL + slotW * i + barPad / 2 + barW;
+                const y = yOfW(p.to);
+                const x1 = padL + slotW * (i + 1) + barPad / 2;
+                // Skip the final connector beyond the last bar.
+                return i < pairs.length - 1 ? `M${x0},${y} L${x1},${y}` : '';
+            })
+                .filter(Boolean)
+                .join(' '),
+            areaPath: '',
+            color: 'var(--sg-muted, #94a3b8)',
+            label: '',
+            points: [],
+        }];
+    const xTicks = spec.categories.map((label, i) => ({
+        label,
+        x: round(padL + slotW * i + slotW / 2),
+    }));
+    const yTicks = dom.ticks.map((value) => ({
+        value, y: yOfW(value), label: formatChartValue(value, spec.valueFormat, spec),
+    }));
+    return {
+        ...empty,
+        plot,
+        bars,
+        lines: connectors,
+        yTicks,
+        xTicks,
+        xLabelRotated,
+        xLabelAngle,
+    };
+}
+// ---- Funnel -------------------------------------------------------
+// One series of strictly-decreasing values gets rendered as a stack
+// of horizontal trapezoids: each level's width is proportional to its
+// value relative to the largest, slope automatically links level N+1
+// narrower than level N. Labels show value, conversion vs. top, and
+// step drop-off.
+/** @internal Lay out the funnel family. Called by buildChart. */
+export function layoutFunnel(ctx) {
+    const { spec, series, width, height, empty, frame } = ctx;
+    const src = series[0];
+    if (!src || !src.values.length)
+        return { ...empty };
+    const padL = 20, padR = 20, padT = 16 + frame.top, padB = 16 + frame.bottom;
+    const plotW = Math.max(1, width - padL - padR);
+    const plotH = Math.max(1, height - padT - padB);
+    const plot = { x: padL, y: padT, w: plotW, h: plotH };
+    const n = src.values.length;
+    const stepH = plotH / n;
+    const valMax = Math.max(...src.values.map((v) => (Number.isFinite(v) ? v : 0)));
+    const top = src.values[0] ?? 0;
+    const widthAt = (v) => (valMax > 0 ? (v / valMax) * plotW : 0);
+    const cx = padL + plotW / 2;
+    const palette = spec.palette ?? DEFAULT_PALETTE;
+    const shape = spec.funnelShape ?? 'trapezoid';
+    const segments = src.values.map((v, i) => {
+        const next = src.values[i + 1] ?? v * 0.8; // taper to a point on the last level
+        const y0 = padT + stepH * i;
+        const y1 = y0 + stepH;
+        let path;
+        if (shape === 'pyramid') {
+            // Widest at the bottom: a pyramid of levels, each a slice of one big
+            // triangle. The top level is the point.
+            const wTop = (plotW * i) / n;
+            const wBot = (plotW * (i + 1)) / n;
+            path = `M${cx - wTop / 2},${y0} L${cx + wTop / 2},${y0} L${cx + wBot / 2},${y1} L${cx - wBot / 2},${y1} Z`;
+        }
+        else if (shape === 'cone') {
+            // One triangle, sliced: the width at each level follows its share of
+            // the height, so the whole funnel is a cone that tapers to a point.
+            const wTop = plotW * (1 - i / n);
+            const wBot = plotW * (1 - (i + 1) / n);
+            path = `M${cx - wTop / 2},${y0} L${cx + wTop / 2},${y0} L${cx + wBot / 2},${y1} L${cx - wBot / 2},${y1} Z`;
+        }
+        else {
+            const w0 = widthAt(v);
+            const w1 = widthAt(next);
+            path = `M${cx - w0 / 2},${y0} L${cx + w0 / 2},${y0} L${cx + w1 / 2},${y1} L${cx - w1 / 2},${y1} Z`;
+        }
+        const color = src.color ?? palette[i % palette.length];
+        return {
+            path, color,
+            label: spec.categories[i] ?? src.label,
+            value: v,
+            conversion: top > 0 ? v / top : 0,
+            dropoff: i === 0 ? 0 : (src.values[i - 1] ?? v) > 0 ? 1 - v / (src.values[i - 1] ?? v) : 0,
+            cx,
+            cy: (y0 + y1) / 2,
+            textColor: pickContrastText(color),
+        };
+    });
+    return {
+        ...empty,
+        plot,
+        funnelSegments: segments,
+    };
+}
+// ---- Sankey -------------------------------------------------------
+// Multi-column flow layout. Each node assigned to a column by longest
+// path from any source. Within a column, nodes are stacked vertically;
+// height proportional to max(totalIn, totalOut). Links render as
+// bezier ribbons whose width is the link value (in pixels).
+/** @internal Lay out the sankey family. Called by buildChart. */
+export function layoutSankey(ctx) {
+    const { spec, width, height, empty, frame } = ctx;
+    const nodes = spec.sankeyNodes ?? [];
+    const links = spec.sankeyLinks ?? [];
+    if (!nodes.length || !links.length)
+        return { ...empty };
+    const padL = 10, padR = 10, padT = 14 + frame.top, padB = 14 + frame.bottom;
+    const plotW = Math.max(1, width - padL - padR);
+    const plotH = Math.max(1, height - padT - padB);
+    const plot = { x: padL, y: padT, w: plotW, h: plotH };
+    const palette = spec.palette ?? DEFAULT_PALETTE;
+    const nodeById = new Map(nodes.map((n) => [n.id, n]));
+    // Column = longest path from any node with no incoming edges.
+    const targets = new Set(links.map((l) => l.target));
+    const sources = nodes.filter((n) => !targets.has(n.id));
+    const column = new Map();
+    function visit(id, depth, seen) {
+        if (seen.has(id))
+            return;
+        seen.add(id);
+        const cur = column.get(id) ?? 0;
+        if (depth > cur || !column.has(id))
+            column.set(id, depth);
+        for (const l of links)
+            if (l.source === id)
+                visit(l.target, depth + 1, seen);
+        seen.delete(id);
+    }
+    for (const s of sources)
+        visit(s.id, 0, new Set());
+    // Cover any nodes with no path from a source (orphan rings).
+    for (const n of nodes)
+        if (!column.has(n.id))
+            column.set(n.id, 0);
+    const maxCol = Math.max(...column.values());
+    const cols = maxCol + 1;
+    const nodeW = 14;
+    const gapBetweenColumns = cols > 1 ? (plotW - nodeW * cols) / (cols - 1) : 0;
+    // Totals per node.
+    const totalIn = new Map();
+    const totalOut = new Map();
+    for (const l of links) {
+        totalIn.set(l.target, (totalIn.get(l.target) ?? 0) + l.value);
+        totalOut.set(l.source, (totalOut.get(l.source) ?? 0) + l.value);
+    }
+    // Per-column groups + max total in that column.
+    const byCol = new Map();
+    for (const n of nodes) {
+        const c = column.get(n.id) ?? 0;
+        const arr = byCol.get(c) ?? [];
+        arr.push(n.id);
+        byCol.set(c, arr);
+    }
+    // Per-column total height + node height scale.
+    let maxColTotal = 0;
+    for (const ids of byCol.values()) {
+        const t = ids.reduce((s, id) => s + Math.max(totalIn.get(id) ?? 0, totalOut.get(id) ?? 0), 0);
+        if (t > maxColTotal)
+            maxColTotal = t;
+    }
+    if (maxColTotal === 0)
+        return { ...empty, plot };
+    const nodeGapPx = 8;
+    const heightScale = (plotH - nodeGapPx * 8) / maxColTotal; // leave gap room
+    const placed = [];
+    for (const [c, ids] of byCol) {
+        const heights = ids.map((id) => Math.max(8, Math.max(totalIn.get(id) ?? 0, totalOut.get(id) ?? 0) * heightScale));
+        const totalH = heights.reduce((s, h) => s + h, 0) + nodeGapPx * (ids.length - 1);
+        let yCursor = padT + (plotH - totalH) / 2;
+        const xCol = padL + c * (nodeW + gapBetweenColumns);
+        ids.forEach((id, idx) => {
+            const node = nodeById.get(id);
+            const h = heights[idx];
+            placed.push({
+                id,
+                label: node.label ?? id,
+                color: node.color ?? palette[(placed.length) % palette.length],
+                x: xCol, y: yCursor, w: nodeW, h,
+                column: c,
+                totalIn: totalIn.get(id) ?? 0,
+                totalOut: totalOut.get(id) ?? 0,
+            });
+            yCursor += h + nodeGapPx;
+        });
+    }
+    const placedById = new Map(placed.map((n) => [n.id, n]));
+    // Per-node sub-cursor so multiple links from one node stack vertically.
+    const inCursor = new Map();
+    const outCursor = new Map();
+    const builtLinks = [];
+    // Sort links so wider ribbons render first (so thin ribbons stack on top).
+    const sortedLinks = links.slice().sort((a, b) => b.value - a.value);
+    for (const link of sortedLinks) {
+        const a = placedById.get(link.source);
+        const b = placedById.get(link.target);
+        if (!a || !b)
+            continue;
+        const linkH = Math.max(1, link.value * heightScale);
+        const aY = a.y + (outCursor.get(a.id) ?? 0) + linkH / 2;
+        const bY = b.y + (inCursor.get(b.id) ?? 0) + linkH / 2;
+        outCursor.set(a.id, (outCursor.get(a.id) ?? 0) + linkH);
+        inCursor.set(b.id, (inCursor.get(b.id) ?? 0) + linkH);
+        const x0 = a.x + a.w;
+        const x1 = b.x;
+        const mid = (x0 + x1) / 2;
+        const path = `M${x0},${aY} C${mid},${aY} ${mid},${bY} ${x1},${bY}`;
+        builtLinks.push({
+            path, color: link.color ?? a.color, width: linkH,
+            source: link.source, target: link.target, value: link.value,
+        });
+    }
+    return { ...empty, plot, sankeyNodes: placed, sankeyLinks: builtLinks };
+}

package/dist/chart-format.d.ts

@@ -0,0 +1,18 @@
+import type { ChartFormatLocale, ChartValueFormat } from './chart-types.js';
+/** @internal Locale-free compact tick label (1.2k / 1.2M). */
+export declare function fmtTick(n: number): string;
+/**
+ * Format a numeric value for display, honouring an optional `valueFormat`.
+ *
+ * Two modes, on purpose. With no `locale` and no `currency` this is the original
+ * locale-free output: the compact `1.2k` / `1.2M` base, currency prefixed with
+ * `$` (sign outside), percent multiplied by 100 and suffixed `%`. Set either one
+ * and it switches to `Intl.NumberFormat`, so separators, the decimal mark and the
+ * compact suffixes all follow the locale.
+ *
+ * Keeping the old path as the default is deliberate rather than lazy. `Intl`'s
+ * compact notation is not the same string even for `en-US` (`1.2K`, capital),
+ * so formatting everything through it would silently restyle every axis in every
+ * existing chart. Opting in is the only version of this that is not a surprise.
+ */
+export declare function formatChartValue(n: number, format?: ChartValueFormat, opts?: ChartFormatLocale): string;

package/dist/chart-format.js

@@ -0,0 +1,65 @@
+/**
+ * Number formatting for chart values: the compact `1.2k` tick label and
+ * `formatChartValue`, which honours a spec's `valueFormat`, `locale` and
+ * `currency`.
+ *
+ * A leaf of its own, and deliberately small. The chart engine and the lazily
+ * loaded summary (chart-summary.ts) both need it, and a bundler hoists
+ * whatever the base chunk and a lazy chunk share into a third chunk. When
+ * that shared module was all of chart-scale.ts the hoist cost the base
+ * bundle a kilobyte of gzip locality for no new code; two functions cost a
+ * few dozen bytes. chart-scale.ts re-exports both, so importers of the old
+ * home keep working.
+ */
+import { getNumberFormatter } from './cell-formatting.js';
+/** @internal Locale-free compact tick label (1.2k / 1.2M). */
+export function fmtTick(n) {
+    const abs = Math.abs(n);
+    if (abs >= 1000000)
+        return `${(n / 1000000).toFixed(abs % 1000000 ? 1 : 0)}M`;
+    if (abs >= 1000)
+        return `${(n / 1000).toFixed(abs % 1000 ? 1 : 0)}k`;
+    return String(Math.round(n * 100) / 100);
+}
+/**
+ * Format a numeric value for display, honouring an optional `valueFormat`.
+ *
+ * Two modes, on purpose. With no `locale` and no `currency` this is the original
+ * locale-free output: the compact `1.2k` / `1.2M` base, currency prefixed with
+ * `$` (sign outside), percent multiplied by 100 and suffixed `%`. Set either one
+ * and it switches to `Intl.NumberFormat`, so separators, the decimal mark and the
+ * compact suffixes all follow the locale.
+ *
+ * Keeping the old path as the default is deliberate rather than lazy. `Intl`'s
+ * compact notation is not the same string even for `en-US` (`1.2K`, capital),
+ * so formatting everything through it would silently restyle every axis in every
+ * existing chart. Opting in is the only version of this that is not a surprise.
+ */
+export function formatChartValue(n, format, opts) {
+    if (!Number.isFinite(n))
+        return '';
+    const localized = opts && (opts.locale || opts.currency);
+    if (localized) {
+        // Compact notation because these are axis ticks and data labels, where a
+        // full-precision number is what makes an axis unreadable.
+        const style = format === 'currency' ? 'currency' : format === 'percent' ? 'percent' : 'decimal';
+        const o = { notation: 'compact', maximumFractionDigits: 1 };
+        if (style === 'currency') {
+            o.style = 'currency';
+            // `style: 'currency'` throws without a code, so fall back to the symbol
+            // this used to hard-code rather than refusing to draw the chart.
+            o.currency = opts.currency || 'USD';
+        }
+        else if (style === 'percent') {
+            o.style = 'percent';
+        }
+        return getNumberFormatter(opts.locale, o).format(n);
+    }
+    if (format === 'currency')
+        return `${n < 0 ? '-' : ''}$${fmtTick(Math.abs(n))}`;
+    if (format === 'percent') {
+        const p = n * 100;
+        return `${Math.round(p * 10) / 10}%`;
+    }
+    return fmtTick(n);
+}

package/dist/chart-grid.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Grid layouts: heatmap and the calendar heatmap.
+ */
+import type { ChartGeometry, LayoutCtx } from './chart-types.js';
+/** @internal Lay out the calendar family. Called by buildChart. */
+export declare function layoutCalendar(ctx: LayoutCtx): ChartGeometry;
+/** @internal Lay out the heatmap family. Called by buildChart. */
+export declare function layoutHeatmap(ctx: LayoutCtx): ChartGeometry;