Skip to content

N
nexpie-grafana-theme
Commit dfd5f1ba by spenceralger
Options

Merge pull request #436 from spenceralger/responsive-tooltip 

The tooltip should be more responsive
parents cb8f020a 7f745428
Showing with 93 additions and 99 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