--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/LazyBear/Models/InsiderSummaryModel.swift	Sat Mar 20 16:10:41 2021 +0100
@@ -0,0 +1,13 @@
+//
+//  InsiderSumModel.swift
+//  LazyBear
+//
+//  Created by Dennis Concepción Martín on 5/3/21.
+//
+
+import SwiftUI
+
+struct InsiderSummaryModel: Codable, Hashable {
+    var entityName: String
+    var position: Int?
+}

--- a/LazyBear/Models/TopInsiderModel.swift	Sat Mar 20 15:01:05 2021 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,13 +0,0 @@
-//
-//  InsiderSumModel.swift
-//  LazyBear
-//
-//  Created by Dennis Concepción Martín on 5/3/21.
-//
-
-import SwiftUI
-
-struct TopInsiderModel: Codable, Hashable {
-    var entityName: String
-    var position: Int?
-}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/LazyBear/UI/HorizontalBar.swift	Sat Mar 20 16:10:41 2021 +0100
@@ -0,0 +1,49 @@
+//
+//  HorizontalBar.swift
+//  LazyBear
+//
+//  Created by Dennis Concepción Martín on 20/3/21.
+//
+
+import SwiftUI
+
+struct HorizontalBar: View {
+    @State var text: String
+    @State var data: Int
+    @State var capsulePctWidth: CGFloat  // 0.3 = 30%
+    // How much large the data capsule is with respect to the placeholder capsule
+    @FetchRequest(entity: UserSettings.entity(), sortDescriptors: [NSSortDescriptor(keyPath: \UserSettings.changedAt, ascending: false)])
+    var userSettings: FetchedResults<UserSettings>
+    
+    var body: some View {
+        VStack(alignment: .leading) {
+            HStack {
+                Text(text.capitalized)
+                    .font(.headline)
+                
+                Spacer()
+                Text("\(data) shares")
+            }
+            ZStack {
+                GeometryReader { geo in
+                    Group {
+                        Capsule()
+                            .foregroundColor(Color(.systemGray))
+                            .opacity(0.2)
+                        
+                        Capsule()
+                            .foregroundColor(Color("\(userSettings.first?.theme?.lowercased() ?? "default")Accent"))
+                            .frame(width: geo.size.width * capsulePctWidth)
+                    }
+                    .frame(height: 10)
+                }
+            }
+        }
+    }
+}
+
+struct HorizontalBar_Previews: PreviewProvider {
+    static var previews: some View {
+        HorizontalBar(text: "Dennis Concepción", data: 1000, capsulePctWidth: 0.3)
+    }
+}

--- a/LazyBear/UI/InsiderSummary.swift	Sat Mar 20 15:01:05 2021 +0100
+++ b/LazyBear/UI/InsiderSummary.swift	Sat Mar 20 16:10:41 2021 +0100
@@ -9,25 +9,40 @@
 
 struct InsiderSummary: View {
     var symbol: String
-    @FetchRequest(entity: UserSettings.entity(), sortDescriptors: [NSSortDescriptor(keyPath: \UserSettings.changedAt, ascending: false)])
-    var userSettings: FetchedResults<UserSettings>
+    @State private var insiderSummary = [InsiderSummaryModel]() {didSet { print(insiderSummary) }}
     
     var body: some View {
+        let maxPosition = insiderSummary.map { ($0.position ?? 0) }.max()
         VStack(alignment: .leading) {
             HStack {
-                Image(systemName: "star.fill")
-                    .renderingMode(.original)
-                    .imageScale(.large)
-                
                 Text("Top insiders")
-                    .font(.title2)
+                    .font(.title)
                     .fontWeight(.semibold)
                 
                 Spacer()
             }
+            .padding(.bottom)
             
+            ForEach(insiderSummary.indices, id: \.self) { index in
+                if index < 3 {  // Number of rows that I want to show
+                    let name = insiderSummary[index].entityName
+                    let position = insiderSummary[index].position ?? 1
+                    let pct = getPercentage(maxPosition ?? 1, position)
+                    HorizontalBar(text: name, data: position, capsulePctWidth: pct)
+                }
+            }
         }
         .padding()
+        .onAppear {
+            let url = getUrl(endpoint: .insiderSummary, symbol: symbol)
+            request(url: url, model: [InsiderSummaryModel].self) { self.insiderSummary = $0 }
+        }
+    }
+    
+    private func getPercentage(_ maxValue: Int, _ value: Int) -> CGFloat {
+        let pct = Double(value) / Double(maxValue)
+        
+        return CGFloat(pct)
     }
 }
 

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/LazyBear/UI/InsiderSummaryRow.swift	Sat Mar 20 16:10:41 2021 +0100
@@ -0,0 +1,20 @@
+//
+//  InsiderSummaryRow.swift
+//  LazyBear
+//
+//  Created by Dennis Concepción Martín on 20/3/21.
+//
+
+import SwiftUI
+
+struct InsiderSummaryRow: View {
+    var body: some View {
+        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
+    }
+}
+
+struct InsiderSummaryRow_Previews: PreviewProvider {
+    static var previews: some View {
+        InsiderSummaryRow()
+    }
+}