Skip to content

N
nexpie-grafana-theme
Commit 2748a3fb by Carl Bergquist
Options

Merge pull request #3688 from keis/gauges 

Gauges
parents dfe36fb7 0108b5eb
Showing with 134 additions and 4 deletions
public/app/plugins/panel/singlestat/editor.html
...@@ -160,6 +160,43 @@ ...@@ -160,6 +160,43 @@
<div class="section" style="margin-bottom: 20px"> <div class="section" style="margin-bottom: 20px">
<div class="tight-form last"> <div class="tight-form last">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Gauge</strong>
</li>
<li class="tight-form-item">
Show&nbsp;
<input class="cr1" id="panel.gauge.show" type="checkbox"
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>
<li>
<input type="text" class="input-small tight-form-input" ng-model="ctrl.panel.gauge.minValue" ng-blur="ctrl.render()" placeholder="0"></input>
</li>
<li class="tight-form-item last">
Max
</li>
<li>
<input type="text" class="input-small tight-form-input last" ng-model="ctrl.panel.gauge.maxValue" ng-blur="ctrl.render()" placeholder="100"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="editor-row">
<div class="section" style="margin-bottom: 20px">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item"> <li class="tight-form-item">
<strong>Value to text mapping</strong> <strong>Value to text mapping</strong>
</li> </li>
......
public/app/plugins/panel/singlestat/module.ts
...@@ -4,8 +4,10 @@ import angular from 'angular'; ...@@ -4,8 +4,10 @@ import angular from 'angular';
import _ from 'lodash'; import _ from 'lodash';
import $ from 'jquery'; import $ from 'jquery';
import 'jquery.flot'; import 'jquery.flot';
import 'jquery.flot.gauge';
import kbn from 'app/core/utils/kbn'; import kbn from 'app/core/utils/kbn';
import config from 'app/core/config';
import TimeSeries from 'app/core/time_series2'; import TimeSeries from 'app/core/time_series2';
import {MetricsPanelCtrl} from 'app/plugins/sdk'; import {MetricsPanelCtrl} from 'app/plugins/sdk';
...@@ -38,6 +40,12 @@ var panelDefaults = { ...@@ -38,6 +40,12 @@ var panelDefaults = {
full: false, full: false,
lineColor: 'rgb(31, 120, 193)', lineColor: 'rgb(31, 120, 193)',
fillColor: 'rgba(31, 118, 189, 0.18)', fillColor: 'rgba(31, 118, 189, 0.18)',
},
gauge: {
show: false,
minValue: 0,
maxValue: 100,
thresholdLabels: true
} }
}; };
...@@ -270,6 +278,86 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -270,6 +278,86 @@ class SingleStatCtrl extends MetricsPanelCtrl {
return body; return body;
} }
function addGauge() {
var plotCanvas = $('<div></div>');
var plotCss = {
top: '10px',
margin: 'auto',
position: 'relative',
height: (elem.height() * 0.9) + 'px',
width: elem.width() + 'px'
};
plotCanvas.css(plotCss);
var thresholds = [];
for (var i = 0; i < data.thresholds.length; i++) {
thresholds.push({
value: data.thresholds[i],
color: data.colorMap[i]
});
}
thresholds.push({
value: panel.gauge.maxValue,
color: data.colorMap[data.colorMap.length - 1]
});
var bgColor = config.bootData.user.lightTheme
? 'rgb(230,230,230)'
: 'rgb(38,38,38)';
var options = {
series: {
gauges: {
gauge: {
min: panel.gauge.minValue,
max: panel.gauge.maxValue,
background: { color: bgColor },
border: { color: null },
shadow: { show: false },
width: 38
},
frame: { show: false },
label: { show: false },
layout: { margin: 0 },
cell: { border: { width: 0 } },
threshold: {
values: thresholds,
label: {
show: panel.gauge.thresholdLabels,
margin: 8,
font: { size: 18 }
},
width: 8
},
value: {
color: panel.colorValue ? getColorForValue(data, data.valueRounded) : null,
formatter: function () { return data.valueFormated; },
font: { size: getGaugeFontSize() }
},
show: true
}
}
};
elem.append(plotCanvas);
var plotSeries = {
data: [[0, data.valueRounded]]
};
$.plot(plotCanvas, [plotSeries], options);
}
function getGaugeFontSize() {
if (panel.valueFontSize) {
var num = parseInt(panel.valueFontSize.substring(0, panel.valueFontSize.length - 1));
return 30 * (num / 100);
} else {
return 30;
}
}
function addSparkline() { function addSparkline() {
var width = elem.width() + 20; var width = elem.width() + 20;
if (width < 30) { if (width < 30) {
...@@ -331,11 +419,10 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -331,11 +419,10 @@ class SingleStatCtrl extends MetricsPanelCtrl {
function render() { function render() {
if (!ctrl.data) { return; } if (!ctrl.data) { return; }
data = ctrl.data; data = ctrl.data;
setElementHeight(); setElementHeight();
var body = getBigValueHtml(); var body = panel.gauge.show ? '' : getBigValueHtml();
if (panel.colorBackground && !isNaN(data.valueRounded)) { if (panel.colorBackground && !isNaN(data.valueRounded)) {
var color = getColorForValue(data, data.valueRounded); var color = getColorForValue(data, data.valueRounded);
...@@ -358,6 +445,10 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -358,6 +445,10 @@ class SingleStatCtrl extends MetricsPanelCtrl {
addSparkline(); addSparkline();
} }
if (panel.gauge.show) {
addGauge();
}
elem.toggleClass('pointer', panel.links.length > 0); elem.toggleClass('pointer', panel.links.length > 0);
if (panel.links.length > 0) { if (panel.links.length > 0) {
......
public/app/system.conf.js
...@@ -27,7 +27,8 @@ System.config({ ...@@ -27,7 +27,8 @@ System.config({
"jquery.flot.stackpercent": "vendor/flot/jquery.flot.stackpercent", "jquery.flot.stackpercent": "vendor/flot/jquery.flot.stackpercent",
"jquery.flot.time": "vendor/flot/jquery.flot.time", "jquery.flot.time": "vendor/flot/jquery.flot.time",
"jquery.flot.crosshair": "vendor/flot/jquery.flot.crosshair", "jquery.flot.crosshair": "vendor/flot/jquery.flot.crosshair",
"jquery.flot.fillbelow": "vendor/flot/jquery.flot.fillbelow" "jquery.flot.fillbelow": "vendor/flot/jquery.flot.fillbelow",
"jquery.flot.gauge": "vendor/flot/jquery.flot.gauge"
}, },
packages: { packages: {
......
public/test/test-main.js
...@@ -35,7 +35,8 @@ ...@@ -35,7 +35,8 @@
"jquery.flot.stackpercent": "vendor/flot/jquery.flot.stackpercent", "jquery.flot.stackpercent": "vendor/flot/jquery.flot.stackpercent",
"jquery.flot.time": "vendor/flot/jquery.flot.time", "jquery.flot.time": "vendor/flot/jquery.flot.time",
"jquery.flot.crosshair": "vendor/flot/jquery.flot.crosshair", "jquery.flot.crosshair": "vendor/flot/jquery.flot.crosshair",
"jquery.flot.fillbelow": "vendor/flot/jquery.flot.fillbelow" "jquery.flot.fillbelow": "vendor/flot/jquery.flot.fillbelow",
"jquery.flot.gauge": "vendor/flot/jquery.flot.gauge"
}, },
packages: { packages: {
......
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