From 7ff8931deffb140ff78400d80c94709727391b46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Thu, 6 Nov 2014 10:47:46 +0100
Subject: [PATCH] SingleStatPanel: added font size options for value, prefix
 and postfix, #951

---
 src/app/directives/spectrumPicker.js   |  6 ++++-
 src/app/panels/graph/module.js         |  1 -
 src/app/panels/stats/module.js         |  3 +++
 src/app/panels/stats/statsDirective.js | 35 +++++++++++++++++---------
 src/app/panels/stats/statsEditor.html  | 21 ++++++++++++++--
 src/css/less/stats-panel.less          | 11 ++------
 6 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/src/app/directives/spectrumPicker.js b/src/app/directives/spectrumPicker.js
index daec6b043aa..c6d3de6f884 100644
--- a/src/app/directives/spectrumPicker.js
+++ b/src/app/directives/spectrumPicker.js
@@ -32,7 +32,11 @@ function (angular) {
           };
 
           input.spectrum(options);
+
+          scope.$on('$destroy', function() {
+            input.spectrum('destroy');
+          });
         }
       };
     });
-});
\ No newline at end of file
+});
diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js
index ae50e372c7c..9afb77fd947 100644
--- a/src/app/panels/graph/module.js
+++ b/src/app/panels/graph/module.js
@@ -347,7 +347,6 @@ function (angular, app, $, _, kbn, moment, TimeSeries) {
       $scope.render();
     };
 
-
     panelSrv.init($scope);
   });
 
diff --git a/src/app/panels/stats/module.js b/src/app/panels/stats/module.js
index f85a1df62e5..1705fd0b9bd 100644
--- a/src/app/panels/stats/module.js
+++ b/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,
diff --git a/src/app/panels/stats/statsDirective.js b/src/app/panels/stats/statsDirective.js
index cc8b1c43e6a..7049471b999 100644
--- a/src/app/panels/stats/statsDirective.js
+++ b/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);
diff --git a/src/app/panels/stats/statsEditor.html b/src/app/panels/stats/statsEditor.html
index 7ca1ab107af..dcb5a837b22 100644
--- a/src/app/panels/stats/statsEditor.html
+++ b/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">
diff --git a/src/css/less/stats-panel.less b/src/css/less/stats-panel.less
index 29e162c77ea..1028da75e18 100644
--- a/src/css/less/stats-panel.less
+++ b/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 {