added charts to micropanel in table

index.html

@@ -39,7 +39,7 @@
     <div class="navbar navbar-static-top">
       <div class="navbar-inner">
         <div class="container-fluid">
-          <p class="navbar-text pull-right"><small><strong>Kibana 3</strong> <small>milestone 3</small></small></p>
+          <p class="navbar-text pull-right version"><strong>Kibana 3</strong> milestone 3</p>
           <span class="brand">{{dashboard.current.title}}</span>
           <div class="brand"><i class='icon-cog pointer' ng-show='dashboard.current.editable' bs-modal="'partials/dasheditor.html'"></i></div>
         </div>

js/shared.js

@@ -179,7 +179,7 @@
   };
 
   kbn.to_percent = function(number,outof) {
-    return Math.round((number/outof)*10000)/100 + "%";
+    return Math.floor((number/outof)*10000)/100 + "%";
   };
 
   kbn.addslashes = function(str) {

panels/table/micropanel.html

@@ -5,21 +5,27 @@ <h4>
   <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';

vendor/bootstrap/less/overrides.less

@@ -2,6 +2,10 @@
   font-size: 12px;
 }
 
+.version {
+  font-size: 85%;
+}
+
 .legend {
   color: @black;
 }
@@ -129,7 +133,7 @@
 }
 
 .popover {
-  max-width: 500px;
+  max-width: 480px;
 }
 
 .modal {