Stat Sparkline

Usage

import { StatSparkline } from '@wdzyi/ui';

<StatSparkline
  title='Overview'
  stats={[
    { label: 'Balance', value: 24580, points: balances },
    { label: 'Money out', value: 2146, change: -0.003, lowerIsBetter: true, points: spending },
    { label: 'Saved', value: 34, format: (v) => `${Math.round(v)}%`, points: rates },
  ]}
  labels={dates}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

statsStatSparklineItem[]

A tile each, with a label, a value, the points behind it, and its change. Give one its own format, such as a percentage, and mark it lowerIsBetter where going up is bad news. The first one’s line is foil.

titlestring

Over the row, beside the switch.

periods, period, onPeriodChangestring[], string, function

The periods to switch between, the one shown, and what to do when another is chosen. Swap the stats to match, and every line morphs and every number counts on.

labelsstring[]

What each point is called in the tooltip, such as its date, shared by every line.

format(value: number) => string

How a value reads, unless a stat has its own. By default, whole pounds.

Notes

• The tiles come up out of a blur one after another, then each number counts up and its line draws itself in, a beat behind the one before.
• Each line has its own scale, so its shape fills its tile. A change is the last point against the first unless you give one.
• Rest on a line, tap it, or focus it and use the arrows, and a crosshair snaps to the nearest point with its value beside it.
• The row fits as many tiles across as it can at 148px each, but only in counts that make even rows, so four tiles go four, two or one across. In one column, each figure sits beside its line. With reduced motion, everything is where it ends from the start.
• Values are sample data.