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 @@
}
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);
});
};
})();
}());
\ No newline at end of file
panels/histogram/module.js
......@@ -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> "+
$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'));
moment(item.datapoint[0]).format('MM/DD HH:mm:ss')
)
.place_tt(pos.pageX, pos.pageY);
} else {
$("#pie-tooltip").remove();
$tooltip.detach();
}
});
......
panels/hits/module.js
......@@ -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();
}
});
......
panels/pie/module.js
......@@ -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();
}
});
......
panels/terms/module.js
......@@ -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();
}
});
......
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