@svgrid/grid 3.0.2 → 3.0.4

package/src/chart-decimate.test.ts

@@ -0,0 +1,249 @@
+import { describe, expect, it } from 'vitest'
+import { buildChart, rowsToChartSpec, sliceChartWindow, type ChartSeries, type ChartSpec } from './chart'
+import { decimateSpec, lttb, minMaxIndices, pickCategories, PER_CATEGORY_SERIES_KEYS, PER_CATEGORY_SPEC_KEYS } from './chart-decimate'
+import { bucketStart, percentile, reduceValues } from './chart-stats'
+
+describe('pickCategories', () => {
+  it('cuts EVERY per-category array on a series, not just the ones that existed when it was written', () => {
+    // A series carrying every key in the list, each of a distinct length-4
+    // shape, so a key the picker forgets shows up as a wrong length.
+    const full: Required<Pick<ChartSeries, (typeof PER_CATEGORY_SERIES_KEYS)[number]>> = {
+      values: [1, 2, 3, 4],
+      rowIds: [[1], [2], [3], [4]],
+      upperValues: [2, 3, 4, 5],
+      lowerValues: [0, 1, 2, 3],
+      ohlc: [{ o: 1, h: 2, l: 0, c: 1 }, { o: 2, h: 3, l: 1, c: 2 }, { o: 3, h: 4, l: 2, c: 3 }, { o: 4, h: 5, l: 3, c: 4 }],
+      boxes: [null, null, { min: 1, q1: 2, median: 3, q3: 4, max: 5 }, null],
+      errors: [1, 2, 3, 4],
+      markers: [null, { shape: 'square' }, null, { shape: 'none' }],
+      colors: ['a', 'b', 'c', 'd'],
+      lowValues: [0, 1, 2, 3],
+      targets: [5, 6, 7, 8],
+      volumes: [100, 200, 300, 400],
+    }
+    const spec: ChartSpec = {
+      type: 'line',
+      categories: ['a', 'b', 'c', 'd'],
+      series: [{ label: 's', ...full }],
+      waterfallTotals: [false, true, false, true],
+    }
+    const out = pickCategories(spec, [1, 3])
+    expect(out.categories).toEqual(['b', 'd'])
+    for (const key of PER_CATEGORY_SERIES_KEYS) {
+      expect((out.series[0] as unknown as Record<string, unknown[]>)[key], key).toHaveLength(2)
+    }
+    for (const key of PER_CATEGORY_SPEC_KEYS) {
+      expect((out as unknown as Record<string, unknown[]>)[key], key).toHaveLength(2)
+    }
+    expect(out.series[0]!.values).toEqual([2, 4])
+    expect(out.series[0]!.rowIds).toEqual([[2], [4]])
+    expect(out.series[0]!.colors).toEqual(['b', 'd'])
+    expect(out.waterfallTotals).toEqual([true, true])
+  })
+
+  it('is what sliceChartWindow uses, with identical output for a contiguous range', () => {
+    const spec: ChartSpec = {
+      type: 'line',
+      categories: ['a', 'b', 'c', 'd', 'e'],
+      series: [{ label: 's', values: [1, 2, 3, 4, 5], upperValues: [2, 3, 4, 5, 6], lowerValues: [0, 1, 2, 3, 4], rowIds: [[1], [2], [3], [4], [5]] }],
+    }
+    expect(sliceChartWindow(spec, 1, 3)).toEqual(pickCategories(spec, [1, 2, 3]))
+    expect(sliceChartWindow(spec, 1, 3).series[0]!.upperValues).toEqual([3, 4, 5])
+    expect(sliceChartWindow(spec, -5, 99).categories).toEqual(spec.categories)
+    expect(sliceChartWindow(spec, 4, 2).categories).toEqual([])
+  })
+
+  it('does not invent arrays a series never had', () => {
+    const out = pickCategories({ type: 'bar', categories: ['a', 'b'], series: [{ label: 's', values: [1, 2] }] }, [0])
+    expect('rowIds' in out.series[0]!).toBe(false)
+    expect('waterfallTotals' in out).toBe(false)
+  })
+})
+
+describe('lttb', () => {
+  const n = 1000
+  const wave = Array.from({ length: n }, (_, i) => Math.sin(i / 20) * 100)
+  it('keeps the first and last points and returns ascending indices of the target length', () => {
+    const idx = lttb(wave, 100)
+    expect(idx).toHaveLength(100)
+    expect(idx[0]).toBe(0)
+    expect(idx[idx.length - 1]).toBe(n - 1)
+    for (let i = 1; i < idx.length; i += 1) expect(idx[i]).toBeGreaterThan(idx[i - 1]!)
+  })
+  it('preserves a spike that would vanish under naive striding', () => {
+    const flat = new Array(n).fill(10)
+    flat[537] = 1000
+    const idx = lttb(flat, 50)
+    expect(idx).toContain(537)
+  })
+  it('returns everything when there is nothing to thin', () => {
+    expect(lttb([1, 2, 3], 10)).toEqual([0, 1, 2])
+    expect(lttb([1, 2, 3, 4, 5], 2)).toEqual([0, 4])
+  })
+  it('never picks a gap as a representative point', () => {
+    const gappy = wave.map((v, i) => (i % 7 === 3 ? Number.NaN : v))
+    const idx = lttb(gappy, 120)
+    expect(idx.slice(1, -1).every((i) => Number.isFinite(gappy[i]))).toBe(true)
+  })
+})
+
+describe('minMaxIndices', () => {
+  it('keeps the extreme of every bucket', () => {
+    const v = Array.from({ length: 400 }, (_, i) => (i % 50 === 25 ? 500 : i % 50 === 10 ? -500 : 0))
+    const idx = minMaxIndices(v, 8)
+    for (let b = 0; b < 8; b += 1) {
+      expect(idx).toContain(b * 50 + 25)
+      expect(idx).toContain(b * 50 + 10)
+    }
+    expect(idx[0]).toBe(0)
+    expect(idx[idx.length - 1]).toBe(399)
+  })
+})
+
+describe('decimateSpec', () => {
+  const long = (type: ChartSpec['type'] = 'line', extra: Partial<ChartSpec> = {}): ChartSpec => ({
+    type,
+    categories: Array.from({ length: 5000 }, (_, i) => `c${i}`),
+    series: [
+      { label: 'a', values: Array.from({ length: 5000 }, (_, i) => Math.sin(i / 90) * 50), rowIds: Array.from({ length: 5000 }, (_, i) => [i]) },
+      { label: 'b', values: Array.from({ length: 5000 }, (_, i) => (i === 4321 ? 900 : Math.cos(i / 70) * 30)) },
+    ],
+    ...extra,
+  })
+  it('thins a long line to about the plot width and keeps rowIds aligned', () => {
+    const out = decimateSpec(long(), 400)
+    expect(out.categories.length).toBeLessThan(5000)
+    expect(out.categories.length).toBeGreaterThanOrEqual(400)
+    out.categories.forEach((c, k) => {
+      const i = Number(c.slice(1))
+      expect(out.series[0]!.rowIds![k]).toEqual([i])
+      expect(out.series[0]!.values[k]).toBe(Math.sin(i / 90) * 50)
+    })
+  })
+  it('keeps a spike that only one series has', () => {
+    const out = decimateSpec(long(), 300)
+    expect(out.categories).toContain('c4321')
+  })
+  it('does nothing below the threshold, when off, or when bars are involved', () => {
+    const short = { ...long(), categories: long().categories.slice(0, 100), series: long().series.map((s) => ({ ...s, values: s.values.slice(0, 100), rowIds: s.rowIds?.slice(0, 100) })) }
+    expect(decimateSpec(short, 400)).toBe(short)
+    const off = long('line', { decimate: false })
+    expect(decimateSpec(off, 400)).toBe(off)
+    const bars = long('bar')
+    expect(decimateSpec(bars, 400)).toBe(bars)
+    const combo = long('line', { series: [{ label: 'v', values: long().series[0]!.values, type: 'bar' }, long().series[1]!] })
+    expect(decimateSpec(combo, 400)).toBe(combo)
+  })
+  it('honours an explicit target and method', () => {
+    const a = decimateSpec(long(), 400, { target: 100 })
+    expect(a.categories.length).toBeLessThan(220)
+    const b = decimateSpec(long(), 400, { method: 'minmax', target: 100 })
+    expect(b.categories).toContain('c4321')
+  })
+  it('lays out through buildChart with the decimated categories', () => {
+    const geo = buildChart({ ...decimateSpec(long(), 500), width: 600, height: 300 })
+    expect(geo.lines[0]!.points.length).toBeLessThan(5000)
+    expect(geo.lines[0]!.points.length).toBeGreaterThan(100)
+  })
+})
+
+describe('reducers', () => {
+  const s = [5, 1, 4, 2, 3, 3]
+  it('computes every reducer', () => {
+    expect(reduceValues(s, 'sum')).toBe(18)
+    expect(reduceValues(s, 'avg')).toBe(3)
+    expect(reduceValues(s, 'count')).toBe(6)
+    expect(reduceValues(s, 'min')).toBe(1)
+    expect(reduceValues(s, 'max')).toBe(5)
+    expect(reduceValues(s, 'first')).toBe(5)
+    expect(reduceValues(s, 'last')).toBe(3)
+    expect(reduceValues(s, 'countDistinct')).toBe(5)
+    expect(reduceValues(s, 'median')).toBe(3)
+    expect(reduceValues(s, 'p90')).toBeCloseTo(4.5, 6)
+    expect(reduceValues(s, 'p100')).toBe(5)
+  })
+  it('an empty group is 0 for sum / count and a gap for the rest', () => {
+    expect(reduceValues([], 'sum')).toBe(0)
+    expect(reduceValues([], 'count')).toBe(0)
+    expect(reduceValues([], 'avg')).toBe(0)
+    expect(Number.isNaN(reduceValues([], 'median'))).toBe(true)
+    expect(Number.isNaN(reduceValues([], 'min'))).toBe(true)
+  })
+  it('percentile interpolates between order statistics', () => {
+    expect(percentile([10, 20, 30, 40], 50)).toBe(25)
+    expect(percentile([10, 20, 30, 40], 0)).toBe(10)
+    expect(percentile([10, 20, 30, 40], 100)).toBe(40)
+  })
+  it('rowsToChartSpec takes the new reducers', () => {
+    const rows = [
+      { region: 'N', v: 10 }, { region: 'N', v: 30 }, { region: 'N', v: 20 },
+      { region: 'S', v: 7 }, { region: 'S', v: 7 },
+    ]
+    expect(rowsToChartSpec(rows, { type: 'bar', category: 'region', value: 'v', reduce: 'median' }).series[0]!.values).toEqual([20, 7])
+    expect(rowsToChartSpec(rows, { type: 'bar', category: 'region', value: 'v', reduce: 'max' }).series[0]!.values).toEqual([30, 7])
+    expect(rowsToChartSpec(rows, { type: 'bar', category: 'region', value: 'v', reduce: 'countDistinct' }).series[0]!.values).toEqual([3, 1])
+    expect(rowsToChartSpec(rows, { type: 'bar', category: 'region', value: 'v', reduce: 'last' }).series[0]!.values).toEqual([20, 7])
+    // and the original three are untouched
+    expect(rowsToChartSpec(rows, { type: 'bar', category: 'region', value: 'v', reduce: 'avg' }).series[0]!.values).toEqual([20, 7])
+  })
+})
+
+describe('time bucketing', () => {
+  it('bucketStart lands on the calendar boundary, in UTC', () => {
+    expect(bucketStart('2026-03-18T15:00:00Z', 'day')).toBe('2026-03-18')
+    expect(bucketStart('2026-03-18', 'week')).toBe('2026-03-16') // a Wednesday -> its Monday
+    expect(bucketStart('2026-03-22', 'week')).toBe('2026-03-16') // Sunday belongs to the week before
+    expect(bucketStart('2026-03-18', 'month')).toBe('2026-03-01')
+    expect(bucketStart('2026-05-18', 'quarter')).toBe('2026-04-01')
+    expect(bucketStart('2026-12-31', 'quarter')).toBe('2026-10-01')
+    expect(bucketStart('2026-03-18', 'year')).toBe('2026-01-01')
+    expect(bucketStart(Date.UTC(2026, 0, 1), 'year')).toBe('2026-01-01')
+    expect(bucketStart('not a date', 'month')).toBe('')
+  })
+  it('rowsToChartSpec buckets a date category and sorts it chronologically', () => {
+    const rows = [
+      { day: '2026-03-20', v: 1 },
+      { day: '2026-01-05', v: 2 },
+      { day: '2026-03-02', v: 3 },
+      { day: '2026-01-30', v: 4 },
+      { day: 'garbage', v: 99 },
+    ]
+    const spec = rowsToChartSpec(rows, { type: 'line', category: 'day', value: 'v', bucket: 'month' })
+    expect(spec.categories).toEqual(['2026-01-01', '2026-03-01'])
+    expect(spec.series[0]!.values).toEqual([6, 4])
+    expect(spec.xType).toBe('ordinal-time')
+    const weeks = rowsToChartSpec(rows, { type: 'line', category: 'day', value: 'v', bucket: 'week', reduce: 'count' })
+    expect(weeks.categories).toEqual(['2026-01-05', '2026-01-26', '2026-03-02', '2026-03-16'])
+    expect(weeks.series[0]!.values).toEqual([1, 1, 1, 1])
+  })
+})
+
+describe('lttb with explicit x positions', () => {
+  it('measures the triangles in the given positions rather than by index', () => {
+    // Points crowd together in x except the last two, which are far apart. A
+    // spike at index 3 is small in area when x is the index, but with the
+    // real spacing the wide final segment matters more than the spike.
+    const values = [0, 0, 0, 5, 0, 0, 0, 10]
+    const xs = [0, 1, 2, 3, 4, 5, 6, 1000]
+    const byIndex = lttb(values, 4)
+    const byX = lttb(values, 4, xs)
+    expect(byIndex[0]).toBe(0)
+    expect(byIndex[byIndex.length - 1]).toBe(7)
+    expect(byX[0]).toBe(0)
+    expect(byX[byX.length - 1]).toBe(7)
+    expect(byX).toHaveLength(4)
+    // Both keep the first and last point and stay strictly increasing.
+    for (let k = 1; k < byX.length; k += 1) expect(byX[k]!).toBeGreaterThan(byX[k - 1]!)
+  })
+
+  it('decimateSpec passes log10 positions for a log number axis', () => {
+    const n = 2000
+    const categories = Array.from({ length: n }, (_, i) => String(Math.pow(10, (i / (n - 1)) * 4)))
+    const values = categories.map((c) => Math.log10(Number(c)) * 10 + (Number(c) > 5000 && Number(c) < 5100 ? 50 : 0))
+    const spec: ChartSpec = { type: 'line', categories, series: [{ label: 'v', values }], xAxis: { type: 'number', scale: 'log' } }
+    const thin = decimateSpec(spec, 300)
+    expect(thin.categories.length).toBeLessThan(n)
+    // The spike (a band of points 50 above the trend) survives.
+    expect(Math.max(...thin.series[0]!.values)).toBeGreaterThan(80)
+  })
+})

