The one number that matters: a caps label, a KPI figure in tabular mono, a caption that says what the number means, and an optional bar row flush to the bottom. hero sets the figure at 52px and is used once per screen.
import { FigureCard, Sparkbars } from "@puckoops/camelot";| Name | Description | Default | Control |
|---|---|---|---|
| label* | ReactNode | - | |
| value* | Changing it plays the value tick number | - | |
| format | (value: number) => string | - | - |
| hero | 52px; once per screen boolean | - | |
| caption | ReactNode | - | |
| delta | ReactNode | - | - |
| footer | A 40px sparkline or bar row flush to the bottom edge. ReactNode | - | - |
| className | string | - |
Use FigureCard for the hero figure of a screen (hero) or a secondary figure. Exactly one hero per screen.
The screen's hero: 52px figure with the year's bars at the foot, the last three in ink.
Receivable across 9 open invoices, 3 of them past their due date.
A change against the last period, in the delta ink with a glyph for direction.
Against 278 in August.
A fall reads in --delta-down; the glyph points down so it survives greyscale.
Two fixed-fee projects ran over.
One hero and two secondary figures on a 5 + 4 + 3 row.
Receivable across 9 open invoices, 3 of them past their due date.
Against 278 in August.
Two fixed-fee projects ran over.