Merge pull request #50 from rashidkpc/master

reorganized pie panel editor, added option to change legend position

common/css/main.css

@@ -106,6 +106,10 @@
   font-size: 85%;
 }
 
+.input-append label {
+  font-size: inherit !important;
+}
+
 .large {
   font-size: 120%;
 }

panels/hits/editor.html

@@ -1,36 +1,29 @@
 <div ng-controller="hits">
   <div class="row-fluid">
-    <div class="span2   "><label class="small">Font Size</label> 
-      <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
-    </div>
-    <div class="span2"> 
-      <label class="small">Aggregate</label><input type="checkbox" ng-model="panel.aggregate" ng-checked="panel.aggregate">
-    </div>
-    <div class="span3" ng-show="!panel.aggregate">
-      <label class="small">Counter Style</label> 
-      <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['none','horizontal','vertical']"></select></span>
-    </div>
-    
-  </div>
-  <h5 ng-show="!panel.aggregate">Chart Options</h5>
-    <div class="row-fluid" ng-show="!panel.aggregate">
-      <div class="span3"> 
+    <div class="span3"> 
       <label class="small">Style</label> 
-      <select class="input-small" ng-model="panel.chart" ng-options="f for f in ['none','bar','pie']"></select></span>
+      <select class="input-small" ng-model="panel.chart" ng-options="f for f in ['bar','pie','list','total']"></select></span>
+    </div>
+    <div class="span2" ng-show="panel.chart == 'total' || panel.chart == 'list'">
+      <label class="small">Font Size</label> 
+      <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
     </div>
-    <div class="row-fluid" >
-      <div class="span3" ng-show="!panel.aggregate"> 
+    <div class="span3" ng-show="panel.chart == 'bar' || panel.chart == 'pie'"> 
       <label class="small">Legend</label> 
-      <select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below']"></select></span>
+      <select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below','none']"></select></span>
+    </div>
+    <div class="span3" ng-show="panel.chart != 'total' && panel.counter_pos != 'none'">
+      <label class="small" >List Format</label> 
+      <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
     </div>
     <div class="span1" ng-show='panel.chart == "pie"'>
-      <label class="small"> Donut </label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
+      <label class="small">Donut</label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
     </div>
     <div class="span1" ng-show='panel.chart == "pie"'>
-      <label class="small"> Tilt </label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
+      <label class="small">Tilt</label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
     </div>
     <div class="span1" ng-show='panel.chart == "pie"'>
-      <label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
+      <label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
     </div>
   </div>
   <h5>Queries</h5>    

panels/hits/module.html

@@ -1,42 +1,42 @@
 <kibana-panel ng-controller='hits' ng-init="init()">
 
-  <div ng-show="panel.counters && panel.counter_pos == 'above'">
-    <!-- no chart, aggregated numbers -->    
-    <p ng-style="panel.style" ng-show="panel.aggregate">{{hits}}</p>
-
+  <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
     <!-- vertical legend -->
-    <table ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'vertical'">  
-      <tr style="line-height:{{panel.style['font-size']}}" ng-repeat="query in plot.getData()">
-        <td style="background:{{query.color}};width:{{panel.style['font-size']}}"></td> <td style="padding-right:10px;padding-left:10px;">{{query.label}}</td><td>{{query.data[0][1]}}</td>
+    <table class="small" ng-show="panel.arrangement == 'vertical'">  
+      <tr ng-repeat="query in plot.getData()">
+        <td><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></td> <td style="padding-right:10px;padding-left:10px;">{{query.label}}</td><td>{{query.data[0][1]}}</td>
       </tr>
     </table>
 
     <!-- horizontal legend -->
-    <div ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'horizontal'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
-     <span><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.data[0][1]}}) </span>
+    <div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
+     <span><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></span> {{query.label}} ({{query.data[0][1]}}) </span>
     </div><br>
 
   </div>
+
   <div style="clear:both"></div>
-  <div ng-show='panel.chart != "none" && !panel.aggregate ' hits-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
 
-  <div ng-show="panel.counters && panel.counter_pos == 'below'">
-    <!-- no chart, aggregated numbers -->    
-    <p ng-style="panel.style" ng-show="panel.aggregate">{{hits}}</p>
+  <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" hits-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
+
+  <div ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
 
     <!-- vertical legend -->
-    <table ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'vertical'">  
-      <tr style="line-height:{{panel.style['font-size']}}" ng-repeat="query in plot.getData()">
-        <tdstyle="background:{{query.color}};width:{{panel.style['font-size']}}"></td> <td style="padding-right:10px;padding-left:10px;">{{query.label}}</td><td>{{query.data[0][1]}}</td>
+    <table class="small" ng-show="panel.arrangement == 'vertical'">  
+      <tr ng-repeat="query in plot.getData()">
+        <td><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></td> <td style="padding-right:10px;padding-left:10px;">{{query.label}}</td><td>{{query.data[0][1]}}</td>
       </tr>
     </table>
 
     <!-- horizontal legend -->
-    <div ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'horizontal'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
-     <span><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.data[0][1]}}) </span>
+    <div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
+     <span><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></span> {{query.label}} ({{query.data[0][1]}}) </span>
     </div><br>
 
   </div>
 
+  <div ng-show="panel.chart == 'total'"><div ng-style="panel.style" style="line-height:{{panel.style['font-size']}}">{{hits}}</div></div>
+
+  <span ng-show="panel.chart == 'list'"><span ng-style="panel.style" style="line-height:{{panel.style['font-size']}}" ng-repeat="query in data">{{query.label}} ({{query.hits}})<span></span><br ng-show="panel.arrangement == 'vertical' && panel.chart == 'list'">
 
 </kibana-panel>         

