Added pie and histogram editors

dashboards.js

@@ -193,8 +193,8 @@ var dashboards =
           labels  : false,
           colors  : ['#BF3030','#1D7373','#86B32D','#A60000','#006363','#679B00'],
           field   : 'country',
-          //query   : { query: "*", field: "country"}
-          query   : { field : "play_name", query : "*" },
+          mode    : "query",
+          query   : { query:"falstaff" }
         },
         {
           type    : "text",

panels/histogram/editor.html

@@ -0,0 +1,43 @@
+<div class="row-fluid">  
+  <div class="span3">
+    <form style="margin-bottom: 0px">
+      <h6>Label</h6>
+      <input type="text" placeholder="New Label" style="width:70%" ng-model="newlabel">
+    </form>
+  </div>
+  <div class="span8">
+    <form class="input-append" style="margin-bottom: 0px">
+      <h6>Query</h6>
+      <input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
+      <button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery=''"><i class="icon-plus"></i></button>
+    </form>
+  </div>
+  <div class="span1">
+  </div>
+</div>
+<div class="row-fluid" ng-repeat="q in panel.query">        
+  <div class="span3">
+    <form style="margin-bottom: 0px">
+      <input type="text" style="width:70%" ng-model="q.label" ng-change="render_panel()">
+    </form>
+  </div>
+  <div class="span8">
+    <form class="input-append" style="margin-bottom: 0px">
+      <input type="text" style="width:80%" ng-model="q.query">
+      <button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
+    </form>
+  </div>
+  <div class="span1">
+    <i class="icon-remove" ng-click="remove_query(q);get_data()"></i>
+  </div>
+</div>
+<div class="row-fluid">    
+  <div class="span3">
+    <label class="small">Effect Options</label> 
+    <select multiple style="width:95%" ng-model="panel.show" ng-options="f for f in ['bars','points','stack','lines']"></select>
+  </div>
+  <div class="span2">
+    <label class="small">Fill (0.0 - 1.0)</label> 
+    <input type="number" class="input-mini" ng-model="panel.fill">
+  </div>
+</div>

panels/histogram/module.js

@@ -5,9 +5,8 @@ angular.module('kibana.histogram', [])
 
   // Set and populate defaults
   var _d = {
-    query   : "*",
+    query   : { query: "*" },
     interval: secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
-    color   : "#27508C",
     show    : ['bars'],
     fill    : false,
     group   : "default",
@@ -24,6 +23,18 @@ angular.module('kibana.histogram', [])
     eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
   }
 
+  $scope.remove_query = function(q) {
+    $scope.panel.query = _.without($scope.panel.query,q);
+  }
+
+  $scope.add_query = function(label,query) {
+    $scope.panel.query.unshift({
+      query: query,
+      label: label, 
+    });
+    $scope.get_data();
+  }
+
   $scope.get_data = function() {
     // Make sure we have everything for the request to complete
     if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time))
@@ -68,7 +79,7 @@ angular.module('kibana.histogram', [])
         data.push([$scope.panel.time.to.getTime(), null])
         
         var series = { data: {
-          label: $scope.panel.query[k].label, 
+          label: $scope.panel.query[k].label || k, 
           data: data,
         }};
 

panels/pie/editor.html

@@ -1,18 +1,68 @@
-<h4 style="text-transform: capitalize;">{{panel.type}} <small> panel settings</small></h4>
-<div class="row-fluid">    
-  <div class="span4">
-    <form class="input-append">
-      <h5>Field</h5>
-      <input type="text" style="width:70%" ng-model="panel.query.field">
-      <button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
-    </form>
+<div class="row-fluid" ng-switch="panel.mode">
+  <div ng-switch-when="terms">
+    <div class="row-fluid">    
+      <div class="span4">
+        <form style="margin-bottom: 0px">
+          <h6> Field</h6>
+          <input type="text" style="width:90%" ng-model="panel.query.field">
+        </form>
+      </div>
+      <div class="span8">
+        <form class="input-append" style="margin-bottom: 0px">
+          <h6>Query</h6>
+          <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>
+        <input type="number" style="width:80%" ng-model="panel.size" ng-change="get_data()">
+      </div>
+      <div class="span11">
+        <form class="input-append" style="margin-bottom: 0px">
+          <h6>Exclude Terms(s) (comma seperated)</h6>
+          <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>
+      </div>
+    </div>
   </div>
