@svgrid/create 2.6.0 → 2.8.0

package/templates/pivot-dashboard/src/lib/drill.ts

@@ -0,0 +1,141 @@
+/**
+ * Drill-through: turn a clicked pivot cell back into the facts behind it.
+ *
+ * A pivot cell is the intersection of a row path and a column path. To find its
+ * source rows you need both, and the pivot gives them in two different shapes:
+ *
+ *   - the **row** path is the chain of ancestors up to the clicked `PivotRow`,
+ *     matched positionally against `layout.rows`;
+ *   - the **column** path is encoded in the column id, `pv__<dim>__<dim>__m<i>`,
+ *     where the trailing `m<i>` indexes into `layout.values`.
+ *
+ * Both decode to a plain `{ field: value }` filter, and the facts that match
+ * every entry are the ones that produced the cell. Because the total is
+ * recomputed from those same facts, the rail can never disagree with the grid.
+ *
+ * Kept free of Svelte and of the grid packages so it can be unit-tested on its
+ * own - see drill.test.ts.
+ */
+import type { Fact } from './facts'
+
+/** The subset of `PivotRow` this needs. Structural, so it does not drag the
+ *  enterprise types into a file that is otherwise pure. */
+export type PivotRowLike = {
+  __pivotId?: string
+  __pivotParentId?: string | null
+  __pivotLabel?: unknown
+  __pivotKind?: string
+}
+
+/** The subset of `PivotLayout` this needs. */
+export type PivotLayoutLike = {
+  rows: string[]
+  cols: string[]
+  values: { field: string }[]
+}
+
+export type Drill = {
+  /** Human label for the clicked row, for the rail heading. */
+  rowLabel: string
+  /** Field/value pairs the facts must match. */
+  filter: Record<string, string>
+  /** The facts behind the cell. */
+  facts: Fact[]
+  /** Which measure the clicked column showed. */
+  measure: string
+  /** That measure summed over `facts` - equal to the cell the user clicked. */
+  total: number
+}
+
+/**
+ * Walk from the clicked row up to the root, then match the chain positionally
+ * against `layout.rows`.
+ *
+ * The grand-total row filters on nothing: every fact contributed to it.
+ */
+export function rowFilterFor(
+  row: PivotRowLike,
+  allRows: PivotRowLike[],
+  layout: PivotLayoutLike,
+): Record<string, string> {
+  if (row.__pivotKind === 'grandTotal') return {}
+  const chain: PivotRowLike[] = []
+  let current: PivotRowLike | undefined = row
+  while (current) {
+    chain.unshift(current)
+    // Annotated: without it TypeScript infers `parentId` from `current`, which
+    // this line then reassigns, and the inference becomes circular.
+    const parentId: string | null | undefined = current.__pivotParentId
+    current = parentId ? allRows.find((r) => r.__pivotId === parentId) : undefined
+  }
+  const filter: Record<string, string> = {}
+  for (let i = 0; i < chain.length && i < layout.rows.length; i += 1) {
+    filter[layout.rows[i]!] = String(chain[i]!.__pivotLabel)
+  }
+  return filter
+}
+
+/**
+ * Decode a pivot column id into its column-axis filter and its measure.
+ *
+ * A subtotal column carries fewer dimension segments than `layout.cols` has,
+ * which is exactly right: fewer constraints means a wider slice.
+ */
+export function colFilterFor(
+  colId: string,
+  layout: PivotLayoutLike,
+): { filter: Record<string, string>; measure: string } {
+  const parts = colId.startsWith('pv__') ? colId.slice(4).split('__') : []
+  const last = parts[parts.length - 1]
+  const measureIndex = last?.startsWith('m') ? Number(last.slice(1)) : 0
+  const dimensions = parts.slice(0, Math.max(0, parts.length - 1))
+
+  const filter: Record<string, string> = {}
+  for (let i = 0; i < dimensions.length && i < layout.cols.length; i += 1) {
+    filter[layout.cols[i]!] = dimensions[i]!
+  }
+  return { filter, measure: layout.values[measureIndex]?.field ?? layout.values[0]?.field ?? 'revenue' }
+}
+
+/**
+ * The facts behind one clicked cell, plus the measure total over them.
+ *
+ * Works for leaf cells, subtotals and the grand total without special-casing:
+ * each simply contributes fewer filter entries, so the slice widens.
+ */
+export function drillThrough(
+  facts: Fact[],
+  row: PivotRowLike,
+  colId: string,
+  allRows: PivotRowLike[],
+  layout: PivotLayoutLike,
+): Drill {
+  const filter = { ...rowFilterFor(row, allRows, layout), ...colFilterFor(colId, layout).filter }
+  const { measure } = colFilterFor(colId, layout)
+
+  const matched = facts.filter((fact) => {
+    for (const [field, value] of Object.entries(filter)) {
+      if (String((fact as unknown as Record<string, unknown>)[field]) !== value) return false
+    }
+    return true
+  })
+
+  const total = matched.reduce(
+    (sum, fact) => sum + Number((fact as unknown as Record<string, unknown>)[measure] ?? 0),
+    0,
+  )
+
+  return {
+    rowLabel: row.__pivotKind === 'grandTotal' ? 'Grand total' : String(row.__pivotLabel ?? ''),
+    filter,
+    facts: matched,
+    measure,
+    total,
+  }
+}
+
+/** "EMEA / Germany / Q1" - the filter read back as a breadcrumb. */
+export function drillBreadcrumb(drill: Drill): string {
+  const parts = Object.values(drill.filter)
+  return parts.length ? parts.join(' / ') : 'All data'
+}

