KPI tile and chart frame
Dashboard and report tiles with a sparkline, the stale and denied states, and a chart frame with a time axis in your zone, CN labels and legend. Categorical colours are the validated kit set; status colours never double as categories.
Covers: kpi-tile primitive, kpi-tile designer, chart-frame primitive, chart-frame designer. Exports: KpiTile, ChartFrame.
Anatomy
The component as it sits in the product: English, compact, real data shapes.
Vision checks · last 7 days
States
5 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.
Vision checks · last 7 days
Vision checks · last 7 days
Vision checks · last 7 days
staleVision checks · last 7 days
No checks in this range
Try 30 days.
Density
Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.
Vision checks · last 7 days
Vision checks · last 7 days
English · 中文
Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.
Vision checks · last 7 days
视觉检查 · 近 7 天
Long string · permission denied
The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).
Vision checks by checkpoint (Design p1.1, Quality p2.1, HF Design p3.5.4, HF Quality p3.5.5) · last 7 days
Vision checks · last 7 days
Not available to your role
Your role is missing view vision checks. Nothing here is hidden by mistake: the server sends only what you can do.
Both apps
One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.
Vision checks · last 7 days
Vision checks · last 7 days
Contract
The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.
- Export
KpiTile·@rj/admin-kit- Props
label·value·delta·spark·state- States
- ready · loading · stale · error · denied
- shadcn / Radix
- Card
- Package underneath
- recharts (spark) or inline SVG
- Accessibility
- value and delta read as one sentence
- Export
ChartFrame·@rj/admin-kit- Props
title·range7d|30d ·series·zone- States
- ready · loading · empty · stale · denied
- shadcn / Radix
- ToggleGroup (range)
- Package underneath
- recharts
- Accessibility
- svg role=img with a text summary; a table toggle for screen readers
- API operations
- admin.dashboard.index · admin.vision-checks.dashboard.index · admin.reports.forecast-accuracy · admin.api-request-logs.stats
- Phone variant
- tiles stack, chart full width