Skip to content

N
nexpie-grafana-theme
Commit 300cb58f by Rashid Khan
Options

Clean up panel editors, fix render on panel height change

parent 7373e374
Showing with 44 additions and 43 deletions
js/controllers.js
......@@ -109,9 +109,9 @@ angular.module('kibana.controllers', [])
}
}
$scope.close_modal = function() {
// Dummy function, available for overriding in child scopes. For example
// a panel might want to broadcast an event when a modal is closed
// This can be overridden by individual panel
$scope.close_edit = function() {
$scope.$broadcast('render')
}
$scope.add_panel = function(row,panel) {
......
panels/histogram/editor.html
......@@ -32,19 +32,25 @@
<i class="icon-remove pointer" ng-click="remove_query(q)"></i>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<label class="small">Chart Options</label>
<select ng-change="$emit('render')" multiple style="width:95%" ng-model="panel.show" ng-options="f for f in ['bars','points','stack','lines','legend','x-axis','y-axis']"></select>
</div>
<div class="span2">
<h5>Chart Options</h5>
<div class="row-fluid">
<div class="span1"> <label class="small">Bars</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
<div class="span1"> <label class="small">Lines</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
<div class="span1"> <label class="small">Points</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
<div class="span1"> <label class="small">Stack</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
<div class="span1"> <label class="small">Legend</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
<div class="span1"> <label class="small">x-Axis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
<div class="span1"> <label class="small">y-Axis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
<div class="span2" ng-show="panel.lines">
<label class="small">Line Fill</label>
<select ng-change="$emit('render')" class="input-mini" ng-model="panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
</div>
<div class="span2">
<div class="span2" ng-show="panel.lines">
<label class="small">Line Width</label>
<select ng-change="$emit('render')" class="input-mini" ng-model="panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<label class="small">Time correction</label>
<select ng-change="$emit('render')" ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
......
panels/histogram/module.html
......@@ -7,7 +7,7 @@
<a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a>
<a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a>
</span> |
<span ng-repeat='series in legend' style='display:inline-block;padding-right:5px'>
<span ng-show="panel.legend" ng-repeat='series in legend' style='display:inline-block;padding-right:5px'>
<div style="display:inline-block;background:{{series.color}};height:10px;width:10px"></div>
<div class='small' style='display:inline-block'>{{series.label}} ({{series.hits}})</div>
</span><span class="small"> per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> total)</span>
......
panels/histogram/module.js
......@@ -3,15 +3,21 @@ angular.module('kibana.histogram', [])
// Set and populate defaults
var _d = {
group : "default",
query : [ {query: "*", label:"Query"} ],
interval : secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
show : ['bars','y-axis','x-axis','legend'],
fill : 3,
linewidth : 3,
timezone : 'browser', // browser, utc or a standard timezone
spyable : true,
zoomlinks : true,
group : "default",
bars : true,
stack : true,
points : false,
lines : false,
legend : true,
'x-axis' : true,
'y-axis' : true,
}
_.defaults($scope.panel,_d)
......@@ -204,17 +210,6 @@ angular.module('kibana.histogram', [])
// Function for rendering panel
function render_panel() {
// Determine format
var show = _.isUndefined(scope.panel.show) ? {
bars: true, lines: false, points: false
} : {
lines: _.indexOf(scope.panel.show,'lines') < 0 ? false : true,
bars: _.indexOf(scope.panel.show,'bars') < 0 ? false : true,
points: _.indexOf(scope.panel.show,'points') < 0 ? false : true,
stack: _.indexOf(scope.panel.show,'stack') < 0 ? null : true,
legend: _.indexOf(scope.panel.show,'legend') < 0 ? false : true,
'x-axis': _.indexOf(scope.panel.show,'x-axis') < 0 ? false : true,
'y-axis': _.indexOf(scope.panel.show,'y-axis') < 0 ? false : true,
}
// Set barwidth based on specified interval
var barwidth = interval_to_seconds(scope.panel.interval)*1000
......@@ -227,6 +222,7 @@ angular.module('kibana.histogram', [])
// Populate element. Note that jvectormap appends, does not replace.
scripts.wait(function(){
var stack = scope.panel.stack ? true : null;
// Populate element
try {
......@@ -235,21 +231,21 @@ angular.module('kibana.histogram', [])
show: false,
},
series: {
stack: show.stack,
stack: stack,
lines: {
show: show.lines,
show: scope.panel.lines,
fill: scope.panel.fill/10,
lineWidth: scope.panel.linewidth,
steps: true
steps: false
},
bars: { show: show.bars, fill: 1, barWidth: barwidth/1.8 },
points: { show: show.points, fill: 1, fillColor: false},
bars: { show: scope.panel.bars, fill: 1, barWidth: barwidth/1.8 },
points: { show: scope.panel.points, fill: 1, fillColor: false},
shadowSize: 1
},
yaxis: { show: show['y-axis'], min: 0, color: "#000" },
yaxis: { show: scope.panel['y-axis'], min: 0, color: "#000" },
xaxis: {
timezone: scope.panel.timezone,
show: show['x-axis'],
show: scope.panel['x-axis'],
mode: "time",
timeformat: time_format(scope.panel.interval),
label: "Datetime",
......
panels/hits/editor.html
<div ng-controller="hits">
<div class="row-fluid">
<div class="span2"><label class="small">Font Size</label>
<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 ['horizontal','vertical']"></select></span>
<select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['none','horizontal','vertical']"></select></span>
</div>
<div class="span2" ng-show="!panel.aggregate">
<label class="small">Chart</label><input type="checkbox" ng-model="panel.chart" ng-checked="panel.chart">
......
panels/hits/module.html
......@@ -10,5 +10,5 @@
<span ng-show='panel.chart'><div style="display:inline-block;background:{{query.color}};height:{{panel.style['font-size']}};width:{{panel.style['font-size']}}"></div></span> {{query.label}} ({{query.hits}}) <span ng-show="!$last">|</span>
</div><br>
</div><div style="clear:both"></div>
<div ng-show='panel.chart && panel.query.length > 1' hits-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
<div ng-show='panel.chart && !panel.aggregate ' hits-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
</kibana-panel>
\ No newline at end of file
panels/timepicker/module.html
......@@ -23,7 +23,7 @@
</div>
</div>
<div ng-switch-when="since">
<div class="span10">
<div class="span5">
<form class="nomargin">
<label><small>Since</small></label>
<input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>
......
panels/timepicker/module.js
......@@ -111,10 +111,6 @@ angular.module('kibana.timepicker', [])
}
$scope.time_apply();
});
$scope.$on('render', function (){
$scope.time_apply();
});
}
$scope.set_interval = function (refresh_interval) {
......@@ -167,8 +163,8 @@ angular.module('kibana.timepicker', [])
$scope.time_apply();
}
$scope.close_modal = function() {
$scope.$broadcast('render');
$scope.close_edit = function() {
$scope.time_apply();
}
$scope.time_check = function(){
......
partials/paneleditor.html
......@@ -13,5 +13,5 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="dismiss();close_modal()">Close</button>
<button type="button" class="btn btn-success" ng-click="dismiss();close_edit()">Close</button>
</div>
\ No newline at end of file
partials/roweditor.html
......@@ -56,5 +56,5 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="dismiss();reset_panel();send_render()">Close</button>
<button type="button" class="btn btn-success" ng-click="dismiss();reset_panel();close_edit()">Close</button>
</div>
\ No newline at end of file
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