data-visualization/DSMetricCard
DSMetricCard
data-visualizationDashboard widget with a primary metric, percentage change, animated sparkline, and label. Supports trending up/down/neutral.
iOS 17+macOS 14+
Purpose
Quick KPI visualisation in analytics dashboards. Compact and scannable.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| titlereq | String | — | Metric name. |
| valuereq | String | — | Formatted value (e.g. '$12,400'). |
| changereq | Double | — | Percentage change (0.12 = +12%). |
| datareq | [Double] | — | Historical series for the sparkline. |
| tint | Color | DSColor.primary | Sparkline and icon colour. |
Examples
Metrics grid
4 KPIs in a 2×2 grid.
swift
LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: DSSpacing.md) {
DSMetricCard(
title: "Revenue",
value: "$48,290",
change: 0.12,
data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
tint: DSColor.success
)
DSMetricCard(
title: "Active Users",
value: "2,847",
change: -0.04,
data: [80, 72, 75, 60, 55, 70, 65],
tint: DSColor.primary
)
}Usage Guidelines
- Use semantic colours: green for growth, red for decline.
- Limit sparklines to 7–14 data points for visual clarity.