Removed loops to build legend, replaced by adding plot to scope

panels/histogram/editor.html

@@ -33,14 +33,14 @@
     </div>
   </div>
   <h5>Chart Options</h5>
-  <div class="row-fluid">
+  <div class="row-fluid" style="margin-bottom:10px;">
     <div class="span1"> <label class="small">Bars</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
     <div class="span1"> <label class="small">Lines</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
     <div class="span1"> <label class="small">Points</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
     <div class="span1"> <label class="small">Stack</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
     <div class="span1"> <label class="small">Legend</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
-    <div class="span1"> <label class="small">x-Axis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
-    <div class="span1"> <label class="small">y-Axis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
+    <div class="span1"> <label class="small">xAxis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
+    <div class="span1"> <label class="small">yAxis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
     <div class="span2" ng-show="panel.lines">
       <label class="small">Line Fill</label> 
       <select ng-change="$emit('render')" class="input-mini" ng-model="panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>

panels/histogram/module.html

@@ -7,7 +7,7 @@
     <a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a>
     <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a>
   </span> | 
-  <span ng-show="panel.legend" ng-repeat='series in legend' style='display:inline-block;padding-right:5px'>
+  <span ng-show="panel.legend" ng-repeat='series in plot.getData()' style='display:inline-block;padding-right:5px'>
     <div style="display:inline-block;background:{{series.color}};height:10px;width:10px;border-radius:5px;"></div>
     <div class='small' style='display:inline-block'>{{series.label}} ({{series.hits}})</div>
   </span><span class="small"> per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> total)</span>

panels/histogram/module.js

@@ -23,6 +23,8 @@ angular.module('kibana.histogram', [])
 
   $scope.init = function() {
     eventBus.register($scope,'time', function(event,time){$scope.set_time(time)});
+    
+    // Consider eliminating the check for array, this should always be an array
     eventBus.register($scope,'query', function(event, query) {
       if(_.isArray(query)) {
         $scope.panel.query = _.map(query,function(q) {
@@ -33,6 +35,7 @@ angular.module('kibana.histogram', [])
       }
       $scope.get_data();
     });
+
     // Now that we're all setup, request the time from our group if we don't 
     // have it yet
     if(_.isUndefined($scope.time))
@@ -60,9 +63,8 @@ angular.module('kibana.histogram', [])
     if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
       return
 
-    var _segment = _.isUndefined(segment) ? 0 : segment
-
     $scope.panel.loading = true;
+    var _segment = _.isUndefined(segment) ? 0 : segment
     var request = $scope.ejs.Request().indices($scope.panel.index[_segment]);
     
     // Build the question part of the query
@@ -76,7 +78,7 @@ angular.module('kibana.histogram', [])
       )
     });
 
-    // Build the facet part
+    // Build the facet part, injecting the query in as a facet filter
     _.each(queries, function(v) {
       request = request
         .facet($scope.ejs.DateHistogramFacet("chart"+_.indexOf(queries,v))
@@ -86,6 +88,7 @@ angular.module('kibana.histogram', [])
         ).size(0)
     })
 
+    // Populate the inspector panel
     $scope.populate_modal(request);
 
     // Then run it
@@ -106,17 +109,11 @@ angular.module('kibana.histogram', [])
         return;
       }
 
-
+      // Make sure we're still on the same query
       if($scope.query_id === query_id) {
 
         var i = 0;
         _.each(results.facets, function(v, k) {
-          // If this isn't a date histogram it must be a QueryFacet, get the
-          // count and return
-          if(v._type !== 'date_histogram') {
-            //$scope.hits += v.count;
-            return
-          }
 
           // Null values at each end of the time range ensure we see entire range
           if(_.isUndefined($scope.data[i]) || _segment == 0) {
@@ -131,14 +128,14 @@ angular.module('kibana.histogram', [])
           var segment_data = [];
           _.each(v.entries, function(v, k) {
             segment_data.push([v['time'],v['count']])
-            hits += v['count'];
-            $scope.hits += v['count'];
+            hits += v['count']; // The series level hits counter
+            $scope.hits += v['count']; // Entire dataset level hits counter
           });
 
-          data.splice.apply(data,[1,0].concat(segment_data))
+          data.splice.apply(data,[1,0].concat(segment_data)) // Join histogram data
 
 
-          // Create the flot series
+          // Create the flot series object
           var series = { 
             data: {
               label: $scope.panel.query[i].label || "query"+(parseInt(i)+1), 
@@ -155,7 +152,10 @@ angular.module('kibana.histogram', [])
           i++;
         });
 
+        // Tell the histogram directive to render.
         $scope.$emit('render')
+
+        // If we still have segments left, get them
         if(_segment < $scope.panel.index.length-1) {
           $scope.get_data(_segment+1,query_id)
         }
@@ -209,8 +209,6 @@ angular.module('kibana.histogram', [])
 
       // Function for rendering panel
       function render_panel() {
-        // Determine format
-
         // Set barwidth based on specified interval
         var barwidth = interval_to_seconds(scope.panel.interval)*1000
 
@@ -226,10 +224,8 @@ angular.module('kibana.histogram', [])
 
           // Populate element
           try { 
-            var plot = $.plot(elem, scope.data, {
-              legend: { 
-                show: false,
-              },
+            scope.plot = $.plot(elem, scope.data, {
+              legend: { show: false },
               series: {
                 stack:  stack,
                 lines:  { 
@@ -265,11 +261,6 @@ angular.module('kibana.histogram', [])
               colors: ['#EB6841','#00A0B0','#6A4A3C','#EDC951','#CC333F']
             })
             
-            scope.legend = [];
-            _.each(plot.getData(),function(series) {
-              scope.legend.push(_.pick(series,'label','color','hits'))
-            })
-            
             // Work around for missing legend at initialization
             if(!scope.$$phase)
               scope.$apply()

panels/hits/module.html

@@ -2,11 +2,11 @@
   <div ng-show="panel.counters">
     <p ng-style="panel.style" ng-show="panel.aggregate">{{hits}}</p>
     <table ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'vertical'">  
-      <tr style="line-height:{{panel.style['font-size']}}" ng-repeat="query in data">
+      <tr style="line-height:{{panel.style['font-size']}}" ng-repeat="query in plot.getData()">
         <td ng-show="panel.chart" style="background:{{query.color}};width:{{panel.style['font-size']}}"></td> <td style="padding-right:10px;padding-left:10px;">{{query.label}}</td><td>{{query.hits}}</td>
       </tr>
     </table>
-    <div ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left;padding-left: 10px;">
+    <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 ng-show='panel.chart'><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.hits}}) <span ng-show="!$last">|</span>
     </div><br>
   </div><div style="clear:both"></div>

panels/hits/module.js

@@ -148,7 +148,8 @@ angular.module('kibana.hits', [])
         scripts.wait(function(){
           // Populate element
           try {
-            var plot = $.plot(elem, scope.data, {
+            // Add plot to scope so we can build out own legend 
+            scope.plot = $.plot(elem, scope.data, {
               legend: { show: false },
               series: {
                 lines:  { show: false, },
@@ -167,12 +168,6 @@ angular.module('kibana.hits', [])
               colors: ['#EB6841','#00A0B0','#6A4A3C','#EDC951','#CC333F']
             })
             
-            var i = 0;
-            _.each(plot.getData(),function(series) {
-              scope.data[i].color = series.color;
-              i++;
-            })
-            
             // Work around for missing legend at initialization
             if(!scope.$$phase)
               scope.$apply()