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+watchOS 10+tvOS 17+visionOS 1+
Purpose
Quick KPI visualisation in analytics dashboards. Compact and scannable.
Interactive Reference
Live showroom
Need the full visual surface?
Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().
Best for exploring:
variants, states, categories, and real app examples in one place.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| titlereq | String | — | Metric name. |
| valuereq | String | — | Formatted value (e.g. "$12,400"). |
| change | String | "" | Change label shown next to the trend arrow (e.g. "+12%"). |
| trend | DSMetricCard.Trend | .neutral | .up, .down or .neutral. Picks the arrow and the success/error/muted color. |
| icon | String | "chart.bar.fill" | SF Symbol in the header. |
| accentColor | Color | DSColor.primary | Icon and sparkline color. |
| sparkline | [Double] | [] | Optional history drawn as a sparkline. Empty hides it. |
Examples
Metrics grid
Two KPIs side by side with sparklines.
swift
LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: DSSpacing.md) {
DSMetricCard(
title: "Revenue",
value: "$48,290",
change: "+12%",
trend: .up,
icon: "dollarsign.circle.fill",
accentColor: DSColor.success,
sparkline: [30, 40, 35, 50, 49, 60, 70, 91, 125]
)
DSMetricCard(
title: "Active Users",
value: "2,847",
change: "-4%",
trend: .down,
icon: "person.2.fill",
sparkline: [80, 72, 75, 60, 55, 70, 65]
)
}Usage Guidelines
- Use semantic colours: green for growth, red for decline.
- Limit sparklines to 7–14 data points for visual clarity.