data-visualization/DSMetricCard

DSMetricCard

data-visualization

since v2.0

Dashboard 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.

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').
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.

Related Components

LineChart BarChart