Merge pull request #3688 from keis/gauges

Gauges

public/app/plugins/panel/singlestat/editor.html

@@ -160,6 +160,43 @@
 	<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&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">
 					<strong>Value to text mapping</strong>
 				</li>

public/app/plugins/panel/singlestat/module.ts

@@ -4,8 +4,10 @@ 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 config from 'app/core/config';
 import TimeSeries from 'app/core/time_series2';
 import {MetricsPanelCtrl} from 'app/plugins/sdk';
 
@@ -38,6 +40,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 +278,86 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       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() {
       var width = elem.width() + 20;
       if (width < 30) {
@@ -331,11 +419,10 @@ class SingleStatCtrl extends MetricsPanelCtrl {
 
     function render() {
       if (!ctrl.data) { return; }
-
       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 +445,10 @@ class SingleStatCtrl extends MetricsPanelCtrl {
         addSparkline();
       }
 
+      if (panel.gauge.show) {
+        addGauge();
+      }
+
       elem.toggleClass('pointer', panel.links.length > 0);
 
       if (panel.links.length > 0) {

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: {

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: {