From fe26e904bb7640abde57ba59c60c1b31fb4bc286 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Fri, 8 May 2020 17:29:07 -0700
Subject: [PATCH] Style the gauge chart component

---
 ui/app/styles/charts.scss                 |  1 +
 ui/app/styles/charts/gauge-chart.scss     | 52 +++++++++++++++++++++++
 ui/app/styles/utils/structure-colors.scss |  1 +
 3 files changed, 54 insertions(+)
 create mode 100644 ui/app/styles/charts/gauge-chart.scss

diff --git a/ui/app/styles/charts.scss b/ui/app/styles/charts.scss
index 571535ca5..9d7d4a47e 100644
--- a/ui/app/styles/charts.scss
+++ b/ui/app/styles/charts.scss
@@ -1,4 +1,5 @@
 @import './charts/distribution-bar';
+@import './charts/gauge-chart';
 @import './charts/line-chart';
 @import './charts/tooltip';
 @import './charts/colors';
diff --git a/ui/app/styles/charts/gauge-chart.scss b/ui/app/styles/charts/gauge-chart.scss
new file mode 100644
index 000000000..f82b82c0e
--- /dev/null
+++ b/ui/app/styles/charts/gauge-chart.scss
@@ -0,0 +1,52 @@
+.gauge-chart {
+  position: relative;
+  display: block;
+  width: auto;
+
+  svg {
+    display: block;
+    margin: auto;
+    width: 100%;
+    max-width: 200px;
+    height: 100%;
+  }
+
+  .background,
+  .fill {
+    transform: translate(50%, 100%);
+  }
+
+  .background {
+    fill: $ui-gray-100;
+  }
+
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+
+    .canvas.is-#{$name} {
+      .line {
+        stroke: $color;
+      }
+    }
+
+    linearGradient {
+      &.is-#{$name} {
+        > .start {
+          stop-color: $color;
+          stop-opacity: 0.2;
+        }
+
+        > .end {
+          stop-color: $color;
+          stop-opacity: 1;
+        }
+      }
+    }
+  }
+
+  .metric {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}
diff --git a/ui/app/styles/utils/structure-colors.scss b/ui/app/styles/utils/structure-colors.scss
index 6ef72ebda..70d320a88 100644
--- a/ui/app/styles/utils/structure-colors.scss
+++ b/ui/app/styles/utils/structure-colors.scss
@@ -1,3 +1,4 @@
+$ui-gray-100: #ebeef2;
 $ui-gray-200: #dce0e6;
 $ui-gray-300: #bac1cc;
 $ui-gray-400: #8e96a3;