Dashboards that answer a question

The problem

Dashboards collect every number the system has. Twelve cards, four charts and no hierarchy: people can't tell what's good, what changed or what to do. A number without a comparison, like “86”, means nothing.

When to use it

Use it for

Overview screens people check regularly: a manager's team, payroll this month, hiring.
Numbers that lead to an action: approve, follow up, investigate.

Not for

Exploring data with many dimensions: use a report with filters and a table.
One number people need once: put it on the page where they need it.

Anatomy

QuestionThe heading says what the screen answers: “Is my team covered next week?”.
Headline numbers3 to 5 MetricCards. Each has a comparison: a DeltaBadge, a caption or a Sparkline.
Primary chartOne chart for the trend that matters most, with a summary in words.
StatesChartState for loading, no data and errors, at the chart's final size.
Next stepLinks from each number to the list behind it.

How to build it

Write down the two or three questions people bring to the screen. Drop any number that answers none.
Show 3 to 5 MetricCards in the top row, ordered by importance.
Give every number a comparison: last month, the target or the same week last year.
Set trend on each delta so up is green only when up is good: headcount up-good, sick days up-bad.
Add one primary chart with a written summary; put secondary charts below or on their own page.
Handle loading, empty and error states with isLoading and ChartState, keeping the layout's size.

app.tsx

import { MetricCard, Sparkline } from "@nexera-ui/react";

<h2 className="text-heading-h3">Is my team covered next week?</h2>
<div className="grid gap-4 sm:grid-cols-3">
  <MetricCard type="trend" label="People in" value="18 of 22" delta="-2" trend="down-bad" caption="vs this week" />
  <MetricCard type="trend" label="Sick days" value="6" delta="+3" trend="up-bad" caption="vs last month" />
  <MetricCard
    type="sparkline"
    label="Open requests"
    value="4"
    caption="2 need you today"
    sparkline={<Sparkline data={[9, 7, 8, 6, 5, 4]} aria-label="Open requests over 6 weeks, falling" />}
  />
</div>

Accessibility

DeltaBadge reads the meaning in words (“+4.2% Increase, good”), so the colour is never the only signal.
Every chart has a summary sentence and a data table view for screen reader users.
Sparklines have an aria-label that states the trend, or are decorative when the card already says it.
Loading cards are announced once, with loadingLabel, not as a page of empty boxes.

Do and don't

DoLead with the question and the 3 to 5 numbers that answer it.

Don'tShow every metric the system tracks, in equal-sized cards.

DoGive each number a comparison and the right trend colour.

Don'tShow “86” with no context, or make every increase green.

DoKeep loading and error states at the size of the final chart.

Don'tLet the dashboard jump around as each card loads.

Is my team covered next week?