Commit 7f745428 by Spencer Alger

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
......@@ -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
......@@ -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();
}
});
......
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