@svgrid/grid 3.0.1 → 3.0.3

package/src/SvGridChart.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it } from 'vitest'
-import { mount, unmount } from 'svelte'
+import { mount, unmount, createRawSnippet, flushSync } from 'svelte'
 import SvGridChart from './SvGridChart.svelte'
 import type { ChartSpec } from './chart'
 
@@ -67,3 +67,245 @@ describe('SvGridChart horizontal bars', () => {
     expect(axisText).toContain('Grace')
   })
 })
+
+describe('SvGridChart candlesticks', () => {
+  const bars = [
+    { o: 100, h: 110, l: 95, c: 105 },
+    { o: 105, h: 108, l: 99, c: 101 },
+  ]
+  const priced = (type: 'candlestick' | 'ohlc'): ChartSpec => ({
+    type,
+    categories: ['2026-03-02', '2026-03-03'],
+    series: [{ label: 'ACME', values: bars.map((b) => b.c), ohlc: bars }],
+  })
+
+  it('draws a body and a wick per bar', () => {
+    const el = render(priced('candlestick'))
+    expect(el.querySelectorAll('rect.sv-grid-chart-candle')).toHaveLength(2)
+    expect(el.querySelectorAll('line.sv-grid-chart-wick')).toHaveLength(2)
+  })
+
+  it('a rising candle is hollow, a falling one filled', () => {
+    const el = render(priced('candlestick'))
+    const [up, down] = [...el.querySelectorAll('rect.sv-grid-chart-candle')]
+    expect(up!.getAttribute('fill')).toBe('none')
+    expect(down!.getAttribute('fill')).not.toBe('none')
+  })
+
+  it('ohlc draws three ticks per bar and no body', () => {
+    const el = render(priced('ohlc'))
+    expect(el.querySelectorAll('line.sv-grid-chart-ohlc')).toHaveLength(6)
+    expect(el.querySelectorAll('rect.sv-grid-chart-candle')).toHaveLength(0)
+  })
+
+  it('gives a screen reader the four real prices, not just the closes', () => {
+    const el = render(priced('candlestick'))
+    const head = [...el.querySelectorAll('th')].map((t) => t.textContent)
+    expect(head).toEqual(['Date', 'Series', 'Open', 'High', 'Low', 'Close'])
+  })
+})
+
+describe('dense charts (more categories than pixels)', () => {
+  const line = (n: number): ChartSpec => ({
+    type: 'line',
+    categories: Array.from({ length: n }, (_, i) => `c${i}`),
+    series: [{ label: 's', values: Array.from({ length: n }, (_, i) => Math.sin(i / 7) * 50 + 60) }],
+    width: 800,
+    height: 400,
+  })
+
+  it('draws a dot and a hit rect per point while there is room', () => {
+    const el = render(line(40)) // 800px / 40 = 20px a category
+    expect(el.querySelectorAll('.sv-grid-chart-dot').length).toBe(40)
+    expect(el.querySelectorAll('.sv-grid-chart-cat-hit').length).toBe(40)
+  })
+
+  it('collapses the dots and the hit layer once categories go sub-pixel', () => {
+    // 800px / 5000 = 0.16px a category. Per-category machinery here is not just
+    // slow, it is useless: the dots overlap into a smear and a hit rect is
+    // narrower than the pointer.
+    const el = render(line(5000))
+    expect(el.querySelectorAll('.sv-grid-chart-dot').length).toBe(0)
+    const hits = el.querySelectorAll('.sv-grid-chart-cat-hit')
+    expect(hits.length).toBe(1)
+    expect(hits[0]!.getAttribute('data-dense')).toBe('true')
+    // The line itself is still drawn in full - this is about the marks on it,
+    // not about dropping data.
+    expect(el.querySelector('.sv-grid-chart-linepath')).toBeTruthy()
+  })
+
+  it('keeps the aria-label off the render path when dense', () => {
+    // Each per-category rect labels itself by calling catRows(), so 5000 rects
+    // meant 5000 tooltip-row computations before anything was hovered.
+    const el = render(line(5000))
+    const label = el.querySelector('.sv-grid-chart-cat-hit')!.getAttribute('aria-label')!
+    expect(label).toContain('5000 points')
+    expect(label).toContain('Arrow keys')
+  })
+
+  it('caps the screen-reader table and says so in the caption', () => {
+    const el = render(line(5000))
+    const rows = el.querySelectorAll('.sv-grid-chart-sr-only tbody tr')
+    expect(rows.length).toBe(1000)
+    expect(el.querySelector('.sv-grid-chart-sr-only caption')!.textContent).toContain('first 1000 of 5000')
+  })
+
+  it('leaves a small chart entirely alone', () => {
+    const el = render(line(40))
+    expect(el.querySelector('.sv-grid-chart-sr-only tbody')!.children.length).toBe(40)
+    expect(el.querySelector('.sv-grid-chart-sr-only caption')!.textContent).not.toContain('first')
+    expect(el.querySelector('[data-dense]')).toBeNull()
+  })
+
+  it('does not collapse a bar chart, whose marks ARE the data', () => {
+    // Dropping dots loses nothing because the line still shows the shape.
+    // Dropping bars would draw an empty chart, so density only governs the
+    // dot / hit / label / table layers, never the marks themselves.
+    //
+    // 1200 rather than 5000 only because jsdom takes seconds to build that many
+    // <rect> nodes; 1200 at 800px is already 0.67px a bar, well inside dense.
+    const el = render({ ...line(1200), type: 'bar' })
+    expect(el.querySelectorAll('.sv-grid-chart-bar').length).toBe(1200)
+    expect(el.querySelector('[data-dense]')).toBeTruthy()
+  })
+})
+
+describe('custom-series seam (underlay / overlay snippets)', () => {
+  const spec: ChartSpec = {
+    type: 'bar',
+    categories: ['a', 'b', 'c'],
+    series: [{ label: 's', values: [10, 20, 30] }],
+    width: 500,
+    height: 300,
+  }
+
+  it('renders both snippets inside the chart svg', () => {
+    const el = render(spec, {
+      underlay: createRawSnippet(() => ({ render: () => `<rect class="my-under" />` })),
+      overlay: createRawSnippet(() => ({ render: () => `<rect class="my-over" />` })),
+    })
+    expect(el.querySelector('.sv-grid-chart-svg .my-under')).toBeTruthy()
+    expect(el.querySelector('.sv-grid-chart-svg .my-over')).toBeTruthy()
+  })
+
+  it('puts the underlay beneath the bars and the overlay above them', () => {
+    const el = render(spec, {
+      underlay: createRawSnippet(() => ({ render: () => `<rect class="my-under" />` })),
+      overlay: createRawSnippet(() => ({ render: () => `<rect class="my-over" />` })),
+    })
+    // SVG paints in document order, so position IS z-order.
+    const nodes = [...el.querySelectorAll('.sv-grid-chart-svg *')]
+    const under = nodes.findIndex((n) => n.classList.contains('my-under'))
+    const bar = nodes.findIndex((n) => n.classList.contains('sv-grid-chart-bar'))
+    const over = nodes.findIndex((n) => n.classList.contains('my-over'))
+    expect(under).toBeGreaterThanOrEqual(0)
+    expect(under).toBeLessThan(bar)
+    expect(bar).toBeLessThan(over)
+  })
+
+  it('keeps the hit layer above the overlay, so tooltips still work', () => {
+    // A custom mark must not be able to swallow the tooltips, the keyboard
+    // navigation or the drill clicks.
+    const el = render(spec, {
+      overlay: createRawSnippet(() => ({ render: () => `<rect class="my-over" />` })),
+    })
+    const nodes = [...el.querySelectorAll('.sv-grid-chart-svg *')]
+    const over = nodes.findIndex((n) => n.classList.contains('my-over'))
+    const hit = nodes.findIndex((n) => n.classList.contains('sv-grid-chart-cat-hit'))
+    expect(hit).toBeGreaterThan(over)
+  })
+
+  it('draws nothing extra when no snippet is passed', () => {
+    const el = render(spec)
+    expect(el.querySelector('.my-over')).toBeNull()
+    expect(el.querySelector('.sv-grid-chart-bar')).toBeTruthy()
+  })
+})
+
+describe('interactive annotations', () => {
+  const spec: ChartSpec = {
+    type: 'bar',
+    categories: ['a', 'b', 'c'],
+    series: [{ label: 's', values: [10, 20, 30] }],
+    width: 500,
+    height: 300,
+  }
+  const noted: ChartSpec = { ...spec, annotations: [{ at: { category: 'b' }, label: 'deploy' }] }
+
+  it('shows no toggle unless asked for', () => {
+    const el = render(spec, { toolbar: true })
+    expect([...el.querySelectorAll('.sv-grid-chart-tool')].some((b) => b.textContent?.includes('Annotate'))).toBe(false)
+  })
+
+  it('adds an Annotate toggle, off to begin with', () => {
+    const el = render(spec, { annotatable: true })
+    const btn = [...el.querySelectorAll('.sv-grid-chart-tool')].find((b) => b.textContent?.includes('Annotate'))!
+    expect(btn).toBeTruthy()
+    expect(btn.getAttribute('aria-pressed')).toBe('false')
+  })
+
+  it('reports the data point picked, not a pixel', () => {
+    const seen: unknown[] = []
+    const el = render(spec, { annotatable: true, onAnnotate: (a: unknown) => seen.push(a) })
+    const btn = [...el.querySelectorAll('.sv-grid-chart-tool')].find((b) => b.textContent?.includes('Annotate'))! as HTMLButtonElement
+    btn.click()
+    flushSync()
+    ;(el.querySelectorAll('.sv-grid-chart-cat-hit')[1] as SVGElement).dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    flushSync()
+    // Anchored to a category, so the note survives a re-layout, a re-sort or a
+    // zoom - which a pixel would not.
+    expect(seen).toEqual([{ category: 'b', index: 1, value: 20 }])
+  })
+
+  it('takes over the drill gesture rather than firing both', () => {
+    const drills: unknown[] = []
+    const notes: unknown[] = []
+    const el = render(spec, {
+      annotatable: true,
+      onSelect: (s: unknown) => drills.push(s),
+      onAnnotate: (a: unknown) => notes.push(a),
+    })
+    const hit = () => (el.querySelectorAll('.sv-grid-chart-cat-hit')[0] as SVGElement).dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    hit()
+    flushSync()
+    expect(drills).toHaveLength(1)
+    expect(notes).toHaveLength(0)
+
+    const btn = [...el.querySelectorAll('.sv-grid-chart-tool')].find((b) => b.textContent?.includes('Annotate'))! as HTMLButtonElement
+    btn.click()
+    flushSync()
+    hit()
+    flushSync()
+    expect(notes).toHaveLength(1)
+    expect(drills).toHaveLength(1) // not both
+  })
+
+  it('makes existing markers removable, by mouse and by keyboard', () => {
+    const removed: number[] = []
+    const el = render(noted, { annotatable: true, onAnnotationRemove: (i: number) => removed.push(i) })
+    const marker = () => el.querySelector('.sv-grid-chart-annotation-marker') as SVGElement
+    // Inert until the mode is on.
+    expect(marker().getAttribute('role')).toBeNull()
+    marker().dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(removed).toEqual([])
+
+    const btn = [...el.querySelectorAll('.sv-grid-chart-tool')].find((b) => b.textContent?.includes('Annotate'))! as HTMLButtonElement
+    btn.click()
+    flushSync()
+    expect(marker().getAttribute('role')).toBe('button')
+    expect(marker().getAttribute('tabindex')).toBe('0')
+    marker().dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    flushSync()
+    expect(removed).toEqual([0])
+
+    marker().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+    flushSync()
+    expect(removed).toEqual([0, 0])
+  })
+
+  it('renders annotations normally when the mode is off', () => {
+    const el = render(noted)
+    expect(el.querySelectorAll('.sv-grid-chart-annotation-marker')).toHaveLength(1)
+    expect(el.querySelector('.sv-grid-chart-annotation-label')!.textContent).toBe('deploy')
+  })
+})

