Graph: Tooltip refactoring for testability

src/app/components/kbn.js

@@ -316,6 +316,10 @@ function($, _, moment) {
 
   kbn.formatFuncCreator = function(factor, extArray) {
     return function(size, decimals, scaledDecimals) {
+      if (size === null) {
+        return "";
+      }
+
       var steps = 0;
 
       while (Math.abs(size) >= factor) {
@@ -331,6 +335,10 @@ function($, _, moment) {
   };
 
   kbn.toFixed = function(value, decimals) {
+    if (value === null) {
+      return "";
+    }
+
     var factor = decimals ? Math.pow(10, decimals) : 1;
     var formatted = String(Math.round(value * factor) / factor);
 
@@ -359,6 +367,8 @@ function($, _, moment) {
   kbn.valueFormats.none = kbn.toFixed;
 
   kbn.valueFormats.ms = function(size, decimals, scaledDecimals) {
+    if (size === null) { return ""; }
+
     if (Math.abs(size) < 1000) {
       return kbn.toFixed(size, decimals) + " ms";
     }
@@ -383,6 +393,8 @@ function($, _, moment) {
   };
 
   kbn.valueFormats.s = function(size, decimals, scaledDecimals) {
+    if (size === null) { return ""; }
+
     if (Math.abs(size) < 600) {
       return kbn.toFixed(size, decimals) + " s";
     }
@@ -407,6 +419,8 @@ function($, _, moment) {
   };
 
   kbn.valueFormats['µs'] = function(size, decimals, scaledDecimals) {
+    if (size === null) { return ""; }
+
     if (Math.abs(size) < 1000) {
       return kbn.toFixed(size, decimals) + " µs";
     }
@@ -419,6 +433,8 @@ function($, _, moment) {
   };
 
   kbn.valueFormats.ns = function(size, decimals, scaledDecimals) {
+    if (size === null) { return ""; }
+
     if (Math.abs(size) < 1000) {
       return kbn.toFixed(size, decimals) + " ns";
     }

src/app/components/timeSeries.js

@@ -5,10 +5,15 @@ define([
 function (_, kbn) {
   'use strict';
 
+  function defaultValueFormater(value) {
+    return kbn.valueFormats.none(value, 2, 2);
+  }
+
   function TimeSeries(opts) {
     this.datapoints = opts.datapoints;
     this.info = opts.info;
     this.label = opts.info.alias;
+    this.valueFormater = defaultValueFormater;
   }
 
   function matchSeriesOverride(aliasOrRegex, seriesAlias) {
@@ -108,11 +113,14 @@ function (_, kbn) {
   };
 
   TimeSeries.prototype.updateLegendValues = function(formater, decimals, scaledDecimals) {
-    this.info.avg = this.info.avg != null ? formater(this.info.avg, decimals, scaledDecimals) : null;
-    this.info.current = this.info.current != null ? formater(this.info.current, decimals, scaledDecimals) : null;
-    this.info.min = this.info.min != null ? formater(this.info.min, decimals, scaledDecimals) : null;
-    this.info.max = this.info.max != null ? formater(this.info.max, decimals, scaledDecimals) : null;
-    this.info.total = this.info.total != null ? formater(this.info.total, decimals, scaledDecimals) : null;
+    this.valueFormater = function(value) {
+      return formater(value, decimals, scaledDecimals);
+    };
+    this.info.avg = this.valueFormater(this.info.avg);
+    this.info.current = this.valueFormater(this.info.current);
+    this.info.min = this.valueFormater(this.info.min);
+    this.info.max = this.valueFormater(this.info.max);
+    this.info.total = this.valueFormater(this.info.total);
   };
 
   return TimeSeries;

src/app/directives/grafanaGraph.js

@@ -6,7 +6,7 @@ define([
   'lodash',
   './grafanaGraph.tooltip'
 ],
-function (angular, $, kbn, moment, _, graphTooltip) {
+function (angular, $, kbn, moment, _, GraphTooltip) {
   'use strict';
 
   var module = angular.module('grafana.directives');
@@ -105,6 +105,7 @@ function (angular, $, kbn, moment, _, graphTooltip) {
 
         function updateLegendValues(plot) {
           var yaxis = plot.getYAxes();
+          console.log("value");
 
           for (var i = 0; i < data.length; i++) {
             var series = data[i];
@@ -416,7 +417,7 @@ function (angular, $, kbn, moment, _, graphTooltip) {
           elem.html('<img src="' + url + '"></img>');
         }
 
-        graphTooltip.register(elem, dashboard, scope, $rootScope);
+        new GraphTooltip(elem, dashboard, scope);
 
         elem.bind("plotselected", function (event, ranges) {
           scope.$apply(function() {

src/app/panels/graph/module.js

@@ -244,7 +244,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries) {
 
       var seriesInfo = {
         alias: alias,
-        color:  color,
+        color: color,
       };
 
       $scope.legend.push(seriesInfo);

src/css/less/graph.less

@@ -169,6 +169,8 @@
 }
 
 .graph-tooltip {
+  white-space: nowrap;
+
   .graph-tooltip-time {
     text-align: center;
     font-weight: bold;

src/test/specs/graph-tooltip-specs.js

 define([
   'jquery',
   'directives/grafanaGraph.tooltip'
-], function($, tooltip) {
+], function($, GraphTooltip) {
   'use strict';
 
-  describe('graph tooltip', function() {
-    var elem = $('<div></div>');
-    var dashboard = {
-      formatDate: sinon.stub().returns('date'),
-    };
-    var scope =  {
-      appEvent: sinon.spy(),
-      onAppEvent: sinon.spy(),
-      panel: {
-        tooltip:  {
-          shared: true
-        },
-        y_formats: ['ms', 'none'],
-        stack: true
-      }
-    };
+  var scope =  {
+    appEvent: sinon.spy(),
+    onAppEvent: sinon.spy(),
+  };
+
+  var elem = $('<div></div>');
+  var dashboard = { };
 
-    var data = [
-      {
-        data: [[10,10], [12,20]],
-        info: { yaxis: 1 },
-        yaxis: { tickDecimals: 2 },
+  function describeSharedTooltip(desc, fn) {
+    var ctx = {};
+    ctx.scope = scope;
+    ctx.scope.panel =  {
+      tooltip:  {
+        shared: true
       },
-      {
-        data: [[10,10], [12,20]],
-        info: { yaxis: 1 },
-        yaxis: { tickDecimals: 2 },
-      }
-    ];
-
-    var plot = {
-      getData: sinon.stub().returns(data),
-      highlight: sinon.stub(),
-      unhighlight: sinon.stub()
+      stack: false
+    };
+
+    ctx.setup = function(setupFn) {
+      ctx.setupFn = setupFn;
     };
 
-    elem.data('plot', plot);
+    describe(desc, function() {
+      beforeEach(function() {
+        ctx.setupFn();
+        var tooltip = new GraphTooltip(elem, dashboard, scope);
+        ctx.results = tooltip.getMultiSeriesPlotHoverInfo(ctx.data, ctx.pos);
+      });
+
+      fn(ctx);
+    });
+  }
+
+  describeSharedTooltip("steppedLine false, stack false", function(ctx) {
+    ctx.setup(function() {
+      ctx.data = [
+        { data: [[10, 15], [12, 20]], },
+        { data: [[10, 2], [12, 3]], }
+      ];
+      ctx.pos = { x: 11 };
+    });
+
+    it('should return 2 series', function() {
+      expect(ctx.results.length).to.be(2);
+    });
+    it('should add time to results array', function() {
+      expect(ctx.results.time).to.be(10);
+    });
+    it('should set value and hoverIndex', function() {
+      expect(ctx.results[0].value).to.be(15);
+      expect(ctx.results[1].value).to.be(2);
+      expect(ctx.results[0].hoverIndex).to.be(0);
+    });
+  });
+
+  describeSharedTooltip("steppedLine false, stack true, individual false", function(ctx) {
+    ctx.setup(function() {
+      ctx.data = [
+        { data: [[10, 15], [12, 20]], },
+        { data: [[10, 2], [12, 3]], }
+      ];
+      ctx.scope.panel.stack = true;
+      ctx.pos = { x: 11 };
+    });
+
+    it('should show stacked value', function() {
+      expect(ctx.results[1].value).to.be(17);
+    });
+
+  });
 
-    beforeEach(function() {
-      tooltip.register(elem, dashboard, scope);
-      elem.trigger('plothover', [{}, {x: 13}, {}]);
+  describeSharedTooltip("steppedLine false, stack true, individual true", function(ctx) {
+    ctx.setup(function() {
+      ctx.data = [
+        { data: [[10, 15], [12, 20]], },
+        { data: [[10, 2], [12, 3]], }
+      ];
+      ctx.scope.panel.stack = true;
+      ctx.scope.panel.tooltip.value_type = 'individual';
+      ctx.pos = { x: 11 };
     });
 
-    it('should add tooltip', function() {
-      var tooltipHtml = $(".graph-tooltip").text();
-      expect(tooltipHtml).to.be('date  : 40.00 ms : 20.00 ms');
+    it('should not show stacked value', function() {
+      expect(ctx.results[1].value).to.be(2);
     });
 
   });