Changed histogram legend to scale better, fixed parallel query bug

panels/histogram/module.html

@@ -6,5 +6,11 @@
     <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>
   </center>
+  <div>
+  <span ng-repeat='series in legend' style='display:inline-block;padding-right:5px'>
+    <div style="display:inline-block;background:{{series.color}};height:10px;width:10px"></div>
+    <div class='small' style='display:inline-block'>{{series.label}} / {{panel.interval}}</div>
+  </span>
+  </div>
   <div histogram params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
 </kibana-panel>         

panels/histogram/module.js

@@ -47,7 +47,7 @@ angular.module('kibana.histogram', [])
     $scope.get_data();
   }
 
-  $scope.get_data = function(segment) {
+  $scope.get_data = function(segment,query_id) {
     // Make sure we have everything for the request to complete
     if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
       return
@@ -87,9 +87,12 @@ angular.module('kibana.histogram', [])
     results.then(function(results) {
       $scope.panel.loading = false;
       $scope.hits = results.hits.total;
-      if(_segment == 0)
+      if(_segment == 0) {
         $scope.data = [];
+        query_id = $scope.query_id = new Date().getTime();
+      }
       
+      if($scope.query_id === query_id) {
         _.each(results.facets, function(v, k) {
           // Null values at each end of the time range ensure we see entire range
           if(_.isUndefined($scope.data[k]) || _segment == 0) {
@@ -118,9 +121,13 @@ angular.module('kibana.histogram', [])
           
           $scope.data[k] = series.data
         });
+
         $scope.$emit('render')
-      if(_segment < $scope.panel.index.length-1) 
-        $scope.get_data(_segment+1)
+        if(_segment < $scope.panel.index.length-1) {
+          $scope.get_data(_segment+1,query_id)
+        }
+      
+      }
     });
   }
 
@@ -155,8 +162,13 @@ angular.module('kibana.histogram', [])
     restrict: 'A',
     link: function(scope, elem, attrs, ctrl) {
 
+      var height = scope.panel.height || scope.row.height;
 
-      elem.html('<center><img src="common/img/load_big.gif"></center>')
+      elem.html(
+        '<div class="legend_container"></div>'+
+        '<div class="chart" style="height:'+height+'">'+
+         '<center><img src="common/img/load_big.gif"></center>'+
+        '</div>')
 
       // Receive render events
       scope.$on('render',function(){
@@ -195,20 +207,16 @@ angular.module('kibana.histogram', [])
         // Populate element. Note that jvectormap appends, does not replace.
         scripts.wait(function(){
           // Populate element
-          try { $.plot(elem, scope.data, {
+          try { 
+            var plot = $.plot($('.chart',elem), scope.data, {
               legend: { 
-              show: show.legend,
-              position: "nw", 
-              labelFormatter: function(label, series) {
-                return '<span class="legend">' + label + ' / ' + 
-                  scope.panel.interval + '</span>';
-              }
+                show: false,
               },
               series: {
                 stack:  show.stack,
                 lines:  { show: show.lines, fill: scope.panel.fill/10 },
                 bars:   { show: show.bars,  fill: 1, barWidth: barwidth/1.8 },
-              points: { show: show.points },
+                points: { show: show.points, fill: 1, fillColor: false},
                 shadowSize: 1
               },
               yaxis: { show: show['y-axis'], min: 0, color: "#000" },
@@ -232,8 +240,13 @@ angular.module('kibana.histogram', [])
               },
               colors: ['#EB6841','#00A0B0','#6A4A3C','#EDC951','#CC333F']
             })
+
+            scope.legend = [];
+            _.each(plot.getData(),function(series) {
+              scope.legend.push(_.pick(series,'label','color'))
+            })
           } catch(e) {
-            console.log(e)
+            elem.text(e)
           }
         })
       }

panels/table/module.js

@@ -105,6 +105,7 @@ angular.module('kibana.table', [])
       $scope.panel.loading = false;
 
       if(_segment === 0) {
+        $scope.hits = 0;
         $scope.data = [];
         query_id = $scope.query_id = new Date().getTime()
       }
@@ -114,8 +115,6 @@ angular.module('kibana.table', [])
         return;
       }
       $scope.panel.error =  false;
-      $scope.hits = results.hits.total;
-
 
       // Check that we're still on the same query, if not stop
       if($scope.query_id === query_id) {
@@ -123,6 +122,8 @@ angular.module('kibana.table', [])
           return flatten_json(hit['_source']);
         }));
         
+        $scope.hits += results.hits.total;
+
         // Sort the data
         $scope.data = _.sortBy($scope.data, function(v){
           return v[$scope.panel.sort[0]]