apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added pie and histogram editors

Browse Source
pull/7/head
Rashid Khan 13 years ago
parent 19798b0891
commit b94ea26b9c
5 changed files with 151 additions and 38 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      dashboards.js
  2. 43
      panels/histogram/editor.html
  3. 17
      panels/histogram/module.js
  4. 91
      panels/pie/editor.html
  5. 34
      panels/pie/module.js

4
dashboards.js
Unescape View File

@ -193,8 +193,8 @@ var dashboards =
labels : false, labels : false,
colors : ['#BF3030','#1D7373','#86B32D','#A60000','#006363','#679B00'], colors : ['#BF3030','#1D7373','#86B32D','#A60000','#006363','#679B00'],
field : 'country', field : 'country',
//query : { query: "*", field: "country"} mode : "query",
query : { field : "play_name", query : "*" }, query : { query:"falstaff" }
}, },
{ {
type : "text", type : "text",

43
panels/histogram/editor.html
Unescape View File

@ -0,0 +1,43 @@
<div class="row-fluid">
<div class="span3">
<form style="margin-bottom: 0px">
<h6>Label</h6>
<input type="text" placeholder="New Label" style="width:70%" ng-model="newlabel">
</form>
</div>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<h6>Query</h6>
<input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
<button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery=''"><i class="icon-plus"></i></button>
</form>
</div>
<div class="span1">
</div>
</div>
<div class="row-fluid" ng-repeat="q in panel.query">
<div class="span3">
<form style="margin-bottom: 0px">
<input type="text" style="width:70%" ng-model="q.label" ng-change="render_panel()">
</form>
</div>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<input type="text" style="width:80%" ng-model="q.query">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form>
</div>
<div class="span1">
<i class="icon-remove" ng-click="remove_query(q);get_data()"></i>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<label class="small">Effect Options</label>
<select multiple style="width:95%" ng-model="panel.show" ng-options="f for f in ['bars','points','stack','lines']"></select>
</div>
<div class="span2">
<label class="small">Fill (0.0 - 1.0)</label>
<input type="number" class="input-mini" ng-model="panel.fill">
</div>
</div>

17
panels/histogram/module.js
Unescape View File

@ -5,9 +5,8 @@ angular.module('kibana.histogram', [])
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
query : "*", query : { query: "*" },
interval: secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000), interval: secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
color : "#27508C",
show : ['bars'], show : ['bars'],
fill : false, fill : false,
group : "default", group : "default",
@ -24,6 +23,18 @@ angular.module('kibana.histogram', [])
eventBus.broadcast($scope.$id,$scope.panel.group,'get_time') eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
} }
$scope.remove_query = function(q) {
$scope.panel.query = _.without($scope.panel.query,q);
}
$scope.add_query = function(label,query) {
$scope.panel.query.unshift({
query: query,
label: label,
});
$scope.get_data();
}
$scope.get_data = function() { $scope.get_data = function() {
// Make sure we have everything for the request to complete // Make sure we have everything for the request to complete
if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time)) if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time))
@ -68,7 +79,7 @@ angular.module('kibana.histogram', [])
data.push([$scope.panel.time.to.getTime(), null]) data.push([$scope.panel.time.to.getTime(), null])
var series = { data: { var series = { data: {
label: $scope.panel.query[k].label, label: $scope.panel.query[k].label || k,
data: data, data: data,
}}; }};

91
panels/pie/editor.html
Unescape View File

@ -1,18 +1,68 @@
<h4 style="text-transform: capitalize;">{{panel.type}} <small> panel settings</small></h4> <div class="row-fluid" ng-switch="panel.mode">
<div class="row-fluid"> <div ng-switch-when="terms">
<div class="span4"> <div class="row-fluid">
<form class="input-append"> <div class="span4">
<h5>Field</h5> <form style="margin-bottom: 0px">
<input type="text" style="width:70%" ng-model="panel.query.field"> <h6> Field</h6>
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button> <input type="text" style="width:90%" ng-model="panel.query.field">
</form> </form>
</div>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<h6>Query</h6>
<input type="text" style="width:80%" ng-model="panel.query.query">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form>
</div>
</div>
<div class="row-fluid">
<div class="span1">
<h6>Length</h6>
<input type="number" style="width:80%" ng-model="panel.size" ng-change="get_data()">
</div>
<div class="span11">
<form class="input-append" style="margin-bottom: 0px">
<h6>Exclude Terms(s) (comma seperated)</h6>
<input array-join type="text" style="width:90%" ng-model='panel.exclude'></input>
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form>
</div>
</div>
</div> </div>
<div class="span8"> <div ng-switch-when="query">
<form class="input-append"> <div class="row-fluid">
<h5>Query</h5> <div class="span1">
<input type="text" style="width:80%" ng-model="panel.query.query"> </div>
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button> <div class="span3">
</form> <form style="margin-bottom: 0px">
<h6>Label</h6>
<input type="text" placeholder="New Label" style="width:70%" ng-model="newlabel">
</form>
</div>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<h6>Query</h6>
<input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
<button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery=''"><i class="icon-plus"></i></button>
</form>
</div>
</div>
<div class="row-fluid" ng-repeat="q in panel.query">
<div class="span1">
<i class="icon-remove" ng-click="remove_query(q)"></i>
</div>
<div class="span4">
<form style="margin-bottom: 0px">
<input type="text" style="width:70%" ng-model="q.label">
</form>
</div>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<input type="text" style="width:80%" ng-model="q.query">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form>
</div>
</div>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
@ -28,15 +78,8 @@
<div class="span1"> <div class="span1">
<label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels"> <label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
</div> </div>
</div> <div class="span2">
<div class="row-fluid"> <label class="small">Mode</label>
<div class="span4"> <select class="input-small" ng-model="panel.mode" ng-options="f for f in ['query','terms']"></select>
<h5>Sort</h5>
<select style="width:85%" ng-model="panel.sort[0]" ng-options="f for f in all_fields"></select>
<i ng-click="set_sort(panel.sort[0])" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
</div>
<div class="span1">
<h5>Length</h5>
<input type="number" class="input-mini" ng-model="panel.size" ng-change="get_data()">
</div> </div>
</div> </div>

34
panels/pie/module.js
Unescape View File

@ -8,29 +8,41 @@ angular.module('kibana.pie', [])
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
query : "*", query : { field:"_all", query:"*" },
size : 100, size : 100,
exclude : [], exclude : [],
donut : false, donut : false,
tilt : false, tilt : false,
legend : true, legend : true,
labels : true, labels : true,
group : "default" mode : "terms",
group : "default",
default_field : '_all'
} }
_.defaults($scope.panel,_d) _.defaults($scope.panel,_d)
$scope.init = function() { $scope.init = function() {
eventBus.register($scope,'time', function(event,time){set_time(time)}); eventBus.register($scope,'time', function(event,time){set_time(time)});
if(!(_.isArray($scope.panel.query))) { eventBus.register($scope,'query', function(event, query) {
eventBus.register($scope,'query', function(event, query) { if($scope.panel.mode === 'terms') {
$scope.panel.query.query = query; $scope.panel.query.query = query;
$scope.get_data(); $scope.get_data();
}); }
} });
// Now that we're all setup, request the time from our group // Now that we're all setup, request the time from our group
eventBus.broadcast($scope.$id,$scope.panel.group,'get_time') eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
} }
$scope.add_query = function(label,query) {
if($scope.panel.mode !== 'query')
return false;
$scope.panel.query.unshift({
query: query,
label: label,
});
$scope.get_data();
}
$scope.get_data = function() { $scope.get_data = function() {
// Make sure we have everything for the request to complete // Make sure we have everything for the request to complete
if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time)) if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time))
@ -39,7 +51,9 @@ angular.module('kibana.pie', [])
var request = $scope.ejs.Request().indices($scope.panel.index); var request = $scope.ejs.Request().indices($scope.panel.index);
// If we have an array, use query facet // If we have an array, use query facet
if(_.isArray($scope.panel.query)) { if($scope.panel.mode == "query") {
if(!(_.isArray($scope.panel.query)))
$scope.panel.query = [$scope.panel.query];
var queries = []; var queries = [];
// Build the question part of the query // Build the question part of the query
_.each($scope.panel.query, function(v) { _.each($scope.panel.query, function(v) {
@ -66,7 +80,9 @@ angular.module('kibana.pie', [])
$scope.data = []; $scope.data = [];
_.each(results.facets, function(v, k) { _.each(results.facets, function(v, k) {
var series = {}; var series = {};
var slice = { label : $scope.panel.query[k].label, data : v.count }; var label = _.isUndefined($scope.panel.query[k].label) ?
$scope.panel.query[k].query : $scope.panel.query[k].label
var slice = { label : label, data : v.count };
if (!(_.isUndefined($scope.panel.query[k].color))) if (!(_.isUndefined($scope.panel.query[k].color)))
slice.color = $scope.panel.query[k].color; slice.color = $scope.panel.query[k].color;
$scope.data.push(slice) $scope.data.push(slice)
@ -76,7 +92,7 @@ angular.module('kibana.pie', [])
} else { } else {
var results = request var results = request
.facet(ejs.TermsFacet('pie') .facet(ejs.TermsFacet('pie')
.field($scope.panel.query.field) .field($scope.panel.query.field || $scope.panel.default_field)
.size($scope.panel['size']) .size($scope.panel['size'])
.exclude($scope.panel.exclude) .exclude($scope.panel.exclude)
.facetFilter(ejs.QueryFilter( .facetFilter(ejs.QueryFilter(

Write Preview
Loading…
Cancel
Save