screens/DashboardScreen

DashboardScreen

screens
since 0.1.0

Pattern: an analytics dashboard composed from DSDashboardGrid, DSMetricCard, DSLineChartWidget and DSBarChartWidget. There is no DSDashboardScreen type.

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

Purpose

Show how the analytics components combine into a full screen.

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.

Examples

Dashboard

KPIs on top, charts below.

swift
ScrollView {
    VStack(spacing: DSSpacing.lg) {
        DSDashboardGrid {
            DSMetricCard(title: "Revenue", value: "$48.2K", change: "+12%", trend: .up,
                         icon: "dollarsign.circle.fill", sparkline: revenueHistory)
            DSMetricCard(title: "Users", value: "2,847", change: "-4%", trend: .down,
                         icon: "person.2.fill")
        }
        DSLineChartWidget(
            title: "Revenue",
            xLabels: months,
            series: [.init(label: "2026", values: revenueByMonth, color: DSColor.primary)]
        )
        DSBarChartWidget(
            title: "Signups per day",
            bars: signups.map { .init(label: $0.day, value: $0.count) }
        )
    }
    .padding(DSSpacing.md)
}

Related Components

AnalyticsWidgetLineChartBarChart