From a2e6408be1d6dfe74f633c44e4eebb508c439ce5 Mon Sep 17 00:00:00 2001 From: Axel Pirek Date: Wed, 18 Jan 2017 13:27:11 +0100 Subject: [PATCH 1/5] Only render tooltip if position is in viewport --- public/app/plugins/panel/graph/graph_tooltip.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/public/app/plugins/panel/graph/graph_tooltip.js b/public/app/plugins/panel/graph/graph_tooltip.js index 318b296bc02..ebf8c41c4bd 100644 --- a/public/app/plugins/panel/graph/graph_tooltip.js +++ b/public/app/plugins/panel/graph/graph_tooltip.js @@ -177,6 +177,11 @@ function ($, core) { } pos.pageX = elem.offset().left + pointOffset.left; pos.pageY = elem.offset().top + elem.height() * pos.panelRelY; + var isVisible = pos.pageY >= $(window).scrollTop() && pos.pageY <= $(window).innerHeight() + $(window).scrollTop(); + if (!isVisible) { + self.clear(plot); + return; + } plot.setCrosshair(pos); allSeriesMode = true; From ee58a6ee2b00129f91eb96db0ec5c0d1682fb602 Mon Sep 17 00:00:00 2001 From: Axel Pirek Date: Thu, 19 Jan 2017 10:02:42 +0100 Subject: [PATCH 2/5] Speed up tooltip value retrieval --- .../app/plugins/panel/graph/graph_tooltip.js | 19 +++++++++---- .../panel/graph/specs/tooltip_specs.ts | 28 +++++++++++++++++-- 2 files changed, 39 insertions(+), 8 deletions(-) diff --git a/public/app/plugins/panel/graph/graph_tooltip.js b/public/app/plugins/panel/graph/graph_tooltip.js index ebf8c41c4bd..afc05a9fc75 100644 --- a/public/app/plugins/panel/graph/graph_tooltip.js +++ b/public/app/plugins/panel/graph/graph_tooltip.js @@ -34,13 +34,22 @@ function ($, core) { }; this.findHoverIndexFromData = function(posX, series) { - var len = series.data.length; - for (var j = 0; j < len; j++) { - if (series.data[j][0] > posX) { - return Math.max(j - 1, 0); + var lower = 0; + var upper = series.data.length - 1; + var middle; + while (true) { + if (lower > upper) { + return Math.max(upper, 0); + } + middle = Math.floor((lower + upper) / 2); + if (series.data[middle][0] === posX) { + return middle; + } else if (series.data[middle][0] < posX) { + lower = middle + 1; + } else { //if (series.data[middle][0] > posX) { + upper = middle - 1; } } - return j - 1; }; this.renderAndShow = function(absoluteTime, innerHtml, pos, xMode) { diff --git a/public/app/plugins/panel/graph/specs/tooltip_specs.ts b/public/app/plugins/panel/graph/specs/tooltip_specs.ts index 58177ea7a16..e4436c0f52d 100644 --- a/public/app/plugins/panel/graph/specs/tooltip_specs.ts +++ b/public/app/plugins/panel/graph/specs/tooltip_specs.ts @@ -40,6 +40,31 @@ function describeSharedTooltip(desc, fn) { }); } +describe("findHoverIndexFromData", function() { + var tooltip = new GraphTooltip(elem, dashboard, scope); + var series = { data: [[100, 0], [101, 0], [102, 0], [103, 0], [104, 0], [105, 0], [106, 0], [107, 0]] }; + + it("should return 0 if posX out of lower bounds", function() { + var posX = 99; + expect(tooltip.findHoverIndexFromData(posX, series)).to.be(0); + }); + + it("should return n - 1 if posX out of upper bounds", function() { + var posX = 108; + expect(tooltip.findHoverIndexFromData(posX, series)).to.be(series.data.length - 1); + }); + + it("should return i if posX in series", function() { + var posX = 104; + expect(tooltip.findHoverIndexFromData(posX, series)).to.be(4); + }); + + it("should return i if posX not in series and i + 1 > posX", function() { + var posX = 104.9; + expect(tooltip.findHoverIndexFromData(posX, series)).to.be(4); + }); +}); + describeSharedTooltip("steppedLine false, stack false", function(ctx) { ctx.setup(function() { ctx.data = [ @@ -168,6 +193,3 @@ describeSharedTooltip("steppedLine false, stack true, individual true", function expect(ctx.results[1].value).to.be(2); }); }); - - - From 138a79c2fb72a92e48808d48d1c13fa1880b2040 Mon Sep 17 00:00:00 2001 From: Axel Pirek Date: Thu, 19 Jan 2017 11:08:32 +0100 Subject: [PATCH 3/5] Clear highlight when clearing tooltip and crosshair --- public/app/plugins/panel/graph/graph_tooltip.js | 1 + 1 file changed, 1 insertion(+) diff --git a/public/app/plugins/panel/graph/graph_tooltip.js b/public/app/plugins/panel/graph/graph_tooltip.js index afc05a9fc75..1256c1b83e8 100644 --- a/public/app/plugins/panel/graph/graph_tooltip.js +++ b/public/app/plugins/panel/graph/graph_tooltip.js @@ -165,6 +165,7 @@ function ($, core) { this.clear = function(plot) { $tooltip.detach(); plot.clearCrosshair(); + plot.unhighlight(); }; this.show = function(pos, item) { From 4b8f2aeb363611a25325e5e92a92cf6e319a69d4 Mon Sep 17 00:00:00 2001 From: Axel Pirek Date: Thu, 19 Jan 2017 13:33:49 +0100 Subject: [PATCH 4/5] Fix tooltips sometimes rendering outside of graph panel I noticed tooltips on other panels rendering outside of their panel or even the browser window when hovering on the very edge of graphs with relative time overrides. --- public/app/plugins/panel/graph/graph_tooltip.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app/plugins/panel/graph/graph_tooltip.js b/public/app/plugins/panel/graph/graph_tooltip.js index 1256c1b83e8..2d17adeb0f9 100644 --- a/public/app/plugins/panel/graph/graph_tooltip.js +++ b/public/app/plugins/panel/graph/graph_tooltip.js @@ -181,8 +181,8 @@ function ($, core) { // get pageX from position on x axis and pageY from relative position in original panel if (pos.panelRelY) { var pointOffset = plot.pointOffset({x: pos.x}); - if (Number.isNaN(pointOffset.left) || pointOffset.left < 0) { - $tooltip.detach(); + if (Number.isNaN(pointOffset.left) || pointOffset.left < 0 || pointOffset.left > elem.width()) { + self.clear(plot); return; } pos.pageX = elem.offset().left + pointOffset.left; From 28f890e42fbd3c751c420f7f6bc10f6f60d1bdb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 25 Jan 2017 14:34:55 +0100 Subject: [PATCH 5/5] refactor(): removed commented out code --- public/app/plugins/panel/graph/graph_tooltip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/plugins/panel/graph/graph_tooltip.js b/public/app/plugins/panel/graph/graph_tooltip.js index 2d17adeb0f9..1de99c42da7 100644 --- a/public/app/plugins/panel/graph/graph_tooltip.js +++ b/public/app/plugins/panel/graph/graph_tooltip.js @@ -46,7 +46,7 @@ function ($, core) { return middle; } else if (series.data[middle][0] < posX) { lower = middle + 1; - } else { //if (series.data[middle][0] > posX) { + } else { upper = middle - 1; } }