mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Add gauge option to singlestat
This commit is contained in:
David Keijser
parent
44c1d8c1e5
commit
c455e501ac
@ -156,6 +156,43 @@
|
||||
</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" style="width: 80px">
|
||||
<strong>Gauge</strong>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Show
|
||||
<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
|
||||
<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">
|
||||
|
||||
@ -4,6 +4,7 @@ import angular from 'angular';
|
||||
import _ from 'lodash';
|
||||
import $ from 'jquery';
|
||||
import 'jquery.flot';
|
||||
import 'jquery.flot.gauge';
|
||||
|
||||
import kbn from 'app/core/utils/kbn';
|
||||
import TimeSeries from 'app/core/time_series2';
|
||||
@ -38,6 +39,12 @@ var panelDefaults = {
|
||||
full: false,
|
||||
lineColor: 'rgb(31, 120, 193)',
|
||||
fillColor: 'rgba(31, 118, 189, 0.18)',
|
||||
},
|
||||
gauge: {
|
||||
show: false,
|
||||
minValue: 0,
|
||||
maxValue: 100,
|
||||
thresholdLabels: true
|
||||
}
|
||||
};
|
||||
|
||||
@ -270,6 +277,73 @@ class SingleStatCtrl extends MetricsPanelCtrl {
|
||||
return body;
|
||||
}
|
||||
|
||||
function addGauge() {
|
||||
var plotCanvas = $('<div></div>');
|
||||
var plotCss = {
|
||||
top: '10px',
|
||||
margin: 'auto',
|
||||
position: 'relative',
|
||||
height: elem.height() + '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 options = {
|
||||
series: {
|
||||
gauges: {
|
||||
gauge: {
|
||||
min: panel.gauge.minValue,
|
||||
max: panel.gauge.maxValue,
|
||||
background: { color: 'rgb(38,38,38)'},
|
||||
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: 30 }
|
||||
},
|
||||
show: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
elem.append(plotCanvas);
|
||||
|
||||
var plotSeries = {
|
||||
data: [[0, data.valueRounded]]
|
||||
};
|
||||
|
||||
$.plot(plotCanvas, [plotSeries], options);
|
||||
}
|
||||
|
||||
function addSparkline() {
|
||||
var width = elem.width() + 20;
|
||||
if (width < 30) {
|
||||
@ -335,7 +409,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
|
||||
data = ctrl.data;
|
||||
setElementHeight();
|
||||
|
||||
var body = getBigValueHtml();
|
||||
var body = panel.gauge.show ? '' : getBigValueHtml();
|
||||
|
||||
if (panel.colorBackground && !isNaN(data.valueRounded)) {
|
||||
var color = getColorForValue(data, data.valueRounded);
|
||||
@ -358,6 +432,10 @@ class SingleStatCtrl extends MetricsPanelCtrl {
|
||||
addSparkline();
|
||||
}
|
||||
|
||||
if (panel.gauge.show) {
|
||||
addGauge();
|
||||
}
|
||||
|
||||
elem.toggleClass('pointer', panel.links.length > 0);
|
||||
|
||||
if (panel.links.length > 0) {
|
||||
|
||||
@ -27,7 +27,8 @@ System.config({
|
||||
"jquery.flot.stackpercent": "vendor/flot/jquery.flot.stackpercent",
|
||||
"jquery.flot.time": "vendor/flot/jquery.flot.time",
|
||||
"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: {
|
||||
|
||||
@ -35,7 +35,8 @@
|
||||
"jquery.flot.stackpercent": "vendor/flot/jquery.flot.stackpercent",
|
||||
"jquery.flot.time": "vendor/flot/jquery.flot.time",
|
||||
"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: {
|
||||
|
||||
29
public/vendor/flot/jquery.flot.gauge.js
vendored
29
public/vendor/flot/jquery.flot.gauge.js
vendored
@ -277,7 +277,7 @@
|
||||
*/
|
||||
Gauge.prototype.drawBackground = function(layout) {
|
||||
|
||||
if (!options.grid.show) {
|
||||
if (!gaugeOptions.frame.show) {
|
||||
return;
|
||||
}
|
||||
context.save();
|
||||
@ -301,7 +301,7 @@
|
||||
Gauge.prototype.drawCellBackground = function(gaugeOptionsi, cellLayout) {
|
||||
|
||||
context.save();
|
||||
if (gaugeOptionsi.cell.border && gaugeOptionsi.cell.border.color && gaugeOptionsi.cell.border.width) {
|
||||
if (gaugeOptionsi.cell.border && gaugeOptionsi.cell.border.show && gaugeOptionsi.cell.border.color && gaugeOptionsi.cell.border.width) {
|
||||
context.strokeStyle = gaugeOptionsi.cell.border.color;
|
||||
context.lineWidth = gaugeOptionsi.cell.border.width;
|
||||
context.strokeRect(cellLayout.x, cellLayout.y, cellLayout.cellWidth, cellLayout.cellHeight);
|
||||
@ -337,9 +337,9 @@
|
||||
layout.width,
|
||||
toRad(gaugeOptionsi.gauge.startAngle),
|
||||
toRad(gaugeOptionsi.gauge.endAngle),
|
||||
gaugeOptionsi.gauge.stroke.color, // line color
|
||||
gaugeOptionsi.gauge.stroke.width, // line width
|
||||
gaugeOptionsi.gauge.frameColor, // fill color
|
||||
gaugeOptionsi.gauge.border.color, // line color
|
||||
gaugeOptionsi.gauge.border.width, // line width
|
||||
gaugeOptionsi.gauge.background.color, // fill color
|
||||
blur);
|
||||
|
||||
// draw gauge
|
||||
@ -583,7 +583,7 @@
|
||||
* @param {Number} [a] the angle of the value drawn
|
||||
*/
|
||||
function drawText(x, y, id, text, textOptions, a) {
|
||||
var span = $("#" + id);
|
||||
var span = $("." + id, placeholder);
|
||||
var exists = span.length;
|
||||
if (!exists) {
|
||||
span = $("<span></span>")
|
||||
@ -621,7 +621,6 @@
|
||||
|
||||
return Gauge;
|
||||
})();
|
||||
|
||||
/**
|
||||
* get a instance of Logger
|
||||
*
|
||||
@ -849,11 +848,15 @@
|
||||
vMargin: 5,
|
||||
square: false
|
||||
},
|
||||
frame: {
|
||||
show: true
|
||||
},
|
||||
cell: {
|
||||
background: {
|
||||
color: null
|
||||
},
|
||||
border: {
|
||||
show: true,
|
||||
color: "black",
|
||||
width: 1
|
||||
},
|
||||
@ -866,15 +869,17 @@
|
||||
endAngle: 2.1, // 0 - 2 factor of the radians
|
||||
min: 0,
|
||||
max: 100,
|
||||
shadow: {
|
||||
show: true,
|
||||
blur: 5
|
||||
background: {
|
||||
color: "white"
|
||||
},
|
||||
stroke: {
|
||||
border: {
|
||||
color: "lightgray",
|
||||
width: 2
|
||||
},
|
||||
frameColor: "white"
|
||||
shadow: {
|
||||
show: true,
|
||||
blur: 5
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user