package/templates/pivot-dashboard/src/lib/facts.ts

@@ -0,0 +1,81 @@
+/**
+ * The fact table the whole dashboard is built on.
+ *
+ * A pivot summarises facts; a drill-through walks back to the exact facts
+ * behind one summarised cell. Both read this one array, which is why the number
+ * in the grid and the number in the drill rail can never disagree.
+ *
+ * Stands in for your warehouse. Swap `loadFacts` for a query and nothing
+ * downstream changes - the pivot, the chart and the drill all take `Fact[]`.
+ */
+
+export type Region = 'AMER' | 'EMEA' | 'APAC'
+export type Channel = 'Online' | 'Retail' | 'Wholesale'
+export type Quarter = 'Q1' | 'Q2' | 'Q3' | 'Q4'
+
+export type Fact = {
+  id: number
+  year: number
+  quarter: Quarter
+  region: Region
+  country: string
+  city: string
+  channel: Channel
+  customer: string
+  revenue: number
+  units: number
+}
+
+/** Which country and city belong to which region - keeps the seed coherent, so
+ *  drilling into EMEA never turns up a US city. */
+const TOPOLOGY: Record<Region, Record<string, string[]>> = {
+  AMER: { USA: ['New York', 'Austin', 'Seattle'], Canada: ['Toronto', 'Vancouver'] },
+  EMEA: { Germany: ['Berlin', 'Munich'], UK: ['London', 'Manchester'], France: ['Paris'] },
+  APAC: { Japan: ['Tokyo', 'Osaka'], India: ['Mumbai', 'Bangalore'] },
+}
+
+const CHANNELS: Channel[] = ['Online', 'Retail', 'Wholesale']
+const CUSTOMERS = [
+  'Acme Corp', 'Globex', 'Initech', 'Umbrella', 'Vandelay', 'Pied Piper',
+  'Hooli', 'Stark Industries', 'Tyrell', 'Wayne Ent.', 'Wonka', 'Cyberdyne',
+]
+
+/**
+ * Seeded PRNG, so every reload and every server instance produces the same
+ * dataset. With `Math.random` the SSR pass and the hydrated client would
+ * generate different numbers and Svelte would report a hydration mismatch.
+ */
+function makeRandom(seed: number): () => number {
+  let state = seed >>> 0
+  return () => {
+    state = (state * 1664525 + 1013904223) >>> 0
+    return state / 0xffffffff
+  }
+}
+
+/** Build the fact table. Deterministic for a given `count` and `seed`. */
+export function loadFacts(count = 1800, seed = 0xda7a101): Fact[] {
+  const rnd = makeRandom(seed)
+  const pick = <T>(items: readonly T[]): T => items[Math.floor(rnd() * items.length)]!
+  const regions = Object.keys(TOPOLOGY) as Region[]
+
+  const facts: Fact[] = []
+  for (let id = 1; id <= count; id += 1) {
+    const region = pick(regions)
+    const country = pick(Object.keys(TOPOLOGY[region]))
+    const city = pick(TOPOLOGY[region][country]!)
+    facts.push({
+      id,
+      year: pick([2025, 2026] as const),
+      quarter: pick(['Q1', 'Q2', 'Q3', 'Q4'] as const),
+      region,
+      country,
+      city,
+      channel: pick(CHANNELS),
+      customer: pick(CUSTOMERS),
+      revenue: Math.round(2_000 + rnd() * 48_000),
+      units: Math.round(5 + rnd() * 300),
+    })
+  }
+  return facts
+}

