Singlestat: Fixed unit not showing and switched to new unit picker (#20892)

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> {

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,

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

@@ -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>

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;
+  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;