added charts to micropanel in table

panels/table/micropanel.html

@@ -5,21 +5,27 @@
   <i class="pointer icon-ban-circle" ng-click="fieldExists(micropanel.field,'mustNot');dismiss();"></i>
   <br><small>{{micropanel.count}} events in the table set</small>
 </h4>
-<table style="width:480px" class='table table-bordered table-striped table-condensed'>
+<table style="width:100%" class='table table-striped table-condensed'>
   <thead>
     <th>{{micropanel.field}}</th>
     <th>Action</th>
-    <th>Count</th>
+    <th style="text-align:right">Count</th>
   </thead>
   <tbody>
     <tr ng-repeat='field in micropanel.values'>
       <td>{{{true: "__blank__",false:field[0]}[field[0] == ""]|tableTruncate:panel.trimFactor:3}}</td>
-      <td>
+      <td style="width:40px">
         <i class="pointer icon-search" ng-click="build_search(micropanel.field,field[0]);dismiss();"></i>
         <i class="pointer icon-ban-circle" ng-click="build_search(micropanel.field,field[0],true);dismiss();"></i>
       </td>
-      <td>{{field[1]}}</td>
+      <td class="progress" style="width:100px;position:relative">
+        <div bs-tooltip="percent(field[1],data.length)" class="bar {{micropanelColor($index)}}" ng-style="{width: percent(field[1],data.length)}"></div>
+        <span style="position:absolute;right:10px;">{{field[1]}}</span>
+      </td>
     </tr>
   </tbody>
 </table>
+<div class="progress">
+  <div ng-repeat='field in micropanel.values' bs-tooltip="field[0]+' ('+percent(field[1],data.length)+')'" class="bar {{micropanelColor($index)}}" ng-style="{width: percent(field[1],data.length)};"></div>
+</div>
 <span ng-repeat='(field,count) in micropanel.related'><a ng-click="toggle_field(field)">{{field}}</a> ({{Math.round((count / micropanel.count) * 100)}}%), </span>

panels/table/module.js

@@ -70,6 +70,8 @@ angular.module('kibana.table', [])
     $scope.get_data();
   };
 
+  $scope.percent = kbn.to_percent;
+
   $scope.toggle_micropanel = function(field) {
     var docs = _.pluck($scope.data,'_source');
     $scope.micropanel = {
@@ -80,6 +82,11 @@ angular.module('kibana.table', [])
     };
   };
 
+  $scope.micropanelColor = function(index) {
+    var _c = ['bar-success','bar-warning','bar-danger','bar-info','bar-primary'];
+    return index > _c.length ? '' : _c[index];
+  };
+
   $scope.set_sort = function(field) {
     if($scope.panel.sort[0] === field) {
       $scope.panel.sort[1] = $scope.panel.sort[1] === 'asc' ? 'desc' : 'asc';