mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
centralized the tooltip creation and placement logic, and configured it to move out of the way when it would otherwise render off screen
This commit is contained in:
Spencer Alger
parent
cb8f020ae1
commit
7f745428fe
65
js/shared.js
65
js/shared.js
@ -299,6 +299,17 @@
|
||||
}
|
||||
return sortedObj;
|
||||
};
|
||||
|
||||
kbn.query_color_dot = function (color, diameter) {
|
||||
return '<div style="' + [
|
||||
'vertical-align:middle',
|
||||
'border-radius:10px',
|
||||
'display:inline-block',
|
||||
'background:' + color,
|
||||
'height:' + diameter + 'px',
|
||||
'width:' + diameter + 'px',
|
||||
].join(';') + '"></div>';
|
||||
};
|
||||
}).call(this);
|
||||
|
||||
/*
|
||||
@ -310,19 +321,13 @@ _.mixin({
|
||||
|
||||
array.splice(toIndex, 0, array.splice(fromIndex, 1)[0] );
|
||||
return array;
|
||||
}
|
||||
});
|
||||
|
||||
_.mixin({
|
||||
},
|
||||
remove: function (array, index) {
|
||||
'use strict';
|
||||
|
||||
array.splice(index, 1);
|
||||
return array;
|
||||
}
|
||||
});
|
||||
|
||||
_.mixin({
|
||||
},
|
||||
toggleInOut: function(array,value) {
|
||||
'use strict';
|
||||
if(_.contains(array,value)) {
|
||||
@ -333,3 +338,47 @@ _.mixin({
|
||||
return array;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* jQuery plugins
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var $win = $(window);
|
||||
|
||||
$.fn.place_tt = (function () {
|
||||
var defaults = {
|
||||
offset: 5,
|
||||
css: {
|
||||
position : 'absolute',
|
||||
top : -1000,
|
||||
left : 0,
|
||||
color : "#c8c8c8",
|
||||
padding : '10px',
|
||||
'font-size': '11pt',
|
||||
'font-weight' : 200,
|
||||
'background-color': '#1f1f1f',
|
||||
'border-radius': '5px',
|
||||
}
|
||||
};
|
||||
|
||||
return function (x, y, opts) {
|
||||
opts = $.extend(true, {}, defaults, opts);
|
||||
return this.each(function () {
|
||||
var $tooltip = $(this), width, height;
|
||||
|
||||
$tooltip.css(opts.css);
|
||||
if (!$.contains(document.body, $tooltip[0])) {
|
||||
$tooltip.appendTo(document.body);
|
||||
}
|
||||
|
||||
width = $tooltip.outerWidth(true);
|
||||
height = $tooltip.outerHeight(true);
|
||||
|
||||
$tooltip.css('left', x + opts.offset + width > $win.width() ? x - opts.offset - width : x + opts.offset);
|
||||
$tooltip.css('top', y + opts.offset + height > $win.height() ? y - opts.offset - height : y + opts.offset);
|
||||
});
|
||||
};
|
||||
})();
|
||||
}());
|
||||
@ -424,32 +424,18 @@ angular.module('kibana.histogram', [])
|
||||
return "%H:%M:%S";
|
||||
}
|
||||
|
||||
function tt(x, y, contents) {
|
||||
// If the tool tip already exists, don't recreate it, just update it
|
||||
var tooltip = $('#pie-tooltip').length ? $('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
|
||||
|
||||
tooltip.html(contents).css({
|
||||
position: 'absolute',
|
||||
top : y + 5,
|
||||
left : x + 5,
|
||||
color : "#c8c8c8",
|
||||
padding : '10px',
|
||||
'font-size': '11pt',
|
||||
'font-weight' : 200,
|
||||
'background-color': '#1f1f1f',
|
||||
'border-radius': '5px',
|
||||
}).appendTo("body");
|
||||
}
|
||||
|
||||
var $tooltip = $('<div>');
|
||||
elem.bind("plothover", function (event, pos, item) {
|
||||
if (item) {
|
||||
tt(pos.pageX, pos.pageY,
|
||||
"<div style='vertical-align:middle;display:inline-block;background:"+
|
||||
item.series.color+";height:15px;width:15px;border-radius:10px;'></div> "+
|
||||
item.datapoint[1].toFixed(0) + " @ " +
|
||||
moment(item.datapoint[0]).format('MM/DD HH:mm:ss'));
|
||||
$tooltip
|
||||
.html(
|
||||
kbn.query_color_dot(item.series.color, 15) + ' ' +
|
||||
item.datapoint[1].toFixed(0) + " @ " +
|
||||
moment(item.datapoint[0]).format('MM/DD HH:mm:ss')
|
||||
)
|
||||
.place_tt(pos.pageX, pos.pageY);
|
||||
} else {
|
||||
$("#pie-tooltip").remove();
|
||||
$tooltip.detach();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -246,32 +246,16 @@ angular.module('kibana.hits', [])
|
||||
});
|
||||
}
|
||||
|
||||
function tt(x, y, contents) {
|
||||
var tooltip = $('#pie-tooltip').length ?
|
||||
$('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
|
||||
//var tooltip = $('#pie-tooltip')
|
||||
tooltip.html(contents).css({
|
||||
position: 'absolute',
|
||||
top : y + 5,
|
||||
left : x + 5,
|
||||
color : "#c8c8c8",
|
||||
padding : '10px',
|
||||
'font-size': '11pt',
|
||||
'font-weight' : 200,
|
||||
'background-color': '#1f1f1f',
|
||||
'border-radius': '5px',
|
||||
}).appendTo("body");
|
||||
}
|
||||
|
||||
var $tooltip = $('<div>');
|
||||
elem.bind("plothover", function (event, pos, item) {
|
||||
if (item) {
|
||||
var value = scope.panel.chart === 'bar' ?
|
||||
item.datapoint[1] : item.datapoint[1][0][1];
|
||||
tt(pos.pageX, pos.pageY,
|
||||
"<div style='vertical-align:middle;border-radius:10px;display:inline-block;background:"+
|
||||
item.series.color+";height:20px;width:20px'></div> "+value.toFixed(0));
|
||||
$tooltip
|
||||
.html(kbn.query_color_dot(item.series.color, 20) + ' ' + value.toFixed(0))
|
||||
.place_tt(pos.pageX, pos.pageY);
|
||||
} else {
|
||||
$("#pie-tooltip").remove();
|
||||
$tooltip.remove();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -262,24 +262,7 @@ angular.module('kibana.pie', [])
|
||||
|
||||
}
|
||||
|
||||
function tt(x, y, contents) {
|
||||
var tooltip = $('#pie-tooltip').length ?
|
||||
$('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
|
||||
|
||||
tooltip.html(contents).css({
|
||||
position: 'absolute',
|
||||
top : y + 10,
|
||||
left : x + 10,
|
||||
color : "#c8c8c8",
|
||||
padding : '10px',
|
||||
'font-size': '11pt',
|
||||
'font-weight' : 200,
|
||||
'background-color': '#1f1f1f',
|
||||
'border-radius': '5px',
|
||||
}).appendTo("body");
|
||||
}
|
||||
|
||||
elem.bind("plotclick", function (event, pos, object) {
|
||||
elem.bind('plotclick', function (event, pos, object) {
|
||||
if (!object) {
|
||||
return;
|
||||
}
|
||||
@ -289,14 +272,20 @@ angular.module('kibana.pie', [])
|
||||
}
|
||||
});
|
||||
|
||||
elem.bind("plothover", function (event, pos, item) {
|
||||
var $tooltip = $('<div>');
|
||||
elem.bind('plothover', function (event, pos, item) {
|
||||
if (item) {
|
||||
var percent = parseFloat(item.series.percent).toFixed(1) + "%";
|
||||
tt(pos.pageX, pos.pageY, "<div "+"style='vertical-align:middle;display:inline-block;"+
|
||||
"background:"+item.series.color+";height:15px;width:15px;border-radius:10px;'></div> "+
|
||||
(item.series.label||"")+ " " + percent);
|
||||
$tooltip
|
||||
.html([
|
||||
kbn.query_color_dot(item.series.color, 15),
|
||||
(item.series.label || ''),
|
||||
parseFloat(item.series.percent).toFixed(1) + '%'
|
||||
].join(' '))
|
||||
.place_tt(pos.pageX, pos.pageY, {
|
||||
offset: 10
|
||||
});
|
||||
} else {
|
||||
$("#pie-tooltip").remove();
|
||||
$tooltip.remove();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -268,39 +268,24 @@ angular.module('kibana.terms', [])
|
||||
});
|
||||
}
|
||||
|
||||
function tt(x, y, contents) {
|
||||
var tooltip = $('#pie-tooltip').length ?
|
||||
$('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
|
||||
//var tooltip = $('#pie-tooltip')
|
||||
tooltip.html(contents).css({
|
||||
position: 'absolute',
|
||||
top : y + 5,
|
||||
left : x + 5,
|
||||
color : "#c8c8c8",
|
||||
padding : '10px',
|
||||
'font-size': '11pt',
|
||||
'font-weight' : 200,
|
||||
'background-color': '#1f1f1f',
|
||||
'border-radius': '5px',
|
||||
}).appendTo("body");
|
||||
}
|
||||
|
||||
elem.bind("plotclick", function (event, pos, object) {
|
||||
if(object) {
|
||||
scope.build_search(scope.data[object.seriesIndex]);
|
||||
}
|
||||
});
|
||||
|
||||
var $tooltip = $('<div>');
|
||||
elem.bind("plothover", function (event, pos, item) {
|
||||
if (item) {
|
||||
var value = scope.panel.chart === 'bar' ?
|
||||
item.datapoint[1] : item.datapoint[1][0][1];
|
||||
tt(pos.pageX, pos.pageY,
|
||||
"<div style='vertical-align:middle;border-radius:10px;display:inline-block;background:"+
|
||||
item.series.color+";height:20px;width:20px'></div> "+item.series.label+
|
||||
" ("+value.toFixed(0)+")");
|
||||
var value = scope.panel.chart === 'bar' ? item.datapoint[1] : item.datapoint[1][0][1];
|
||||
$tooltip
|
||||
.html(
|
||||
kbn.query_color_dot(item.series.color, 20) + ' ' +
|
||||
item.series.label + " (" + value.toFixed(0)+")"
|
||||
)
|
||||
.place_tt(pos.pageX, pos.pageY);
|
||||
} else {
|
||||
$("#pie-tooltip").remove();
|
||||
$tooltip.remove();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user