Skip to content

StatTile

A single number with its label, change and trend. Group tiles in a StatGroup for the top of a dashboard.

DataServer-rendered

Examples

Group

Tiles share one surface with hairline dividers. Direction and tone are separate: errors going up is bad news.

Servers
4of 5

1 paused

Calls today
1,284up 12% since yesterday
Errors
7up 3 since yesterday
Median latency
212ms0
Example
<StatGroup>
  <StatTile label="Servers" value="4" unit="of 5" hint="1 paused" />
  <StatTile
    label="Calls today"
    value="1,284"
    delta={{ value: '+12%', direction: 'up', tone: 'good', label: 'up 12% since yesterday' }}
    sparkline={<Sparkline values={[12, 18, 15, 22, 30, 26, 34, 41]} label="Calls per hour, rising" />}
  />
  <StatTile label="Errors" value="7" delta={{ value: '3', direction: 'up', tone: 'bad', label: 'up 3 since yesterday' }} />
  <StatTile label="Median latency" value="212" unit="ms" delta={{ value: '0', direction: 'flat' }} />
</StatGroup>

Link tiles

With href the whole tile opens a drill-down; the label gets an arrow. Hover tints the tile.

Calls
1,2847d
Success
98.4%
p95 latency
640ms

p50 212 ms

Example
<StatTile href={routes.dashboard.metrics.href(undefined, { by: 'server' })} label="Calls" value="1,284" unit="7d" />

Sparkline

A 24px line in the accent colour with a dot on the latest value. Unlabelled sparklines are hidden from assistive tech.

Light
Dark
Example
<Sparkline values={[8, 6, 9, 4, 3, 5, 2]} label="Errors per day, falling" />

Usage

Usage
import { StatGroup, StatTile, Sparkline } from '@switchboard/ui'

<StatGroup>
  <StatTile label="Servers" value={String(live)} unit={`of ${total}`} />
  <StatTile label="Calls today" value={formatNumber(calls)} />
</StatGroup>

Props

Every component also takes mix, for css() and mixins applied after its own style.

StatTile

StatTile props
PropTypeDefaultDescription
label*RemixNode–What the number is.
value*RemixNode–The number, already formatted.
unitRemixNode–Small text after the value ("of 5", "ms").
delta{ value: string; direction: 'up' | 'down' | 'flat'; tone?: 'good' | 'bad' | 'neutral'; label?: string }–Change since the last period. tone colours it; label is the spoken text.
sparklineRemixNode–Usually a Sparkline, right of the value. Dropped when the tile is under 230px wide.
hintRemixNode–One quiet line under the value.
hrefstring–Makes the whole tile a link to a drill-down (an <a>; mix is not applied).

Also accepts every <div> attribute.

StatGroup

StatGroup props
PropTypeDefaultDescription
layout'row' | 'stack''row'`stack`: one tile per row, e.g. beside an illustration on the landing page.

Also accepts every <div> attribute. Children are StatTiles.

Sparkline

Sparkline props
PropTypeDefaultDescription
values*number[]–Points, oldest first. Scaled to fit; no axes.
labelstring–Spoken summary ("Calls per hour, rising"). Without it the SVG is aria-hidden.

Also accepts every <svg> attribute.

Accessibility

  • Each tile is a <dl>: the label is the <dt>, the value and change are the <dd>.
  • With delta.label set, the visible "+12%" is hidden and the label is read instead, so the direction is spoken, not only shown by an arrow and colour.
  • A labelled Sparkline is role="img" with that label; an unlabelled one is aria-hidden.

Guidance

Do

  • Give every delta a spoken label that says the direction and period.
  • Set tone from what the change means, not from its direction.

Don’t

  • Put more than four tiles in a group.
  • Use a sparkline as the only place a number appears.