Optimize single stat text color based on background color

ui/src/shared/components/SingleStat.js

@@ -3,7 +3,11 @@ import _ from 'lodash'
 import classnames from 'classnames'
 import lastValues from 'shared/parsing/lastValues'
 
-import {SMALL_CELL_HEIGHT} from 'src/shared/graphs/helpers'
+import {SMALL_CELL_HEIGHT} from 'shared/graphs/helpers'
+import {isBackgroundLight} from 'shared/constants/colorOperations'
+
+const darkText = '#292933'
+const lightText = '#ffffff'
 
 class SingleStat extends PureComponent {
   render() {
@@ -22,18 +26,26 @@ class SingleStat extends PureComponent {
 
     const precision = 100.0
     const roundedValue = Math.round(+lastValue * precision) / precision
+    let bgColor = null
+    let textColor = null
+    let className = 'single-stat'
 
-    const sortedColors = _.sortBy(colors, color => Number(color.value))
+    if (colors && colors.length > 0) {
-    const nearestCrossedThreshold = sortedColors
+      className = 'single-stat single-stat--colored'
-      .filter(color => lastValue > color.value)
+      const sortedColors = _.sortBy(colors, color => Number(color.value))
-      .pop()
+      const nearestCrossedThreshold = sortedColors
+        .filter(color => lastValue > color.value)
+        .pop()
 
-    const bgColor = nearestCrossedThreshold ? nearestCrossedThreshold.hex : null
+      bgColor = nearestCrossedThreshold
-    const textColor = colors ? '#ffffff' : null
+        ? nearestCrossedThreshold.hex
+        : '#292933'
+      textColor = isBackgroundLight(bgColor) ? darkText : lightText
+    }
 
     return (
       <div
-        className="single-stat"
+        className={className}
         style={{backgroundColor: bgColor, color: textColor}}
       >
         <span

ui/src/style/components/dygraphs.scss

@@ -91,15 +91,16 @@
     height: 100% !important;
   }
 }
+.single-stat.single-stat--colored {
+  transition: background-color 0.25s ease, color 0.25s ease;
+}
 .single-stat--value {
   position: absolute;
   top: calc(50% - 15px);
   left: 50%;
   transform: translate(-50%,-50%);
   width: calc(100% - 32px);
-  // overflow: hidden;
   text-align: center;
-  // text-overflow: ellipsis;
   font-size: 54px;
   line-height: 54px;
   font-weight: 300;