IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Graph: shared tooltip improvements, info tooltip when point counts are not the same, #850

Browse Source
This commit is contained in:
Torkel Ödegaard
2014-10-01 10:30:24 +02:00
parent c79ab84fdf
commit 77f380c94b
2 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/directives/grafanaGraph.tooltip.js
View File

@@ -29,6 +29,12 @@ function ($, kbn) {
return j - 1; return j - 1;
} }
function showTooltip(title, innerHtml, pos) {
var body = '<div class="graph-tooltip small"><div class="graph-tooltip-time">'+ title + '</div> ' ;
body += innerHtml + '</div>';
$tooltip.html(body).place_tt(pos.pageX + 20, pos.pageY);
}
elem.bind("plothover", function (event, pos, item) { elem.bind("plothover", function (event, pos, item) {
var plot = elem.data().plot; var plot = elem.data().plot;
var data = plot.getData(); var data = plot.getData();
@@ -46,8 +52,10 @@ function ($, kbn) {
var pointCount = data[0].data.length; var pointCount = data[0].data.length;
for (i = 1; i < data.length; i++) { for (i = 1; i < data.length; i++) {
if (data[i].data.length !== pointCount) { if (data[i].data.length !== pointCount) {
console.log('WARNING: tootltip shared can not be shown becouse of series points do not align, different point counts'); showTooltip('Shared tooltip error', '<ul>' +
$tooltip.detach(); '<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; return;
} }
} }
@@ -91,22 +99,13 @@ function ($, kbn) {
plot.highlight(i, hoverIndex); plot.highlight(i, hoverIndex);
} }
$tooltip.html('<div class="graph-tooltip small"><div class="graph-tooltip-time">'+ timestamp + '</div> ' + seriesHtml + '</div>') showTooltip(timestamp, seriesHtml, pos);
.place_tt(pos.pageX + 20, pos.pageY);
return; return;
} }
if (item) { if (item) {
seriesInfo = item.series.info; seriesInfo = item.series.info;
format = scope.panel.y_formats[seriesInfo.yaxis - 1]; format = scope.panel.y_formats[seriesInfo.yaxis - 1];
group = '<i class="icon-minus" style="color:' + item.series.color +';"></i> ' + seriesInfo.alias;
if (seriesInfo.alias) {
group = '<small style="font-size:0.9em;">' +
'<i class="icon-circle" style="color:'+item.series.color+';"></i>' + ' ' +
seriesInfo.alias +
'</small><br>';
} else {
group = kbn.query_color_dot(item.series.color, 15) + ' ';
}
if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') { if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') {
value = item.datapoint[1] - item.datapoint[2]; value = item.datapoint[1] - item.datapoint[2];
@@ -117,8 +116,9 @@ function ($, kbn) {
value = kbn.valueFormats[format](value, item.series.yaxis.tickDecimals); value = kbn.valueFormats[format](value, item.series.yaxis.tickDecimals);
timestamp = dashboard.formatDate(item.datapoint[0]); timestamp = dashboard.formatDate(item.datapoint[0]);
group += ': <span class="graph-tooltip-value">' + value + '</span>';
$tooltip.html(group + value + " @ " + timestamp).place_tt(pos.pageX, pos.pageY); showTooltip(timestamp, group, pos);
} else { } else {
$tooltip.detach(); $tooltip.detach();
} }

1
tasks/options/requirejs.js
View File

@@ -59,7 +59,6 @@ module.exports = function(config,grunt) {
'services/all', 'services/all',
'angular-strap', 'angular-strap',
'directives/all', 'directives/all',
'jquery.flot.pie',
'angular-dragdrop', 'angular-dragdrop',
'controllers/all', 'controllers/all',
'routes/all', 'routes/all',