Graph: Shared tooltip improvement, can now support metrics of different…

Graph: Shared tooltip improvement, can now support metrics of different resolution/intervals, Closes #978, Fixes #1499

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Dashboard title change & save will no longer create a new dashboard, it will just change the title.
 - Dashboard title change & save will no longer create a new dashboard, it will just change the title.
 
 
 **Enhancements**
 **Enhancements**
+- [Issue #978](https://github.com/grafana/grafana/issues/978).   Graph: Shared tooltip improvement, can now support metrics of different resolution/intervals
 - [Issue #1297](https://github.com/grafana/grafana/issues/1297). Graphite: Added cumulative and minimumBelow graphite functions
 - [Issue #1297](https://github.com/grafana/grafana/issues/1297). Graphite: Added cumulative and minimumBelow graphite functions
 - [Issue #1296](https://github.com/grafana/grafana/issues/1296). InfluxDB: Auto escape column names with special characters. Thanks @steven-aerts
 - [Issue #1296](https://github.com/grafana/grafana/issues/1296). InfluxDB: Auto escape column names with special characters. Thanks @steven-aerts
 - [Issue #1321](https://github.com/grafana/grafana/issues/1321). SingleStatPanel: You can now use template variables in pre & postfix
 - [Issue #1321](https://github.com/grafana/grafana/issues/1321). SingleStatPanel: You can now use template variables in pre & postfix

src/app/panels/graph/graph.tooltip.js

@@ -9,7 +9,7 @@ function ($) {
 
 
     var $tooltip = $('<div id="tooltip">');
     var $tooltip = $('<div id="tooltip">');
 
 
-    this.findHoverIndexFromDataPoints = function(posX, series,last) {
+    this.findHoverIndexFromDataPoints = function(posX, series, last) {
       var ps = series.datapoints.pointsize;
       var ps = series.datapoints.pointsize;
       var initial = last*ps;
       var initial = last*ps;
       var len = series.datapoints.points.length;
       var len = series.datapoints.points.length;
@@ -38,34 +38,10 @@ function ($) {
     };
     };
 
 
     this.getMultiSeriesPlotHoverInfo = function(seriesList, pos) {
     this.getMultiSeriesPlotHoverInfo = function(seriesList, pos) {
-      var value, i, series, hoverIndex, seriesTmp;
+      var value, i, series, hoverIndex;
       var results = [];
       var results = [];
 
 
-      var pointCount;
-      for (i = 0; i < seriesList.length; i++) {
-        seriesTmp = seriesList[i];
-        if (!seriesTmp.data.length) { continue; }
-
-        if (!pointCount) {
-          series = seriesTmp;
-          pointCount = series.data.length;
-          continue;
-        }
-
-        if (seriesTmp.data.length !== pointCount) {
-          results.pointCountMismatch = true;
-          return results;
-        }
-      }
-
-      hoverIndex = this.findHoverIndexFromData(pos.x, series);
-      var lasthoverIndex = 0;
-      if(!scope.panel.steppedLine) {
-        lasthoverIndex = hoverIndex;
-      }
-
       //now we know the current X (j) position for X and Y values
       //now we know the current X (j) position for X and Y values
-      results.time = series.data[hoverIndex][0];
       var last_value = 0; //needed for stacked values
       var last_value = 0; //needed for stacked values
 
 
       for (i = 0; i < seriesList.length; i++) {
       for (i = 0; i < seriesList.length; i++) {
@@ -76,6 +52,9 @@ function ($) {
           continue;
           continue;
         }
         }
 
 
+        hoverIndex = this.findHoverIndexFromData(pos.x, series);
+        results.time = series.data[hoverIndex][0];
+
         if (scope.panel.stack) {
         if (scope.panel.stack) {
           if (scope.panel.tooltip.value_type === 'individual') {
           if (scope.panel.tooltip.value_type === 'individual') {
             value = series.data[hoverIndex][1];
             value = series.data[hoverIndex][1];
@@ -90,19 +69,9 @@ function ($) {
         // Highlighting multiple Points depending on the plot type
         // Highlighting multiple Points depending on the plot type
         if (scope.panel.steppedLine || (scope.panel.stack && scope.panel.nullPointMode == "null")) {
         if (scope.panel.steppedLine || (scope.panel.stack && scope.panel.nullPointMode == "null")) {
           // stacked and steppedLine plots can have series with different length.
           // stacked and steppedLine plots can have series with different length.
-          // Stacked series can increase its length  on each new stacked serie if null points found,
-          // to speed the index search we begin always on the las found hoverIndex.
-          var newhoverIndex = this.findHoverIndexFromDataPoints(pos.x, series,lasthoverIndex);
-          // update lasthoverIndex depends also on the plot type.
-          if(!scope.panel.steppedLine) {
-            // on stacked graphs new will be always greater than last
-            lasthoverIndex = newhoverIndex;
-          } else {
-            // if steppeLine, not always series increases its length, so we should begin
-            // to search correct index from the original hoverIndex on each serie.
-            lasthoverIndex = hoverIndex;
-          }
-
+          // Stacked series can increase its length on each new stacked serie if null points found,
+          // to speed the index search we begin always on the last found hoverIndex.
+          var newhoverIndex = this.findHoverIndexFromDataPoints(pos.x, series, hoverIndex);
           results.push({ value: value, hoverIndex: newhoverIndex});
           results.push({ value: value, hoverIndex: newhoverIndex});
         } else {
         } else {
           results.push({ value: value, hoverIndex: hoverIndex});
           results.push({ value: value, hoverIndex: hoverIndex});
@@ -141,13 +110,6 @@ function ($) {
         plot.unhighlight();
         plot.unhighlight();
 
 
         var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos);
         var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos);
-        if (seriesHoverInfo.pointCountMismatch) {
-          self.showTooltip('Shared tooltip error', '<ul>' +
-            '<li>Series point counts are not the same</li>' +
-            '<li>Set null point mode to null or null as zero</li>' +
-            '<li>For influxdb users set fill(0) in your query</li></ul>', pos);
-          return;
-        }
 
 
         seriesHtml = '';
         seriesHtml = '';
         timestamp = dashboard.formatDate(seriesHoverInfo.time);
         timestamp = dashboard.formatDate(seriesHoverInfo.time);

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

@@ -60,20 +60,6 @@ define([
     });
     });
   });
   });
 
 
-  describeSharedTooltip("point count missmatch", function(ctx) {
-    ctx.setup(function() {
-      ctx.data = [
-        { data: [[10, 15], [12, 20]], },
-        { data: [[10, 2]] }
-      ];
-      ctx.pos = { x: 11 };
-    });
-
-    it('should set pointCountMismatch to true', function() {
-      expect(ctx.results.pointCountMismatch).to.be(true);
-    });
-  });
-
   describeSharedTooltip("one series is hidden", function(ctx) {
   describeSharedTooltip("one series is hidden", function(ctx) {
     ctx.setup(function() {
     ctx.setup(function() {
       ctx.data = [
       ctx.data = [
@@ -82,10 +68,6 @@ define([
       ];
       ];
       ctx.pos = { x: 11 };
       ctx.pos = { x: 11 };
     });
     });
-
-    it('should set pointCountMismatch to false', function() {
-      expect(ctx.results.pointCountMismatch).to.be(undefined);
-    });
   });
   });
 
 
   describeSharedTooltip("steppedLine false, stack true, individual false", function(ctx) {
   describeSharedTooltip("steppedLine false, stack true, individual false", function(ctx) {