Charts

The charts family visualizes code-coverage-style data: one hierarchy chart with three interchangeable layouts (sunburst, icicle, treemap), a trend chart for a metric over time, and an inline sparkline. Arc/tile size follows the amount of code (lines); color follows the coverage metric through a red→green scale over the 60–80% range.

Hierarchy chart

Depth:

Dataset:

The workspace dataset is this repository's own coverage tree (803 files, 11 levels deep) — dense enough to show how the chart behaves when sections get very small.

The treeview below is the same data as an equivalent control (WCAG 2.2 target size): selecting a folder re-roots the chart.

Keyboard shortcuts & zoom gestures

Tab — one tab stop for the whole chart (plus the zoom-out button and breadcrumb)
← / → — previous / next sibling in the ring (wraps)
↓ — into the first child (one ring outward)
↑ — to the parent (one ring inward)
Enter — drill into a folder / select a file
Esc — dismiss the tooltip, then reset the magnification, then drill out (Backspace always drills out)
+ / − / 0 — magnify / shrink around the focused node / reset
Home / End — first / last sibling
Type letters — jump to the next node starting with them

Pointer zoom: Ctrl + scroll (trackpad pinch works too) magnifies around the cursor — labels keep their size, so small sections become readable as you zoom in. Drag to pan while magnified. On touch, pinch with two fingers and pan with two fingers; one finger keeps scrolling the page. Clicking a section still drills into it.

Trend chart

Keyboard shortcuts

Tab — one tab stop for the data points
← / → — previous / next point in the series
↑ / ↓ — same moment in the previous / next series
Home / End — first / last point
Enter or Space — select the point

Sparklines

Inline, non-interactive trends for table cells — the numbers live in the row.

Flag	Coverage	Trend
unit	84%
integration	66%
e2e	41%