Add options to colorize prefix and postfix in singlestat

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

@@ -59,6 +59,10 @@
       <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
           <tip>Define two threshold values&lt;br /&gt; 50,80 will produce: value &lt; 50 = Green, 50 &lt;= value &lt; 80 = Yellow, value &gt;= 80 = Red</tip>

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);
       }