Skip to content

N
nexpie-grafana-theme
Commit 7f745428 by Spencer Alger
Options

centralized the tooltip creation and placement logic, and configured it to move… 

centralized the tooltip creation and placement logic, and configured it to move out of the way when it would otherwise render off screen
parent cb8f020a
Showing with 94 additions and 100 deletions
js/shared.js
...@@ -299,6 +299,17 @@ ...@@ -299,6 +299,17 @@
} }
return sortedObj; 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); }).call(this);
/* /*
...@@ -310,19 +321,13 @@ _.mixin({ ...@@ -310,19 +321,13 @@ _.mixin({
array.splice(toIndex, 0, array.splice(fromIndex, 1)[0] ); array.splice(toIndex, 0, array.splice(fromIndex, 1)[0] );
return array; return array;
} },
});
_.mixin({
remove: function (array, index) { remove: function (array, index) {
'use strict'; 'use strict';
array.splice(index, 1); array.splice(index, 1);
return array; return array;
} },
});
_.mixin({
toggleInOut: function(array,value) { toggleInOut: function(array,value) {
'use strict'; 'use strict';
if(_.contains(array,value)) { if(_.contains(array,value)) {
...@@ -333,3 +338,47 @@ _.mixin({ ...@@ -333,3 +338,47 @@ _.mixin({
return array; 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);
});
};
})();
}());
\ No newline at end of file
panels/histogram/module.js
...@@ -424,32 +424,18 @@ angular.module('kibana.histogram', []) ...@@ -424,32 +424,18 @@ angular.module('kibana.histogram', [])
return "%H:%M:%S"; return "%H:%M:%S";
} }
function tt(x, y, contents) { var $tooltip = $('<div>');
// 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");
}
elem.bind("plothover", function (event, pos, item) { elem.bind("plothover", function (event, pos, item) {
if (item) { if (item) {
tt(pos.pageX, pos.pageY, $tooltip
"<div style='vertical-align:middle;display:inline-block;background:"+ .html(
item.series.color+";height:15px;width:15px;border-radius:10px;'></div> "+ kbn.query_color_dot(item.series.color, 15) + ' ' +
item.datapoint[1].toFixed(0) + " @ " + item.datapoint[1].toFixed(0) + " @ " +
moment(item.datapoint[0]).format('MM/DD HH:mm:ss')); moment(item.datapoint[0]).format('MM/DD HH:mm:ss')
)
.place_tt(pos.pageX, pos.pageY);
} else { } else {
$("#pie-tooltip").remove(); $tooltip.detach();
} }
}); });
......
panels/hits/module.js
...@@ -246,32 +246,16 @@ angular.module('kibana.hits', []) ...@@ -246,32 +246,16 @@ angular.module('kibana.hits', [])
}); });
} }
function tt(x, y, contents) { var $tooltip = $('<div>');
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("plothover", function (event, pos, item) { elem.bind("plothover", function (event, pos, item) {
if (item) { if (item) {
var value = scope.panel.chart === 'bar' ? var value = scope.panel.chart === 'bar' ?
item.datapoint[1] : item.datapoint[1][0][1]; item.datapoint[1] : item.datapoint[1][0][1];
tt(pos.pageX, pos.pageY, $tooltip
"<div style='vertical-align:middle;border-radius:10px;display:inline-block;background:"+ .html(kbn.query_color_dot(item.series.color, 20) + ' ' + value.toFixed(0))
item.series.color+";height:20px;width:20px'></div> "+value.toFixed(0)); .place_tt(pos.pageX, pos.pageY);
} else { } else {
$("#pie-tooltip").remove(); $tooltip.remove();
} }
}); });
......
panels/pie/module.js
...@@ -262,24 +262,7 @@ angular.module('kibana.pie', []) ...@@ -262,24 +262,7 @@ angular.module('kibana.pie', [])
} }
function tt(x, y, contents) { elem.bind('plotclick', function (event, pos, object) {
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) {
if (!object) { if (!object) {
return; return;
} }
...@@ -289,14 +272,20 @@ angular.module('kibana.pie', []) ...@@ -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) { if (item) {
var percent = parseFloat(item.series.percent).toFixed(1) + "%"; $tooltip
tt(pos.pageX, pos.pageY, "<div "+"style='vertical-align:middle;display:inline-block;"+ .html([
"background:"+item.series.color+";height:15px;width:15px;border-radius:10px;'></div> "+ kbn.query_color_dot(item.series.color, 15),
(item.series.label||"")+ " " + percent); (item.series.label || ''),
parseFloat(item.series.percent).toFixed(1) + '%'
].join(' '))
.place_tt(pos.pageX, pos.pageY, {
offset: 10
});
} else { } else {
$("#pie-tooltip").remove(); $tooltip.remove();
} }
}); });
......
panels/terms/module.js
...@@ -268,39 +268,24 @@ angular.module('kibana.terms', []) ...@@ -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) { elem.bind("plotclick", function (event, pos, object) {
if(object) { if(object) {
scope.build_search(scope.data[object.seriesIndex]); scope.build_search(scope.data[object.seriesIndex]);
} }
}); });
var $tooltip = $('<div>');
elem.bind("plothover", function (event, pos, item) { elem.bind("plothover", function (event, pos, item) {
if (item) { if (item) {
var value = scope.panel.chart === 'bar' ? var value = scope.panel.chart === 'bar' ? item.datapoint[1] : item.datapoint[1][0][1];
item.datapoint[1] : item.datapoint[1][0][1]; $tooltip
tt(pos.pageX, pos.pageY, .html(
"<div style='vertical-align:middle;border-radius:10px;display:inline-block;background:"+ kbn.query_color_dot(item.series.color, 20) + ' ' +
item.series.color+";height:20px;width:20px'></div> "+item.series.label+ item.series.label + " (" + value.toFixed(0)+")"
" ("+value.toFixed(0)+")"); )
.place_tt(pos.pageX, pos.pageY);
} else { } else {
$("#pie-tooltip").remove(); $tooltip.remove();
} }
}); });
......
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