Components
Stat group
Several figures or states read at a glance, joined in one card or as one compact card each.
StatGroup draws a row of headline figures. Each cell has an icon well, a mono label, the value and a detail line, and may link to where the figure is managed. joined draws one card split by hairlines (a security status strip); cards draws one compact stat card per figure (a modules summary).
StatGroup Connecting to the DMS preview…
Usage
src/pages/security.ts
import { StatGroup } from "@antelopejs/interface-dms/base/stat-group";
static status = StatGroup({
layout: "joined",
items: [
{ id: "mfa", icon: "i-ph-shield-check", tone: "success", eyebrow: "$app.security.mfa",
value: "$app.security.on", detail: "$app.security.authenticator", to: "/settings/user/security" },
{ id: "sessions", icon: "i-ph-devices", eyebrow: "$app.security.sessions", value: 3 },
],
});
From a route, answer { items } in the same shape:
src/pages/billing.ts
static stats = StatGroup({ layout: "cards", fetchUrl: "/api/billing/stats" });
@Get("stats")
stats() {
return {
items: [
{ id: "sent", icon: "i-ph-receipt", eyebrow: "$billing.stats.sent", value: 1284 },
{ id: "overdue", icon: "i-ph-warning-octagon", tone: "error", eyebrow: "$billing.stats.overdue", value: 6,
detail: { key: "billing.stats.oldest", params: { days: { type: "count", value: 41 } } }, detailTone: "error" },
],
};
}
Options
| Option | Type | Default | Description |
|---|---|---|---|
empty.title*Content | string | – | |
empty.descriptionContent | string | – | |
layoutAppearance | "joined" | "cards" | "joined" | One card split in cells, or one card per cell. |
columnsLayout | number | – | How many columns on a wide screen; by default, one per cell. |
A cell (StatGroupItem) carries eyebrow and value — a number is formatted for the locale — plus optional icon, tone (muted by default when joined, primary as cards), detail, detailTone and to. eyebrow, value and detail take a composed text.
Pitfalls
- A detail takes up to two lines before its ellipsis; the row takes the height of its tallest cell.
- Columns drop on narrow screens: a joined group goes to one column on phones, compact cards keep two.
- For one metric followed over a period, with its variation and sparkline, use a KPI card.