Skip to content

N
nexpie-grafana-theme
Commit 2d1f2f36 by Daniel Lee Committed by GitHub
Options

Merge pull request #11480 from grafana/graph_tooltip_to_ts 

Graph tooltip to ts
parents 28849bbd 7b9b34c6
Showing with 64 additions and 66 deletions
public/app/plugins/panel/graph/graph_tooltip.js → public/app/plugins/panel/graph/graph_tooltip.ts
define([ import $ from 'jquery';
'jquery', import { appEvents } from 'app/core/core';
'app/core/core',
],
function ($, core) {
'use strict';
var appEvents = core.appEvents; export default function GraphTooltip(elem, dashboard, scope, getSeriesFn) {
let self = this;
let ctrl = scope.ctrl;
let panel = ctrl.panel;
function GraphTooltip(elem, dashboard, scope, getSeriesFn) { let $tooltip = $('<div class="graph-tooltip">');
var self = this;
var ctrl = scope.ctrl;
var panel = ctrl.panel;
var $tooltip = $('<div class="graph-tooltip">');
this.destroy = function() { this.destroy = function() {
$tooltip.remove(); $tooltip.remove();
}; };
this.findHoverIndexFromDataPoints = function(posX, series, last) { this.findHoverIndexFromDataPoints = function(posX, series, last) {
var ps = series.datapoints.pointsize; let ps = series.datapoints.pointsize;
var initial = last*ps; let initial = last * ps;
var len = series.datapoints.points.length; let len = series.datapoints.points.length;
for (var j = initial; j < len; j += ps) { let j;
for (j = initial; j < len; j += ps) {
// Special case of a non stepped line, highlight the very last point just before a null point // Special case of a non stepped line, highlight the very last point just before a null point
if ((!series.lines.steps && series.datapoints.points[initial] != null && series.datapoints.points[j] == null) if (
(!series.lines.steps && series.datapoints.points[initial] != null && series.datapoints.points[j] == null) ||
//normal case //normal case
|| series.datapoints.points[j] > posX) { series.datapoints.points[j] > posX
return Math.max(j - ps, 0)/ps; ) {
return Math.max(j - ps, 0) / ps;
} }
} }
return j/ps - 1; return j / ps - 1;
}; };
this.findHoverIndexFromData = function(posX, series) { this.findHoverIndexFromData = function(posX, series) {
var lower = 0; let lower = 0;
var upper = series.data.length - 1; let upper = series.data.length - 1;
var middle; let middle;
while (true) { while (true) {
if (lower > upper) { if (lower > upper) {
return Math.max(upper, 0); return Math.max(upper, 0);
...@@ -54,20 +51,20 @@ function ($, core) { ...@@ -54,20 +51,20 @@ function ($, core) {
this.renderAndShow = function(absoluteTime, innerHtml, pos, xMode) { this.renderAndShow = function(absoluteTime, innerHtml, pos, xMode) {
if (xMode === 'time') { if (xMode === 'time') {
innerHtml = '<div class="graph-tooltip-time">'+ absoluteTime + '</div>' + innerHtml; innerHtml = '<div class="graph-tooltip-time">' + absoluteTime + '</div>' + innerHtml;
} }
$tooltip.html(innerHtml).place_tt(pos.pageX + 20, pos.pageY); $tooltip.html(innerHtml).place_tt(pos.pageX + 20, pos.pageY);
}; };
this.getMultiSeriesPlotHoverInfo = function(seriesList, pos) { this.getMultiSeriesPlotHoverInfo = function(seriesList, pos) {
var value, i, series, hoverIndex, hoverDistance, pointTime, yaxis; let value, i, series, hoverIndex, hoverDistance, pointTime, yaxis;
// 3 sub-arrays, 1st for hidden series, 2nd for left yaxis, 3rd for right yaxis. // 3 sub-arrays, 1st for hidden series, 2nd for left yaxis, 3rd for right yaxis.
var results = [[],[],[]]; let results: any = [[], [], []];
//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
var last_value = 0; //needed for stacked values let last_value = 0; //needed for stacked values
var minDistance, minTime; let minDistance, minTime;
for (i = 0; i < seriesList.length; i++) { for (i = 0; i < seriesList.length; i++) {
series = seriesList[i]; series = seriesList[i];
...@@ -89,9 +86,11 @@ function ($, core) { ...@@ -89,9 +86,11 @@ function ($, core) {
pointTime = series.data[hoverIndex][0]; pointTime = series.data[hoverIndex][0];
// Take the closest point before the cursor, or if it does not exist, the closest after // Take the closest point before the cursor, or if it does not exist, the closest after
if (! minDistance if (
|| (hoverDistance >=0 && (hoverDistance < minDistance || minDistance < 0)) !minDistance ||
|| (hoverDistance < 0 && hoverDistance > minDistance)) { (hoverDistance >= 0 && (hoverDistance < minDistance || minDistance < 0)) ||
(hoverDistance < 0 && hoverDistance > minDistance)
) {
minDistance = hoverDistance; minDistance = hoverDistance;
minTime = pointTime; minTime = pointTime;
} }
...@@ -130,12 +129,12 @@ function ($, core) { ...@@ -130,12 +129,12 @@ function ($, core) {
label: series.aliasEscaped, label: series.aliasEscaped,
time: pointTime, time: pointTime,
distance: hoverDistance, distance: hoverDistance,
index: i index: i,
}); });
} }
// Contat the 3 sub-arrays // Contat the 3 sub-arrays
results = results[0].concat(results[1],results[2]); results = results[0].concat(results[1], results[2]);
// Time of the point closer to pointer // Time of the point closer to pointer
results.time = minTime; results.time = minTime;
...@@ -143,9 +142,9 @@ function ($, core) { ...@@ -143,9 +142,9 @@ function ($, core) {
return results; return results;
}; };
elem.mouseleave(function () { elem.mouseleave(function() {
if (panel.tooltip.shared) { if (panel.tooltip.shared) {
var plot = elem.data().plot; let plot = elem.data().plot;
if (plot) { if (plot) {
$tooltip.detach(); $tooltip.detach();
plot.unhighlight(); plot.unhighlight();
...@@ -154,16 +153,16 @@ function ($, core) { ...@@ -154,16 +153,16 @@ function ($, core) {
appEvents.emit('graph-hover-clear'); appEvents.emit('graph-hover-clear');
}); });
elem.bind("plothover", function (event, pos, item) { elem.bind('plothover', function(event, pos, item) {
self.show(pos, item); self.show(pos, item);
// broadcast to other graph panels that we are hovering! // broadcast to other graph panels that we are hovering!
pos.panelRelY = (pos.pageY - elem.offset().top) / elem.height(); pos.panelRelY = (pos.pageY - elem.offset().top) / elem.height();
appEvents.emit('graph-hover', {pos: pos, panel: panel}); appEvents.emit('graph-hover', { pos: pos, panel: panel });
}); });
elem.bind("plotclick", function (event, pos, item) { elem.bind('plotclick', function(event, pos, item) {
appEvents.emit('graph-click', {pos: pos, panel: panel, item: item}); appEvents.emit('graph-click', { pos: pos, panel: panel, item: item });
}); });
this.clear = function(plot) { this.clear = function(plot) {
...@@ -173,25 +172,26 @@ function ($, core) { ...@@ -173,25 +172,26 @@ function ($, core) {
}; };
this.show = function(pos, item) { this.show = function(pos, item) {
var plot = elem.data().plot; let plot = elem.data().plot;
var plotData = plot.getData(); let plotData = plot.getData();
var xAxes = plot.getXAxes(); let xAxes = plot.getXAxes();
var xMode = xAxes[0].options.mode; let xMode = xAxes[0].options.mode;
var seriesList = getSeriesFn(); let seriesList = getSeriesFn();
var allSeriesMode = panel.tooltip.shared; let allSeriesMode = panel.tooltip.shared;
var group, value, absoluteTime, hoverInfo, i, series, seriesHtml, tooltipFormat; let group, value, absoluteTime, hoverInfo, i, series, seriesHtml, tooltipFormat;
// if panelRelY is defined another panel wants us to show a tooltip // if panelRelY is defined another panel wants us to show a tooltip
// get pageX from position on x axis and pageY from relative position in original panel // get pageX from position on x axis and pageY from relative position in original panel
if (pos.panelRelY) { if (pos.panelRelY) {
var pointOffset = plot.pointOffset({x: pos.x}); let pointOffset = plot.pointOffset({ x: pos.x });
if (Number.isNaN(pointOffset.left) || pointOffset.left < 0 || pointOffset.left > elem.width()) { if (Number.isNaN(pointOffset.left) || pointOffset.left < 0 || pointOffset.left > elem.width()) {
self.clear(plot); self.clear(plot);
return; return;
} }
pos.pageX = elem.offset().left + pointOffset.left; pos.pageX = elem.offset().left + pointOffset.left;
pos.pageY = elem.offset().top + elem.height() * pos.panelRelY; pos.pageY = elem.offset().top + elem.height() * pos.panelRelY;
var isVisible = pos.pageY >= $(window).scrollTop() && pos.pageY <= $(window).innerHeight() + $(window).scrollTop(); let isVisible =
pos.pageY >= $(window).scrollTop() && pos.pageY <= $(window).innerHeight() + $(window).scrollTop();
if (!isVisible) { if (!isVisible) {
self.clear(plot); self.clear(plot);
return; return;
...@@ -218,7 +218,7 @@ function ($, core) { ...@@ -218,7 +218,7 @@ function ($, core) {
if (allSeriesMode) { if (allSeriesMode) {
plot.unhighlight(); plot.unhighlight();
var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos); let seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos);
seriesHtml = ''; seriesHtml = '';
...@@ -243,7 +243,7 @@ function ($, core) { ...@@ -243,7 +243,7 @@ function ($, core) {
continue; continue;
} }
var highlightClass = ''; let highlightClass = '';
if (item && hoverInfo.index === item.seriesIndex) { if (item && hoverInfo.index === item.seriesIndex) {
highlightClass = 'graph-tooltip-list-item--highlight'; highlightClass = 'graph-tooltip-list-item--highlight';
} }
...@@ -252,24 +252,25 @@ function ($, core) { ...@@ -252,24 +252,25 @@ function ($, core) {
value = series.formatValue(hoverInfo.value); value = series.formatValue(hoverInfo.value);
seriesHtml += '<div class="graph-tooltip-list-item ' + highlightClass + '"><div class="graph-tooltip-series-name">'; seriesHtml +=
seriesHtml += '<i class="fa fa-minus" style="color:' + hoverInfo.color +';"></i> ' + hoverInfo.label + ':</div>'; '<div class="graph-tooltip-list-item ' + highlightClass + '"><div class="graph-tooltip-series-name">';
seriesHtml +=
'<i class="fa fa-minus" style="color:' + hoverInfo.color + ';"></i> ' + hoverInfo.label + ':</div>';
seriesHtml += '<div class="graph-tooltip-value">' + value + '</div></div>'; seriesHtml += '<div class="graph-tooltip-value">' + value + '</div></div>';
plot.highlight(hoverInfo.index, hoverInfo.hoverIndex); plot.highlight(hoverInfo.index, hoverInfo.hoverIndex);
} }
self.renderAndShow(absoluteTime, seriesHtml, pos, xMode); self.renderAndShow(absoluteTime, seriesHtml, pos, xMode);
} } else if (item) {
// single series tooltip // single series tooltip
else if (item) {
series = seriesList[item.seriesIndex]; series = seriesList[item.seriesIndex];
group = '<div class="graph-tooltip-list-item"><div class="graph-tooltip-series-name">'; group = '<div class="graph-tooltip-list-item"><div class="graph-tooltip-series-name">';
group += '<i class="fa fa-minus" style="color:' + item.series.color +';"></i> ' + series.aliasEscaped + ':</div>'; group +=
'<i class="fa fa-minus" style="color:' + item.series.color + ';"></i> ' + series.aliasEscaped + ':</div>';
if (panel.stack && panel.tooltip.value_type === 'individual') { if (panel.stack && panel.tooltip.value_type === 'individual') {
value = item.datapoint[1] - item.datapoint[2]; value = item.datapoint[1] - item.datapoint[2];
} } else {
else {
value = item.datapoint[1]; value = item.datapoint[1];
} }
...@@ -280,13 +281,9 @@ function ($, core) { ...@@ -280,13 +281,9 @@ function ($, core) {
group += '<div class="graph-tooltip-value">' + value + '</div>'; group += '<div class="graph-tooltip-value">' + value + '</div>';
self.renderAndShow(absoluteTime, group, pos, xMode); self.renderAndShow(absoluteTime, group, pos, xMode);
} } else {
// no hit // no hit
else {
$tooltip.detach(); $tooltip.detach();
} }
}; };
} }
return GraphTooltip;
});
public/app/plugins/panel/graph/specs/tooltip_specs.ts
...@@ -11,6 +11,7 @@ var scope = { ...@@ -11,6 +11,7 @@ var scope = {
var elem = $('<div></div>'); var elem = $('<div></div>');
var dashboard = {}; var dashboard = {};
var getSeriesFn;
function describeSharedTooltip(desc, fn) { function describeSharedTooltip(desc, fn) {
var ctx: any = {}; var ctx: any = {};
...@@ -30,7 +31,7 @@ function describeSharedTooltip(desc, fn) { ...@@ -30,7 +31,7 @@ function describeSharedTooltip(desc, fn) {
describe(desc, function() { describe(desc, function() {
beforeEach(function() { beforeEach(function() {
ctx.setupFn(); ctx.setupFn();
var tooltip = new GraphTooltip(elem, dashboard, scope); var tooltip = new GraphTooltip(elem, dashboard, scope, getSeriesFn);
ctx.results = tooltip.getMultiSeriesPlotHoverInfo(ctx.data, ctx.pos); ctx.results = tooltip.getMultiSeriesPlotHoverInfo(ctx.data, ctx.pos);
}); });
...@@ -39,7 +40,7 @@ function describeSharedTooltip(desc, fn) { ...@@ -39,7 +40,7 @@ function describeSharedTooltip(desc, fn) {
} }
describe('findHoverIndexFromData', function() { describe('findHoverIndexFromData', function() {
var tooltip = new GraphTooltip(elem, dashboard, scope); var tooltip = new GraphTooltip(elem, dashboard, scope, getSeriesFn);
var series = { var series = {
data: [[100, 0], [101, 0], [102, 0], [103, 0], [104, 0], [105, 0], [106, 0], [107, 0]], data: [[100, 0], [101, 0], [102, 0], [103, 0], [104, 0], [105, 0], [106, 0], [107, 0]],
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment