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

@@ -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

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,

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) {