package/templates/pivot-dashboard/src/lib/theme.svelte.ts

@@ -0,0 +1,87 @@
+/**
+ * Runtime theme switching.
+ *
+ * `@svgrid/grid/themes` ships 20 presets and a `resolveThemeTokens(preset, mode)`
+ * helper that returns the `--sg-*` custom properties for a given preset and
+ * light/dark mode. Writing those onto `<html>` re-themes the grid live - there
+ * is nothing to rebuild and no stylesheet to swap.
+ *
+ * `app.css` imports one preset as a stylesheet so the very first paint (and the
+ * server-rendered HTML) already has a theme before any JS runs. The values set
+ * here override it once the user picks something.
+ */
+import {
+  getThemePreset,
+  resolveThemeTokens,
+  themePresets,
+  type ThemeMode,
+} from '@svgrid/grid/themes'
+
+/** Every preset, for the picker. */
+export const presets = themePresets.map((p) => ({ id: p.id, name: p.name }))
+
+const STORAGE_KEY = 'svgrid-theme'
+
+// `npm create @svgrid@latest -- --theme <id> [--dark|--light]` patches the two
+// values between these markers so the scaffolded app starts on the theme you
+// asked for. INITIAL_MODE is only the fallback: a saved choice wins over it, and
+// so does the OS preference when nobody has pinned a mode. The inline script in
+// `app.html` settles the same question before the first paint.
+/* svgrid-initial-theme:start */
+export const INITIAL_THEME = 'ember'
+export const INITIAL_MODE: ThemeMode = 'light'
+/* svgrid-initial-theme:end */
+
+type Saved = { id: string; mode: ThemeMode }
+
+function restore(): Saved {
+  const fallback: Saved = { id: INITIAL_THEME, mode: INITIAL_MODE }
+  if (typeof document === 'undefined') return fallback
+  // Trust whatever app.html's inline script settled on, so the picker agrees
+  // with what is already on screen.
+  const painted = document.documentElement.dataset.theme
+  if (painted === 'dark' || painted === 'light') fallback.mode = painted
+  try {
+    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? 'null') as Saved | null
+    if (!saved || typeof saved.id !== 'string') return fallback
+    if (!getThemePreset(saved.id)) return fallback
+    return { id: saved.id, mode: saved.mode === 'dark' ? 'dark' : 'light' }
+  } catch {
+    return fallback
+  }
+}
+
+class ThemeState {
+  #initial = restore()
+  id = $state(this.#initial.id)
+  mode = $state<ThemeMode>(this.#initial.mode)
+
+  /** Push the current selection onto <html> as CSS custom properties. */
+  apply() {
+    if (typeof document === 'undefined') return
+    const tokens = resolveThemeTokens(getThemePreset(this.id) ?? getThemePreset(INITIAL_THEME)!, this.mode)
+    const root = document.documentElement
+    for (const [key, value] of Object.entries(tokens)) root.style.setProperty(key, value)
+    // Lets the browser theme form controls and scrollbars to match, and keeps
+    // any `[data-theme='dark']` rules in your own CSS in step.
+    root.style.colorScheme = this.mode
+    root.dataset.theme = this.mode
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({ id: this.id, mode: this.mode }))
+    } catch {
+      // Private mode, quota, a blocked origin - not worth breaking the page over.
+    }
+  }
+
+  set(id: string, mode: ThemeMode = this.mode) {
+    this.id = id
+    this.mode = mode
+    this.apply()
+  }
+
+  toggleMode() {
+    this.set(this.id, this.mode === 'dark' ? 'light' : 'dark')
+  }
+}
+
+export const theme = new ThemeState()

