Skip to content

N
nexpie-grafana-theme
Commit 8454a951 by Rashid Khan
Options

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

parent a17e8ea4
Showing with 74 additions and 35 deletions
src/app/components/underscore.extended.js
...@@ -18,6 +18,10 @@ function () { ...@@ -18,6 +18,10 @@ function () {
array.splice(index, 1); array.splice(index, 1);
return array; 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) { toggleInOut: function(array,value) {
if(_.contains(array,value)) { if(_.contains(array,value)) {
array = _.without(array,value); array = _.without(array,value);
......
src/app/panels/histogram/module.html
...@@ -45,7 +45,11 @@ ...@@ -45,7 +45,11 @@
</span> </span>
<span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend"> <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
<i class='icon-circle' ng-style="{color: series.info.color}"></i> <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>
<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> <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> </div>
......
src/app/panels/histogram/module.js
...@@ -78,42 +78,52 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -78,42 +78,52 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
mode : 'count', mode : 'count',
time_field : '@timestamp', time_field : '@timestamp',
queries : { queries : {
mode : 'all', mode : 'all',
ids : [] ids : []
}, },
value_field : null, value_field : null,
auto_int : true, auto_int : true,
resolution : 100, resolution : 100,
interval : '5m', interval : '5m',
intervals : ['auto','1s','1m','5m','10m','30m','1h','3h','12h','1d','1w','1M','1y'], intervals : ['auto','1s','1m','5m','10m','30m','1h','3h','12h','1d','1w','1M','1y'],
fill : 0, fill : 0,
linewidth : 3, linewidth : 3,
timezone : 'browser', // browser, utc or a standard timezone timezone : 'browser', // browser, utc or a standard timezone
spyable : true, spyable : true,
zoomlinks : true, zoomlinks : true,
bars : true, bars : true,
stack : true, stack : true,
points : false, points : false,
lines : false, lines : false,
legend : true, legend : true,
'x-axis' : true, show_query : true,
'y-axis' : true, legend_counts : true,
percentage : false, 'x-axis' : true,
zerofill : true, 'y-axis' : true,
interactive : true, percentage : false,
options : true, zerofill : true,
derivative : false, interactive : true,
scale : 1, options : true,
tooltip : { derivative : false,
scale : 1,
tooltip : {
value_type: 'cumulative', value_type: 'cumulative',
query_as_alias: true query_as_alias: true
},
grid : {
max: null,
min: 0
} }
}; };
_.defaults($scope.panel,_d); _.defaults($scope.panel,_d);
_.defaults($scope.panel.tooltip,_d.tooltip);
_.defaults($scope.panel.grid,_d.grid);
$scope.init = function() { $scope.init = function() {
// Hide view options by default // Hide view options by default
...@@ -433,8 +443,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -433,8 +443,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
}, },
yaxis: { yaxis: {
show: scope.panel['y-axis'], show: scope.panel['y-axis'],
min: 0, min: scope.panel.grid.min,
max: scope.panel.percentage && scope.panel.stack ? 100 : null, max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max,
}, },
xaxis: { xaxis: {
timezone: scope.panel.timezone, timezone: scope.panel.timezone,
......
src/app/panels/histogram/styleEditor.html
...@@ -46,13 +46,35 @@ ...@@ -46,13 +46,35 @@
<div class="section"> <div class="section">
<h5>Header<h5> <h5>Header<h5>
<div class="editor-option"> <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"> <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend">
</div> </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"> <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>
<div class="editor-option"> <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> </div>
</div> </div>
src/app/services/fields.js
...@@ -21,7 +21,6 @@ function (angular, _, config) { ...@@ -21,7 +21,6 @@ function (angular, _, config) {
var indices = _.difference(n,_.keys(self.mapping)); var indices = _.difference(n,_.keys(self.mapping));
// Only get the mapping if there are new indices // Only get the mapping if there are new indices
if(indices.length > 0) { if(indices.length > 0) {
console.log('getting mapping');
self.map(indices).then(function(result) { self.map(indices).then(function(result) {
self.mapping = _.extend(self.mapping,result); self.mapping = _.extend(self.mapping,result);
self.list = mapFields(self.mapping); self.list = mapFields(self.mapping);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment