Stats & Numbers
Sparkline Trend Grid
A wall of small labelled trend lines for scanning every region, SKU or account at once instead of reading one chart at a time. Each tile carries its own value, delta and line, the grid reflows to a single column on mobile, and the full set is mirrored in a table for anyone who can't read the lines visually.
$ velocityx add sparkline-trend-gridBuilt for astro.
Full docs for Sparkline Trend Grid →
Needs a licence key —
subscribe here, then
velocityx loginonce.
This week, by region
-
East Coast
$48.2k -
West Coast
$31.6k -
Midwest
$19.4k -
South
$27.8k -
Northeast
$22.1k -
Canada
$12.9k
| Series | Value | Trend | Points |
|---|---|---|---|
| East Coast | $48.2k | trending up | 42, 48, 45, 61, 58, 70, 76 |
| West Coast | $31.6k | trending down | 55, 52, 49, 44, 40, 38, 35 |
| Midwest | $19.4k | trending up | 20, 22, 21, 24, 23, 25, 26 |
| South | $27.8k | trending down | 30, 29, 31, 28, 27, 26, 28 |
| Northeast | $22.1k | trending up | 18, 19, 21, 20, 22, 21, 22 |
| Canada | $12.9k | trending down | 14, 13, 12, 13, 12, 13, 12 |
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | No | 'This week, by region' | |
| series | SparkSeries[] | No | [ { label: 'East Coast', value: '$48.2k', points: [42, 48, 45, 61, 58, 70, 76] }, { label: 'West Coast', value: '$31.6k', points: [55, 52, 49, 44, 40, 38, 35] }, { label: 'Midwest', value: '$19.4k', points: [20, 22, 21, 24, 23, 25, 26] }, { label: 'South', value: '$27.8k', points: [30, 29, 31, 28, 27, 26, 28] }, { label: 'Northeast', value: '$22.1k', points: [18, 19, 21, 20, 22, 21, 22] }, { label: 'Canada', value: '$12.9k', points: [14, 13, 12, 13, 12, 13, 12] }, ] | |
| periodLabel | string | No | 'the last 7 periods' | Used only in each cell's accessible summary, e.g. "last 7 days". |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/sparkline-trend-grid/SparklineTrendGrid.astroUsing the Sparkline Trend Grid component
Install it with velocityx add sparkline-trend-grid.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Stats & Numbers.
Stat band whose numbers count up when the section scrolls into view, then settle. No runtime dependency — plain Astro plus a small inline observer. Honours prefers-reduced-motion by rendering final values immediately.
astroPuts two numbers on one shared scale and calls out the delta — the proof-point shape for 'we cut your load time' or 'conversion rate before vs. after' case studies. Ships a screen-reader summary alongside the bars, so the comparison reads correctly even without the visual.
astroOne headline figure sized to carry a section on its own, with a short annotation line underneath for context. Locale-safe number formatting (including compact '4.2M' notation) and a count-up that lands on the real value immediately for reduced-motion users.
astroThe compact way to show actual-vs-target on a scorecard row: a thin fill against a qualitative poor/satisfactory/good band, with a tick marking the target, so a whole KPI reads in the space a single number used to take. Values stay in text too, so it holds up for anyone who can't read the bar visually.
astro