MetricTile

One key figure with its change and recent trend, for a row of tiles at the top of a report. Pick StatCard of the surfaces group when the tile links to a full view.

MetricTile

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, MetricTile

Visits38,412Up22%, bettervs previous 28 daysLast 28 days
Median load time1.4 sDown12%, better
Sign-upsLoading sign-ups
Revenue
Could not load revenue.
Check the payment connection

Dark theme, MetricTile

Visits38,412Up22%, bettervs previous 28 daysLast 28 days
Median load time1.4 sDown12%, better
Sign-upsLoading sign-ups
Revenue
Could not load revenue.
Check the payment connection

High contrast theme, MetricTile

Visits38,412Up22%, bettervs previous 28 daysLast 28 days
Median load time1.4 sDown12%, better
Sign-upsLoading sign-ups
Revenue
Could not load revenue.
Check the payment connection

UsageLink to the section Usage

tsx

import { MetricTile } from '@skribly/ui/charts'

tsx

<MetricTile
  label="Visits"
  value="38,412"
  delta={<Delta value={0.22} directionLabels={directions} comparison="vs previous 28 days" />}
  sparkline={last28}
  sparklineLabel="Visits, last 28 days: rising"
  hint="Last 28 days"
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Plain text in reading order: label, value, change, trend, hint.
The sparkline is one image named by sparklineLabel.
Loading marks the tile busy and reads loadingLabel; an error shows an icon and words.
The value shrinks in a narrow tile and long text wraps, so four tiles fit two by two on a phone.

This demo runs through axe in all three themes on every test run. See what the tests check.