Metrics
Metrics blocks are the cards a dashboard is built from: a figure, the comparison that makes it mean something, and the chart underneath showing how it got there. Eight of them cover the shapes that carry most reporting, a KPI tile with its delta, rows lying down so long labels stay readable, two series ranked against each other, a week of stacked time, a ring of named shares, a year of trend bands, an hour-against-weekday matrix, and a zero line with a month's two sides either side of it.
The axis is where these go wrong quietly. Ticks spaced evenly on screen but not evenly in value will turn a flat series into a climb, and nobody reading the chart will know. The same care applies to the comparison: a figure with no stated period is a number, not a measurement. Say what the delta is measured against, keep the scale linear unless the label says otherwise, and let the reader reach the underlying rows when the shape raises a question a chart cannot answer.
Metric card
Best for
The KPI tile a dashboard leads with: one number, its delta, and the months behind it
Anatomy
Header with the card's own menu · 32px figure and a delta pill · bars with the average rule · month pills that move the selection
Monthly spending
$27,496
12%vs last yearMonthly rows
Best for
Comparing a handful of periods: long labels stay readable down the side
Anatomy
Accent-bar headline · month pills against a vertical rule · hatched tracks · the picked row filled and labelled · average rule above it
Spending by month
$27,496USD
Monthly spendingRanked bars
Best for
Two series across a few categories: a legend that also switches them off
Anatomy
Brand tile and a button rail · legend swatches over their totals · stacked rows on a dashed grid · an axis in thousands
Hours by platform
Design
Editing
Programming
020k40k60k80k100k
Day stack
Best for
A week of tracked time: what was booked and what was left
Anatomy
Range caption over an hours-and-minutes figure · legend with totals · columns split hatched over solid · average rule · weekday row
Tracked time this week
Apr 19–25, 202645h12m
Freelance37h 30mPart-time7h 42m
8h6h4h2h0
Donut breakdown
Best for
Where a total went: five parts at most, each named beside its share
Anatomy
200px ring with rounded ends and the file's soft hatch · total in the middle · legend that lights its own slice and reads out its count
Spending by category
$130kTotal spent
Area trend
Best for
Three streams over a year: the shape of the trend, not the single reading
Anatomy
Range figure and a legend of totals · gradient bands on a 12-month grid · crosshair that snaps to the month, with a tooltip that pins on click
Earnings by contract type
Jan–Dec, 2026$235k
Freelance$235kPart-time$148kContract$74k
$50k$40k$30k$20k$10k$0
May 2026
$20kFreelance
$12kPart-time
$6kContract
Selected
JanFebMarAprMayJunJulAugSepOctNovDec
Hour heatmap
Best for
Two axes at once, which hour of which day is busy, read as a shape rather than a series
Anatomy
Four-step key · a 7x7 matrix of tinted cells · hours down the side and weekdays under it · a column selects, a cell reads out
Busiest hours
3,980sessions+18% vs last week
Peak hour · Wednesday, 11amSessions per hourFewerMore
Diverging months
Best for
Two sides of the same month: what came in above the line and what went out below it
Anatomy
Zero line through the middle · twelve columns with a half either side · axis at its true fractions · the picked month solid, the rest capped and hatched
Revenue against cost
Revenue this year
$27,496
12%Apr 2026$50kRevenue$17.5kCostSelected
KPI card row
Best for
The four numbers a dashboard opens on, each with its change and what it was measured against
Anatomy
Icon tile · label and period · big figure with dimmed cents · change pill against last month · View details link · two corner facts
Figure strip
Best for
A report header that has to say four things in one line
Anatomy
Title and range switch · four figures under hairline dividers · a change pill on each · two rows of two on a narrow stage
Store overview
- Revenue
- $48,210.408.1%
- Orders
- 1,2042.4%
- Average order
- $40.041.2%
- Refunds
- 120%
This week vs last week
Best for
Showing whether this week is ahead, day by day, without a second chart
Anatomy
Chart title with total and change · legend · paired bars, last week hatched · the picked day's reading pinned over its pair
Orders by dayThis week82816.0%
- This week
- Last week
152 vs 120 · +32
MonTueWedThuFriSatSun
Forecast with a target
Best for
Revenue plans: where the year has been, where it is heading and the line it has to clear
Anatomy
Area for the actual months · dashed forecast tail · target line with its tag · pinned reading that follows the pointer · summary strip
Monthly revenueActual to September, forecast after
- Actual
- Forecast
- Target
$50k$40k$30k$20k$10k$0k
Target $30kDec · $38k forecast
JanFebMarAprMayJunJulAugSepOctNovDec
27%December is on course to beat the target by $8k.
01
Using Metrics
Reach for it when
- The top row of a dashboard, where each tile answers a single question
- A report someone scans before deciding whether to open the table underneath
- Comparing two series across a few categories, with a legend that can switch one off
- Looking for a pattern across two axes, such as hour against weekday
Reach for something else when
- The reader needs the individual records: a chart shows shape and a table shows rows, so link one to the other rather than asking the chart to do both
- There are only two or three values to compare; write them as a sentence, because a chart of three bars costs more attention than it returns
- An operational signal that has to be acted on within seconds: a status page or an alert is the right surface, since a trend chart is read rather than watched
02
Where it shows up
01
Revenue dashboards
The tile a finance page leads with. One figure, a delta pill saying which way it moved, bars for the months behind it with an average rule across them, and month pills that move the selection without a reload.
02
Time tracking reports
A week of logged hours where the question is what was booked and what was left. Columns split hatched over solid, a legend carries each side's total, and an average rule shows which days sat under the usual load.
03
Staffing patterns
A matrix of hour against weekday, read as a shape rather than a series. Four tint steps are enough to show where a support queue fills; selecting a column or a cell reads the figure out for that shift.
04
Cash flow statements
Money in above a zero line and money out below it, month by month. The shared baseline is what makes the two sides comparable, and capping the unselected columns keeps the picked month legible without a separate highlight colour.
03
Questions
What makes a metric tile readable?
A comparison. A number on its own (revenue, signups, latency) cannot be judged, because the reader has nothing to judge it against. Pair the figure with a delta and name the period both belong to. If the comparison is too noisy at that window to mean anything, widen the window rather than dropping the comparison and leaving a bare number.
When is a donut better than a bar chart?
When the parts genuinely sum to a whole and there are few enough to name beside the ring: around five. Past that the slices become wedges nobody can compare by eye. Bars stay comparable at any count because they share a baseline, so ranking questions belong to bars and composition questions to a ring.
The Orvain DispatchPremium components,
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Just components, never spam. You can unsubscribe anytime.
Orvain MCPMetrics
Metrics blocks are the cards a dashboard is built from: a figure, the comparison that makes it mean something, and the chart underneath showing how it got there. Eight of them cover the shapes that carry most reporting, a KPI tile with its delta, rows lying down so long labels stay readable, two series ranked against each other, a week of stacked time, a ring of named shares, a year of trend bands, an hour-against-weekday matrix, and a zero line with a month's two sides either side of it.
The axis is where these go wrong quietly. Ticks spaced evenly on screen but not evenly in value will turn a flat series into a climb, and nobody reading the chart will know. The same care applies to the comparison: a figure with no stated period is a number, not a measurement. Say what the delta is measured against, keep the scale linear unless the label says otherwise, and let the reader reach the underlying rows when the shape raises a question a chart cannot answer.
Metric card
Best for
The KPI tile a dashboard leads with: one number, its delta, and the months behind it
Anatomy
Header with the card's own menu · 32px figure and a delta pill · bars with the average rule · month pills that move the selection
Monthly spending
$27,496
12%vs last yearMonthly rows
Best for
Comparing a handful of periods: long labels stay readable down the side
Anatomy
Accent-bar headline · month pills against a vertical rule · hatched tracks · the picked row filled and labelled · average rule above it
Spending by month
$27,496USD
Monthly spendingRanked bars
Best for
Two series across a few categories: a legend that also switches them off
Anatomy
Brand tile and a button rail · legend swatches over their totals · stacked rows on a dashed grid · an axis in thousands
Hours by platform
Design
Editing
Programming
020k40k60k80k100k
Day stack
Best for
A week of tracked time: what was booked and what was left
Anatomy
Range caption over an hours-and-minutes figure · legend with totals · columns split hatched over solid · average rule · weekday row
Tracked time this week
Apr 19–25, 202645h12m
Freelance37h 30mPart-time7h 42m
8h6h4h2h0
Donut breakdown
Best for
Where a total went: five parts at most, each named beside its share
Anatomy
200px ring with rounded ends and the file's soft hatch · total in the middle · legend that lights its own slice and reads out its count
Spending by category
$130kTotal spent
Area trend
Best for
Three streams over a year: the shape of the trend, not the single reading
Anatomy
Range figure and a legend of totals · gradient bands on a 12-month grid · crosshair that snaps to the month, with a tooltip that pins on click
Earnings by contract type
Jan–Dec, 2026$235k
Freelance$235kPart-time$148kContract$74k
$50k$40k$30k$20k$10k$0
May 2026
$20kFreelance
$12kPart-time
$6kContract
Selected
JanFebMarAprMayJunJulAugSepOctNovDec
Hour heatmap
Best for
Two axes at once, which hour of which day is busy, read as a shape rather than a series
Anatomy
Four-step key · a 7x7 matrix of tinted cells · hours down the side and weekdays under it · a column selects, a cell reads out
Busiest hours
3,980sessions+18% vs last week
Peak hour · Wednesday, 11amSessions per hourFewerMore
Diverging months
Best for
Two sides of the same month: what came in above the line and what went out below it
Anatomy
Zero line through the middle · twelve columns with a half either side · axis at its true fractions · the picked month solid, the rest capped and hatched
Revenue against cost
Revenue this year
$27,496
12%Apr 2026$50kRevenue$17.5kCostSelected
KPI card row
Best for
The four numbers a dashboard opens on, each with its change and what it was measured against
Anatomy
Icon tile · label and period · big figure with dimmed cents · change pill against last month · View details link · two corner facts
Figure strip
Best for
A report header that has to say four things in one line
Anatomy
Title and range switch · four figures under hairline dividers · a change pill on each · two rows of two on a narrow stage
Store overview
- Revenue
- $48,210.408.1%
- Orders
- 1,2042.4%
- Average order
- $40.041.2%
- Refunds
- 120%
This week vs last week
Best for
Showing whether this week is ahead, day by day, without a second chart
Anatomy
Chart title with total and change · legend · paired bars, last week hatched · the picked day's reading pinned over its pair
Orders by dayThis week82816.0%
- This week
- Last week
152 vs 120 · +32
MonTueWedThuFriSatSun
Forecast with a target
Best for
Revenue plans: where the year has been, where it is heading and the line it has to clear
Anatomy
Area for the actual months · dashed forecast tail · target line with its tag · pinned reading that follows the pointer · summary strip
Monthly revenueActual to September, forecast after
- Actual
- Forecast
- Target
$50k$40k$30k$20k$10k$0k
Target $30kDec · $38k forecast
JanFebMarAprMayJunJulAugSepOctNovDec
27%December is on course to beat the target by $8k.
01
Using Metrics
Reach for it when
- The top row of a dashboard, where each tile answers a single question
- A report someone scans before deciding whether to open the table underneath
- Comparing two series across a few categories, with a legend that can switch one off
- Looking for a pattern across two axes, such as hour against weekday
Reach for something else when
- The reader needs the individual records: a chart shows shape and a table shows rows, so link one to the other rather than asking the chart to do both
- There are only two or three values to compare; write them as a sentence, because a chart of three bars costs more attention than it returns
- An operational signal that has to be acted on within seconds: a status page or an alert is the right surface, since a trend chart is read rather than watched
02
Where it shows up
01
Revenue dashboards
The tile a finance page leads with. One figure, a delta pill saying which way it moved, bars for the months behind it with an average rule across them, and month pills that move the selection without a reload.
02
Time tracking reports
A week of logged hours where the question is what was booked and what was left. Columns split hatched over solid, a legend carries each side's total, and an average rule shows which days sat under the usual load.
03
Staffing patterns
A matrix of hour against weekday, read as a shape rather than a series. Four tint steps are enough to show where a support queue fills; selecting a column or a cell reads the figure out for that shift.
04
Cash flow statements
Money in above a zero line and money out below it, month by month. The shared baseline is what makes the two sides comparable, and capping the unselected columns keeps the picked month legible without a separate highlight colour.
03
Questions
What makes a metric tile readable?
A comparison. A number on its own (revenue, signups, latency) cannot be judged, because the reader has nothing to judge it against. Pair the figure with a delta and name the period both belong to. If the comparison is too noisy at that window to mean anything, widen the window rather than dropping the comparison and leaving a bare number.
When is a donut better than a bar chart?
When the parts genuinely sum to a whole and there are few enough to name beside the ring: around five. Past that the slices become wedges nobody can compare by eye. Bars stay comparable at any count because they share a baseline, so ranking questions belong to bars and composition questions to a ring.
Related blocks
All blocksThe Orvain Dispatch
Premium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Just components, never spam. You can unsubscribe anytime.
