dashboard

On iPad

The same installed source at a regular width. It adapts its layout without a separate design.

Install

With the sweetui tool (brew install mangobyte-dev/tap/sweetui):

sweetui install dashboard --destination Sources/YourFeature/Components

Installs in order: metric-card 0.2.2, chart 0.1.3, separator 0.2.1, table 0.1.1, dashboard 0.1.1. Point --destination at a folder inside the consuming target's sources.

Usage

Dashboard(
    "Analytics",
    metrics: [
        DashboardMetric(
            title: "Revenue",
            value: Text(48_200, format: .currency(code: "USD")),
            detail: Text("Up 12% this month"),
            systemImage: "dollarsign.circle.fill"
        )
    ],
    chartTitle: "Visitors by channel",
    points: [
        DashboardSeriesPoint(id: "jan-direct", category: "Jan", series: "Direct", value: 186)
    ],
    tableTitle: "Recent invoices",
    rows: [
        DashboardRow(
            id: "1041",
            title: Text("Invoice 1041"),
            detail: Text("Northwind Trading"),
            status: Text("Paid"),
            amount: Text(1_240, format: .currency(code: "USD"))
        )
    ],
    onSelect: { id in }
)

Accessibility contract

• Screen, chart/table titles: header trait; VoiceOver moves by heading.
• Metric tiles: title+value+detail = one element; SF Symbol decorative (metric-card); row/column via ViewThatFits, Dynamic Type, width.
• onSelect: invoice title = plain Button, label = row title (accessibility, Voice Control); selection at call site. Else: plain, non-interactive grid.
• Chart: marks colored/positioned by series. Legend names series (chart), not color-alone; caller adds accessibilityLabel/Value for audio graph.
• Table: row = one element; header: header trait; amounts monospaced, trailing-aligned (table).
• Semantic spacing, leading alignment; follows Dynamic Type, RTL.

Details