Skip to content

N
nexpie-grafana-theme
Commit 444d5875 by Rashid Khan
Options

Merge pull request #50 from rashidkpc/master 

reorganized pie panel editor, added option to change legend position
parents 1b995bc0 a6f8d571
Showing with 71 additions and 60 deletions
common/css/main.css
...@@ -106,6 +106,10 @@ ...@@ -106,6 +106,10 @@
font-size: 85%; font-size: 85%;
} }
.input-append label {
font-size: inherit !important;
}
.large { .large {
font-size: 120%; font-size: 120%;
} }
......
panels/hits/editor.html
<div ng-controller="hits"> <div ng-controller="hits">
<div class="row-fluid"> <div class="row-fluid">
<div class="span2 "><label class="small">Font Size</label>
<select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
</div>
<div class="span2">
<label class="small">Aggregate</label><input type="checkbox" ng-model="panel.aggregate" ng-checked="panel.aggregate">
</div>
<div class="span3" ng-show="!panel.aggregate">
<label class="small">Counter Style</label>
<select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['none','horizontal','vertical']"></select></span>
</div>
</div>
<h5 ng-show="!panel.aggregate">Chart Options</h5>
<div class="row-fluid" ng-show="!panel.aggregate">
<div class="span3"> <div class="span3">
<label class="small">Style</label> <label class="small">Style</label>
<select class="input-small" ng-model="panel.chart" ng-options="f for f in ['none','bar','pie']"></select></span> <select class="input-small" ng-model="panel.chart" ng-options="f for f in ['bar','pie','list','total']"></select></span>
</div>
<div class="span2" ng-show="panel.chart == 'total' || panel.chart == 'list'">
<label class="small">Font Size</label>
<select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
</div> </div>
<div class="row-fluid" > <div class="span3" ng-show="panel.chart == 'bar' || panel.chart == 'pie'">
<div class="span3" ng-show="!panel.aggregate">
<label class="small">Legend</label> <label class="small">Legend</label>
<select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below']"></select></span> <select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below','none']"></select></span>
</div>
<div class="span3" ng-show="panel.chart != 'total' && panel.counter_pos != 'none'">
<label class="small" >List Format</label>
<select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
</div> </div>
<div class="span1" ng-show='panel.chart == "pie"'> <div class="span1" ng-show='panel.chart == "pie"'>
<label class="small"> Donut </label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut"> <label class="small">Donut</label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
</div> </div>
<div class="span1" ng-show='panel.chart == "pie"'> <div class="span1" ng-show='panel.chart == "pie"'>
<label class="small"> Tilt </label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt"> <label class="small">Tilt</label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
</div> </div>
<div class="span1" ng-show='panel.chart == "pie"'> <div class="span1" ng-show='panel.chart == "pie"'>
<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>
<h5>Queries</h5> <h5>Queries</h5>
......
panels/hits/module.html
<kibana-panel ng-controller='hits' ng-init="init()"> <kibana-panel ng-controller='hits' ng-init="init()">
<div ng-show="panel.counters && panel.counter_pos == 'above'"> <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
<!-- no chart, aggregated numbers -->
<p ng-style="panel.style" ng-show="panel.aggregate">{{hits}}</p>
<!-- vertical legend --> <!-- vertical legend -->
<table ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'vertical'"> <table class="small" ng-show="panel.arrangement == 'vertical'">
<tr style="line-height:{{panel.style['font-size']}}" ng-repeat="query in plot.getData()"> <tr ng-repeat="query in plot.getData()">
<td style="background:{{query.color}};width:{{panel.style['font-size']}}"></td> <td style="padding-right:10px;padding-left:10px;">{{query.label}}</td><td>{{query.data[0][1]}}</td> <td><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></td> <td style="padding-right:10px;padding-left:10px;">{{query.label}}</td><td>{{query.data[0][1]}}</td>
</tr> </tr>
</table> </table>
<!-- horizontal legend --> <!-- horizontal legend -->
<div ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'horizontal'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;"> <div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
<span><div style="display:inline-block;border-radius:{{panel.style['font-size']}};background:{{query.color}};height:{{panel.style['font-size']}};width:{{panel.style['font-size']}}"></div></span> {{query.label}} ({{query.data[0][1]}}) </span> <span><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></span> {{query.label}} ({{query.data[0][1]}}) </span>
</div><br> </div><br>
</div> </div>
<div style="clear:both"></div> <div style="clear:both"></div>
<div ng-show='panel.chart != "none" && !panel.aggregate ' hits-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
<div ng-show="panel.counters && panel.counter_pos == 'below'"> <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" hits-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
<!-- no chart, aggregated numbers -->
<p ng-style="panel.style" ng-show="panel.aggregate">{{hits}}</p> <div ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
<!-- vertical legend --> <!-- vertical legend -->
<table ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'vertical'"> <table class="small" ng-show="panel.arrangement == 'vertical'">
<tr style="line-height:{{panel.style['font-size']}}" ng-repeat="query in plot.getData()"> <tr ng-repeat="query in plot.getData()">
<tdstyle="background:{{query.color}};width:{{panel.style['font-size']}}"></td> <td style="padding-right:10px;padding-left:10px;">{{query.label}}</td><td>{{query.data[0][1]}}</td> <td><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></td> <td style="padding-right:10px;padding-left:10px;">{{query.label}}</td><td>{{query.data[0][1]}}</td>
</tr> </tr>
</table> </table>
<!-- horizontal legend --> <!-- horizontal legend -->
<div ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'horizontal'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;"> <div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
<span><div style="display:inline-block;border-radius:{{panel.style['font-size']}};background:{{query.color}};height:{{panel.style['font-size']}};width:{{panel.style['font-size']}}"></div></span> {{query.label}} ({{query.data[0][1]}}) </span> <span><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></span> {{query.label}} ({{query.data[0][1]}}) </span>
</div><br> </div><br>
</div> </div>
<div ng-show="panel.chart == 'total'"><div ng-style="panel.style" style="line-height:{{panel.style['font-size']}}">{{hits}}</div></div>
<span ng-show="panel.chart == 'list'"><span ng-style="panel.style" style="line-height:{{panel.style['font-size']}}" ng-repeat="query in data">{{query.label}} ({{query.hits}})<span></span><br ng-show="panel.arrangement == 'vertical' && panel.chart == 'list'">
</kibana-panel> </kibana-panel>
\ No newline at end of file
panels/hits/module.js
...@@ -98,7 +98,6 @@ angular.module('kibana.hits', []) ...@@ -98,7 +98,6 @@ angular.module('kibana.hits', [])
i++; i++;
}); });
$scope.$emit('render'); $scope.$emit('render');
if(_segment < $scope.panel.index.length-1) if(_segment < $scope.panel.index.length-1)
$scope.get_data(_segment+1,query_id) $scope.get_data(_segment+1,query_id)
...@@ -200,6 +199,10 @@ angular.module('kibana.hits', []) ...@@ -200,6 +199,10 @@ angular.module('kibana.hits', [])
colors: ['#86B22D','#BF6730','#1D7373','#BFB930','#BF3030','#77207D'] colors: ['#86B22D','#BF6730','#1D7373','#BFB930','#BF3030','#77207D']
}); });
// Compensate for the height of the legend. Gross
elem.height(
(scope.panel.height || scope.row.height).replace('px','') - $("#"+scope.$id+"-legend").height())
// Work around for missing legend at initialization // Work around for missing legend at initialization
if(!scope.$$phase) if(!scope.$$phase)
scope.$apply() scope.$apply()
......
panels/pie/editor.html
<div class="row-fluid" ng-switch="panel.mode" ng-controller="pie"> <div class="row-fluid" ng-switch="panel.mode" ng-controller="pie">
<div ng-switch-when="terms"> <div ng-switch-when="terms">
<div class="row-fluid"> <div class="row-fluid">
<div class="span4"> <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"> <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"> <input type="text" style="width:90%" bs-typeahead="fields.list" ng-model="panel.query.field">
</form> </form>
</div> </div>
<div class="span8"> <div class="span5">
<form class="input-append" style="margin-bottom: 0px"> <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"> <input type="text" style="width:80%" ng-model="panel.query.query">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button> <button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form> </form>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span1"> <div class="span3">
<h6>Length</h6> <label class="small">Length</label>
<input type="number" style="width:80%" ng-model="panel.size" ng-change="get_data()"> <input type="number" style="width:80%" ng-model="panel.size" ng-change="get_data()">
</div> </div>
<div class="span11"> <div class="span8">
<form class="input-append" style="margin-bottom: 0px"> <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> <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> <button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form> </form>
...@@ -31,15 +35,19 @@ ...@@ -31,15 +35,19 @@
</div> </div>
<div ng-switch-when="goal"> <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"> <div class="span2">
<form style="margin-bottom: 0px"> <form style="margin-bottom: 0px">
<h6>Goal</h6> <label class="small">Goal</label>
<input type="number" style="width:90%" ng-model="panel.query.goal"> <input type="number" style="width:90%" ng-model="panel.query.goal">
</form> </form>
</div> </div>
<div class="span9"> <div class="span5">
<form class="input-append" style="margin-bottom: 0px"> <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"> <input type="text" style="width:80%" ng-model="panel.query.query">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button> <button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form> </form>
...@@ -55,14 +63,11 @@ ...@@ -55,14 +63,11 @@
<label class="small"> Tilt </label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt"> <label class="small"> Tilt </label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
</div> </div>
<div class="span1"> <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"> <label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
</div> </div>
<div class="span2"> <div class="span3">
<label class="small">Mode</label> <label class="small">Legend</label>
<select class="input-small" ng-change="set_mode(panel.mode)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select> <select class="input-small" ng-model="panel.legend" ng-options="f for f in ['above','below','none']"></select></span>
</div> </div>
</div> </div>
<h5>Panel Spy</h5> <h5>Panel Spy</h5>
......
panels/pie/module.html
...@@ -3,10 +3,14 @@ ...@@ -3,10 +3,14 @@
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i> <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
</span> </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> <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><br>
<div style="clear:both"></div> <div style="clear:both"></div>
<div pie params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></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> </kibana-panel>
\ No newline at end of file
panels/pie/module.js
...@@ -12,7 +12,7 @@ angular.module('kibana.pie', []) ...@@ -12,7 +12,7 @@ angular.module('kibana.pie', [])
labels : true, labels : true,
mode : "terms", mode : "terms",
group : "default", group : "default",
default_field : '_all', default_field : 'DEFAULT',
spyable : true, spyable : true,
} }
_.defaults($scope.panel,_d) _.defaults($scope.panel,_d)
...@@ -122,7 +122,7 @@ angular.module('kibana.pie', []) ...@@ -122,7 +122,7 @@ angular.module('kibana.pie', [])
var complete = results.hits.total; var complete = results.hits.total;
var remaining = $scope.panel.query.goal - complete; var remaining = $scope.panel.query.goal - complete;
$scope.data = [ $scope.data = [
{ label : 'Complete', data : complete, color: '#51A351' }, { label : 'Complete', data : complete, color: '#86B22D' },
{ data : remaining, color: '#EEE'}] { data : remaining, color: '#EEE'}]
$scope.$emit('render'); $scope.$emit('render');
}); });
......
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