Concrete
data
Primitive

Distribution

Part-to-whole bar list for dense summary data.

Distribution is for small labeled shares. Use it when comparison matters more than exact chart reading.

DOM renderJPEG render
Direct
47%
Referral
28%
Agentic
18%
Playground

Props in the URL.

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground.
States

Rendered matrix.

Every state maps to the same render route through the `state` query param.

Direct
47%
Referral
28%
Agentic
18%
Default

Labeled part-to-whole bars.

/render state
Props

Public contract.

NameTypeDefaultDescription
data *readonly { label: string; value: number; tone?: ProgressTone }[]-Part-to-whole rows.