Preview
Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.
Install
Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.
npx shadcn@latest add https://ds.interlace.tools/r/series-table.jsonnpx shadcn@latest add @interlace/series-tableBehavior
What this component does — the keyboard path, the measured colour, the text equivalent and the states it can be in. Every figure below is read out of the test or the source that enforces it by scripts/build-behavior-map.mjs, so nothing here can outlive the gate that keeps it true.
Measured contrast
packages/ui/__tests__/theme-contract-lock.test.ts ↗Every semantic colour pair this component's own source uses, measured against the shipped hexes in all 4 theme × scheme combinations. The tightest is muted-foreground on background at 7.82:1 (harbor · light), against a floor of 4.5:1.
| Pair | interlacelight | interlacedark | harborlight | harbordark | Floor |
|---|---|---|---|---|---|
| muted-foreground on backgroundsecondary copy | 9.41:1 | 11.32:1 | 7.82:1 | 9.52:1 | 4.5:1SC 1.4.3 |
| muted-foreground on cardsecondary copy in a card | 9.41:1 | 10.48:1 | 8.25:1 | 8.64:1 | 4.5:1SC 1.4.3 |
Text pairs are held to 4.5:1 (WCAG 2.2 SC 1.4.3); borders, rings and chart axes to 3:1 (SC 1.4.11 non-text). Bold is the worst cell in the row — the one a brand fork has to keep an eye on.
Text equivalent
packages/ui/src/charts/series-table.tsx ↗A chart's alt text is not a sentence about the chart — the equivalent of the data is the data. This is what a screen reader gets, read out of the source the install writes into your tree.
This IS the shared sr-only table primitive — a real <table> with <caption> and scoped headers, rendered sr-only by default.
Runtime contract
packages/ui/vitest.config.ts ↗Where it renders, how narrow it survives, and whether its lines are inside the coverage gate — three answers a consumer needs before the paste, not after the bug.
- Render boundary
server componentRenders during SSR / RSC with no hydration cost. It can be imported from a server component without pulling the page into the client.
- Minimum viewport
MIN_VIEWPORT = 320Declared, not assumed. Below 320 CSS px the preflight contract draws a dev-mode outline — how to switch it on.
- Coverage gate
100% × 4Inside the v8 gate: lines 100, statements 100, functions 100, branches 100. A threshold under 100 only records how much you stopped caring, so there isn't one.
History
This component is at v1.1.0, first shipped in @interlace/ui 1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.
@interlace/ui 1.1.01 entry
- Addedminor
New
Distributionchart — a quantity spread over a fixed set of named bins, read against a reference distribution. It is a new component rather than an extension ofTimeSeriesbecause three of that component's properties are chronological and cannot be parameterised out: its axis keys are sorted (['Thu','Fri','Sat']sorts into a week that does not exist), a line asserts the metric passed through every value between two samples when between two hourly aggregates there is nothing to pass through, anddelta()first-to-last is arithmetic performed on a circle. An unmeasured bin **hatches**. Everywhere else anullcan simply be dropped, but for bars a height of zero and a bar never drawn are the same picture — this isnull ≠ zeroat its hardest case.bin.noteprints a second axis reading under the first, replacing the timezone toggle a caller would otherwise build; a toggle hides half the truth and is missing from every screenshot. Also:errorstates on every chart that fetches —TimeSeries,Sparkline,MetricTable,NetworkGraph,Distribution— resolved throughresolveDataStateso the precedence is the array indata-state-modelrather than five hand-rolled ladders. In a dashboard "the fetch failed" and "there is no data" are different statements.DeltaandSeriesTableget none: neither has a fetch lifecycle.StatItemgainstone, carried by three signals rather than a hue alone — the rail, the value colour, and ansr-onlyjudgement.
@interlace/ui 1.0.01 entry
- Addedminor
The visualization layer ships: a token-driven chart set built on the
VISUALIZATION_PHILOSOPHYrow-first doctrine —MetricTableas the centrepiece,TimeSeriesas the thing a row is promoted into, plus a network graph, sparklines and deltas. Every chart carries the DS-wideloadingskeleton opt-in.
Import
25 named exports — pull the parts you need.
import { ANNOTATION_KINDS, AnnotationKind, Direction, MIN_VIEWPORT, NumericPoint, SeriesTable, areaPath, axisSlots, bandScales, compact, day, delta, describeDistribution, describeSeries, keepAtNarrow, linePath, nearestIndex, nearestSlot, numeric, peakBin, plotScales, seriesScales, slotAt, stepPath, ticks } from '@/components/ui/charts/series-table';API reference
Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.
SeriesTableProps
Also accepts every <div> attribute.
| Prop | Type | Description |
|---|---|---|
| series* | readonly { label: string | One entry per series. A single-series chart passes one. |
| caption* | string | The `<caption>`. Required — an unnamed table is a wall of numbers. |
| hidden | boolean | Render `sr-only` (default) or visibly. |
| keyLabel | string | Column header for the x axis. |
| axis | 'time' | 'category' | What kind of axis the `t` values are. - `time` (default) — `t` is an instant. Rows are keyed by `day(t)` and SORTED, because a chronological axis has exactly one true order and two readings on one day are one row. - `category` — `t` is a name. Rows are keyed by `t` verbatim, in the order the series first mentions them. The second exists because sorting is *wrong* for a categorical axis, not merely unnecessary: `['Mon','Tue','Wed']` sorts to `['Mon','Tue','Wed']` only by luck, `['Thu','Fri','Sat']` sorts to `['Fri','Sat','Thu']`, and the table then disagrees with the picture beside it about what order the week happens in. `day()` is skipped for the same reason — it truncates to ten characters, which is a date-shaped assumption, and "Wednesday morning" would become "Wednesday ". |
Accessibility
Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.
What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.
- Focus + keyboard behaviour
- Native element semantics — no interaction layer to get wrong.
- Focus ring (WCAG 2.2 SC 2.4.13)
- Not focusable — no focus indicator required.
- Reduced motion
- No animation to gate.
- ARIA in the source
role="img"
Examples
4 more states from the same story file.
R-rule compliance
Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.
| Rule | Concept | Where |
|---|---|---|
| R6 | data-slot on every part | `data-slot="series-table"` |
| R7 | className merged + ...rest | `cn(...)` + `{...props}` |
| R8 | No `isXxx` | `hidden`, not `isHidden` |
| R14 | Declares min viewport | `data-min-viewport={String(MIN_VIEWPORT)}` |
| R18 | Tailwind only | zero inline `style` |
| R19 | Tokens only | `border-border`, `text-muted-foreground` |
| R26 | A11y | native `<table>` + `<caption>` + scoped headers |
Minimum viewport
This primitive declares MIN_VIEWPORT = 320 CSS px (DESIGN_PRINCIPLES #14). When mounted in a container narrower than this, the preflight contract draws a dev-mode outline so the regression is visible during local development.
<body data-interlace-dev>...</body>
Add the data-interlace-dev attribute to the body in development builds only — preflight then outlines any primitive whose container is below its declared data-min-viewport.
Dependencies
- Base UI primitive
- Native / no Base UI dependency
- Lucide icons
- none
- NPM dependencies
- none
- Registry dependencies
Source
The full implementation — components/ui/charts/series-table.tsx once installed.
import * as React from 'react';
// @interlace/series-table v1.1.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/series-table
// What changed since: https://ds.interlace.tools/c/series-table#history
// Generated banner — keep it, the upgrade diff reads this version.
/**
* @interlace/ui — SeriesTable
*
* The data behind a chart, as a real `<table>`.
*
* ## Why every chart in this package ships one
*
* A chart is a picture of numbers, and a picture is where the numbers stop
* being readable by anything that is not an eye. `role="img"` + `aria-label`
* gets a screen reader a one-sentence summary (see `describeSeries`), which is
* enough to know *what happened* and never enough to know *what the value was
* on the 14th*. The table is what makes the chart lossless.
*
…160 more lines…Registry JSON
The raw registry record — what the shadcn CLI fetches.