Add gauge option to singlestat

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

@@ -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&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">

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 = $('<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) {

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

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 = $("<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,