Contribution Chart
A GitHub-style contribution chart with interactive color selection
Credits
This contribution chart implementation is based on the SwiftUI-ContributionChart library. Special thanks to VIkill33 for creating this amazing open-source package!
View Original LibraryPreview
Code
1import SwiftUI2import ContributionChart34struct ContributionChartDemoView: View {5 @State private var selectedColor: Color = .green67 let data: [Double]8 let rows: Int9 let columns: Int1011 // Available colors for selection12 private let availableColors: [Color] = [13 .green, .blue, .red, .orange, .purple, .pink, .cyan, .mint, .indigo, .teal, .yellow, .brown14 ]1516 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 = 719 self.columns = 1420 }2122 var body: some View {23 VStack(alignment: .leading, spacing: 20) {24 // Contribution Chart25 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)3435 // Color Selection Row36 VStack(alignment: .leading, spacing: 8) {37 ScrollView(.horizontal, showsIndicators: false) {38 HStack(spacing: 45) {39 ForEach(availableColors, id: \.self) { color in40 ColorCircleView(41 color: color,42 isSelected: selectedColor == color,43 onTap: {44 withAnimation(.easeInOut(duration: 0.2)) {45 selectedColor = color46 }47 }48 )49 }50 }51 .padding(.vertical, 8)52 }53 .frame(height: 56)54 }55 Spacer()56 }57 }58}5960struct ColorCircleView: View {61 let color: Color62 let isSelected: Bool63 let onTap: () -> Void6465 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}8182struct ContributionChartDemoView_Previews: PreviewProvider {83 static var previews: some View {84 ContributionChartDemoView()85 .previewDisplayName("Contribution Chart with Color Selection")86 }87}