Radial Weave
The same series `TimeSeries` plots, wrapped around a dial — the POSTER form: identity and shape, composed to be looked at and shared.
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/radial-weave.jsonnpx shadcn@latest add @interlace/radial-weaveBehavior
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.
9 states, one closed union — not a boolean per condition. Partial is a state, not an absence: a spinner that hides progress, or a missing prior rendered as 0, is the failure this model exists to make impossible.
| State | Reads as | Role | Encoding |
|---|---|---|---|
| loading | loading | Stands instead of the body | muted |
| error | ! error | Stands instead of the body | danger |
| not-applicable | n/a | Stands instead of the body | hatchedrecede |
| not-counted | not counted | Stands instead of the body | hatchedmuted |
| empty | — none | Stands instead of the body | muted |
| partial | ≥ partial | Stands next to the body and changes how to read it | dashedmuted |
| truncated | ⋯ truncated | Stands next to the body and changes how to read it | dashedmuted |
| first-measurement | · first measurement | Stands next to the body and changes how to read it | dashedaccent |
| idle | — | The absence of absence | muted |
Hatched and dashed are the two absences drawn apart on purpose: not-counted means no measurement was taken and is never a zero; truncated means the total is unknown and must never be used as a denominator. Each state also carries a spoken announcement — transitions, never ticks.
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 destructive on background at 7.60:1 (harbor · light), against a floor of 3:1.
| Pair | interlacelight | interlacedark | harborlight | harbordark | Floor |
|---|---|---|---|---|---|
| destructive on backgrounddestructive tint on the page surface | 8.31:1 | 10.43:1 | 7.60:1 | 10.03:1 | 3.0:1SC 1.4.11 |
| muted-foreground on backgroundsecondary copy | 9.41:1 | 11.32:1 | 7.82:1 | 9.52:1 | 4.5:1SC 1.4.3 |
| destructive on carddestructive tint inside a card | 8.31:1 | 9.66:1 | 8.02:1 | 9.09:1 | 3.0:1SC 1.4.11 |
| 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 |
| foreground on backgroundbody copy | 19.65:1 | 16.97:1 | 17.74:1 | 16.19: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/radial-weave.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.
Renders <SeriesTable> alongside the graphic: every plotted value is available as a real table row, 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
none declaredNo width floor: it takes the width it is given. Its container owns the layout question.
- 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.2.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.
Unreleased1 entry
- Addedminor
The Living Weave — motion, the radial poster form, and the strand field **TimeSeries draws itself.** The plotted series and their annotations are revealed by a clip rect that scales open left→right — the new
--animate-weave-revealtoken, the draw verb's second mechanism for a chart whose dash patterns ARE series identity (MOTION_PHILOSOPHY's draw-gesture exception gains the clip-reveal clause, and the motion lock verifies the utility only ever lands on aclipPathchild). Pure CSS, SSR-drawn, from-only — with no animation at all, nothing is ever hidden. The reveal replays when the drawn geometry changes BY VALUE, never by array identity; the same change resets the crosshair during render. The crosshair now glides between slots on a transform transition (150ms, motion-reduce clamped) while the readout still snaps. **RadialWeave** — the same series wrapped around a dial: the POSTER form. 300° sweep with the gap at the bottom (a closed circle claims the newest observation meets the oldest), the exact dash+hue identity table TimeSeries uses, nulls breaking the arc, an HTML centre value, and deliberately no crosshair — the aria-label sentence, the min/max readout and the losslessSeriesTablecarry inspection. Server component; dial math lives inscale.ts(dialAngle/dialRadius/dialPoint/dialPath/dialRing). **StrandField** — real series lifted into depth: each thread on its own plane in a CSS-3D perspective stage (zero dependencies —perspective+translateZ, never WebGL), fanned apart or collapsed flat viawoven, tilting inside its own bounds with the pointer (never underprefers-reduced-motion), strands entering by the strand-draw verb with a CSS-variable stagger the reduce clamp can zero.aria-hiddentheatre with no focusable element;onStrandSelectis a pointer shortcut for a selection surface the consumer renders accessibly.Components
Import
29 named exports — pull the parts you need.
import { ANNOTATION_KINDS, AnnotationKind, Direction, NumericPoint, RadialWeave, areaPath, axisSlots, bandScales, compact, day, delta, describeDistribution, describeSeries, dialAngle, dialPath, dialPoint, dialRadius, dialRing, keepAtNarrow, linePath, nearestIndex, nearestSlot, numeric, peakBin, plotScales, seriesScales, slotAt, stepPath, ticks } from '@/components/ui/charts/radial-weave';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.
RadialWeaveProps
Also accepts every <figure> attribute.
| Prop | Type | Description |
|---|---|---|
| points* | readonly Point[] | — |
| compare | readonly ComparisonSeries[] | Further series wrapped around the same dial. One radial domain, shared. |
| label | string | Series name — caption, accessible label, table caption. |
| unit | string | Noun for the values, e.g. "downloads". Printed under the centre value. |
| showTable | boolean | Render the data table visibly under the dial instead of `sr-only`. |
| loading | boolean | Render a `<Skeleton variant="chart" />` placeholder. |
| error | unknown | The fetch failed — a different statement from an empty series. |
| announce | AnnouncementOptions | Context for the absence sentences — noun, coverage, reason. |
Skeleton
Pass loading and the component renders a shape-matched <Skeleton /> in its own place — same box, so nothing reflows when the data lands. Below is the same story with loading={true}.
<ANNOTATION_KINDS loading={isPending} />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="alert"role="img"aria-label
Examples
7 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 | `"radial-weave" / "-plot" / "-centre" / "-legend" / "-readout"` |
| R7 | className merged + ...rest | `cn(...)` + `{...props}` |
| R13 | Ecosystem first | no charting dep — `dial*` from `scale.ts` |
| R19 | Tokens only | `stroke-chart-1..5`, `stroke-viz-grid` |
| R23 | Loading reserves its box | `loading` → `<Skeleton variant="chart">` |
| R25 | Server component | no state, no handlers — the reveal is CSS |
| R26 | A11y | `role="img"` + sentence + lossless table |
Dependencies
- Base UI primitive
- Native / no Base UI dependency
- Lucide icons
- none
- NPM dependencies
- none
Source
The full implementation — components/ui/charts/radial-weave.tsx once installed.
import * as React from 'react';
// @interlace/radial-weave v1.2.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/radial-weave
// What changed since: https://ds.interlace.tools/c/radial-weave#history
// Generated banner — keep it, the upgrade diff reads this version.
/**
* @interlace/ui — RadialWeave
*
* The same series `TimeSeries` plots, wrapped around a dial — the POSTER
* form: identity and shape, composed to be looked at and shared.
*
* ## What this form is for — and what it is not
*
* A radial plot trades inspection for composition: angles are harder to
* read against a scale than horizontal distance, and that trade is only
* honest if the inspection surfaces still exist somewhere else. They do,
* and this component carries them: the `aria-label` sentence states the
* range and movement in words, the `<SeriesTable>` behind the picture is
…321 more lines…Registry JSON
The raw registry record — what the shadcn CLI fetches.