minor UI update

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

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

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;
+    const suffix = getValueFormat(this.grafanaOptions.gauge.unit)(0)?.suffix || '';
-    return `${value.toFixed(decimals)} ${this.grafanaOptions.gauge.unit}`;
+    const decimals = _.isNumber(this.grafanaOptions.gauge.decimals) ? this.grafanaOptions.gauge.decimals : 2;
+    return `${value.toFixed(decimals)} ${suffix}`;
   }
 
   getChartwerkOptions(): any {