From 1dd65f7a39f0f25985551bc4ebff671f70493a5a Mon Sep 17 00:00:00 2001
From: Aman <aps.sids@gmail.com>
Date: Wed, 9 May 2018 13:32:44 +0530
Subject: [PATCH 1/2] Add options to colorize prefix and postfix in singlestat

---
 .../app/plugins/panel/singlestat/editor.html  |  4 ++++
 public/app/plugins/panel/singlestat/module.ts | 19 ++++++++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/panel/singlestat/editor.html b/public/app/plugins/panel/singlestat/editor.html
index 15f4e6a9efa..3b75cf87eae 100644
--- a/public/app/plugins/panel/singlestat/editor.html
+++ b/public/app/plugins/panel/singlestat/editor.html
@@ -58,6 +58,10 @@
       <gf-form-switch class="gf-form" label-class="width-8" label="Background" checked="ctrl.panel.colorBackground" on-change="ctrl.render()"></gf-form-switch>
       <gf-form-switch class="gf-form" label-class="width-4" label="Value" checked="ctrl.panel.colorValue" on-change="ctrl.render()"></gf-form-switch>
     </div>
+    <div class="gf-form-inline">
+      <gf-form-switch class="gf-form" label-class="width-6" label="Prefix" checked="ctrl.panel.colorPrefix" on-change="ctrl.render()"></gf-form-switch>
+      <gf-form-switch class="gf-form" label-class="width-6" label="Postfix" checked="ctrl.panel.colorPostfix" on-change="ctrl.render()"></gf-form-switch>
+    </div>
     <div class="gf-form-inline">
       <div class="gf-form max-width-21">
         <label class="gf-form-label width-8">Thresholds
diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts
index 20c4dcfeb70..0cf3a3a95a7 100644
--- a/public/app/plugins/panel/singlestat/module.ts
+++ b/public/app/plugins/panel/singlestat/module.ts
@@ -405,10 +405,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     elem = elem.find('.singlestat-panel');
 
     function applyColoringThresholds(value, valueString) {
-      if (!panel.colorValue) {
-        return valueString;
-      }
-
       var color = getColorForValue(data, value);
       if (color) {
         return '<span style="color:' + color + '">' + valueString + '</span>';
@@ -426,15 +422,24 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       var body = '<div class="singlestat-panel-value-container">';
 
       if (panel.prefix) {
-        var prefix = applyColoringThresholds(data.value, panel.prefix);
+        var prefix = panel.prefix;
+        if (panel.colorPrefix) {
+          prefix = applyColoringThresholds(data.value, panel.prefix);
+        }
         body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, prefix);
       }
 
-      var value = applyColoringThresholds(data.value, data.valueFormatted);
+      var value = data.valueFormatted;
+      if (panel.colorValue) {
+        value = applyColoringThresholds(data.value, value);
+      }
       body += getSpan('singlestat-panel-value', panel.valueFontSize, value);
 
       if (panel.postfix) {
-        var postfix = applyColoringThresholds(data.value, panel.postfix);
+        var postfix = panel.postfix;
+        if (panel.colorPostfix) {
+          postfix = applyColoringThresholds(data.value, panel.postfix);
+        }
         body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, postfix);
       }
 

From e11f6f5cdfbaa6c49abe37203143e2030de01831 Mon Sep 17 00:00:00 2001
From: Aman <aps.sids@gmail.com>
Date: Tue, 26 Jun 2018 13:06:26 +0530
Subject: [PATCH 2/2] Make pre/postfix coloring checkboxes inactive when gauge
 is active

---
 public/app/plugins/panel/singlestat/editor.html | 8 ++++----
 public/app/plugins/panel/singlestat/module.ts   | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/panel/singlestat/editor.html b/public/app/plugins/panel/singlestat/editor.html
index 3b75cf87eae..96576fd3c41 100644
--- a/public/app/plugins/panel/singlestat/editor.html
+++ b/public/app/plugins/panel/singlestat/editor.html
@@ -29,7 +29,7 @@
         <input type="text" class="gf-form-input width-12" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
         <label class="gf-form-label width-6">Font size</label>
         <div class="gf-form-select-wrapper">
-          <select class="gf-form-input" ng-model="ctrl.panel.prefixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()" ng-disabled="ctrl.canChangeFontSize()"></select>
+          <select class="gf-form-input" ng-model="ctrl.panel.prefixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()" ng-disabled="!ctrl.canModifyText()"></select>
         </div>
       </div>
     </div>
@@ -39,7 +39,7 @@
       <input type="text" class="gf-form-input width-12" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
       <label class="gf-form-label width-6">Font size</label>
       <div class="gf-form-select-wrapper">
-        <select class="input-small gf-form-input" ng-model="ctrl.panel.postfixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()" ng-disabled="ctrl.canChangeFontSize()"></select>
+        <select class="input-small gf-form-input" ng-model="ctrl.panel.postfixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()" ng-disabled="!ctrl.canModifyText()"></select>
       </div>
     </div>
     <div class="gf-form">
@@ -59,8 +59,8 @@
       <gf-form-switch class="gf-form" label-class="width-4" label="Value" checked="ctrl.panel.colorValue" on-change="ctrl.render()"></gf-form-switch>
     </div>
     <div class="gf-form-inline">
-      <gf-form-switch class="gf-form" label-class="width-6" label="Prefix" checked="ctrl.panel.colorPrefix" on-change="ctrl.render()"></gf-form-switch>
-      <gf-form-switch class="gf-form" label-class="width-6" label="Postfix" checked="ctrl.panel.colorPostfix" on-change="ctrl.render()"></gf-form-switch>
+      <gf-form-switch class="gf-form" label-class="width-6" label="Prefix" checked="ctrl.panel.colorPrefix" on-change="ctrl.render()" ng-disabled="!ctrl.canModifyText()"></gf-form-switch>
+      <gf-form-switch class="gf-form" label-class="width-6" label="Postfix" checked="ctrl.panel.colorPostfix" on-change="ctrl.render()" ng-disabled="!ctrl.canModifyText()"></gf-form-switch>
     </div>
     <div class="gf-form-inline">
       <div class="gf-form max-width-21">
diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts
index 0cf3a3a95a7..ebd2628b086 100644
--- a/public/app/plugins/panel/singlestat/module.ts
+++ b/public/app/plugins/panel/singlestat/module.ts
@@ -198,8 +198,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     this.setValueMapping(data);
   }
 
-  canChangeFontSize() {
-    return this.panel.gauge.show;
+  canModifyText() {
+    return !this.panel.gauge.show;
   }
 
   setColoring(options) {