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/test/core/time_series_specs.js → public/app/core/specs/time_series_specs.ts

-define([
-  'app/core/time_series'
-], function(TimeSeries) {
-  'use strict';
+import {describe, beforeEach, it, expect} from 'test/lib/common';
+import TimeSeries from 'app/core/time_series2';
 
 
-  describe("TimeSeries", function() {
+describe("TimeSeries", function() {
   var points, series;
   var points, series;
   var yAxisFormats = ['short', 'ms'];
   var yAxisFormats = ['short', 'ms'];
   var testData;
   var testData;
@@ -115,6 +113,14 @@ define([
       series.getFlotPairs('null as zero', yAxisFormats);
       series.getFlotPairs('null as zero', yAxisFormats);
       expect(series.stats.avg).to.be(4.75);
       expect(series.stats.avg).to.be(4.75);
     });
     });
+
+    it('average value should be null if all values is null', function() {
+      series = new TimeSeries({
+        datapoints: [[null,2],[null,3],[null,4],[null,5]]
+      });
+      series.getFlotPairs('null');
+      expect(series.stats.avg).to.be(null);
+    });
   });
   });
 
 
   describe('When checking if ms resolution is needed', function() {
   describe('When checking if ms resolution is needed', function() {
@@ -274,5 +280,20 @@ define([
     });
     });
 
 
   });
   });
+
+  describe('value formatter', function() {
+    var series;
+    beforeEach(function() {
+      series = new TimeSeries(testData);
+    });
+
+    it('should format non-numeric values as empty string', function() {
+      expect(series.formatValue(null)).to.be("");
+      expect(series.formatValue(undefined)).to.be("");
+      expect(series.formatValue(NaN)).to.be("");
+      expect(series.formatValue(Infinity)).to.be("");
+      expect(series.formatValue(-Infinity)).to.be("");
+    });
   });
   });
+
 });
 });

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];