SingleStatPanel: added font size options for value, prefix and postfix, #951

src/app/directives/spectrumPicker.js

@@ -32,7 +32,11 @@ function (angular) {
           };
 
           input.spectrum(options);
+
+          scope.$on('$destroy', function() {
+            input.spectrum('destroy');
+          });
         }
       };
     });
-});
+});

src/app/panels/graph/module.js

@@ -347,7 +347,6 @@ function (angular, app, $, _, kbn, moment, TimeSeries) {
       $scope.render();
     };
 
-
     panelSrv.init($scope);
   });
 

src/app/panels/stats/module.js

@@ -43,6 +43,9 @@ function (angular, app, _, TimeSeries, kbn) {
       prefix: '',
       postfix: '',
       valueName: 'avg',
+      prefixFontSize: '50%',
+      valueFontSize: '100%',
+      postfixFontSize: '50%',
       thresholds: '',
       colorBackground: false,
       colorValue: false,

src/app/panels/stats/statsDirective.js

@@ -17,11 +17,12 @@ function (angular, app, _, kbn, $) {
 
     return {
       link: function(scope, elem) {
-        var data;
+        var data, panel;
         var $panelContainer = elem.parents('.panel-container');
 
         scope.$on('render', function() {
           data = scope.data;
+          panel = scope.panel;
 
           if (!data || data.flotpairs.length === 0) {
             elem.html('no data');
@@ -33,12 +34,12 @@ function (angular, app, _, kbn, $) {
 
         function setElementHeight() {
           try {
-            var height = scope.height || scope.panel.height || scope.row.height;
+            var height = scope.height || panel.height || scope.row.height;
             if (_.isString(height)) {
               height = parseInt(height.replace('px', ''), 10);
             }
 
-            height -= scope.panel.title ? 24 : 9; // subtract panel title bar
+            height -= panel.title ? 24 : 9; // subtract panel title bar
 
             elem.css('height', height + 'px');
 
@@ -49,7 +50,7 @@ function (angular, app, _, kbn, $) {
         }
 
         function applyColoringThresholds(value, valueString) {
-          if (!scope.panel.colorValue) {
+          if (!panel.colorValue) {
             return valueString;
           }
 
@@ -70,8 +71,24 @@ function (angular, app, _, kbn, $) {
           return null;
         }
 
+        function getSpan(className, fontSize, value)  {
+          return '<span class="' + className + '" style="font-size:' + fontSize + '">' +
+            value + '</span>';
+        }
+
         function getBigValueHtml() {
-          return applyColoringThresholds(data.mainValue, data.mainValueFormated);
+          var body = '<div class="stats-panel-value-container">';
+
+          if (panel.prefix) { body += getSpan('stats-panel-prefix', panel.prefixFontSize, scope.panel.prefix); }
+
+          var value = applyColoringThresholds(data.mainValue, data.mainValueFormated);
+          body += getSpan('stats-panel-value', panel.valueFontSize, value);
+
+          if (panel.postfix) { body += getSpan('stats-panel-postfix', panel.postfixFontSize, panel.postfix); }
+
+          body += '</div>';
+
+          return body;
         }
 
         function addSparkline() {
@@ -134,13 +151,7 @@ function (angular, app, _, kbn, $) {
           setElementHeight();
 
           var panel = scope.panel;
-          var body = '';
-
-          body += '<div class="stats-panel-value-container">';
-          body += '<span class="stats-panel-value">';
-          body += getBigValueHtml();
-          body += '</div>';
-          body += '</div>';
+          var body = getBigValueHtml();
 
           if (panel.colorBackground && data.mainValue) {
             var color = getColorForValue(data.mainValue);

src/app/panels/stats/statsEditor.html

@@ -3,7 +3,7 @@
     <h5>Big value</h5>
 		<div class="editor-option">
 			<label class="small">Prefix</label>
-			<input type="text" class="input-medium" ng-model="panel.prefix" ng-blur="render()"></input>
+			<input type="text" class="input-small" ng-model="panel.prefix" ng-blur="render()"></input>
 		</div>
 		<div class="editor-option">
 			<label class="small">Value</label>
@@ -11,9 +11,26 @@
 		</div>
 		<div class="editor-option">
 			<label class="small">Postfix</label>
-			<input type="text" class="input-medium" ng-model="panel.prefix" ng-blur="render()"></input>
+			<input type="text" class="input-small" ng-model="panel.postfix" ng-blur="render()" ng-trim="false"></input>
 		</div>
 	</div>
+
+	<div class="section">
+    <h5>Big value font size</h5>
+		<div class="editor-option">
+			<label class="small">Prefix</label>
+			<select class="input-mini" style="width: 75px;" ng-model="panel.prefixFontSize" ng-options="f for f in ['30%','50%','70%','80%','100%']" ng-change="render()"></select>
+		</div>
+		<div class="editor-option">
+			<label class="small">Value</label>
+			<select class="input-mini" style="width: 75px;" ng-model="panel.valueFontSize" ng-options="f for f in ['30%','50%','70%','80%','100%', '110%', '120%']" ng-change="render()"></select>
+		</div>
+		<div class="editor-option">
+			<label class="small">Postfix</label>
+			<select class="input-mini" style="width: 75px;" ng-model="panel.postfixFontSize" ng-options="f for f in ['30%','50%','70%','80%','100%']" ng-change="render()"></select>
+		</div>
+	</div>
+
 	<div class="section">
     <h5>Formats</h5>
 		<div class="editor-option">

src/css/less/stats-panel.less

@@ -11,19 +11,12 @@
   text-align: center;
   position: relative;
   z-index: 1;
-}
-
-.stats-panel-value {
   font-size: 3em;
   font-weight: bold;
 }
 
-.stats-panel-value:not(:first-child) {
-  padding-left: 20px;
-}
-
-.stats-panel-value-small {
-  font-size: 50%;
+.stats-panel-prefix {
+  padding-right: 20px;
 }
 
 .stats-panel-table {