Daily bars
A value per day as stacked bars, with a legend that hides series and a reading that follows the pointer.
import { DailyBars } from "@arcadia/ui"One bar per day, every day of the range present, so a quiet stretch reads as quiet and a busy week as a busy week, never as a slope between two points. Series stack largest first from the base. Pass each series its identity paint (providerChartColor for a provider, chartColor for a model's slot) so a hidden series or a new range never repaints the others. Values read through format, fmtTokens by default.
Examples
rootStyle takes layout and the plot's height.
| Knob | Takes | Default | Sets |
|---|---|---|---|
Ref<Space> | calc(${space["--space-16"] | The plot's height. |
The plot is one focusable image named by label with each series' total, so a screen reader hears the whole range at once. With focus on it, Left and Right step through the days, Home and End jump to the ends and Escape clears the reading; the reading is a status the plot points at, so the day is announced as it moves. The legend's chips are toggle buttons with their pressed state.
DailyBars
daysrequired- readonly string[]
- The days,
yyyy-mm-dd, oldest first; every day has a bar (a quiet day is an empty slot). seriesrequired- readonly DailyBarsSeries[]
- Largest first: the first series sits at the base of each stack and leads the legend.
labelrequired- string
- What the chart counts, for the accessible name ("Tokens per day").
format- (n: number) => string
- A value as read on screen. Default:
fmtTokens(compact). legend- boolean
- The legend's chips hide and show a series. Default: true when there is more than one.
rootStyle- DailyBarsStyle
Rest props go to HTMLAttributes<HTMLDivElement>.