package/src/SvGridChartPanel.svelte

@@ -15,7 +15,7 @@
   import { fly } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import SvGridChart from "./SvGridChart.svelte";
-  import { downloadChartPng, downloadChartSvg, downloadChartCsv, chartToPngBlob } from "./chart-export";
+  import { downloadChartPng, downloadChartSvg, downloadChartCsv, chartCsvExportable, chartToPngBlob } from "./chart-export";
   import type { ChartType, ChartSelection, RowData, TableFeatures } from "./index";
   import type { SvGridController } from "./SvGrid.controller.svelte";
 
@@ -126,14 +126,103 @@
   const chartW = $derived(bodyW > 24 ? bodyW - 8 : undefined);
   const chartH = $derived(bodyH > 24 ? Math.max(120, bodyH - 8 - reserve) : undefined);
 
-  // Aggregation-friendly types offered in the picker; exotic types come via
-  // `buildSpec`, where the picker is hidden.
-  const TYPES: Array<{ value: ChartType; label: string }> = [
-    { value: "bar", label: "Bar" },
-    { value: "line", label: "Line" },
-    { value: "area", label: "Area" },
-    { value: "pie", label: "Pie" },
+  /**
+   * The chart types the picker offers, grouped by what they are FOR.
+   *
+   * This used to be four entries while the engine drew fifteen, so nine types
+   * were reachable only by hand-writing a spec - and `charting.defaultType`
+   * accepted them all, which meant setting one left the picker showing
+   * something else entirely.
+   *
+   * `needs` gates on COLUMN SHAPE only, never on the data. Column shape is
+   * stable while the user filters; row counts are not, and a picker whose
+   * options vanish mid-session because a filter emptied a group is worse than
+   * one that explains itself. Data-level problems get a sentence instead, see
+   * `typeIssue` below.
+   */
+  type TypeDef = {
+    value: ChartType;
+    label: string;
+    group: string;
+    needs?: (c: { dims: unknown[]; measures: unknown[]; dates: unknown[] }) => boolean;
+  };
+  const TYPES: TypeDef[] = [
+    { value: "bar", label: "Bar", group: "Compare" },
+    { value: "line", label: "Line", group: "Compare" },
+    { value: "area", label: "Area", group: "Compare" },
+    { value: "pie", label: "Pie", group: "Part of a whole" },
+    { value: "treemap", label: "Tree map", group: "Part of a whole" },
+    { value: "funnel", label: "Funnel", group: "Flow" },
+    { value: "waterfall", label: "Waterfall", group: "Flow" },
+    { value: "sankey", label: "Sankey", group: "Flow", needs: (c) => c.dims.length >= 2 },
+    { value: "radar", label: "Radar", group: "Distribution" },
+    { value: "heatmap", label: "Heat map", group: "Distribution", needs: (c) => c.dims.length >= 2 },
+    { value: "scatter", label: "Scatter", group: "Distribution", needs: (c) => c.measures.length >= 2 },
+    { value: "boxplot", label: "Box plot", group: "Distribution" },
+    { value: "gauge", label: "Gauge", group: "Single value" },
+    { value: "calendar", label: "Calendar", group: "Over time", needs: (c) => c.dates.length >= 1 },
   ];
+  const availableTypes = $derived(TYPES.filter((t) => !t.needs || t.needs(columns)));
+
+  // Which controls this type can actually use. Allow-lists rather than the old
+  // "not pie" guards: with thirteen types, "everything except pie" hands a
+  // gauge a Stacked checkbox.
+  const CARTESIAN: ChartType[] = ["bar", "line", "area"];
+
+  /** Named series palettes. "Theme" defers to --sg-chart-1..8 and the defaults. */
+  const PALETTES: Array<{ key: string; label: string; colors: string[] | null }> = [
+    { key: "theme", label: "Theme", colors: null },
+    { key: "ocean", label: "Ocean", colors: ["#0ea5e9", "#14b8a6", "#6366f1", "#8b5cf6", "#06b6d4"] },
+    { key: "sunset", label: "Sunset", colors: ["#f59e0b", "#ef4444", "#ec4899", "#8b5cf6", "#f97316"] },
+    { key: "forest", label: "Forest", colors: ["#16a34a", "#65a30d", "#0d9488", "#4d7c0f", "#0891b2"] },
+    { key: "slate", label: "Slate", colors: ["#475569", "#0ea5e9", "#64748b", "#38bdf8", "#94a3b8"] },
+  ];
+  const activePalette = $derived(
+    PALETTES.find((x) => x.colors && ctrl.chartPalette && x.colors.join() === ctrl.chartPalette.join())?.key ??
+      "theme",
+  );
+  const wantsHorizontal = $derived(ctrl.chartType === "bar");
+  const wantsDonut = $derived(ctrl.chartType === "pie");
+  const wantsGroupBy = $derived(ctrl.chartType !== "gauge");
+  const wantsSplitBy = $derived(
+    columns.dims.length > 1 &&
+      !["pie", "gauge", "waterfall", "funnel", "calendar"].includes(ctrl.chartType),
+  );
+  const wantsStacked = $derived(CARTESIAN.includes(ctrl.chartType));
+  const wantsLogScale = $derived(
+    CARTESIAN.includes(ctrl.chartType) || ctrl.chartType === "scatter" || ctrl.chartType === "boxplot",
+  );
+  const wantsDataLabels = $derived(
+    !["gauge", "sankey", "calendar", "treemap", "scatter", "boxplot"].includes(ctrl.chartType),
+  );
+  const wantsSecondMeasure = $derived(ctrl.chartType === "scatter");
+  /**
+   * A box plot is the one type that reduces its groups itself: the whole point
+   * is the spread of the sample, so `sum | avg | count` has nothing to say
+   * about it. Showing an Aggregate select that changes nothing is worse than
+   * not showing one.
+   */
+  const wantsReduce = $derived(!wantsSecondMeasure && ctrl.chartType !== "boxplot");
+  const typeGroups = $derived([...new Set(availableTypes.map((t) => t.group))]);
+
+  /**
+   * Why the current type cannot draw anything useful yet, as a sentence.
+   *
+   * The alternative - removing the option - means a chart can disappear from
+   * under the user when they filter. Saying what is missing keeps the picker
+   * honest without making it unstable.
+   */
+  const typeIssue = $derived.by<string | null>(() => {
+    const t = ctrl.chartType;
+    const cats = ctrl.chartSpec?.categories.length ?? 0;
+    if (t === "heatmap" && !ctrl.chartSeriesId && columns.dims.length > 1)
+      return "Heat map needs a Split by column for its rows.";
+    if (t === "sankey" && !ctrl.chartSeriesId)
+      return "Sankey needs a Split by column: Group by is the source, Split by the target.";
+    if (t === "radar" && cats > 0 && cats < 3) return "Radar needs at least 3 groups.";
+    if (t === "funnel" && cats === 1) return "Funnel needs at least 2 stages.";
+    return null;
+  });
   const REDUCERS = [
     { value: "sum", label: "Sum" },
     { value: "avg", label: "Average" },
@@ -154,7 +243,9 @@
   let exportOpen = $state(false);
   let copied = $state(false);
   const svgEl = () => bodyEl?.querySelector("svg") ?? null;
-  const csvExportable = $derived(!!(spec && spec.categories?.length && spec.series?.length));
+  // One source of truth with the serializer: a scatter chart has no categories
+  // but does have points, so the old shape test greyed out an export that works.
+  const csvExportable = $derived(!!spec && chartCsvExportable(spec));
   function exportPng() {
     const el = svgEl();
     if (el) void downloadChartPng(el, "chart.png");
@@ -386,18 +477,28 @@
         <label class="sv-grid-chart-ctl">
           <span class="sv-grid-chart-ctl-lbl">Type</span>
           <select value={ctrl.chartType} onchange={(e) => (ctrl.chartType = e.currentTarget.value as ChartType)}>
-            {#each TYPES as t (t.value)}<option value={t.value}>{t.label}</option>{/each}
+            <!-- Grouped: a flat thirteen-item list is a wall. optgroup is
+                 native, so this costs no new component. -->
+            {#each typeGroups as g (g)}
+              <optgroup label={g}>
+                {#each availableTypes.filter((t) => t.group === g) as t (t.value)}
+                  <option value={t.value}>{t.label}</option>
+                {/each}
+              </optgroup>
+            {/each}
           </select>
         </label>
+        {#if wantsGroupBy}
         <label class="sv-grid-chart-ctl">
-          <span class="sv-grid-chart-ctl-lbl">Group by</span>
+          <span class="sv-grid-chart-ctl-lbl">{ctrl.chartType === "sankey" ? "From" : ctrl.chartType === "heatmap" ? "Columns" : "Group by"}</span>
           <select value={ctrl.chartDimensionId ?? ""} onchange={(e) => (ctrl.chartDimensionId = e.currentTarget.value || null)}>
             {#each columns.dims as d (d.id)}<option value={d.id}>{d.label}</option>{/each}
           </select>
         </label>
-        {#if columns.dims.length > 1}
+        {/if}
+        {#if wantsSplitBy}
           <label class="sv-grid-chart-ctl">
-            <span class="sv-grid-chart-ctl-lbl">Split by</span>
+            <span class="sv-grid-chart-ctl-lbl">{ctrl.chartType === "sankey" ? "To" : ctrl.chartType === "heatmap" ? "Rows" : "Split by"}</span>
             <select value={ctrl.chartSeriesId ?? ""} onchange={(e) => (ctrl.chartSeriesId = e.currentTarget.value || null)}>
               <option value="">(none)</option>
               {#each columns.dims as d (d.id)}<option value={d.id}>{d.label}</option>{/each}
@@ -405,51 +506,98 @@
           </label>
         {/if}
         <label class="sv-grid-chart-ctl">
-          <span class="sv-grid-chart-ctl-lbl">Value</span>
+          <span class="sv-grid-chart-ctl-lbl">{wantsSecondMeasure ? "X" : ctrl.chartType === "gauge" ? "Metric" : "Value"}</span>
           <select value={ctrl.chartMeasureId ?? ""} onchange={(e) => (ctrl.chartMeasureId = e.currentTarget.value || null)}>
             {#each columns.measures as m (m.id)}<option value={m.id}>{m.label}</option>{/each}
           </select>
         </label>
+        {#if wantsSecondMeasure}
+          <label class="sv-grid-chart-ctl">
+            <span class="sv-grid-chart-ctl-lbl">Y</span>
+            <select value={ctrl.effectiveChartMeasure2Id ?? ""} onchange={(e) => (ctrl.chartMeasure2Id = e.currentTarget.value || null)}>
+              {#each columns.measures as m (m.id)}<option value={m.id}>{m.label}</option>{/each}
+            </select>
+          </label>
+        {/if}
+        {#if wantsReduce}
         <label class="sv-grid-chart-ctl">
           <span class="sv-grid-chart-ctl-lbl">Aggregate</span>
           <select value={ctrl.chartReduce} onchange={(e) => (ctrl.chartReduce = e.currentTarget.value as "sum" | "avg" | "count")}>
             {#each REDUCERS as r (r.value)}<option value={r.value}>{r.label}</option>{/each}
           </select>
         </label>
+        {/if}
         <label class="sv-grid-chart-ctl">
           <span class="sv-grid-chart-ctl-lbl">Format</span>
           <select value={ctrl.chartValueFormat} onchange={(e) => (ctrl.chartValueFormat = e.currentTarget.value as "number" | "currency" | "percent")}>
             {#each FORMATS as f (f.value)}<option value={f.value}>{f.label}</option>{/each}
           </select>
         </label>
-        {#if ctrl.chartType !== "pie"}
+        {#if wantsStacked}
           <label class="sv-grid-chart-toggle">
             <input type="checkbox" checked={ctrl.chartStacked} onchange={(e) => (ctrl.chartStacked = e.currentTarget.checked)} />
             Stacked
           </label>
+          <label class="sv-grid-chart-toggle" title="Normalise each category to 100 percent">
+            <input type="checkbox" checked={ctrl.chartStacked100} onchange={(e) => (ctrl.chartStacked100 = e.currentTarget.checked)} />
+            100%
+          </label>
+        {/if}
+        {#if wantsHorizontal}
+          <label class="sv-grid-chart-toggle" title="Bars grow rightwards - suits long category labels">
+            <input
+              type="checkbox"
+              checked={ctrl.chartOrientation === "horizontal"}
+              onchange={(e) => (ctrl.chartOrientation = e.currentTarget.checked ? "horizontal" : "vertical")}
+            />
+            Horizontal
+          </label>
         {/if}
-        <label class="sv-grid-chart-toggle">
-          <input type="checkbox" checked={ctrl.chartDataLabels} onchange={(e) => (ctrl.chartDataLabels = e.currentTarget.checked)} />
-          Labels
+        {#if wantsDonut}
+          <label class="sv-grid-chart-toggle">
+            <input type="checkbox" checked={ctrl.chartDonut} onchange={(e) => (ctrl.chartDonut = e.currentTarget.checked)} />
+            Donut
+          </label>
+        {/if}
+        <label class="sv-grid-chart-ctl">
+          <span class="sv-grid-chart-ctl-lbl">Colours</span>
+          <select
+            value={activePalette}
+            onchange={(e) => (ctrl.chartPalette = PALETTES.find((x) => x.key === e.currentTarget.value)?.colors ?? null)}
+          >
+            {#each PALETTES as pal (pal.key)}<option value={pal.key}>{pal.label}</option>{/each}
+          </select>
         </label>
-        {#if ctrl.chartType !== "pie"}
+        {#if wantsDataLabels}
+          <label class="sv-grid-chart-toggle">
+            <input type="checkbox" checked={ctrl.chartDataLabels} onchange={(e) => (ctrl.chartDataLabels = e.currentTarget.checked)} />
+            Labels
+          </label>
+        {/if}
+        {#if wantsLogScale}
           <label class="sv-grid-chart-toggle" title="Logarithmic value axis - flattens wide-range data">
             <input type="checkbox" checked={ctrl.chartLogScale} onchange={(e) => (ctrl.chartLogScale = e.currentTarget.checked)} />
             Log scale
           </label>
         {/if}
-        {#if ctrl.chartDimensionIsDate && ctrl.chartType !== "pie"}
+        {#if ctrl.chartDimensionIsDate && CARTESIAN.includes(ctrl.chartType)}
           <label class="sv-grid-chart-toggle" title="Space points by actual date - real time ticks and proportional gaps">
             <input type="checkbox" checked={ctrl.chartTimeAxis} onchange={(e) => (ctrl.chartTimeAxis = e.currentTarget.checked)} />
             Date axis
           </label>
         {/if}
       {/if}
+      {#if typeIssue}
+        <p class="sv-grid-chart-hint" role="note">{typeIssue}</p>
+      {/if}
     </div>
   </header>
 
   <div class="sv-grid-chart-panel-body" bind:this={bodyEl} bind:clientWidth={bodyW} bind:clientHeight={bodyH}>
-    {#if spec && (spec.series.length || isCustom)}
+    <!-- A gauge is one number, so it legitimately carries no series and no
+         categories. Gating purely on `series.length` sent it to the "No data"
+         message even with a perfectly good spec. -->
+    {#if spec && (spec.series.length || spec.gaugeValue != null || isCustom)}
       <SvGridChart
         {spec}
         width={chartW}

package/src/SvGridChartView.svelte

@@ -17,12 +17,18 @@
   let {
     data,
     chart,
+    localization,
   }: {
     data: ReadonlyArray<Record<string, unknown>>;
     /** Present for parity with board/scheduler renderers; unused here. */
     columns?: unknown;
     getRowId?: unknown;
     chart: ChartViewConfig;
+    /** The grid's localization, so a localized grid gets a localized chart
+     *  without saying so twice. Resolved here rather than in SvGrid because
+     *  this renderer is lazy: a grid that never charts should not carry the
+     *  fallback in its base bundle. */
+    localization?: { locale?: string | ReadonlyArray<string> };
   } = $props();
 
   // Container size -> chart viewBox, so the chart fills the grid area and
@@ -44,6 +50,9 @@
       palette: chart.palette,
     });
     if (chart.valueFormat) s.valueFormat = chart.valueFormat;
+    const locale = chart.locale ?? localization?.locale;
+    if (locale) s.locale = locale;
+    if (chart.currency) s.currency = chart.currency;
     return s;
   });
 </script>

package/src/SvGroupCell.svelte

@@ -10,6 +10,7 @@
 -->
 <script lang="ts" generics="TData">
   import type { ServerDisplayRow } from './server-data-source'
+  import type { GridIcons } from './grid-icons'
 
   type GroupGridRow = { __group?: ServerDisplayRow<TData> } & Record<string, unknown>
   type Props = {
@@ -24,9 +25,17 @@
     leafField?: string
     /** Pixels of indentation per level. Default 18. */
     indent?: number
+    /**
+     * Icon overrides, the same map `<SvGrid icons>` takes. Only
+     * `chevron-right` is drawn here. You mount this component yourself, so it
+     * cannot inherit the grid's icons - pass the same object to both to keep
+     * the expander consistent with the rest of the chrome.
+     */
+    icons?: GridIcons
   }
 
-  let { row, onToggle, leafField, indent = 18 }: Props = $props()
+  let { row, onToggle, leafField, indent = 18, icons }: Props = $props()
+  const chevron = $derived(icons?.['chevron-right'])
   const meta = $derived(row.__group)
 </script>
 
@@ -42,8 +51,12 @@
     <!-- Same chevron the grid's own expanders and SvTree draw, so every
          expander in the library looks identical. -->
     <span class="sv-group-chev" class:open={meta.expanded} aria-hidden="true">
-      <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor"
-        stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
+      {#if chevron}
+        {@render chevron()}
+      {:else}
+        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor"
+          stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
+      {/if}
     </span>
     <span class="sv-group-key">{meta.key}</span>
     {#if meta.loading}<span class="sv-group-load" aria-hidden="true">…</span>{/if}
@@ -84,9 +97,21 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    width: 12px;
+    height: 12px;
     transition: transform 0.15s;
     color: var(--sg-muted, #64748b);
   }
+  /* An `icons` override renders inside this wrapper, and this style block is
+     scoped, so its markup needs :global() to be reached. Sizing it here means
+     a custom chevron lands in the same box as the built-in and rotates with
+     the wrapper rather than needing to know the rule exists. */
+  .sv-group-chev :global(svg),
+  .sv-group-chev :global(img) {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
   .sv-group-chev.open { transform: rotate(90deg); }
   .sv-group-key { font-weight: 600; }
   .sv-group-load { color: var(--sg-muted, #64748b); font-size: 12px; }