From 6f112a4e3535f895668df9c2ce6a7c58051225b3 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Thu, 16 Nov 2017 10:52:15 -0800
Subject: [PATCH] Render gauge value in component

---
 ui/src/shared/components/Gauge.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/ui/src/shared/components/Gauge.js b/ui/src/shared/components/Gauge.js
index 83233e74e7..15295541b4 100644
--- a/ui/src/shared/components/Gauge.js
+++ b/ui/src/shared/components/Gauge.js
@@ -41,6 +41,7 @@ class Gauge extends Component {
     // The following functions must be called in the specified order
     this.drawGaugeLines(ctx, centerX, centerY, radius, gradientThickness)
     this.drawGaugeLabels(ctx, centerX, centerY, radius, gradientThickness)
+    this.drawGaugeValue(ctx, radius)
     this.drawNeedle(ctx, radius)
   }
 
@@ -203,6 +204,18 @@ class Gauge extends Component {
     }
   }
 
+  drawGaugeValue = (ctx, radius) => {
+    const {gaugePosition} = this.props
+
+    ctx.font = '40px Roboto'
+    ctx.fillStyle = '#ffffff'
+    ctx.textBaseline = 'middle'
+    ctx.textAlign = 'center'
+
+    const textY = radius * 0.75
+    ctx.fillText(gaugePosition.toString(), 0, textY)
+  }
+
   drawNeedle = (ctx, radius) => {
     const {maxValue, gaugePosition} = this.props
     const {degree} = GAUGE_SPECS