Skip to content

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

Added goal mode to pie

parent 1796323c
Showing with 66 additions and 15 deletions
panels/pie/editor.html
...@@ -29,6 +29,23 @@ ...@@ -29,6 +29,23 @@
</div> </div>
</div> </div>
</div> </div>
<div ng-switch-when="goal">
<div class="row-fluid">
<div class="span2">
<form style="margin-bottom: 0px">
<h6>Goal</h6>
<input type="number" style="width:90%" ng-model="panel.query.goal">
</form>
</div>
<div class="span9">
<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>
<div ng-switch-when="query"> <div ng-switch-when="query">
<div class="row-fluid"> <div class="row-fluid">
<div class="span3"> <div class="span3">
...@@ -80,6 +97,6 @@ ...@@ -80,6 +97,6 @@
</div> </div>
<div class="span2"> <div class="span2">
<label class="small">Mode</label> <label class="small">Mode</label>
<select class="input-small" ng-model="panel.mode" ng-options="f for f in ['query','terms']"></select> <select class="input-small" ng-model="panel.mode" ng-options="f for f in ['query','terms','goal']"></select>
</div> </div>
</div> </div>
\ No newline at end of file
panels/pie/module.js
...@@ -5,7 +5,7 @@ angular.module('kibana.pie', []) ...@@ -5,7 +5,7 @@ angular.module('kibana.pie', [])
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
query : { field:"_all", query:"*" }, query : { field:"_all", query:"*", goal: 1},
size : 100, size : 100,
exclude : [], exclude : [],
donut : false, donut : false,
...@@ -21,7 +21,7 @@ angular.module('kibana.pie', []) ...@@ -21,7 +21,7 @@ angular.module('kibana.pie', [])
$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)});
eventBus.register($scope,'query', function(event, query) { eventBus.register($scope,'query', function(event, query) {
if($scope.panel.mode === 'terms') { if($scope.panel.mode !== 'query') {
$scope.panel.query.query = query; $scope.panel.query.query = query;
$scope.get_data(); $scope.get_data();
} }
...@@ -95,7 +95,7 @@ angular.module('kibana.pie', []) ...@@ -95,7 +95,7 @@ angular.module('kibana.pie', [])
$scope.$emit('render'); $scope.$emit('render');
}); });
// If we don't have an array, assume its a term facet. // If we don't have an array, assume its a term facet.
} else { } else if ($scope.panel.mode == "terms") {
var results = request var results = request
.facet(ejs.TermsFacet('pie') .facet(ejs.TermsFacet('pie')
.field($scope.panel.query.field || $scope.panel.default_field) .field($scope.panel.query.field || $scope.panel.default_field)
...@@ -129,6 +129,24 @@ angular.module('kibana.pie', []) ...@@ -129,6 +129,24 @@ angular.module('kibana.pie', [])
}); });
$scope.$emit('render'); $scope.$emit('render');
}); });
} else {
console.log('goal')
var results = request
.query(ejs.QueryStringQuery($scope.panel.query.query || '*'))
.filter(ejs.RangeFilter(config.timefield)
.from($scope.time.from)
.to($scope.time.to)
.cache(false))
.size(0)
.doSearch();
results.then(function(results) {
var complete = results.hits.total;
var remaining = $scope.panel.query.goal - complete;
$scope.data = [
{ label : 'Complete', data : complete, color: '#51A351' },
{ data : remaining, color: '#EEE'}]
$scope.$emit('render');
});
} }
} }
...@@ -159,10 +177,33 @@ angular.module('kibana.pie', []) ...@@ -159,10 +177,33 @@ angular.module('kibana.pie', [])
// Function for rendering panel // Function for rendering panel
function render_panel() { function render_panel() {
var scripts = $LAB.script("common/lib/panels/jquery.flot.js") var scripts = $LAB.script("common/lib/panels/jquery.flot.js")
.script("common/lib/panels/jquery.flot.pie.js") .script("common/lib/panels/jquery.flot.pie.js")
if(scope.panel.mode === 'goal')
var label = {
show: scope.panel.labels,
radius: 0,
formatter: function(label, series){
var font = parseInt(scope.row.height.replace('px',''))/10 + String('px')
if(!(_.isUndefined(label)))
return '<div style="font-size:'+font+';font-weight:bold;text-align:center;padding:2px;color:black;">'+
Math.round(series.percent)+'%</div>';
else
return ''
},
}
else
var label = {
show: scope.panel.labels,
radius: 2/3,
formatter: function(label, series){
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+
label+'<br/>'+Math.round(series.percent)+'%</div>';
},
threshold: 0.1
}
var pie = { var pie = {
series: { series: {
pie: { pie: {
...@@ -174,15 +215,7 @@ angular.module('kibana.pie', []) ...@@ -174,15 +215,7 @@ angular.module('kibana.pie', [])
color: '#999', color: '#999',
label: 'The Rest' label: 'The Rest'
}, },
label: { label: label
show: scope.panel.labels,
radius: 2/3,
formatter: function(label, series){
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+
label+'<br/>'+Math.round(series.percent)+'%</div>';
},
threshold: 0.1
}
} }
}, },
//grid: { hoverable: true, clickable: true }, //grid: { hoverable: true, clickable: true },
...@@ -215,7 +248,7 @@ angular.module('kibana.pie', []) ...@@ -215,7 +248,7 @@ angular.module('kibana.pie', [])
elem.bind("plothover", function (event, pos, item) { elem.bind("plothover", function (event, pos, item) {
if (item) { if (item) {
var percent = parseFloat(item.series.percent).toFixed(1) + "%"; var percent = parseFloat(item.series.percent).toFixed(1) + "%";
piett(pos.pageX, pos.pageY, percent + " " + item.series.label); piett(pos.pageX, pos.pageY, percent + " " + (item.series.label||""));
} else { } else {
$("#pie-tooltip").remove(); $("#pie-tooltip").remove();
} }
......
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