package/templates/pivot-dashboard/src/routes/+layout.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import '../app.css'
+  import { theme, presets } from '$lib/theme.svelte'
+
+  let { children } = $props()
+
+  // Apply on mount so the picker's starting value wins over the stylesheet, and
+  // on every later change. Runs client-side only - the server-rendered HTML is
+  // already themed by the stylesheet import in app.css.
+  $effect(() => {
+    theme.apply()
+  })
+</script>
+
+<header class="bar">
+  <strong>Pivot dashboard</strong>
+
+  <label>
+    Theme
+    <select
+      value={theme.id}
+      onchange={(e) => theme.set(e.currentTarget.value)}
+      aria-label="Grid theme"
+    >
+      {#each presets as p (p.id)}
+        <option value={p.id}>{p.name}</option>
+      {/each}
+    </select>
+  </label>
+
+  <button type="button" onclick={() => theme.toggleMode()} aria-pressed={theme.mode === 'dark'}>
+    {theme.mode === 'dark' ? 'Dark' : 'Light'}
+  </button>
+
+</header>
+
+<main>
+  {@render children?.()}
+</main>
+
+<style>
+  .bar {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid var(--sg-border);
+    background: var(--sg-header-bg);
+    color: var(--sg-header-fg);
+    font-family: system-ui, sans-serif;
+  }
+  .bar label {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.875rem;
+  }
+  .bar select,
+  .bar button {
+    font: inherit;
+    padding: 0.3rem 0.5rem;
+    border-radius: 6px;
+    border: 1px solid var(--sg-border);
+    background: var(--sg-bg);
+    color: var(--sg-fg);
+  }
+  .bar button {
+    cursor: pointer;
+    min-width: 4.5rem;
+  }
+  main {
+    padding: 1.25rem;
+    font-family: system-ui, sans-serif;
+    color: var(--sg-fg);
+    background: var(--sg-bg);
+    min-height: 100vh;
+  }
+</style>

package/templates/pivot-dashboard/src/routes/+page.server.ts

@@ -0,0 +1,11 @@
+import type { PageServerLoad } from './$types'
+import { loadFacts } from '$lib/facts'
+
+/**
+ * The fact table is built on the server and sent with the page.
+ *
+ * A pivot over a warehouse query belongs on the server: the browser should get
+ * facts, not a database connection. Swap `loadFacts` for your query and the
+ * rest of the dashboard is unchanged.
+ */
+export const load: PageServerLoad = () => ({ facts: loadFacts() })

package/templates/pivot-dashboard/src/routes/+page.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  /**
+   * Pivot dashboard: one cube, one chart, one drill rail, all over the same
+   * facts.
+   *
+   * The point of the layout is that the three panes cannot disagree. The pivot
+   * summarises `facts`; the chart re-aggregates the same array along the first
+   * row dimension; the drill rail filters it back down to the rows behind one
+   * clicked cell. Change the layout in the designer and all three follow.
+   */
+  import { SvPivotDesigner, setLicenseKey, type PivotField, type PivotLayout, type PivotRow } from '@svgrid/enterprise'
+  import { drillThrough, type Drill } from '$lib/drill'
+  import type { Fact } from '$lib/facts'
+  import DrillRail from './DrillRail.svelte'
+  import TrendChart from './TrendChart.svelte'
+
+  // Swap for your own key. Unlicensed use still runs - it just nudges.
+  setLicenseKey('SVENTERPRISE-DEV-DEMO')
+
+  let { data } = $props()
+  const facts = $derived(data.facts as Fact[])
+
+  const fields: PivotField[] = [
+    { field: 'region', kind: 'dimension', label: 'Region' },
+    { field: 'country', kind: 'dimension', label: 'Country' },
+    { field: 'city', kind: 'dimension', label: 'City' },
+    { field: 'channel', kind: 'dimension', label: 'Channel' },
+    { field: 'customer', kind: 'dimension', label: 'Customer' },
+    { field: 'year', kind: 'dimension', label: 'Year' },
+    { field: 'quarter', kind: 'dimension', label: 'Quarter' },
+    { field: 'revenue', kind: 'measure', label: 'Revenue' },
+    { field: 'units', kind: 'measure', label: 'Units' },
+  ]
+
+  let layout = $state<PivotLayout>({
+    rows: ['region', 'country'],
+    cols: ['year'],
+    values: [{ field: 'revenue', agg: 'sum' }],
+    // Required by PivotLayout. Empty means every fact passes.
+    filters: [],
+  })
+
+  // The designer hands back the rows it rendered. Drill-through needs them to
+  // walk a clicked row up to its ancestors.
+  let pivotRows = $state<PivotRow[]>([])
+  let drill = $state<Drill | null>(null)
+
+  const money = (n: number) => n.toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })
+  const plain = (n: number) => n.toLocaleString()
+  const measure = $derived(layout.values[0]?.field ?? 'revenue')
+  const format = $derived(measure === 'units' ? plain : money)
+
+  /** Chart series: the active measure totalled by the first row dimension. */
+  const series = $derived.by(() => {
+    const dimension = layout.rows[0]
+    if (!dimension) return []
+    const totals = new Map<string, number>()
+    for (const fact of facts) {
+      const key = String((fact as unknown as Record<string, unknown>)[dimension])
+      const value = Number((fact as unknown as Record<string, unknown>)[measure] ?? 0)
+      totals.set(key, (totals.get(key) ?? 0) + value)
+    }
+    return [...totals].map(([label, value]) => ({ label, value })).sort((a, b) => b.value - a.value)
+  })
+
+  /** The chart highlights whichever top-level value the drill is inside. */
+  const activeBar = $derived(drill && layout.rows[0] ? (drill.filter[layout.rows[0]] ?? null) : null)
+
+  function onCellClick(event: { row: PivotRow; columnId: string }) {
+    // The row-header column is a label, not an aggregation - nothing to drill.
+    if (event.columnId === '__pivotRowHeader') return
+    drill = drillThrough(facts, event.row, event.columnId, pivotRows, layout)
+  }
+
+  /** Clicking a bar drills the whole of that dimension value. */
+  function onBarSelect(label: string) {
+    const dimension = layout.rows[0]
+    if (!dimension) return
+    const matched = facts.filter((f) => String((f as unknown as Record<string, unknown>)[dimension]) === label)
+    drill = {
+      rowLabel: label,
+      filter: { [dimension]: label },
+      facts: matched,
+      measure,
+      total: matched.reduce((sum, f) => sum + Number((f as unknown as Record<string, unknown>)[measure] ?? 0), 0),
+    }
+  }
+</script>
+
+<svelte:head><title>Pivot dashboard</title></svelte:head>
+
+<h1>Sales cube</h1>
+<p class="lede">
+  {plain(facts.length)} facts, summarised on the server and pivoted in the browser.
+  Click any aggregated cell to see the rows behind it.
+</p>
+
+<div class="layout" class:has-drill={drill !== null}>
+  <section class="cube" aria-label="Pivot">
+    <SvPivotDesigner
+      data={facts}
+      {fields}
+      bind:layout
+      expandable
+      panelPosition="right"
+      onPivot={(rows: PivotRow[]) => (pivotRows = rows)}
+      {onCellClick}
+    />
+  </section>
+
+  <section class="chart" aria-label="Totals by {layout.rows[0] ?? 'dimension'}">
+    <h2>Total {measure} by {layout.rows[0] ?? 'dimension'}</h2>
+    <TrendChart {series} {format} active={activeBar} onSelect={onBarSelect} />
+  </section>
+
+  {#if drill}
+    <DrillRail {drill} {format} onClose={() => (drill = null)} />
+  {/if}
+</div>
+
+<style>
+  h1 { margin: 0 0 0.25rem; font-size: 1.4rem; }
+  .lede { margin: 0 0 1.25rem; color: var(--sg-muted, #64748b); }
+  .layout { display: grid; gap: 1rem; grid-template-columns: 1fr; }
+  .cube { min-width: 0; height: 460px; }
+  .chart {
+    min-width: 0; padding: 1rem;
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 8px);
+  }
+  .chart h2 { margin: 0 0 0.75rem; font-size: 0.95rem; text-transform: capitalize; }
+  /* Side by side once there is room. Below this the panes stack, which keeps
+     the pivot usable on a phone instead of squeezing three columns in. */
+  @media (min-width: 60rem) {
+    .layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
+    .cube { grid-column: 1 / -1; }
+    .layout.has-drill .cube { grid-column: 1 / -1; }
+  }
+</style>

package/templates/pivot-dashboard/src/routes/DrillRail.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  /**
+   * The drill-through rail: the facts behind one clicked pivot cell.
+   *
+   * The KPI at the top is recomputed from the same rows the grid below lists,
+   * so it always matches the cell that was clicked. If it ever did not, the
+   * drill filter and the pivot aggregation would have drifted apart.
+   */
+  import { SvGrid, type GridColumns } from '@svgrid/grid'
+  import type { Drill } from '$lib/drill'
+  import { drillBreadcrumb } from '$lib/drill'
+  import type { Fact } from '$lib/facts'
+
+  type Props = {
+    drill: Drill
+    format: (value: number) => string
+    onClose: () => void
+  }
+
+  let { drill, format, onClose }: Props = $props()
+
+  const columns: GridColumns<Fact> = [
+    { field: 'customer', header: 'Customer' },
+    { field: 'city', header: 'City' },
+    { field: 'channel', header: 'Channel' },
+    { field: 'quarter', header: 'Qtr' },
+    { field: 'revenue', header: 'Revenue', align: 'right' },
+    { field: 'units', header: 'Units', align: 'right' },
+  ]
+
+  const average = $derived(drill.facts.length ? drill.total / drill.facts.length : 0)
+</script>
+
+<aside class="rail" aria-label="Drill-through">
+  <header>
+    <div>
+      <p class="eyebrow">Drill-through</p>
+      <h2>{drillBreadcrumb(drill)}</h2>
+    </div>
+    <button type="button" onclick={onClose} aria-label="Close drill-through">&times;</button>
+  </header>
+
+  <dl class="kpis">
+    <div><dt>{drill.measure}</dt><dd>{format(drill.total)}</dd></div>
+    <div><dt>Facts</dt><dd>{drill.facts.length.toLocaleString()}</dd></div>
+    <div><dt>Average</dt><dd>{format(Math.round(average))}</dd></div>
+  </dl>
+
+  <div class="grid">
+    <SvGrid data={drill.facts} {columns} sortable containerHeight={340} />
+  </div>
+</aside>
+
+<style>
+  .rail {
+    display: flex; flex-direction: column; gap: 1rem; min-width: 0;
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 8px);
+    background: var(--sg-bg, #fff); padding: 1rem;
+  }
+  header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
+  .eyebrow {
+    margin: 0 0 0.15rem; font-size: 0.6875rem; text-transform: uppercase;
+    letter-spacing: 0.06em; color: var(--sg-muted, #64748b);
+  }
+  h2 { margin: 0; font-size: 1rem; }
+  header button {
+    font: inherit; font-size: 1.25rem; line-height: 1; padding: 0.1rem 0.4rem; cursor: pointer;
+    background: none; border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: var(--sg-radius, 8px); color: var(--sg-fg, #0f172a);
+  }
+  .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0; }
+  .kpis div {
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 8px);
+    padding: 0.5rem 0.6rem;
+  }
+  dt {
+    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em;
+    color: var(--sg-muted, #64748b);
+  }
+  dd { margin: 0.15rem 0 0; font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; }
+  .grid { min-width: 0; }
+</style>

package/templates/pivot-dashboard/src/routes/TrendChart.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  /**
+   * A bar chart over whatever slice the dashboard is currently showing.
+   *
+   * Inline SVG on purpose: a starter should not pull a charting library in for
+   * one chart, and this way the bars are plain DOM you can style with the same
+   * `--sg-*` tokens as the grid.
+   */
+  type Props = {
+    /** Bars to draw, already aggregated. */
+    series: { label: string; value: number }[]
+    /** Formats the value in the tooltip and the axis. */
+    format: (value: number) => string
+    /** Highlighted bar, e.g. the one being drilled. */
+    active?: string | null
+    onSelect?: (label: string) => void
+  }
+
+  let { series, format, active = null, onSelect }: Props = $props()
+
+  const max = $derived(Math.max(1, ...series.map((s) => s.value)))
+</script>
+
+{#if series.length === 0}
+  <p class="empty">No data in this slice.</p>
+{:else}
+  <ul class="bars">
+    {#each series as bar (bar.label)}
+      <li class="row" class:is-active={active === bar.label}>
+        <button
+          type="button"
+          onclick={() => onSelect?.(bar.label)}
+          title="{bar.label}: {format(bar.value)}"
+        >
+          <span class="label">{bar.label}</span>
+          <span class="track">
+            <!-- Width is the only inline style here: it is data, not design. -->
+            <span class="fill" style="width: {(bar.value / max) * 100}%"></span>
+          </span>
+          <span class="value">{format(bar.value)}</span>
+        </button>
+      </li>
+    {/each}
+  </ul>
+{/if}
+
+<style>
+  .bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+  button {
+    display: grid; grid-template-columns: 8rem 1fr 6rem; align-items: center; gap: 0.75rem;
+    width: 100%; padding: 0.3rem 0.4rem; font: inherit; text-align: left;
+    background: none; border: 0; border-radius: var(--sg-radius, 8px); cursor: pointer;
+    color: var(--sg-fg, #0f172a);
+  }
+  button:hover { background: var(--sg-row-hover-bg, rgba(0, 0, 0, 0.04)); }
+  .row.is-active button { background: color-mix(in srgb, var(--sg-accent, #2563eb) 14%, transparent); }
+  .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; }
+  .track { background: var(--sg-border, #e2e8f0); border-radius: 999px; height: 0.7rem; overflow: hidden; }
+  .fill { display: block; height: 100%; background: var(--sg-accent, #2563eb); border-radius: 999px; }
+  .value { font-variant-numeric: tabular-nums; font-size: 0.8125rem; text-align: right; color: var(--sg-muted, #64748b); }
+  .empty { color: var(--sg-muted, #64748b); font-size: 0.875rem; margin: 0; }
+</style>