From ed297092a4192130febb5c412265cd8664162dc0 Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Sun, 7 Apr 2013 18:47:02 -0700 Subject: [PATCH] Prettied up hover and legends --- panels/histogram/module.html | 2 +- panels/histogram/module.js | 6 +++--- panels/hits/module.html | 2 +- panels/hits/module.js | 6 +++--- panels/map/module.js | 12 ++++++------ panels/pie/module.html | 7 ++++++- panels/pie/module.js | 27 ++++++++++++++++++--------- 7 files changed, 38 insertions(+), 24 deletions(-) diff --git a/panels/histogram/module.html b/panels/histogram/module.html index a55a25c6996055..15663500d7794d 100644 --- a/panels/histogram/module.html +++ b/panels/histogram/module.html @@ -8,7 +8,7 @@ Zoom Out | -
+
{{series.label}} ({{series.hits}})
 per {{panel.interval}} | ({{hits}} total) diff --git a/panels/histogram/module.js b/panels/histogram/module.js index f40dcbf5ffb0b4..eb6b838ef1da04 100644 --- a/panels/histogram/module.js +++ b/panels/histogram/module.js @@ -301,10 +301,10 @@ angular.module('kibana.histogram', []) top : y + 5, left : x + 5, color : "#000", - border : '3px solid #000', + border : '2px solid #000', padding : '10px', 'font-size': '11pt', - 'font-weight' : 'bold', + 'font-weight' : 200, 'background-color': '#FFF', 'border-radius': '10px', }).appendTo("body"); @@ -313,7 +313,7 @@ angular.module('kibana.histogram', []) elem.bind("plothover", function (event, pos, item) { if (item) { tt(pos.pageX, pos.pageY, - "
"+ + "
"+ item.datapoint[1].toFixed(0) + " @ " + new Date(item.datapoint[0]).format('mm/dd HH:MM:ss')); } else { diff --git a/panels/hits/module.html b/panels/hits/module.html index d016a7bfb1971c..4ebcabf4576111 100644 --- a/panels/hits/module.html +++ b/panels/hits/module.html @@ -7,7 +7,7 @@
-
{{query.label}} ({{query.hits}}) | +
{{query.label}} ({{query.hits}}) |

diff --git a/panels/hits/module.js b/panels/hits/module.js index a74a8883ae2607..4decbd215f10ee 100644 --- a/panels/hits/module.js +++ b/panels/hits/module.js @@ -192,10 +192,10 @@ angular.module('kibana.hits', []) top : y + 5, left : x + 5, color : "#000", - border : '3px solid #000', + border : '2px solid #000', padding : '10px', 'font-size': '11pt', - 'font-weight' : 'bold', + 'font-weight' : 200, 'background-color': '#FFF', 'border-radius': '10px', }).appendTo("body"); @@ -204,7 +204,7 @@ angular.module('kibana.hits', []) elem.bind("plothover", function (event, pos, item) { if (item) { tt(pos.pageX, pos.pageY, - "
"+ + "
"+ item.datapoint[1].toFixed(0)) } else { $("#pie-tooltip").remove(); diff --git a/panels/map/module.js b/panels/map/module.js index daf96634828ba2..0383b18052e674 100644 --- a/panels/map/module.js +++ b/panels/map/module.js @@ -128,12 +128,12 @@ angular.module('kibana.map', []) $('.jvectormap-label').css({ "position" : "absolute", "display" : "none", - "border" : "solid 1px #CDCDCD", - "background" : "#292929", - "color" : "white", - "font-family" : "sans-serif, Verdana", - "font-size" : "smaller", - "padding" : "3px" + "border" : "solid 2px #000", + "background" : "#FFF", + "font-weight" : 200, + "border-radius": "5px", + "color" : "#000", + "padding" : "5px" }) var count = _.isUndefined(scope.data[code]) ? 0 : scope.data[code]; $('.jvectormap-label').text(label.text() + ": " + count); diff --git a/panels/pie/module.html b/panels/pie/module.html index bf515f98d86be4..1346b88f76586b 100644 --- a/panels/pie/module.html +++ b/panels/pie/module.html @@ -2,6 +2,11 @@ - + +
+
+
{{series.label}} ({{series.percent}}%)
+
+
\ No newline at end of file diff --git a/panels/pie/module.js b/panels/pie/module.js index fd4d2f6a1d9745..625203f72266cd 100644 --- a/panels/pie/module.js +++ b/panels/pie/module.js @@ -268,14 +268,21 @@ angular.module('kibana.pie', []) }, //grid: { hoverable: true, clickable: true }, grid: { hoverable: true, clickable: true }, - legend: { show: scope.panel.legend }, + legend: { show: false }, colors: ['#EB6841','#00A0B0','#6A4A3C','#EDC951','#CC333F'] }; // Populate element if(elem.is(":visible")){ scripts.wait(function(){ - $.plot(elem, scope.data, pie); + var plot = $.plot(elem, scope.data, pie); + scope.legend = []; + _.each(plot.getData(),function(series) { + var item = _.pick(series,'label','color','percent') + item.percent = parseFloat(item.percent).toFixed(1) + scope.legend.push(item) + }) + console.log(scope.legend) }); } } @@ -283,15 +290,16 @@ angular.module('kibana.pie', []) function piett(x, y, contents) { var tooltip = $('#pie-tooltip').length ? $('#pie-tooltip') : $('
'); - tooltip.text(contents).css({ + tooltip.html(contents).css({ position: 'absolute', top : y + 10, left : x + 10, - color : "#FFF", - border : '1px solid #FFF', - padding : '2px', - 'font-size': '8pt', - 'background-color': '#000', + color : "#000", + 'font-weight': 200, + 'border-radius': '5px', + border : '2px solid #000', + padding : '10px', + 'background-color': '#FFF', }).appendTo("body"); } @@ -305,7 +313,8 @@ angular.module('kibana.pie', []) elem.bind("plothover", function (event, pos, item) { if (item) { var percent = parseFloat(item.series.percent).toFixed(1) + "%"; - piett(pos.pageX, pos.pageY, percent + " " + (item.series.label||"")); + piett(pos.pageX, pos.pageY, "
" + + (item.series.label||"")+ " " + percent); } else { $("#pie-tooltip").remove(); }