-  <div class="span8">
-    <form class="input-append">
-      <h5>Query</h5>
-      <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 ng-switch-when="query">
+    <div class="row-fluid">    
+      <div class="span1">
+      </div>
+      <div class="span3">
+        <form style="margin-bottom: 0px">
+          <h6>Label</h6>
+          <input type="text" placeholder="New Label" style="width:70%" ng-model="newlabel">
+        </form>
+      </div>
+      <div class="span8">
+        <form class="input-append" style="margin-bottom: 0px">
+          <h6>Query</h6>
+          <input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
+          <button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery=''"><i class="icon-plus"></i></button>
+        </form>
+      </div>
+    </div>
+    <div class="row-fluid" ng-repeat="q in panel.query">
+      <div class="span1">
+        <i class="icon-remove" ng-click="remove_query(q)"></i>
+      </div>    
+      <div class="span4">
+        <form style="margin-bottom: 0px">
+          <input type="text" style="width:70%" ng-model="q.label">
+        </form>
+      </div>
+      <div class="span8">
+        <form class="input-append" style="margin-bottom: 0px">
+          <input type="text" style="width:80%" ng-model="q.query">
+          <button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
+        </form>
+      </div>
+    </div>
   </div>
 </div>
 <div class="row-fluid">    
@@ -28,15 +78,8 @@
   <div class="span1">
     <label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
   </div>
-</div>
-<div class="row-fluid">    
-  <div class="span4">
-    <h5>Sort</h5>
-    <select style="width:85%" ng-model="panel.sort[0]" ng-options="f for f in all_fields"></select>
-    <i ng-click="set_sort(panel.sort[0])" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
-  </div>
-  <div class="span1">
-    <h5>Length</h5>
-    <input type="number" class="input-mini" ng-model="panel.size" ng-change="get_data()">
+  <div class="span2">
+    <label class="small">Mode</label> 
+    <select class="input-small" ng-model="panel.mode" ng-options="f for f in ['query','terms']"></select>
   </div>
 </div>

panels/pie/module.js

@@ -8,29 +8,41 @@ angular.module('kibana.pie', [])
 
   // Set and populate defaults
   var _d = {
-    query   : "*",
+    query   : { field:"_all", query:"*" }, 
     size    : 100,
     exclude : [],
     donut   : false,
     tilt    : false,
     legend  : true,
     labels  : true,
-    group   : "default"
+    mode    : "terms",
+    group   : "default",
+    default_field : '_all'
   }
   _.defaults($scope.panel,_d)
 
   $scope.init = function() {
     eventBus.register($scope,'time', function(event,time){set_time(time)});
-    if(!(_.isArray($scope.panel.query))) {
-      eventBus.register($scope,'query', function(event, query) {
+    eventBus.register($scope,'query', function(event, query) {
+      if($scope.panel.mode === 'terms') {
         $scope.panel.query.query = query;
         $scope.get_data();
-      });
-    }
+      }
+    });
     // Now that we're all setup, request the time from our group
     eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
   }
 
+  $scope.add_query = function(label,query) {
+    if($scope.panel.mode !== 'query') 
+      return false;
+    $scope.panel.query.unshift({
+      query: query,
+      label: label, 
+    });
+    $scope.get_data();
+  }
+
   $scope.get_data = function() {
     // Make sure we have everything for the request to complete
     if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time))
@@ -39,7 +51,9 @@ angular.module('kibana.pie', [])
     var request = $scope.ejs.Request().indices($scope.panel.index);
 
     // If we have an array, use query facet
-    if(_.isArray($scope.panel.query)) {
+    if($scope.panel.mode == "query") {
+      if(!(_.isArray($scope.panel.query)))
+        $scope.panel.query = [$scope.panel.query];
       var queries = [];
       // Build the question part of the query
       _.each($scope.panel.query, function(v) {
@@ -66,7 +80,9 @@ angular.module('kibana.pie', [])
         $scope.data = [];
         _.each(results.facets, function(v, k) {
           var series = {};
-          var slice = { label : $scope.panel.query[k].label, data : v.count }; 
+          var label = _.isUndefined($scope.panel.query[k].label) ? 
+            $scope.panel.query[k].query : $scope.panel.query[k].label 
+          var slice = { label : label, data : v.count }; 
           if (!(_.isUndefined($scope.panel.query[k].color)))
             slice.color = $scope.panel.query[k].color;
           $scope.data.push(slice)
@@ -76,7 +92,7 @@ angular.module('kibana.pie', [])
     } else {
       var results = request
         .facet(ejs.TermsFacet('pie')
-          .field($scope.panel.query.field)
+          .field($scope.panel.query.field || $scope.panel.default_field)
           .size($scope.panel['size'])
           .exclude($scope.panel.exclude)
           .facetFilter(ejs.QueryFilter(