panels/hits/module.js

@@ -98,7 +98,6 @@ angular.module('kibana.hits', [])
 
           i++;
         });
-
         $scope.$emit('render');
         if(_segment < $scope.panel.index.length-1) 
           $scope.get_data(_segment+1,query_id)
@@ -200,6 +199,10 @@ angular.module('kibana.hits', [])
                 colors: ['#86B22D','#BF6730','#1D7373','#BFB930','#BF3030','#77207D']
               });
 
+            // Compensate for the height of the  legend. Gross
+            elem.height(
+              (scope.panel.height || scope.row.height).replace('px','') - $("#"+scope.$id+"-legend").height())
+
             // Work around for missing legend at initialization
             if(!scope.$$phase)
               scope.$apply()

panels/pie/editor.html

@@ -1,28 +1,32 @@
 <div class="row-fluid" ng-switch="panel.mode" ng-controller="pie">
   <div ng-switch-when="terms">
-    <div class="row-fluid">    
-      <div class="span4">
+    <div class="row-fluid">
+      <div class="span3">
+        <label class="small">Mode</label> 
+        <select class="input-small" ng-change="set_mode(panel.mode)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select>
+      </div> 
+      <div class="span3">
         <form style="margin-bottom: 0px">
-          <h6> Field</h6>
+          <label class="small">Field</label>
           <input type="text" style="width:90%" bs-typeahead="fields.list" ng-model="panel.query.field">
         </form>
       </div>
-      <div class="span8">
+      <div class="span5">
         <form class="input-append" style="margin-bottom: 0px">
-          <h6>Query</h6>
+          <label class="small">Query</label>
           <input type="text" style="width:80%" ng-model="panel.query.query">
           <button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
         </form>
       </div>
     </div>  
     <div class="row-fluid">
-      <div class="span1">
-        <h6>Length</h6>
+      <div class="span3">
+        <label class="small">Length</label>
         <input type="number" style="width:80%" ng-model="panel.size" ng-change="get_data()">
       </div>
-      <div class="span11">
+      <div class="span8">
         <form class="input-append" style="margin-bottom: 0px">
-          <h6>Exclude Terms(s) (comma seperated)</h6>
+          <label class="small">Exclude Terms(s) (comma seperated)</label>
           <input array-join type="text" style="width:90%"  ng-model='panel.exclude'></input>
           <button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
         </form>
@@ -30,16 +34,20 @@
     </div>
   </div>
   <div ng-switch-when="goal">
-    <div class="row-fluid">    
+    <div class="row-fluid">
+      <div class="span3">
+        <label class="small">Mode</label> 
+        <select class="input-small" ng-change="set_mode(panel.mode)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select>
+      </div>   
       <div class="span2">
         <form style="margin-bottom: 0px">
-          <h6>Goal</h6>
+          <label class="small">Goal</label>
           <input type="number" style="width:90%" ng-model="panel.query.goal">
         </form>
       </div>
-      <div class="span9">
+      <div class="span5">
         <form class="input-append" style="margin-bottom: 0px">
-          <h6>Query</h6>
+          <label class="small">Query</label>
           <input type="text" style="width:80%" ng-model="panel.query.query">
           <button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
         </form>
@@ -54,15 +62,12 @@
   <div class="span1">
     <label class="small"> Tilt </label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
   </div>
-  <div class="span1">
-    <label class="small"> Legend </label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend">
-  </div>
   <div class="span1">
     <label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
   </div>
-  <div class="span2">
-    <label class="small">Mode</label> 
-    <select class="input-small" ng-change="set_mode(panel.mode)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select>
+  <div class="span3"> 
+    <label class="small">Legend</label> 
+    <select class="input-small" ng-model="panel.legend" ng-options="f for f in ['above','below','none']"></select></span>
   </div>
 </div>
 <h5>Panel Spy</h5>

panels/pie/module.html

@@ -3,10 +3,14 @@
       <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
   </span>
 
-  <div ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
+  <div ng-show="panel.legend == 'above'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
     <span ng-show='panel.chart != "none"'><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
   </div><br>
   <div style="clear:both"></div>
 
   <div pie params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
+
+  <div ng-show="panel.legend == 'below'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
+    <span ng-show='panel.chart != "none"'><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
+  </div>
 </kibana-panel>         

panels/pie/module.js

@@ -12,7 +12,7 @@ angular.module('kibana.pie', [])
     labels  : true,
     mode    : "terms",
     group   : "default",
-    default_field : '_all',
+    default_field : 'DEFAULT',
     spyable : true,
   }
   _.defaults($scope.panel,_d)
@@ -122,7 +122,7 @@ angular.module('kibana.pie', [])
         var complete  = results.hits.total;
         var remaining = $scope.panel.query.goal - complete;
         $scope.data = [
-          { label : 'Complete', data : complete, color: '#51A351' },
+          { label : 'Complete', data : complete, color: '#86B22D' },
           { data : remaining, color: '#EEE'}]
         $scope.$emit('render');
       });

panels/stringquery/module.js

@@ -34,7 +34,7 @@ angular.module('kibana.stringquery', [])
       $scope.panel.query = new Array($scope.panel.query)
       $scope.panel.query.push("")
     }
-  } 
+  }
 
   $scope.set_multi = function(multi) {
     $scope.panel.query = multi ?