Skip to content

N
nexpie-grafana-theme
Commit b94ea26b by Rashid Khan
Options

Added pie and histogram editors

parent 19798b08
Showing with 153 additions and 38 deletions
dashboards.js
......@@ -193,8 +193,8 @@ var dashboards =
labels : false,
colors : ['#BF3030','#1D7373','#86B32D','#A60000','#006363','#679B00'],
field : 'country',
//query : { query: "*", field: "country"}
query : { field : "play_name", query : "*" },
mode : "query",
query : { query:"falstaff" }
},
{
type : "text",
......
panels/histogram/editor.html
<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>
\ No newline at end of file
panels/histogram/module.js
......@@ -5,9 +5,8 @@ angular.module('kibana.histogram', [])
// Set and populate defaults
var _d = {
query : "*",
query : { query: "*" },
interval: secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
color : "#27508C",
show : ['bars'],
fill : false,
group : "default",
......@@ -24,6 +23,18 @@ angular.module('kibana.histogram', [])
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() {
// Make sure we have everything for the request to complete
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])
var series = { data: {
label: $scope.panel.query[k].label,
label: $scope.panel.query[k].label || k,
data: data,
}};
......
panels/pie/editor.html
<h4 style="text-transform: capitalize;">{{panel.type}} <small> panel settings</small></h4>
<div class="row-fluid">
<div class="span4">
<form class="input-append">
<h5>Field</h5>
<input type="text" style="width:70%" ng-model="panel.query.field">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form>
<div class="row-fluid" ng-switch="panel.mode">
<div ng-switch-when="terms">
<div class="row-fluid">
<div class="span4">
<form style="margin-bottom: 0px">
<h6> Field</h6>
<input type="text" style="width:90%" ng-model="panel.query.field">
</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 class="span8">
<form class="input-append">
<h5>Query</h5>
<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 ng-switch-when="query">
<div class="row-fluid">
<div class="span1">
</div>
<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>
<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 class="row-fluid">
......@@ -28,15 +78,8 @@
<div class="span1">
<label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
</div>
</div>
<div class="row-fluid">
<div class="span4">
<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 class="span2">
<label class="small">Mode</label>
<select class="input-small" ng-model="panel.mode" ng-options="f for f in ['query','terms']"></select>
</div>
</div>
\ No newline at end of file
panels/pie/module.js
......@@ -8,29 +8,41 @@ angular.module('kibana.pie', [])
// Set and populate defaults
var _d = {
query : "*",
query : { field:"_all", query:"*" },
size : 100,
exclude : [],
donut : false,
tilt : false,
legend : true,
labels : true,
group : "default"
mode : "terms",
group : "default",
default_field : '_all'
}
_.defaults($scope.panel,_d)
$scope.init = function() {
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.get_data();
});
}
}
});
// Now that we're all setup, request the time from our group
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() {
// Make sure we have everything for the request to complete
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);
// 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 = [];
// Build the question part of the query
_.each($scope.panel.query, function(v) {
......@@ -66,7 +80,9 @@ angular.module('kibana.pie', [])
$scope.data = [];
_.each(results.facets, function(v, k) {
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)))
slice.color = $scope.panel.query[k].color;
$scope.data.push(slice)
......@@ -76,7 +92,7 @@ angular.module('kibana.pie', [])
} else {
var results = request
.facet(ejs.TermsFacet('pie')
.field($scope.panel.query.field)
.field($scope.panel.query.field || $scope.panel.default_field)
.size($scope.panel['size'])
.exclude($scope.panel.exclude)
.facetFilter(ejs.QueryFilter(
......
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