IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

reorganized pie panel editor, added option to change legend position

Browse Source
This commit is contained in:
Rashid Khan 2013-04-17 10:19:16 -07:00
parent 06d04828bb
commit a6f8d571cf
4 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
common/css/main.css
View File

@ -106,6 +106,10 @@
font-size: 85%;
}
.input-append label {
font-size: inherit !important;
}
.large {
font-size: 120%;
}

43
panels/pie/editor.html
View File

@ -1,28 +1,32 @@
<div class="row-fluid" ng-switch="panel.mode" ng-controller="pie">
<div ng-switch-when="terms">
<div class="row-fluid">
<div class="span4">
<div class="row-fluid">
<div class="span3">
<label class="small">Mode</label>
<select class="input-small" ng-change="set_mode(panel.mode)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select>
</div>
<div class="span3">
<form style="margin-bottom: 0px">
<h6> Field</h6>
<label class="small">Field</label>
<input type="text" style="width:90%" bs-typeahead="fields.list" ng-model="panel.query.field">
</form>
</div>
<div class="span8">
<div class="span5">
<form class="input-append" style="margin-bottom: 0px">
<h6>Query</h6>
<label class="small">Query</label>
<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>
<div class="span3">
<label class="small">Length</label>
<input type="number" style="width:80%" ng-model="panel.size" ng-change="get_data()">
</div>
<div class="span11">
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<h6>Exclude Terms(s) (comma seperated)</h6>
<label class="small">Exclude Terms(s) (comma seperated)</label>
<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>
@ -30,16 +34,20 @@
</div>
</div>
<div ng-switch-when="goal">
<div class="row-fluid">
<div class="row-fluid">
<div class="span3">
<label class="small">Mode</label>
<select class="input-small" ng-change="set_mode(panel.mode)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select>
</div>
<div class="span2">
<form style="margin-bottom: 0px">
<h6>Goal</h6>
<label class="small">Goal</label>
<input type="number" style="width:90%" ng-model="panel.query.goal">
</form>
</div>
<div class="span9">
<div class="span5">
<form class="input-append" style="margin-bottom: 0px">
<h6>Query</h6>
<label class="small">Query</label>
<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>
@ -54,15 +62,12 @@
<div class="span1">
<label class="small"> Tilt </label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
</div>
<div class="span1">
<label class="small"> Legend </label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend">
</div>
<div class="span1">
<label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
</div>
<div class="span2">
<label class="small">Mode</label>
<select class="input-small" ng-change="set_mode(panel.mode)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select>
<div class="span3">
<label class="small">Legend</label>
<select class="input-small" ng-model="panel.legend" ng-options="f for f in ['above','below','none']"></select></span>
</div>
</div>
<h5>Panel Spy</h5>

6
panels/pie/module.html
View File

@ -3,10 +3,14 @@
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
</span>
<div ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
<div ng-show="panel.legend == 'above'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
<span ng-show='panel.chart != "none"'><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
</div><br>
<div style="clear:both"></div>
<div pie params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
<div ng-show="panel.legend == 'below'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
<span ng-show='panel.chart != "none"'><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
</div>
</kibana-panel>

4
panels/pie/module.js
View File

@ -12,7 +12,7 @@ angular.module('kibana.pie', [])
labels : true,
mode : "terms",
group : "default",
default_field : '_all',
default_field : 'DEFAULT',
spyable : true,
}
_.defaults($scope.panel,_d)
@ -122,7 +122,7 @@ angular.module('kibana.pie', [])
var complete = results.hits.total;
var remaining = $scope.panel.query.goal - complete;
$scope.data = [
{ label : 'Complete', data : complete, color: '#51A351' },
{ label : 'Complete', data : complete, color: '#86B22D' },
{ data : remaining, color: '#EEE'}]
$scope.$emit('render');
});