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="editor-row">
<div class="section" style="margin-bottom: 20px"> <div class="section" style="margin-bottom: 20px">
<div class="tight-form last"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Gauge</strong> <strong>Gauge</strong>
@ -169,12 +169,6 @@
ng-model="ctrl.panel.gauge.show" ng-checked="ctrl.panel.gauge.show" ng-change="ctrl.render()"> ng-model="ctrl.panel.gauge.show" ng-checked="ctrl.panel.gauge.show" ng-change="ctrl.render()">
<label for="panel.gauge.show" class="cr1"></label> <label for="panel.gauge.show" class="cr1"></label>
</li> </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"> <li class="tight-form-item">
Min Min
</li> </li>
@ -195,6 +189,19 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</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>
</div> </div>

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

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