From 20fad92a80acaa07eb7f4e237713d73ed67b7de4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 5 Dec 2019 11:54:14 +0100
Subject: [PATCH] Singlestat: Fixed unit not showing and switched to new unit
 picker (#20892)

---
 .../src/components/UnitPicker/UnitPicker.tsx  |  2 +-
 public/app/plugins/panel/graph/axes_editor.ts |  4 ----
 .../app/plugins/panel/singlestat/editor.html  | 10 ++++-----
 public/app/plugins/panel/singlestat/module.ts | 21 ++++++++++++-------
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx b/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
index df8ebb64586..4a85f410839 100644
--- a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
+++ b/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
@@ -11,7 +11,7 @@ interface Props {
 }
 
 function formatCreateLabel(input: string) {
-  return `Unit suffix: ${input}`;
+  return `Custom unit: ${input}`;
 }
 
 export class UnitPicker extends PureComponent<Props> {
diff --git a/public/app/plugins/panel/graph/axes_editor.ts b/public/app/plugins/panel/graph/axes_editor.ts
index b7650f5ce73..0a26428edee 100644
--- a/public/app/plugins/panel/graph/axes_editor.ts
+++ b/public/app/plugins/panel/graph/axes_editor.ts
@@ -1,10 +1,8 @@
-import { getValueFormats } from '@grafana/data';
 import { GraphCtrl } from './module';
 
 export class AxesEditorCtrl {
   panel: any;
   panelCtrl: GraphCtrl;
-  unitFormats: any;
   logScales: any;
   xAxisModes: any;
   xAxisStatOptions: any;
@@ -16,8 +14,6 @@ export class AxesEditorCtrl {
     this.panel = this.panelCtrl.panel;
     this.$scope.ctrl = this;
 
-    this.unitFormats = getValueFormats();
-
     this.logScales = {
       linear: 1,
       'log (base 2)': 2,
diff --git a/public/app/plugins/panel/singlestat/editor.html b/public/app/plugins/panel/singlestat/editor.html
index 269bfafff02..c61b1dcf6d1 100644
--- a/public/app/plugins/panel/singlestat/editor.html
+++ b/public/app/plugins/panel/singlestat/editor.html
@@ -5,7 +5,7 @@
     <p>
       Gauge visualizations within the Singlestat panel are deprecated.  Please
       migrate this panel to use the Gauge panel
-    
+
       <div class="gf-form-button-row">
         <button class="btn btn-primary" ng-click="ctrl.migrateToGaugePanel(true)">
           Migrate to Gauge Panel
@@ -14,9 +14,9 @@
           Show as single stat
         </button>
       </div>
-    
+
       <br/>
-      
+
       <div ng-if="ctrl.panel.sparkline.show">
         <b>NOTE:</b> Sparklines are not supported in the gauge panel
       </div>
@@ -34,7 +34,7 @@
       </div>
     </p>
   </div>
-    
+
 
   <div class="section gf-form-group">
     <h5 class="section-heading">Value</h5>
@@ -88,7 +88,7 @@
     </div>
     <div class="gf-form">
       <label class="gf-form-label width-6">Unit</label>
-      <div class="gf-form-dropdown-typeahead width-18" ng-model="ctrl.panel.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)"></div>
+      <unit-picker onChange="ctrl.setUnitFormat()" value="ctrl.panel.format" width="18" />
     </div>
     <div class="gf-form">
       <label class="gf-form-label width-6">Decimals</label>
diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts
index 58646601077..0a1dcba4830 100644
--- a/public/app/plugins/panel/singlestat/module.ts
+++ b/public/app/plugins/panel/singlestat/module.ts
@@ -21,12 +21,12 @@ import {
   getDisplayProcessor,
   getColorFromHexRgbOrName,
   PanelEvents,
+  formattedValueToString,
 } from '@grafana/data';
 
 import { convertOldAngularValueMapping } from '@grafana/ui';
 
 import { CoreEvents } from 'app/types';
-import kbn from 'app/core/utils/kbn';
 import config from 'app/core/config';
 import { MetricsPanelCtrl } from 'app/plugins/sdk';
 import { LinkSrv } from 'app/features/panel/panellinks/link_srv';
@@ -52,7 +52,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
   data: Partial<ShowData> = {};
 
   fontSizes: any[];
-  unitFormats: any[];
   fieldNames: string[] = [];
 
   invalidGaugeRange: boolean;
@@ -137,7 +136,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     this.fontSizes = ['20%', '30%', '50%', '70%', '80%', '100%', '110%', '120%', '150%', '170%', '200%'];
     this.addEditorTab('Options', 'public/app/plugins/panel/singlestat/editor.html', 2);
     this.addEditorTab('Value Mappings', 'public/app/plugins/panel/singlestat/mappings.html', 3);
-    this.unitFormats = kbn.getUnitFormats();
   }
 
   migrateToGaugePanel(migrate: boolean) {
@@ -149,9 +147,11 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     }
   }
 
-  setUnitFormat(subItem: { value: any }) {
-    this.panel.format = subItem.value;
-    this.refresh();
+  setUnitFormat() {
+    return (unit: string) => {
+      this.panel.format = unit;
+      this.refresh();
+    };
   }
 
   onSnapshotLoad(dataList: LegacyResponseData[]) {
@@ -371,7 +371,12 @@ class SingleStatCtrl extends MetricsPanelCtrl {
         body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, panel.colorPrefix, panel.prefix);
       }
 
-      body += getSpan('singlestat-panel-value', panel.valueFontSize, panel.colorValue, data.display.text);
+      body += getSpan(
+        'singlestat-panel-value',
+        panel.valueFontSize,
+        panel.colorValue,
+        formattedValueToString(data.display)
+      );
 
       if (panel.postfix) {
         body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.colorPostfix, panel.postfix);
@@ -385,7 +390,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     function getValueText() {
       const data: ShowData = ctrl.data;
       let result = panel.prefix ? templateSrv.replace(panel.prefix, data.scopedVars) : '';
-      result += data.display.text;
+      result += formattedValueToString(data.display);
       result += panel.postfix ? templateSrv.replace(panel.postfix, data.scopedVars) : '';
 
       return result;