From de0011105306ebe34c398864ba0740d423657c77 Mon Sep 17 00:00:00 2001
From: vargburz <vargburz@corpglory.com>
Date: Wed, 11 May 2022 14:17:49 +0300
Subject: [PATCH] minor UI update

---
 src/components/editors/ThresholdsEditor.tsx |  5 +++--
 src/components/editors/UseMetricEditor.tsx  |  1 +
 src/models/options.ts                       | 14 ++++++++++----
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/editors/ThresholdsEditor.tsx b/src/components/editors/ThresholdsEditor.tsx
index f31df00..aacfc10 100644
--- a/src/components/editors/ThresholdsEditor.tsx
+++ b/src/components/editors/ThresholdsEditor.tsx
@@ -73,7 +73,7 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
         const styles = getStyles(theme.v1);
         return (
           <div>
-            <InlineField label="Default Gauge Color">
+            <InlineField label="Default Gauge Color" labelWidth={20}>
               <InlineLabel>
                 <ColorPicker
                   color={config.defaultColor}
@@ -83,7 +83,7 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
               </InlineLabel>
             </InlineField>
 
-            <InlineField label="Arc Background">
+            <InlineField label="Arc Background" labelWidth={20}>
               <InlineLabel>
                 <ColorPicker
                   color={config.arcBackground}
@@ -112,6 +112,7 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
                     ) : (
                       <Input
                         placeholder="value"
+                        width={24}
                         value={threshold.value}
                         onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'value', (evt.target as any).value)}
                       />
diff --git a/src/components/editors/UseMetricEditor.tsx b/src/components/editors/UseMetricEditor.tsx
index 37f7de0..cb2b248 100644
--- a/src/components/editors/UseMetricEditor.tsx
+++ b/src/components/editors/UseMetricEditor.tsx
@@ -53,6 +53,7 @@ export function UseMetricEditor({ onChange, value, context }: StandardEditorProp
           <Input
             placeholder="value"
             value={config.value}
+            width={24}
             onChange={(evt) => onFieldChange('value', (evt.target as any).value)}
           />
         )}
diff --git a/src/models/options.ts b/src/models/options.ts
index a07daaa..828fb6b 100644
--- a/src/models/options.ts
+++ b/src/models/options.ts
@@ -1,8 +1,13 @@
-import _ from 'lodash';
 import { PanelOptions, Aggregation, Threshold } from 'types';
 
 import { filterMetricListByAlias, getAggregatedValueFromSerie } from '../utils';
 
+import { getValueFormat } from '@grafana/data';
+
+import _ from 'lodash';
+
+
+
 // Convert Grafana options into Chartwerk Gauge options
 export class Options {
   private minValue: number | undefined;
@@ -43,7 +48,7 @@ export class Options {
   }
 
   private _setThreshold(threshold: Threshold, idx: number): void {
-    const value = threshold.useMetric ? this.getLastValueFromMetrics(threshold.metricName, `Threshold ${idx}`) : threshold.value;
+    const value = threshold.useMetric ? this.getLastValueFromMetrics(threshold.metricName, `Threshold ${idx + 1}`) : threshold.value;
     if(value === null || value === undefined) {
       // TODO: may be throw an error
       return;
@@ -55,8 +60,9 @@ export class Options {
   }
 
   private _valueFormatter(value: number): string {
-    const decimals = this.grafanaOptions.gauge.decimals || 2;
-    return `${value.toFixed(decimals)} ${this.grafanaOptions.gauge.unit}`;
+    const suffix = getValueFormat(this.grafanaOptions.gauge.unit)(0)?.suffix || '';
+    const decimals = _.isNumber(this.grafanaOptions.gauge.decimals) ? this.grafanaOptions.gauge.decimals : 2;
+    return `${value.toFixed(decimals)} ${suffix}`;
   }
 
   getChartwerkOptions(): any {