From c5bce2ae7f158ba30c88ad3022af8eea1ab70180 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 21 Mar 2018 14:10:48 -0700
Subject: [PATCH] Refactor generate hex function to take explicit options

Also sets he default color to grey text if the cell is a table
(This prevents null values showing up as blue)
---
 ui/src/shared/components/SingleStat.js     |  6 +++---
 ui/src/shared/components/TableGraph.js     |  7 ++++---
 ui/src/shared/constants/colorOperations.js | 12 ++++++++----
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/ui/src/shared/components/SingleStat.js b/ui/src/shared/components/SingleStat.js
index 9ea2a9cf83..add824f485 100644
--- a/ui/src/shared/components/SingleStat.js
+++ b/ui/src/shared/components/SingleStat.js
@@ -33,11 +33,11 @@ class SingleStat extends PureComponent {
     const precision = 100.0
     const roundedValue = Math.round(+lastValue * precision) / precision
 
-    const {bgColor, textColor} = generateThresholdsListHexs(
+    const {bgColor, textColor} = generateThresholdsListHexs({
       colors,
       lastValue,
-      lineGraph
-    )
+      containsLineGraph: lineGraph,
+    })
 
     const backgroundColor = bgColor
     const color = textColor
diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index d330c92c54..8833579572 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -180,10 +180,11 @@ class TableGraph extends Component {
     let cellStyle = style
 
     if (!isFixedRow && !isFixedColumn && !isFixedCorner) {
-      const {bgColor, textColor} = generateThresholdsListHexs(
+      const {bgColor, textColor} = generateThresholdsListHexs({
         colors,
-        data[rowIndex][columnIndex]
-      )
+        lastValue: data[rowIndex][columnIndex],
+        cellType: 'table',
+      })
 
       cellStyle = {
         ...style,
diff --git a/ui/src/shared/constants/colorOperations.js b/ui/src/shared/constants/colorOperations.js
index 6056b735f5..d23a1d001a 100644
--- a/ui/src/shared/constants/colorOperations.js
+++ b/ui/src/shared/constants/colorOperations.js
@@ -46,12 +46,16 @@ export const stringifyColorValues = colors => {
   return colors.map(color => ({...color, value: `${color.value}`}))
 }
 
-export const generateThresholdsListHexs = (
+export const generateThresholdsListHexs = ({
   colors,
   lastValue,
-  containsLineGraph
-) => {
-  const defaultColoring = {bgColor: null, textColor: THRESHOLD_COLORS[11].hex}
+  containsLineGraph,
+  cellType,
+}) => {
+  const defaultColoring = {
+    bgColor: null,
+    textColor: cellType === 'table' ? '#BEC2CC' : THRESHOLD_COLORS[11].hex,
+  }
   const lastValueNumber = Number(lastValue) || 0
 
   if (!colors.length || !lastValue) {