Data
Metrics
The same four primitives render finance, SaaS and infrastructure numbers. Nothing in this layer knows what Bitcoin is.
Examples
import { Button, Delta, FreshnessBadge, Metric, MetricValue, StatCard } from "@luc/ui";StatCard
Label, value, delta, optional visual and footer. Values animate to their new state without moving anything around them.
Metric block
For headers and dense rows where a full card would be too heavy.
Value sizes
<Panel className="p-4">
<Metric label="Sharpe ratio" aside={<Delta value={0.18} variant="absolute" />}>
<MetricValue value={1.42} kind="decimal" size="lg" />
</Metric>
<Metric label="Max drawdown" aside={<Delta value={-2.4} />}>
<MetricValue value={-11.8} kind="percent" size="lg" />
</Metric>
</Panel>Delta
Direction is carried by colour and a glyph. Invert it when down is good — latency, error rate, drawdown.
Up
+12.4%Down
-11.8%Inverted (lower is better)
-8.1%Neutral
0.0%Absolute
+0.18Missing data
—<Delta value={12.4} />
<Delta value={-11.8} />
<Delta value={-8.1} invert /> {/* down is good */}
<Delta value={0} /> {/* neutral */}Formatting
Every numeric formatter is guarded: a missing value renders an em dash, never “NaN”.
Kinds
number128,431decimal27.40percent12.4%currency$109,241compact48.3Mmissing—Why tabular figures matter
The width is reserved by an invisible copy of the formatted result, so the layout is identical before, during and after the ticker runs.
API
| Prop | Type | Default | Notes |
|---|---|---|---|
StatCard label / value | ReactNode / number | null | — | The two required slots. |
StatCard delta / invertDelta | number / boolean | — | Rendered through Delta; invert when down is good. |
StatCard visual / footer | ReactNode | — | Chart slot and provenance line. |
MetricValue size | "sm" | "md" | "lg" | "xl" | "lg" | Value scale; xl for headline metrics. |
MetricValue animate | boolean | true | Uses NumberTicker; set false for static exports. |
Delta variant | "percent" | "absolute" | "percent" | Percent is signed and one decimal by default. |
Rules
Do
- Always state the comparison window next to a delta.
- Use the same size for values that sit in the same grid.
- Show freshness where a number could be stale.
Don't
- Colour a metric value itself — keep colour on the delta.
- Use a sparkline without a labelled range.
- Mix
xlvalues withsmvalues in one row.
Usage
import { Metric } from "@luc/ui/data";<Metric label="Net exposure" value={0.62} kind="percent" delta={0.04} />Guidelines
Do
- Use `Metric` for a figure that stands alone, and `StatCard` when the figure needs an icon, a footer or its own selectable surface.
- Pass `kind`, `currency` and the fraction digits instead of a pre-formatted string, so the figure and its delta are formatted by one rule.
Don't
- Animate a figure that changes every frame; `animate` is for a value that arrives once.
Accessibility
The label and the value are text in reading order, and the numeric part uses tabular figures so a changing value does not move its neighbours. The delta keeps its sign in text.
Related