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

1d51e96c · Rashid Khan · ed297092 · 1d51e96c · 1d51e96c · 1d51e96c
Commit 1d51e96c authored Apr 09, 2013 by Rashid Khan
Hide whitespace changes
Inline Side-by-side

Showing with 25 additions and 39 deletions

panels/histogram/editor.html
+3 -3

panels/histogram/module.html
+1 -1

panels/histogram/module.js
+16 -25

panels/hits/module.html
+2 -2

panels/hits/module.js
+3 -8

No files found.
--- a/panels/histogram/editor.html
+++ b/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">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">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">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>

--- a/panels/histogram/module.html
+++ b/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>

--- a/panels/histogram/module.js
+++ b/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'];
+            hits += v['count']; // The series level hits counter
-            $scope.hits += v['count'];
+            $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, {
+            scope.plot = $.plot(elem, scope.data, {
-              legend: { 
+              legend: { show: false },
-                show: false,
-              },
              series: {
                stack:  stack,
                lines:  { 
@@ -264,11 +260,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)

--- a/panels/hits/module.html
+++ b/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>

--- a/panels/hits/module.js
+++ b/panels/hits/module.js
@@ -147,8 +147,9 @@ angular.module('kibana.hits', [])
        // Populate element. Note that jvectormap appends, does not replace.
        scripts.wait(function(){
          // Populate element
-          try { 
+          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, },
@@ -166,12 +167,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)