Merge pull request #35 from rashidkpc/master

pie and histogram cleanup

panels/histogram/module.html

@@ -8,7 +8,7 @@
     <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a>
   </span> | 
   <span ng-show="panel.legend" ng-repeat='series in legend' style='display:inline-block;padding-right:5px'>
-    <div style="display:inline-block;background:{{series.color}};height:10px;width:10px"></div>
+    <div style="display:inline-block;background:{{series.color}};height:10px;width:10px;border-radius:5px;"></div>
     <div class='small' style='display:inline-block'>{{series.label}} ({{series.hits}})</div>
   </span><span class="small"> per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> total)</span>
   </div>

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,
-            "<div style='vertical-align:middle;display:inline-block;background:"+item.series.color+";height:20px;width:20px'></div> "+
+            "<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) + " @ " + 
             new Date(item.datapoint[0]).format('mm/dd HH:MM:ss'));
         } else {

panels/hits/module.html

@@ -7,7 +7,7 @@
       </tr>
     </table>
     <div ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left;padding-left: 10px;">
-     <span ng-show='panel.chart'><div style="display:inline-block;background:{{query.color}};height:{{panel.style['font-size']}};width:{{panel.style['font-size']}}"></div></span> {{query.label}} ({{query.hits}}) <span ng-show="!$last">|</span>
+     <span ng-show='panel.chart'><div style="display:inline-block;border-radius:{{panel.style['font-size']}};background:{{query.color}};height:{{panel.style['font-size']}};width:{{panel.style['font-size']}}"></div></span> {{query.label}} ({{query.hits}}) <span ng-show="!$last">|</span>
     </div><br>
   </div><div style="clear:both"></div>
   <div ng-show='panel.chart && !panel.aggregate ' hits-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>

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,
-            "<div style='vertical-align:middle;display:inline-block;background:"+item.series.color+";height:20px;width:20px'></div> "+
+            "<div style='vertical-align:middle;border-radius:10px;display:inline-block;background:"+item.series.color+";height:20px;width:20px'></div> "+
             item.datapoint[1].toFixed(0))
         } else {
           $("#pie-tooltip").remove();

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);

panels/pie/module.html

@@ -2,6 +2,11 @@
   <span ng-show='panel.spyable' style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
       <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
   </span>
-  
+  <span ng-show="panel.legend" ng-repeat='series in legend' style='padding-right:5px'>
+    <div style='white-space:nowrap;display:table-cell'>
+      <div style="display:inline-block;background:{{series.color}};height:10px;width:10px;border-radius:5px;"></div>
+      <div class='small' style='display:inline-block'>{{series.label}} ({{series.percent}}%)</div>
+    </div>
+  </span>  
   <div pie params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
 </kibana-panel>         
\ No newline at end of file

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') : $('<div id="pie-tooltip"></div>');
-        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, "<div style='vertical-align:middle;display:inline-block;background:"+item.series.color+";height:15px;width:15px;border-radius:10px;'></div> " + 
+            (item.series.label||"")+ " " + percent);
         } else {
           $("#pie-tooltip").remove();
         }