Patterns / Dashboard
Pattern
Dashboard
KPI tiles, the line chart, and the dense table on one example register.
<section>
<p class="label">Example data</p>
<div data-part="kpi-tiles"></div>
<div data-part="line-chart"></div>
<div data-part="data-table"></div>
</section>
The single-file button copies the composition with the stylesheet and script inlined.
When to use
- A page opens with totals, a range, and the rows behind them.
- All three describe the same example set.
When not to use
- There is a single figure.
- The page is a form.
Components
| Component | Role |
|---|---|
| KPI tiles | One large figure with a written delta, plus a strip of five summary tiles. |
| Line chart | An area series with a range control and an end-value tag. |
| Data table | A dense table with a sticky header, a heat column, a mini bar, and a sparkline. |
Keyboard
| Key | Action |
|---|---|
| ArrowLeft / ArrowRight | Changes the chart range when that control is focused. |
Accessibility
- Each block keeps its own name.
- Heat in the table still prints the signed number.
Motion
- The chart range swaps without a path animation.
Pattern origin
Composition: dashboard.