diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts
index 8af684c9d68..19909f08441 100644
--- a/public/app/plugins/panel/singlestat/module.ts
+++ b/public/app/plugins/panel/singlestat/module.ts
@@ -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 = $('
');
+ 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) {
diff --git a/public/app/system.conf.js b/public/app/system.conf.js
index 276988e5c34..40b70c0e30e 100644
--- a/public/app/system.conf.js
+++ b/public/app/system.conf.js
@@ -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: {
diff --git a/public/test/test-main.js b/public/test/test-main.js
index d40955022fe..dbee086c250 100644
--- a/public/test/test-main.js
+++ b/public/test/test-main.js
@@ -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: {
diff --git a/public/vendor/flot/jquery.flot.gauge.js b/public/vendor/flot/jquery.flot.gauge.js
index 02aa553b7fa..d8ed958e990 100644
--- a/public/vendor/flot/jquery.flot.gauge.js
+++ b/public/vendor/flot/jquery.flot.gauge.js
@@ -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 = $("
")
@@ -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,