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

feat(gauge): polish to gauge, better handling of automatic font size, added option to hide threshold markers

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-04-26 13:50:04 +02:00
parent 8bb07124f7
commit 26eeb6578d
2 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
public/app/plugins/panel/singlestat/editor.html
View File

@ -158,7 +158,7 @@
<div class="editor-row">
<div class="section" style="margin-bottom: 20px">
<div class="tight-form last">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Gauge</strong>
@ -169,12 +169,6 @@
ng-model="ctrl.panel.gauge.show" ng-checked="ctrl.panel.gauge.show" ng-change="ctrl.render()">
<label for="panel.gauge.show" class="cr1"></label>
</li>
<li class="tight-form-item">
Threshold labels&nbsp;
<input class="cr1" id="panel.gauge.thresholdLabels" type="checkbox"
ng-model="ctrl.panel.gauge.thresholdLabels" ng-checked="ctrl.panel.gauge.thresholdLabels" ng-change="ctrl.render()">
<label for="panel.gauge.thresholdLabels" class="cr1"></label>
</li>
<li class="tight-form-item">
Min
</li>
@ -195,6 +189,19 @@
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<li class="tight-form-item">
Threshold labels&nbsp;
<input class="cr1" id="panel.gauge.thresholdLabels" type="checkbox" ng-model="ctrl.panel.gauge.thresholdLabels" ng-checked="ctrl.panel.gauge.thresholdLabels" ng-change="ctrl.render()">
<label for="panel.gauge.thresholdLabels" class="cr1"></label>
</li>
<li class="tight-form-item">
Threshold markers&nbsp;
<input class="cr1" id="panel.gauge.thresholdMarkers" type="checkbox" ng-model="ctrl.panel.gauge.thresholdMarkers" ng-checked="ctrl.panel.gauge.thresholdMarkers" ng-change="ctrl.render()">
<label for="panel.gauge.thresholdMarkers" class="cr1"></label>
</li>
<div class="clearfix"></div>
</div>
</div>
</div>

24
public/app/plugins/panel/singlestat/module.ts
View File

@ -54,7 +54,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
show: false,
minValue: 0,
maxValue: 100,
thresholdLabels: true
thresholdMarkers: true,
thresholdLabels: false
}
};
@ -295,12 +296,14 @@ class SingleStatCtrl extends MetricsPanelCtrl {
}
var plotCanvas = $('<div></div>');
var width = elem.width();
var height = elem.height();
var plotCss = {
top: '10px',
margin: 'auto',
position: 'relative',
height: (elem.height() * 0.9) + 'px',
width: elem.width() + 'px'
height: (height * 0.9) + 'px',
width: width + 'px'
};
plotCanvas.css(plotCss);
@ -321,6 +324,12 @@ class SingleStatCtrl extends MetricsPanelCtrl {
? 'rgb(230,230,230)'
: 'rgb(38,38,38)';
var dimension = Math.min(width, height);
var fontSize = Math.min(dimension/4, 100);
var gaugeWidth = Math.min(dimension/6, 60);
var thresholdMarkersWidth = gaugeWidth/5;
var options = {
series: {
gauges: {
@ -330,11 +339,11 @@ class SingleStatCtrl extends MetricsPanelCtrl {
background: { color: bgColor },
border: { color: null },
shadow: { show: false },
width: 38
width: gaugeWidth,
},
frame: { show: false },
label: { show: false },
layout: { margin: 0 },
layout: { margin: 0, thresholdWidth: 0 },
cell: { border: { width: 0 } },
threshold: {
values: thresholds,
@ -343,12 +352,13 @@ class SingleStatCtrl extends MetricsPanelCtrl {
margin: 8,
font: { size: 18 }
},
width: 8
show: panel.gauge.thresholdMarkers,
width: thresholdMarkersWidth,
},
value: {
color: panel.colorValue ? getColorForValue(data, data.valueRounded) : null,
formatter: function() { return getValueText(); },
font: { size: getGaugeFontSize(), family: 'Helvetica Neue", Helvetica, Arial, sans-serif' }
font: { size: fontSize, family: 'Helvetica Neue", Helvetica, Arial, sans-serif' }
},
show: true
}