Added terms panel, deprecated pie panel

rashidkpc · Jul 26, 2013 · 3a06457 · 3a06457
1 parent 13fc14f
commit 3a06457
Show file tree

Hide file tree

Showing 5 changed files with 415 additions and 7 deletions.
diff --git a/config.js b/config.js
@@ -22,6 +22,7 @@ var config = new Settings(
   kibana_index:     "kibana-int", 
   modules:          ['histogram','map','pie','table','filtering',
                     'timepicker','text','fields','hits','dashcontrol',
-                    'column','derivequeries','trends','bettermap','query'],
+                    'column','derivequeries','trends','bettermap','query',
+                    'terms'],
   }
 );
diff --git a/panels/pie/module.js b/panels/pie/module.js
@@ -25,10 +25,10 @@ angular.module('kibana.pie', [])
 .controller('pie', function($scope, $rootScope, querySrv, dashboard, filterSrv) {
 
   $scope.panelMeta = {
-    status  : "Deprecating Soon",
+    status  : "Deprecated",
     description : "Uses an Elasticsearch terms facet to create a pie chart. You should really only"+
-      " point this at not_analyzed fields for that reason. This panel is going away soon, to be"+
-      " replaced with a panel that can represent a terms facet in a variety of ways."
+      " point this at not_analyzed fields for that reason. This panel is going away soon, it has"+
+      " <strong>been replaced by the terms panel</strong>. Please use that one instead."
   };
 
   // Set and populate defaults
@@ -247,11 +247,10 @@ angular.module('kibana.pie', [])
           colors: querySrv.colors
         };
 
-        // Populate element
+        // Populate legend
         if(elem.is(":visible")){
           scripts.wait(function(){
-            scope.plot = $.plot(elem, scope.data, pie);
-            scope.legend = scope.plot.getData();
+            scope.legend = $.plot(elem, scope.data, pie).getData();
             if(!scope.$$phase) {
               scope.$apply();
             }

diff --git a/panels/terms/editor.html b/panels/terms/editor.html
@@ -0,0 +1,50 @@
+<div>
+  <div class="row-fluid">
+    <div class="span2">
+      <label class="small">Field</label>
+      <input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.field" ng-change="set_refresh(true)">
+    </div>
+    <div class="span2">
+      <label class="small">Length</label>
+      <input class="input-small" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
+    </div>
+    <div class="span6">
+      <label class="small">Exclude Terms(s) (comma seperated)</label>
+      <input array-join type="text" ng-model='panel.exclude'></input>
+    </div>
+  </div>  
+  <div class="row-fluid">
+    <div class="span2"> 
+      <label class="small">Style</label> 
+      <select class="input-small" ng-model="panel.chart" ng-options="f for f in ['bar','pie','table']"></select></span>
+    </div>
+    <div class="span2" ng-show="panel.chart == 'table'">
+      <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" 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','none']"></select></span>
+    </div>
+    <div class="span3" ng-show="panel.chart != 'table' && panel.counter_pos != 'none'">
+      <label class="small" >Legend Format</label> 
+      <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
+    </div>
+    <div class="span1">
+      <label class="small">Missing</label><input type="checkbox" ng-model="panel.missing" ng-checked="panel.missing">
+    </div>
+    <div class="span1">
+      <label class="small">Other</label><input type="checkbox" ng-model="panel.other" ng-checked="panel.other">
+    </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">
+    </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">
+    </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">
+    </div>
+  </div>
+  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
+</div>
diff --git a/panels/terms/module.html b/panels/terms/module.html
@@ -0,0 +1,56 @@
+<kibana-panel ng-controller='terms' ng-init="init()">
+
+  <!-- START Pie or bar chart -->
+  <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
+    <!-- vertical legend above -->
+    <table class="small" ng-show="panel.arrangement == 'vertical'">  
+      <tr ng-repeat="term in legend">
+        <td><i class="icon-circle" ng-style="{color:term.color}"></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}</td>
+      </tr>
+    </table>
+
+    <!-- horizontal legend above -->
+    <div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
+     <span><i class="icon-circle" ng-style="{color:term.color}"></i> {{term.label}} ({{term.data[0][1]}}) </span>
+    </div><br>
+
+  </div>
+
+  <!-- keep legend from over lapping -->
+  <div style="clear:both"></div>
+
+  <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" terms-chart params="{{panel}}" style="position:relative"></div>
+
+  <div ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
+    <!-- vertical legend below -->
+    <table class="small" ng-show="panel.arrangement == 'vertical'">  
+      <tr ng-repeat="term in legend">
+        <td><i class="icon-circle" ng-style="{color:term.color}"></i></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}</td>
+      </tr>
+    </table>
+
+    <!-- horizontal legend below -->
+    <div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
+     <span><i class="icon-circle" ng-style="{color:term.color}"></i></span> {{term.label}} ({{term.data[0][1]}}) </span>
+    </div><br>
+
+  </div>
+  <!-- END Pie or Bar chart -->
+
+  <table ng-style="panel.style" class="table table-striped table-condensed" ng-show="panel.chart == 'table'">  
+    <thead>
+      <th>Term</th> <th>Count</th> <th>Action</th>
+    </thead>
+    <tr ng-repeat="term in data" ng-show="showMeta(term)">
+      <td>{{term.label}}</td>
+      <td>{{term.data[0][1]}}</td>
+      <td>
+        <span ng-hide="term.meta == 'other'">
+          <i class='icon-search pointer' ng-click="build_search(term)"></i> 
+          <i class='icon-ban-circle pointer' ng-click="build_search(term,true)"></i>
+        </span>
+      </td>
+    </tr>
+  </table>
+
+</kibana-panel>