KPI card

KpiCard headlines one metric followed over a period: a large formatted value, a colored up / down delta badge with its comparison caption, and an optional inline sparkline. The stat variant is the tighter DMS look, with a mono uppercase label and a bare icon.

Preview Code

Connecting to the DMS preview…

static kpiCard = KpiCard({
  title: "Revenue",
  icon: "i-ph-currency-eur",
  valueFormat: "currency",
  currencyCode: "EUR",
  showDelta: true,
  showSparkline: true,
  sparklineAccent: "auto",
  compareLabel: "vs previous period",
  staticValue: 48200,
  staticDelta: 12.4,
  staticSparkline: [31, 34, 33, 38, 41, 39, 44, 48],
});

Usage

import { KpiCard } from "@antelopejs/interface-dms/base/kpi-card";

static revenue = KpiCard({
  title: "$shop.sales.revenue",
  icon: "i-ph-currency-eur",
  fetchUrl: "/api/sales/revenue",
  periodScope: "sales",
  valueFormat: "currency",
  currencyCode: "EUR",
  showDelta: true,
  showSparkline: true,
});

The route answers the value, its variation and the sparkline points:

@Get("revenue")
revenue() {
  return { value: 48200, delta: 12.4, previousValue: 42900, sparkline: [31, 34, 33, 38, 41, 39, 44, 48] };
}

Options

valuePrecision is available in code (Value precision).

Recipes

A metric where down is good

Set invert: true for errors, churn or latency: a falling value then reads green.

A static card

Pass staticValue, staticDelta and staticSparkline instead of fetchUrl for a fixture or a demo.

Pitfalls

• delta is a change in percent (12.5), not a ratio (0.125).
• For several figures read at a glance, without a period, use a StatGroup: its cards layout draws the same compact card as KpiCard({ variant: "stat" }).

Next steps