Improve Chart Layout and UI

TelemetryDeck · May 24, 2024 · c43d989 · c43d989
1 parent a599f69
commit c43d989
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 18 deletions.
diff --git a/Cluster/ClusterInstrument.swift b/Cluster/ClusterInstrument.swift
@@ -16,12 +16,19 @@ struct ClusterInstrument: View {
     let type: InsightDisplayMode
 
     var body: some View {
-        VStack(alignment: .leading) {
+        VStack(alignment: .leading, spacing: 8) {
             Text(title)
-                .font(.title)
-                .padding(.bottom)
+                .font(.headline)
+                .fontWeight(.medium)
+                .foregroundStyle(Color.Zinc600)
+                .padding(.top)
+                .padding(.horizontal)
             QueryRunner(query: query, type: type)
         }
-        .padding()
+        .compositingGroup()
+        .background(.background)
+        .shadow(color: .gray.opacity(0.15), radius: 5, x: 0, y: 2)
+        .border(Color.Zinc200, width: 1.0)
+        .padding(.vertical, 5)
     }
 }
diff --git a/Cluster/QueryRunner.swift b/Cluster/QueryRunner.swift
@@ -19,14 +19,27 @@ struct QueryRunner: View {
     @State var isLoading: Bool = false
 
     var body: some View {
-        VStack {
+        VStack(spacing: 10){
             if let queryResult = queryResultWrapper?.result {
                 ClusterChart(query: query, result: queryResult, type: type)
+                    .padding(.horizontal)
             }
 
-            if isLoading {
-                Text("Loading...")
+            HStack(spacing: 3){
+                Spacer()
+                if let queryResultWrapper = queryResultWrapper {
+                    Text("Updated")
+                    Text(queryResultWrapper.calculationFinishedAt, style: .relative)
+                    Text("ago")
+
+                } else {
+                    Text("Calculating...")
+                }
             }
+            .font(.footnote)
+            .foregroundStyle(Color.Zinc400)
+            .padding(8)
+            .background(Color.Zinc50)
         }
         .onAppear {
             Task {

diff --git a/...cassets/TLightGray.colorset/Contents.json → ...s.xcassets/Zinc100.colorset/Contents.json b/...cassets/TLightGray.colorset/Contents.json → ...s.xcassets/Zinc100.colorset/Contents.json
@@ -7,7 +7,7 @@
           "alpha" : "1.000",
           "blue" : "0xF5",
           "green" : "0xF3",
-          "red" : "0xF0"
+          "red" : "0xF3"
         }
       },
       "idiom" : "universal"
@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0x30",
-          "green" : "0x29",
-          "red" : "0x25"
+          "blue" : "0x1B",
+          "green" : "0x18",
+          "red" : "0x18"
         }
       },
       "idiom" : "universal"

diff --git a/...xcassets/TDarkGray.colorset/Contents.json → ...s.xcassets/Zinc200.colorset/Contents.json b/...xcassets/TDarkGray.colorset/Contents.json → ...s.xcassets/Zinc200.colorset/Contents.json
@@ -5,9 +5,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0x30",
-          "green" : "0x29",
-          "red" : "0x25"
+          "blue" : "0xE7",
+          "green" : "0xE3",
+          "red" : "0xE3"
         }
       },
       "idiom" : "universal"
@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0x78",
-          "green" : "0x67",
-          "red" : "0x5D"
+          "blue" : "0x2A",
+          "green" : "0x27",
+          "red" : "0x27"
         }
       },
       "idiom" : "universal"

diff --git a/Shared/Supporting Files/Assets.xcassets/Zinc400.colorset/Contents.json b/Shared/Supporting Files/Assets.xcassets/Zinc400.colorset/Contents.json
@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xAA",
+          "green" : "0xA1",
+          "red" : "0xA1"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x5B",
+          "green" : "0x51",
+          "red" : "0x51"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Shared/Supporting Files/Assets.xcassets/Zinc50.colorset/Contents.json b/Shared/Supporting Files/Assets.xcassets/Zinc50.colorset/Contents.json
@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xF5",
+          "green" : "0xF3",
+          "red" : "0xF3"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x0B",
+          "green" : "0x09",
+          "red" : "0x09"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Shared/Supporting Files/Assets.xcassets/Zinc600.colorset/Contents.json b/Shared/Supporting Files/Assets.xcassets/Zinc600.colorset/Contents.json
@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x5B",
+          "green" : "0x51",
+          "red" : "0x51"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xAA",
+          "green" : "0xA1",
+          "red" : "0xA1"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/UIComponents/Color.swift b/UIComponents/Color.swift
@@ -20,4 +20,11 @@ extension Color {
     static let telemetryOrange = Color("Torange")
     static let cardBackground = Color("CardBackgroundColor")
     static let customTextColor = Color("CustomTextColor")
+
+    static let Zinc50 = Color("Zinc50")
+    static let Zinc100 = Color("Zinc100")
+    static let Zinc200 = Color("Zinc200")
+    static let Zinc400 = Color("Zinc400")
+    static let Zinc600 = Color("Zinc600")
+
 }
diff --git a/iOS/InsightGroupsView.swift b/iOS/InsightGroupsView.swift
@@ -59,7 +59,7 @@ struct InsightGroupsView: View {
 
                     selectedInsightGroupID.map {
                         GroupView(groupID: $0, selectedInsightID: $selectedInsightID, sidebarVisible: $sidebarVisible)
-                            .background(Color.separatorColor)
+                            .background(Color.Zinc100)
                     }
                 }
             }