ds
Components
Stat tiles and metrics

Stat tiles and metrics

Headline numbers and before-and-after values.

Stat tiles

Requests: 1.2Mper day, last 30 days
Latency: 140 msp99, down from 900
Errors: 0.02%of requests
Uptime: 99.97%13 minutes down

Code

<dl class="stat-tiles">
  <div><dt class="label">Requests</dt><dd><span class="stat-v">1.2M</span><span class="stat-s">per day, last 30 days</span></dd></div>
  <div><dt class="label">Latency</dt><dd><span class="stat-v">140 ms</span><span class="stat-s">p99, down from 900</span></dd></div>
  <div><dt class="label">Errors</dt><dd><span class="stat-v">0.02%</span><span class="stat-s">of requests</span></dd></div>
  <div><dt class="label">Uptime</dt><dd><span class="stat-v">99.97%</span><span class="stat-s">13 minutes down</span></dd></div>
</dl>

The pattern from fin1te.com's stats page, with sample numbers. A 1px ink rule on top starts the block; tiles are separated by hairlines, not boxes.

Metrics

Job runtime, p50: 41 s → 13 s
Memory per executor: 48 → 14 GB
Jobs migrated: 400+

Code

<dl class="metrics">
  <div><dt>Job runtime, p50</dt><dd>41 s → 13 s</dd></div>
  <div><dt>Memory per executor</dt><dd>48 → 14 GB</dd></div>
  <div><dt>Jobs migrated</dt><dd>400+</dd></div>
</dl>

From the work log. Values are amber: this is the before-and-after, the number that improved.

Class	On	What it does
`.stat-tiles`	dl	Row of headline numbers.
`.stat-v / .stat-s`	span	The value and its sub-line.
`.metrics`	dl	Grid of small boxes with amber values. dd comes after dt in the source and is shown first.