circular percentage header

Shared/views/HeaderPercView.swift

@@ -7,12 +7,19 @@
 
 import SwiftUI
 
+enum PercViewType {
+    case text
+    case circular
+}
+
 struct HeaderPercView: View {
     typealias model = (mood: Mood, total: Int, percent: Float)
     var entries = [model]()
     let backDays: Int
+    let type: PercViewType
     
-    init(fakeData: Bool, backDays: Int) {
+    init(fakeData: Bool, backDays: Int, type: PercViewType) {
+        self.type = type
         self.backDays = backDays
         var moodEntries: [MoodEntry]?
 
@@ -48,7 +55,7 @@ struct HeaderPercView: View {
         })
     }
     
-    var body: some View {
+    private var textViews: some View {
         VStack {
             Spacer()
             HStack {
@@ -73,10 +80,55 @@ struct HeaderPercView: View {
             Spacer()
         }
     }
+    
+    private var circularViews: some View {
+        VStack {
+            Spacer()
+            HStack {
+                ForEach(entries.prefix(3), id: \.0) { model in
+                    Text("\(model.percent, specifier: "%.0f")%")
+                        .font(.title2)
+                        .fontWeight(.bold)
+                        .multilineTextAlignment(.center)
+                        .padding()
+                        .frame(maxWidth: .infinity)
+                        .background(Circle().fill(model.mood.color))
+                        .foregroundColor(Color(UIColor.white))
+                }
+            }
+            Spacer()
+            HStack {
+                ForEach(entries.suffix(2), id: \.0) { model in
+                    Text("\(model.percent, specifier: "%.0f")%")
+                        .font(.title2)
+                        .fontWeight(.bold)
+                        .multilineTextAlignment(.center)
+                        .padding()
+                        .frame(maxWidth: .infinity)
+                        .background(Circle().fill(model.mood.color))
+                        .foregroundColor(Color(UIColor.white))
+                }
+            }
+            Spacer()
+        }
+    }
+    
+    var body: some View {
+        ZStack {
+            switch self.type {
+            case .text:
+                textViews
+            case .circular:
+                circularViews
+            }
+        }
+    }
 }
 
 struct HeaderPercView_Previews: PreviewProvider {
     static var previews: some View {
-        SmallRollUpHeaderView(fakeData: true, backDays: 30)
+        HeaderPercView(fakeData: true, backDays: 30, type: .text)
+        
+        HeaderPercView(fakeData: true, backDays: 30, type: .circular)
     }
 }