From 74ed08f987c654b72126dde3949a673d031454ff Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 8 Dec 2017 15:35:03 -0800
Subject: [PATCH] Remove MIN & MAX type from gauge

---
 ui/src/shared/components/Gauge.js | 44 ++++++++++++++-----------------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/ui/src/shared/components/Gauge.js b/ui/src/shared/components/Gauge.js
index c9adfd521c..795603fe4f 100644
--- a/ui/src/shared/components/Gauge.js
+++ b/ui/src/shared/components/Gauge.js
@@ -3,11 +3,7 @@ import _ from 'lodash'
 
 import {GAUGE_SPECS} from 'shared/constants/gaugeSpecs'
 
-import {
-  COLOR_TYPE_MIN,
-  COLOR_TYPE_MAX,
-  MIN_THRESHOLDS,
-} from 'src/dashboards/constants/gaugeColors'
+import {MIN_THRESHOLDS} from 'src/dashboards/constants/gaugeColors'
 
 class Gauge extends Component {
   constructor(props) {
@@ -47,18 +43,23 @@ class Gauge extends Component {
       return
     }
     // Distill out max and min values
-    const minValue = Number(
-      colors.find(color => color.type === COLOR_TYPE_MIN).value
-    )
-    const maxValue = Number(
-      colors.find(color => color.type === COLOR_TYPE_MAX).value
-    )
+    const sortedColors = _.sortBy(colors, color => Number(color.value))
+    const minValue = Number(sortedColors[0].value)
+    const maxValue = Number(sortedColors[sortedColors.length - 1].value)
 
     // The following functions must be called in the specified order
     if (colors.length === MIN_THRESHOLDS) {
-      this.drawGradientGauge(ctx, centerX, centerY, radius, gradientThickness)
+      this.drawGradientGauge(
+        sortedColors,
+        ctx,
+        centerX,
+        centerY,
+        radius,
+        gradientThickness
+      )
     } else {
       this.drawSegmentedGauge(
+        sortedColors,
         ctx,
         centerX,
         centerY,
@@ -82,10 +83,7 @@ class Gauge extends Component {
     this.drawNeedle(ctx, radius, minValue, maxValue)
   }
 
-  drawGradientGauge = (ctx, xc, yc, r, gradientThickness) => {
-    const {colors} = this.props
-    const sortedColors = _.sortBy(colors, color => Number(color.value))
-
+  drawGradientGauge = (colors, ctx, xc, yc, r, gradientThickness) => {
     const arcStart = Math.PI * 0.75
     const arcEnd = arcStart + Math.PI * 1.5
 
@@ -96,8 +94,8 @@ class Gauge extends Component {
     const yEnd = yc + Math.sin(arcEnd) * r
 
     const gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd)
-    gradient.addColorStop(0, sortedColors[0].hex)
-    gradient.addColorStop(1.0, sortedColors[1].hex)
+    gradient.addColorStop(0, colors[0].hex)
+    gradient.addColorStop(1.0, colors[1].hex)
 
     ctx.beginPath()
     ctx.lineWidth = gradientThickness
@@ -107,6 +105,7 @@ class Gauge extends Component {
   }
 
   drawSegmentedGauge = (
+    colors,
     ctx,
     xc,
     yc,
@@ -115,18 +114,15 @@ class Gauge extends Component {
     maxValue,
     gradientThickness
   ) => {
-    const {colors} = this.props
-    const sortedColors = _.sortBy(colors, color => Number(color.value))
-
     const trueValueRange = Math.abs(maxValue - minValue)
     const totalArcLength = Math.PI * 1.5
     let startingPoint = Math.PI * 0.75
 
     // Iterate through colors, draw arc for each
-    for (let c = 0; c < sortedColors.length - 1; c++) {
+    for (let c = 0; c < colors.length - 1; c++) {
       // Use this color and the next to determine arc length
-      const color = sortedColors[c]
-      const nextColor = sortedColors[c + 1]
+      const color = colors[c]
+      const nextColor = colors[c + 1]
 
       // adjust values by subtracting minValue from them
       const adjustedValue = Number(color.value) - minValue