From c455e501ac89a9e87eb977c81b45344eb2491266 Mon Sep 17 00:00:00 2001 From: David Keijser Date: Wed, 3 Feb 2016 17:47:46 +0100 Subject: [PATCH] Add gauge option to singlestat --- .../app/plugins/panel/singlestat/editor.html | 37 +++++++++ public/app/plugins/panel/singlestat/module.ts | 80 ++++++++++++++++++- public/app/system.conf.js | 3 +- public/test/test-main.js | 3 +- public/vendor/flot/jquery.flot.gauge.js | 29 ++++--- 5 files changed, 137 insertions(+), 15 deletions(-) diff --git a/public/app/plugins/panel/singlestat/editor.html b/public/app/plugins/panel/singlestat/editor.html index 6b0806133b8..437445a2400 100644 --- a/public/app/plugins/panel/singlestat/editor.html +++ b/public/app/plugins/panel/singlestat/editor.html @@ -156,6 +156,43 @@ +
+
+
+
    +
  • + Gauge +
    • +
  • + Show  + + +
    • +
  • + Threshold labels  + + +
    • +
  • + Min +
    • +
  • + +
    • +
  • + Max +
    • +
  • + +
    • +
+
+
+
+
+
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,