Delta

"It moved, this much, this way." The smallest complete unit of analysis and the most-repeated element in a dense view, so it is worth getting exactly right once.

data displayserver≥ 320pxuiv1.1.0

Delta — live rendercharts-delta--up ↗

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.

Via shadcn URL

npx shadcn@latest add https://ds.interlace.tools/r/delta.json

With the @interlace alias

npx shadcn@latest add @interlace/delta

Behavior

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.

Text equivalent

packages/ui/src/charts/delta.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.

Label, not a data equivalentShips sr-only copy

Ships sr-only copy for what the visual carries by position, colour or icon alone — a label, not a full data equivalent.

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 component
Renders 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 = 320
Declared, not assumed. Below 320 CSS px the preflight contract draws a dev-mode outline — how to switch it on.
Coverage gate: 100% × 4
Inside 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.0.01 entry

Addedminor
The visualization layer ships: a token-driven chart set built on the VISUALIZATION_PHILOSOPHY row-first doctrine — MetricTable as the centrepiece, TimeSeries as the thing a row is promoted into, plus a network graph, sparklines and deltas. Every chart carries the DS-wide loading skeleton opt-in.
Components

Import

27 named exports — pull the parts you need.

Public API

import { ANNOTATION_KINDS, AnnotationKind, Delta, Direction, MIN_VIEWPORT, NumericPoint, Polarity, areaPath, axisSlots, bandScales, compact, day, delta, describeDistribution, describeSeries, keepAtNarrow, linePath, nearestIndex, nearestSlot, numeric, peakBin, plotScales, seriesScales, slotAt, stepPath, ticks, toneFor } from '@/components/ui/charts/delta';

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.

DeltaProps

Also accepts every <span> attribute.

Prop	Type	Description
points*	readonly Point[]	—
polarity	Polarity	—
percent	boolean	Show the percentage alongside the absolute change.
unit	string	Noun for the accessible sentence — "views", "downloads".

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

5 more states from the same story file.

downcharts-delta--down ↗

flatcharts-delta--flat ↗

inverse polaritycharts-delta--inverse-polarity ↗

zero baselinecharts-delta--zero-baseline ↗

not enough datacharts-delta--not-enough-data ↗

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	`data-slot="delta"`
R7	className merged + ...rest	`cn(...)` + `{...props}`
R8	Enums for >2 states	`polarity` (normal/inverse); `direction` from the data
R14	Declares min viewport	`data-min-viewport={String(MIN_VIEWPORT)}`
R18	Tailwind only	zero inline `style`
R19	Tokens only	`text-viz-positive/-negative/-neutral`
R20	AA contrast	aliases `--success` / `--destructive` (≥7:1 both themes)
R26	A11y	glyph is `aria-hidden`; the sentence is in the label

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.

Opt-in to the dev-mode warning

<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: @interlace/theme
@interlace/cn

Source

The full implementation — components/ui/charts/delta.tsx once installed.

142 lines · TypeScript

github ↗

import * as React from 'react';

// @interlace/delta v1.1.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/delta
// What changed since: https://ds.interlace.tools/c/delta#history
// Generated banner — keep it, the upgrade diff reads this version.

/**
 * @interlace/ui — Delta
 *
 * "It moved, this much, this way." The smallest complete unit of analysis and
 * the most-repeated element in a dense view, so it is worth getting exactly
 * right once.
 *
 * ## Three signals, not one
 *
 * Direction is carried by a **glyph** (▲ ▼ –), a **sign** (+ / −), and a
 * **colour** — in that order of reliability. Colour is last on purpose: it is
 * the one that disappears in greyscale, in bright sun, and for the ~8% of men
 * with red-green colour vision deficiency. Any of the three alone is enough to

…122 more lines…

Registry JSON

The raw registry record — what the shadcn CLI fetches.

/r/delta.json