Components / Charts
StatTile
A KPI tile: big number, label, colour-and-arrow delta vs the previous period and an optional sparkline.
@ruckc/truss-chart Charts
Import
import { StatTile } from '@ruckc/truss-chart';
import '@ruckc/truss-chart/charts.css'; // series palettePlayground
size
value
delta
good
API
| Prop | Type | Default | Description |
|---|---|---|---|
label required | string | — | Visible label shown above the control. |
value required | number | string | — | The current value. Bind it with `bind:value`. |
format | (n: number) => string | — | Formats a numeric `value` (default: grouped, max 2 decimals). |
delta | number | — | Change vs the previous period, in percent (4.2 means +4.2%). |
deltaLabel | string | 'vs previous' | |
deltaGoodDirection | 'up' | 'down' | 'up' | Which direction of change is good: picks the success or danger colour. The arrow and signed text carry the meaning without colour. |
spark | number[] | — | Recent values for a trailing trend line. |
size | 'sm' | 'md' | 'md' | `'sm'` uses `--tr-text-xl` for the value and tighter padding. The value size can also be set from outside with the `--trc-stat-value-size` custom property (default 28px). |