Charts
Bars for amounts per period, an area for a trend, a sparkline in a row. One axis, readable by keyboard, colors that survive color blindness.
Bar Chart
BarChart stacks measured amounts per bucket with the estimate in gray on top. Hover or arrow keys read a bucket; the other bars dim. Switch to a running total to draw limit lines.
Time Series
TimeSeriesChart draws measures over time on one axis: lines for measures that don't add up, a stack for parts of one total. Markers draw a dashed line and list under their bucket. Hover or arrow keys read a bucket into the shared card; charts with a shared syncId share the cursor.
Bar List
BarList ranks a breakdown: top paths, countries, routes. Each row sits over a quiet gray bar sized against the largest, on the 36px row (28px with size="sm"). Rows can link or act; long lists end in Show more.
Traffic Chart
TrafficChart is a compact TimeSeriesChart for a day of requests, with a dashed line where production changed. 5xx share the requests scale, as a red area inside the gray one. It sits under a headline number in a frame.
Sparkline
A trend in a row, without axes. Draw it in currentColor so it darkens with the row on hover.
Rules
- Pick the form from the data’s job: bars for an amount per period, an area or line for a trend, a single number when one value is the point.
- One axis. Two measures of different scale get two charts, not two scales.
- Categories stack in CATEGORY_CHART_ORDER, colored from CATEGORY_COLOR. The order is validated so neighbors stay distinct for color-blind readers; never cycle or reorder by rank.
- Stacked segments keep a 2px surface gap, and every chart with two or more series has a legend. Color never carries identity alone.
- Text wears text tokens: values, axis labels, and legends stay gray or foreground, with a small swatch for identity.
- Every chart reads by hover and by arrow keys, into the shared tooltip card: a heading for the bucket, the headline row, then the parts.
- Grid and axes stay recessive: dashed alpha gridlines, 11px gray labels, no frame.
- Status colors are reserved for state: amber for past a limit, red for errors. They never stand in for a series.