Browse Source

Added disabling of counts, configurable min/max, and display of query in legend

Rashid Khan 12 years ago
parent
commit
8454a95113

+ 4 - 0
src/app/components/underscore.extended.js

@@ -18,6 +18,10 @@ function () {
       array.splice(index, 1);
       return array;
     },
+    // If variable is value, then return alt. If variable is anything else, return value;
+    toggle: function (variable, value, alt) {
+      return variable === value ? alt : value;
+    },
     toggleInOut: function(array,value) {
       if(_.contains(array,value)) {
         array = _.without(array,value);

+ 5 - 1
src/app/panels/histogram/module.html

@@ -45,7 +45,11 @@
     </span>
     <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
       <i class='icon-circle' ng-style="{color: series.info.color}"></i>
-      <span class='small histogram-legend-item'>{{series.info.alias}} ({{series.hits}})</span>
+      <span class='small histogram-legend-item'>
+        <span ng-if="panel.show_query">{{series.info.alias || series.info.query}}</span>
+        <span ng-if="!panel.show_query">{{series.info.alias}}</span>
+        <span ng-show="panel.legend_counts"> ({{series.hits}})</span>
+      </span>
     </span>
     <span ng-show="panel.legend" class="small"><span ng-show="panel.derivative">change in </span><span class="strong" ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> hits)</span>
   </div>

+ 41 - 31
src/app/panels/histogram/module.js

@@ -78,42 +78,52 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
     // Set and populate defaults
     var _d = {
-      mode        : 'count',
-      time_field  : '@timestamp',
-      queries     : {
-        mode        : 'all',
-        ids         : []
+      mode          : 'count',
+      time_field    : '@timestamp',
+      queries       : {
+        mode          : 'all',
+        ids           : []
       },
-      value_field : null,
-      auto_int    : true,
-      resolution  : 100,
-      interval    : '5m',
-      intervals   : ['auto','1s','1m','5m','10m','30m','1h','3h','12h','1d','1w','1M','1y'],
-      fill        : 0,
-      linewidth   : 3,
-      timezone    : 'browser', // browser, utc or a standard timezone
-      spyable     : true,
-      zoomlinks   : true,
-      bars        : true,
-      stack       : true,
-      points      : false,
-      lines       : false,
-      legend      : true,
-      'x-axis'    : true,
-      'y-axis'    : true,
-      percentage  : false,
-      zerofill    : true,
-      interactive : true,
-      options     : true,
-      derivative  : false,
-      scale       : 1,
-      tooltip     : {
+      value_field   : null,
+      auto_int      : true,
+      resolution    : 100,
+      interval      : '5m',
+      intervals     : ['auto','1s','1m','5m','10m','30m','1h','3h','12h','1d','1w','1M','1y'],
+      fill          : 0,
+      linewidth     : 3,
+      timezone      : 'browser', // browser, utc or a standard timezone
+      spyable       : true,
+      zoomlinks     : true,
+      bars          : true,
+      stack         : true,
+      points        : false,
+      lines         : false,
+      legend        : true,
+      show_query    : true,
+      legend_counts : true,
+      'x-axis'      : true,
+      'y-axis'      : true,
+      percentage    : false,
+      zerofill      : true,
+      interactive   : true,
+      options       : true,
+      derivative    : false,
+      scale         : 1,
+      tooltip       : {
         value_type: 'cumulative',
         query_as_alias: true
+      },
+      grid          : {
+        max: null,
+        min: 0
       }
     };
 
     _.defaults($scope.panel,_d);
+    _.defaults($scope.panel.tooltip,_d.tooltip);
+    _.defaults($scope.panel.grid,_d.grid);
+
+
 
     $scope.init = function() {
       // Hide view options by default
@@ -433,8 +443,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
               },
               yaxis: {
                 show: scope.panel['y-axis'],
-                min: 0,
-                max: scope.panel.percentage && scope.panel.stack ? 100 : null,
+                min: scope.panel.grid.min,
+                max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max,
               },
               xaxis: {
                 timezone: scope.panel.timezone,

+ 24 - 2
src/app/panels/histogram/styleEditor.html

@@ -45,14 +45,36 @@
 <div class="editor-row">
   <div class="section">
     <h5>Header<h5>
+    <div class="editor-option">
+      <label class="small">Zoom</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks" />
+    </div>
+    <div class="editor-option">
+      <label class="small">View</label><input type="checkbox" ng-model="panel.options" ng-checked="panel.options" />
+    </div>
+  </div>
+  <div class="section">
+    <h5>Legend<h5>
     <div class="editor-option">
       <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend">
     </div>
+    <div ng-show="panel.legend" class="editor-option">
+      <label class="small">Query <tip>If no alias is set, show the query in the legend</tip></label><input type="checkbox" ng-model="panel.show_query" ng-checked="panel.show_query">
+    </div>
+    <div ng-show="panel.legend" class="editor-option">
+      <label class="small">Counts</label><input type="checkbox" ng-model="panel.legend_counts" ng-checked="panel.legend_counts">
+    </div>
+  </div>
+
+  <div class="section">
+    <h5>Grid<h5>
     <div class="editor-option">
-      <label class="small">Zoom</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks" />
+      <label class="small">Min / <a href='' ng-click="panel.grid.min = _.toggle(panel.grid.min,null,0)">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.min)"></i></a></label>
+      <input type="number" class="input-small" ng-model="panel.grid.min"/>
     </div>
     <div class="editor-option">
-      <label class="small">View</label><input type="checkbox" ng-model="panel.options" ng-checked="panel.options" />
+      <label class="small">Max / <a ref='' ng-click="panel.grid.max = _.toggle(panel.grid.max,null,0)">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.max)"></i></a></label>
+      <input type="number" class="input-small" ng-model="panel.grid.max"/>
     </div>
   </div>
+
 </div>

+ 0 - 1
src/app/services/fields.js

@@ -21,7 +21,6 @@ function (angular, _, config) {
         var indices = _.difference(n,_.keys(self.mapping));
         // Only get the mapping if there are new indices
         if(indices.length > 0) {
-          console.log('getting mapping');
           self.map(indices).then(function(result) {
             self.mapping = _.extend(self.mapping,result);
             self.list = mapFields(self.mapping);