Contribution Chart

1import SwiftUI
2import ContributionChart
3
4struct ContributionChartDemoView: View {
5    @State private var selectedColor: Color = .green
6
7    let data: [Double]
8    let rows: Int
9    let columns: Int
10
11    // Available colors for selection
12    private let availableColors: [Color] = [
13        .green, .blue, .red, .orange, .purple, .pink, .cyan, .mint, .indigo, .teal, .yellow, .brown
14    ]
15
16    init() {
17        self.data = [0.3, 0.4, 0.4, 0.4, 0.1, 0.5, 0.0, 0.1, 0.0, 0.2, 0.2, 0.2, 0.0, 0.2, 0.2, 0.5, 0.4, 0.2, 0.4, 0.5, 0.2, 0.2, 0.4, 0.3, 0.3, 0.2, 0.4, 0.0, 0.0, 0.5, 0.4, 0.3, 0.5, 0.3, 0.0, 0.0, 0.1, 0.0, 0.2, 0.3, 0.0, 0.0, 0.0, 0.5, 0.3, 0.3, 0.0, 0.3, 0.0, 0.5, 0.3, 0.3, 0.4, 0.5, 0.5, 0.3, 0.4, 0.1, 0.4, 0.2, 0.5, 0.1, 0.4, 0.2, 0.5, 0.4, 0.3, 0.5, 0.0, 0.4, 0.3, 0.2, 0.1, 0.5, 0.2, 0.0, 0.2, 0.5, 0.5, 0.3, 0.4, 0.0, 0.3, 0.3, 0.1, 0.2, 0.5, 0.2, 0.1, 0.4, 0.4, 0.0, 0.5, 0.3, 0.3, 0.5, 0.0, 0.2]
18        self.rows = 7
19        self.columns = 14
20    }
21
22    var body: some View {
23        VStack(alignment: .leading, spacing: 20) {
24            // Contribution Chart
25            ContributionChartView(data: data,
26                                  rows: rows,
27                                  columns: columns,
28                                  targetValue: 0.5,
29                                  blockColor: selectedColor)
30            .frame(height: 200)
31            .padding()
32            .background(Color(.systemBackground))
33            .cornerRadius(12)
34
35            // Color Selection Row
36            VStack(alignment: .leading, spacing: 8) {
37                ScrollView(.horizontal, showsIndicators: false) {
38                    HStack(spacing: 45) {
39                        ForEach(availableColors, id: \.self) { color in
40                            ColorCircleView(
41                                color: color,
42                                isSelected: selectedColor == color,
43                                onTap: {
44                                    withAnimation(.easeInOut(duration: 0.2)) {
45                                        selectedColor = color
46                                    }
47                                }
48                            )
49                        }
50                    }
51                    .padding(.vertical, 8)
52                }
53                .frame(height: 56)
54            }
55            Spacer()
56        }
57    }
58}
59
60struct ColorCircleView: View {
61    let color: Color
62    let isSelected: Bool
63    let onTap: () -> Void
64
65    var body: some View {
66        Circle()
67            .fill(color)
68            .frame(width: 40, height: 40)
69            .overlay(
70                Circle()
71                    .stroke(isSelected ? Color.primary : Color.clear, lineWidth: 3)
72            )
73            .scaleEffect(isSelected ? 1.1 : 1.0)
74            .animation(.easeInOut(duration: 0.2), value: isSelected)
75            .onTapGesture {
76                onTap()
77            }
78            .shadow(color: .black.opacity(0.1), radius: 2, x: 0, y: 1)
79    }
80}
81
82struct ContributionChartDemoView_Previews: PreviewProvider {
83    static var previews: some View {
84        ContributionChartDemoView()
85            .previewDisplayName("Contribution Chart with Color Selection")
86    }
87}