A metric card for values, units, comparison, trend, target bands, period context, and health state.
NormalWarningCriticalStaleLoadingNo data
Throughput
428.6req/s
↑ 6.4%
Success rate
94.2%
Target↔ 96 %
96
↓ 1.2%
Storage
<KpiCard label="Success rate" value={94.2} unit="%" target={96} thresholds={bands} points={trend} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { KpiCard } from '@chanrg/4ui';<KpiCard label="Success rate" value={94.2} unit="%" target={96} thresholds={bands} points={trend} />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | string | null | null | Already normalized KPI value. |
status | HealthStatus | normal | Semantic state. |
target | number | null | null | Objective marker. |
thresholds | KpiThresholds | {} | Warning and critical range boundaries. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Status is always rendered as text.
- Numerals use tabular figures.
- Target and current values are represented on a labelled semantic band.