feat(gauge): polish to gauge, better handling of automatic font size, added option to hide threshold markers

torkelo · torkelo · commit 26eeb6578d51 · 2016-04-26T13:50:04.000+02:00
diff --git a/public/app/plugins/panel/singlestat/editor.html b/public/app/plugins/panel/singlestat/editor.html
@@ -158,7 +158,7 @@
 
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
-		<div class="tight-form last">
+		<div class="tight-form">
 			<ul class="tight-form-list">
 				<li class="tight-form-item" style="width: 80px">
 					<strong>Gauge</strong>
@@ -169,12 +169,6 @@
 					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>
@@ -195,6 +189,19 @@
 			</ul>
 			<div class="clearfix"></div>
 		</div>
+		<div class="tight-form last">
+			<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">
+				Threshold markers&nbsp;
+				<input class="cr1" id="panel.gauge.thresholdMarkers" type="checkbox" ng-model="ctrl.panel.gauge.thresholdMarkers" ng-checked="ctrl.panel.gauge.thresholdMarkers" ng-change="ctrl.render()">
+				<label for="panel.gauge.thresholdMarkers" class="cr1"></label>
+			</li>
+			<div class="clearfix"></div>
+		</div>
 	</div>
 </div>
 
diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts
@@ -54,7 +54,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       show: false,
       minValue: 0,
       maxValue: 100,
-      thresholdLabels: true
+      thresholdMarkers: true,
+      thresholdLabels: false
     }
   };
 
@@ -295,12 +296,14 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       }
 
       var plotCanvas = $('<div></div>');
+      var width = elem.width();
+      var height = elem.height();
       var plotCss = {
         top: '10px',
         margin: 'auto',
         position: 'relative',
-        height: (elem.height() * 0.9) + 'px',
-        width: elem.width() + 'px'
+        height: (height * 0.9) + 'px',
+        width:  width + 'px'
       };
 
       plotCanvas.css(plotCss);
@@ -321,6 +324,12 @@ class SingleStatCtrl extends MetricsPanelCtrl {
         ? 'rgb(230,230,230)'
         : 'rgb(38,38,38)';
 
+
+      var dimension = Math.min(width, height);
+      var fontSize = Math.min(dimension/4, 100);
+      var gaugeWidth = Math.min(dimension/6, 60);
+      var thresholdMarkersWidth = gaugeWidth/5;
+
       var options = {
         series: {
           gauges: {
@@ -330,11 +339,11 @@ class SingleStatCtrl extends MetricsPanelCtrl {
               background: { color: bgColor },
               border: { color: null },
               shadow: { show: false },
-              width: 38
+              width: gaugeWidth,
             },
             frame: { show: false },
             label: { show: false },
-            layout: { margin: 0 },
+            layout: { margin: 0, thresholdWidth: 0 },
             cell: { border: { width: 0 } },
             threshold: {
               values: thresholds,
@@ -343,12 +352,13 @@ class SingleStatCtrl extends MetricsPanelCtrl {
                 margin: 8,
                 font: { size: 18 }
               },
-              width: 8
+              show: panel.gauge.thresholdMarkers,
+              width: thresholdMarkersWidth,
             },
             value: {
               color: panel.colorValue ? getColorForValue(data, data.valueRounded) : null,
               formatter: function() { return getValueText(); },
-              font: { size: getGaugeFontSize(), family: 'Helvetica Neue", Helvetica, Arial, sans-serif' }
+              font: { size: fontSize, family: 'Helvetica Neue", Helvetica, Arial, sans-serif' }
             },
             show: true
           }
