Fix NaN handling (#9469)

* graph: fix NaN formatting, #9012

* singlestat: prevent null value coloring, #9012, #8404

* timeseries: add tests for #9012 and move test file to TS

public/app/core/time_series2.ts

@@ -203,7 +203,7 @@ export default class TimeSeries {
     if (this.stats.max === -Number.MAX_VALUE) { this.stats.max = null; }
     if (this.stats.max === -Number.MAX_VALUE) { this.stats.max = null; }
     if (this.stats.min === Number.MAX_VALUE) { this.stats.min = null; }
     if (this.stats.min === Number.MAX_VALUE) { this.stats.min = null; }
 
 
-    if (result.length) {
+    if (result.length && !this.allIsNull) {
       this.stats.avg = (this.stats.total / nonNulls);
       this.stats.avg = (this.stats.total / nonNulls);
       this.stats.current = result[result.length-1][1];
       this.stats.current = result[result.length-1][1];
       if (this.stats.current === null && result.length > 1) {
       if (this.stats.current === null && result.length > 1) {
@@ -228,6 +228,9 @@ export default class TimeSeries {
   }
   }
 
 
   formatValue(value) {
   formatValue(value) {
+    if (!_.isFinite(value)) {
+      value = null; // Prevent NaN formatting
+    }
     return this.valueFormater(value, this.decimals, this.scaledDecimals);
     return this.valueFormater(value, this.decimals, this.scaledDecimals);
   }
   }
 
 

public/app/plugins/panel/singlestat/module.ts

@@ -606,7 +606,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
 
 
       var body = panel.gauge.show ? '' : getBigValueHtml();
       var body = panel.gauge.show ? '' : getBigValueHtml();
 
 
-      if (panel.colorBackground && !isNaN(data.value)) {
+      if (panel.colorBackground) {
         var color = getColorForValue(data, data.value);
         var color = getColorForValue(data, data.value);
         if (color) {
         if (color) {
           $panelContainer.css('background-color', color);
           $panelContainer.css('background-color', color);
@@ -690,6 +690,9 @@ class SingleStatCtrl extends MetricsPanelCtrl {
 }
 }
 
 
 function getColorForValue(data, value) {
 function getColorForValue(data, value) {
+  if (!_.isFinite(value)) {
+    return null;
+  }
   for (var i = data.thresholds.length; i > 0; i--) {
   for (var i = data.thresholds.length; i > 0; i--) {
     if (value >= data.thresholds[i-1]) {
     if (value >= data.thresholds[i-1]) {
       return data.colorMap[i];
       return data.colorMap[i];