package/src/chart-decimate.ts

@@ -0,0 +1,186 @@
+/**
+ * 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, ChartSeries, ChartSpec } from './chart-types'
+
+/**
+ * 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',
+] as const satisfies ReadonlyArray<keyof ChartSeries>
+
+/** Spec-level arrays indexed by category (see {@link PER_CATEGORY_SERIES_KEYS}). */
+export const PER_CATEGORY_SPEC_KEYS = ['waterfallTotals'] as const satisfies ReadonlyArray<keyof ChartSpec>
+
+/**
+ * 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: ChartSpec, indices: ReadonlyArray<number>): ChartSpec {
+  const pick = <T,>(arr: T[] | undefined): T[] | undefined => {
+    if (!arr) return undefined
+    const out: T[] = 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: ChartSeries = { ...s, values: pick(s.values) ?? [] }
+    for (const key of PER_CATEGORY_SERIES_KEYS) {
+      if (key === 'values') continue
+      const arr = s[key] as unknown[] | undefined
+      if (arr) (next as unknown as Record<string, unknown>)[key] = pick(arr)
+    }
+    return next
+  })
+  const out: ChartSpec = { ...spec, categories: pick(spec.categories) ?? [], series }
+  for (const key of PER_CATEGORY_SPEC_KEYS) {
+    const arr = spec[key] as unknown[] | undefined
+    if (arr) (out as unknown as Record<string, unknown>)[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: ReadonlyArray<number>, target: number, xs?: ReadonlyArray<number>): number[] {
+  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: number) => (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: number[] = [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: ReadonlyArray<number>, buckets: number): number[] {
+  const n = values.length
+  if (buckets >= n || n <= 2) return values.map((_, i) => i)
+  const keep = new Set<number>([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: ChartDecimateConfig | undefined, plotW: number) {
+  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: ChartSpec, plotW: number, cfg: ChartDecimateConfig | undefined = spec.decimate): ChartSpec {
+  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: string | undefined) => 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<number>()
+  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/src/chart-export-pdf.test.ts

@@ -0,0 +1,91 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { buildChartPdf, printChart } from './chart-export-pdf'
+
+const ascii = (bytes: Uint8Array) => Array.from(bytes, (b) => String.fromCharCode(b)).join('')
+
+describe('buildChartPdf', () => {
+  // A fake JPEG: the SOI marker and a few bytes. The writer never inspects it.
+  const jpeg = { bytes: new Uint8Array([0xff, 0xd8, 0xff, 0xe0, 0x00, 0x10, 0x4a, 0x46, 0xff, 0xd9]), width: 800, height: 400 }
+
+  it('writes a one-page PDF with the image as a DCT XObject and the title as text', () => {
+    const out = buildChartPdf(jpeg, { title: 'Revenue (Q1)', subtitle: 'by region', caption: 'Source: ledger' })
+    const text = ascii(out)
+    expect(text.startsWith('%PDF-1.4')).toBe(true)
+    expect(text).toContain('/Type /Catalog')
+    expect(text).toContain('/Count 1')
+    expect(text).toContain('/Subtype /Image')
+    expect(text).toContain('/Filter /DCTDecode')
+    expect(text).toContain(`/Length ${jpeg.bytes.length}`)
+    expect(text).toContain('/BaseFont /Helvetica')
+    // Parentheses in the title are escaped inside the string literal.
+    expect(text).toContain('(Revenue \\(Q1\\)) Tj')
+    expect(text).toContain('(by region) Tj')
+    expect(text).toContain('(Source: ledger) Tj')
+    expect(text).toContain('/Im1 Do')
+    expect(text.trimEnd().endsWith('%%EOF')).toBe(true)
+    // The JPEG bytes are in there verbatim.
+    expect(text).toContain(ascii(jpeg.bytes))
+  })
+
+  it('has an xref table whose offsets point at each object', () => {
+    const out = buildChartPdf(jpeg)
+    const text = ascii(out)
+    const startxref = Number(/startxref\n(\d+)\n%%EOF/.exec(text)![1])
+    expect(text.slice(startxref, startxref + 4)).toBe('xref')
+    // Line 0 is "xref", line 1 "0 7", then one row per object from 0.
+    const rows = text.slice(startxref).split('\n').slice(2, 9)
+    for (let n = 1; n <= 6; n += 1) {
+      const offset = Number(rows[n]!.slice(0, 10))
+      expect(text.slice(offset, offset + `${n} 0 obj`.length)).toBe(`${n} 0 obj`)
+    }
+  })
+
+  it('picks landscape for a wide chart and portrait for a tall one, unless told otherwise', () => {
+    expect(ascii(buildChartPdf(jpeg))).toContain('/MediaBox [0 0 841.89 595.28]')
+    expect(ascii(buildChartPdf({ ...jpeg, width: 400, height: 800 }))).toContain('/MediaBox [0 0 595.28 841.89]')
+    expect(ascii(buildChartPdf(jpeg, { orientation: 'portrait', page: 'Letter' }))).toContain('/MediaBox [0 0 612.00 792.00]')
+  })
+
+  it('scales the image to fit inside the margins', () => {
+    const text = ascii(buildChartPdf(jpeg, { page: 'A4' }))
+    const m = /q ([\d.]+) 0 0 ([\d.]+) ([\d.]+) ([\d.]+) cm \/Im1 Do Q/.exec(text)!
+    const [w, h, x, y] = [1, 2, 3, 4].map((i) => Number(m[i])) as [number, number, number, number]
+    expect(w).toBeLessThanOrEqual(841.89 - 80)
+    expect(h).toBeCloseTo(w / 2, 1)
+    expect(x).toBeGreaterThanOrEqual(40)
+    expect(y).toBeGreaterThanOrEqual(40)
+  })
+})
+
+describe('printChart', () => {
+  afterEach(() => vi.restoreAllMocks())
+
+  it('opens a window with the standalone svg and prints it', () => {
+    const host = document.createElement('div')
+    host.innerHTML = '<svg class="sv-grid-chart-svg" viewBox="0 0 100 50"><rect class="sv-grid-chart-bar" width="10" height="10" fill="#f00"/></svg>'
+    document.body.appendChild(host)
+    const written: string[] = []
+    const fake = {
+      document: { write: (s: string) => written.push(s), close: () => {}, readyState: 'complete' },
+      focus: vi.fn(),
+      print: vi.fn(),
+      addEventListener: vi.fn(),
+    }
+    vi.spyOn(window, 'open').mockReturnValue(fake as unknown as Window)
+    vi.useFakeTimers()
+    expect(printChart(host, { title: 'Q1 <sales>' })).toBe(true)
+    vi.runAllTimers()
+    vi.useRealTimers()
+    expect(fake.print).toHaveBeenCalledTimes(1)
+    expect(written.join('')).toContain('<h1>Q1 &lt;sales&gt;</h1>')
+    expect(written.join('')).toContain('sv-grid-chart-bar')
+    host.remove()
+  })
+
+  it('reports a blocked popup instead of throwing', () => {
+    const host = document.createElement('div')
+    host.innerHTML = '<svg class="sv-grid-chart-svg" viewBox="0 0 100 50"></svg>'
+    vi.spyOn(window, 'open').mockReturnValue(null)
+    expect(printChart(host)).toBe(false)
+  })
+})