91 lines
2.9 KiB
Swift
91 lines
2.9 KiB
Swift
import SwiftUI
|
|
import Bedrock
|
|
import Charts
|
|
|
|
struct InsightCardView: View {
|
|
let card: InsightCard
|
|
@State private var showingDetail = false
|
|
|
|
var body: some View {
|
|
Button {
|
|
showingDetail = true
|
|
} label: {
|
|
cardContent
|
|
}
|
|
.buttonStyle(.plain)
|
|
.sheet(isPresented: $showingDetail) {
|
|
InsightDetailSheet(card: card)
|
|
}
|
|
}
|
|
|
|
private var cardContent: some View {
|
|
VStack(alignment: .leading, spacing: Design.Spacing.medium) {
|
|
HStack {
|
|
Text(card.title)
|
|
.font(.subheadline)
|
|
.bold()
|
|
.foregroundStyle(AppTextColors.secondary)
|
|
|
|
Spacer()
|
|
|
|
// Subtle tap affordance
|
|
Image(systemName: "chevron.right")
|
|
.font(.caption2)
|
|
.foregroundStyle(AppTextColors.tertiary)
|
|
.accessibilityHidden(true)
|
|
}
|
|
|
|
// Show value prominently
|
|
Text(card.value)
|
|
.font(.title)
|
|
.foregroundStyle(AppTextColors.primary)
|
|
.bold()
|
|
|
|
// Show caption if present (non-chart cards)
|
|
if !card.caption.isEmpty {
|
|
Text(card.caption)
|
|
.font(.caption)
|
|
.foregroundStyle(AppTextColors.secondary)
|
|
}
|
|
|
|
// Show full-width mini bar chart at bottom (Athlytic style)
|
|
if let trendData = card.trendData, !trendData.isEmpty {
|
|
Chart(trendData) { point in
|
|
BarMark(
|
|
x: .value("Day", point.label),
|
|
y: .value("Completion", point.value)
|
|
)
|
|
.foregroundStyle(
|
|
point.value >= 1.0 ? AppStatus.success :
|
|
point.value >= 0.5 ? AppAccent.primary :
|
|
AppTextColors.tertiary
|
|
)
|
|
.cornerRadius(2)
|
|
}
|
|
.chartYScale(domain: 0...1)
|
|
.chartXAxis(.hidden)
|
|
.chartYAxis(.hidden)
|
|
.frame(height: 20)
|
|
.accessibilityHidden(true)
|
|
}
|
|
}
|
|
.padding(Design.Spacing.large)
|
|
.background(AppSurface.card)
|
|
.clipShape(.rect(cornerRadius: Design.CornerRadius.large))
|
|
.accessibilityElement(children: .combine)
|
|
.accessibilityHint(String(localized: "Tap for details"))
|
|
}
|
|
}
|
|
|
|
#Preview {
|
|
InsightCardView(card: InsightCard(
|
|
title: "Completion",
|
|
value: "72%",
|
|
caption: "Today's progress",
|
|
explanation: "Your completion percentage for today across all rituals.",
|
|
symbolName: "chart.bar.fill"
|
|
))
|
|
.padding(Design.Spacing.large)
|
|
.background(AppSurface.primary)
|
|
}
|