Use blur instead of box to increase legibility of singleStat on top of lineGraph

ui/src/shared/components/LineGraph.js

@@ -189,7 +189,7 @@ export default React.createClass({
                   'single-stat--small': cellHeight === SMALL_CELL_HEIGHT,
                 })}
               >
-                <span className="single-stat--overlay">{roundedValue}</span>
+                {roundedValue}
               </span>
             </div>
           : null}

ui/src/style/components/dygraphs.scss

@@ -154,26 +154,32 @@
   left: 50%;
   transform: translate(-50%,-50%);
   width: calc(100% - 32px);
-  overflow: hidden;
+  // overflow: hidden;
   text-align: center;
-  text-overflow: ellipsis;
+  // text-overflow: ellipsis;
   font-size: 54px;
   line-height: 54px;
   font-weight: 300;
   color: $c-laser;
+  z-index: 1;
 
   &.single-stat--small {
     font-weight: 400;
     font-size: 34px;
     line-height: 34px;
   }
-  &.single-stat-huge {
-    font-weight: 200;
-  }
 }
-.single-stat--overlay {
-  background-color: fade-out($g2-kevlar, 0.5);
-  padding: 10px 12px;
-  border-radius: 3px;
-  display: inline-block;
+.single-stat-line .single-stat--value:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 50%;
+  height: 0;
+  transform: translate(-50%,-50%);
+  box-shadow: fade-out($g2-kevlar, 0.3) 0 0 50px 30px;
+  z-index: -1;
+}
+.single-stat-line .single-stat--value.single-stat--small:after {
+  box-shadow: fade-out($g2-kevlar, 0.3) 0 0 30px 10px;
 }