Skip to content
This repository has been archived by the owner on Mar 31, 2024. It is now read-only.

Commit

Permalink
Merge pull request elastic#436 from spenceralger/responsive-tooltip
Browse files Browse the repository at this point in the history 
The tooltip should be more responsive
  • Loading branch information
spenceralger committed Aug 28, 2013
2 parents cb8f020 + 7f74542 commit dfd5f1b
Show file tree
Hide file tree
Showing 5 changed files with 93 additions and 100 deletions.
65 changes: 57 additions & 8 deletions js/shared.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

/*
Expand All @@ -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)) {
Expand All @@ -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);
});
};
})();
}());
32 changes: 9 additions & 23 deletions panels/histogram/module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
});

Expand Down
26 changes: 5 additions & 21 deletions panels/hits/module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
});

Expand Down
37 changes: 13 additions & 24 deletions panels/pie/module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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();
}
});

Expand Down
33 changes: 9 additions & 24 deletions panels/terms/module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
});

Expand Down

0 comments on commit dfd5f1b

Please sign in to comment.