Render single stat cells with background color of nearest exceeded threshold

ui/src/shared/components/SingleStat.js

@@ -1,4 +1,5 @@
 import React, {PropTypes, PureComponent} from 'react'
+import _ from 'lodash'
 import classnames from 'classnames'
 import lastValues from 'shared/parsing/lastValues'
 
@@ -6,7 +7,7 @@ import {SMALL_CELL_HEIGHT} from 'src/shared/graphs/helpers'
 
 class SingleStat extends PureComponent {
   render() {
-    const {data, cellHeight, isFetchingInitially} = this.props
+    const {data, cellHeight, isFetchingInitially, colors} = this.props
 
     // If data for this graph is being fetched for the first time, show a graph-wide spinner.
     if (isFetchingInitially) {
@@ -22,8 +23,19 @@ class SingleStat extends PureComponent {
     const precision = 100.0
     const roundedValue = Math.round(+lastValue * precision) / precision
 
+    const sortedColors = _.sortBy(colors, color => Number(color.value))
+    const nearestCrossedThreshold = sortedColors
+      .filter(color => lastValue > color.value)
+      .pop()
+
+    const bgColor = nearestCrossedThreshold ? nearestCrossedThreshold.hex : null
+    const textColor = colors ? '#ffffff' : null
+
     return (
-      <div className="single-stat">
+      <div
+        className="single-stat"
+        style={{backgroundColor: bgColor, color: textColor}}
+      >
         <span
           className={classnames('single-stat--value', {
             'single-stat--small': cellHeight === SMALL_CELL_HEIGHT,

ui/src/style/components/dygraphs.scss

@@ -78,7 +78,9 @@
   width: 100%;
   height: 100%;
   pointer-events: none;
+  border-radius: 4px;
   @include no-user-select();
+  color: $c-laser;
 
   &.graph-single-stat {
     top: 0;
@@ -101,7 +103,7 @@
   font-size: 54px;
   line-height: 54px;
   font-weight: 300;
-  color: $c-laser;
+  color: inherit;
   z-index: 1;
 
   &.single-stat--small {