move typings to types,

packages/grafana-ui/src/components/BarGauge/BarGauge.tsx

@@ -3,10 +3,10 @@ import React, { PureComponent, CSSProperties, ReactNode } from 'react';
 import tinycolor from 'tinycolor2';
 
 // Utils
-import { getColorFromHexRgbOrName, getThresholdForValue, DisplayValue } from '../../utils';
+import { getColorFromHexRgbOrName, getThresholdForValue } from '../../utils';
 
 // Types
-import { Themeable, TimeSeriesValue, Threshold, VizOrientation } from '../../types';
+import { DisplayValue, Themeable, TimeSeriesValue, Threshold, VizOrientation } from '../../types';
 
 const BAR_SIZE_RATIO = 0.8;
 

packages/grafana-ui/src/components/Gauge/Gauge.tsx

 import React, { PureComponent } from 'react';
 import $ from 'jquery';
 
-import { Threshold, GrafanaThemeType } from '../../types';
 import { getColorFromHexRgbOrName } from '../../utils';
-import { Themeable } from '../../index';
-import { DisplayValue } from '../../utils/displayValue';
+
+import { DisplayValue, Threshold, GrafanaThemeType, Themeable } from '../../types';
 
 export interface Props extends Themeable {
   height: number;

packages/grafana-ui/src/types/displayValue.ts

+import { DecimalCount } from '../utils';
+import { ValueMapping } from './panel';
+import { Threshold } from './threshold';
+import { GrafanaTheme } from './theme';
+
+export interface DisplayValue {
+  text: string; // Show in the UI
+  numeric: number; // Use isNaN to check if it is a real number
+  color?: string; // color based on configs or Threshold
+}
+
+export interface DisplayValueOptions {
+  unit?: string;
+  decimals?: DecimalCount;
+  dateFormat?: string; // If set try to convert numbers to date
+
+  color?: string;
+  mappings?: ValueMapping[];
+  thresholds?: Threshold[];
+  prefix?: string;
+  suffix?: string;
+
+  // Alternative to empty string
+  noValue?: string;
+
+  // Context
+  isUtc?: boolean;
+  theme?: GrafanaTheme; // Will pick 'dark' if not defined
+}
+
+export interface DecimalInfo {
+  decimals: number;
+  scaledDecimals: number;
+}

packages/grafana-ui/src/types/index.ts

@@ -6,3 +6,4 @@ export * from './datasource';
 export * from './theme';
 export * from './threshold';
 export * from './input';
+export * from './displayValue';

packages/grafana-ui/src/utils/displayValue.test.ts

-import {
-  getDisplayProcessor,
-  getColorFromThreshold,
-  DisplayProcessor,
-  DisplayValue,
-  getDecimalsForValue,
-} from './displayValue';
-import { MappingType, ValueMapping } from '../types';
+import { getDisplayProcessor, getColorFromThreshold, DisplayProcessor, getDecimalsForValue } from './displayValue';
+import { DisplayValue, MappingType, ValueMapping } from '../types';
 
 function assertSame(input: any, processors: DisplayProcessor[], match: DisplayValue) {
   processors.forEach(processor => {
@@ -134,7 +128,7 @@ describe('Format value', () => {
 
     const result = instance(value);
 
-    expect(result.text).toEqual('6');
+    expect(result.text).toEqual('6.0');
   });
 
   it('should return formatted value if there are no matching value mappings', () => {
@@ -147,7 +141,14 @@ describe('Format value', () => {
 
     const result = instance(value);
 
-    expect(result.text).toEqual('10');
+    expect(result.text).toEqual('10.0');
+  });
+
+  it('should set auto decimals, 1 significant', () => {
+    const value = '1.23';
+    const instance = getDisplayProcessor({ decimals: null });
+
+    expect(instance(value).text).toEqual('1.2');
   });
 
   it('should return mapped value if there are matching value mappings', () => {

packages/grafana-ui/src/utils/displayValue.ts

@@ -3,37 +3,12 @@ import _ from 'lodash';
 import moment from 'moment';
 
 // Utils
-import { getValueFormat, DecimalCount } from './valueFormats/valueFormats';
+import { getValueFormat } from './valueFormats/valueFormats';
 import { getMappedValue } from './valueMappings';
 import { getColorFromHexRgbOrName } from './namedColorsPalette';
 
 // Types
-import { GrafanaTheme, GrafanaThemeType, ValueMapping, Threshold } from '../types';
-
-export interface DisplayValue {
-  text: string; // Show in the UI
-  numeric: number; // Use isNaN to check if it is a real number
-  color?: string; // color based on configs or Threshold
-}
-
-export interface DisplayValueOptions {
-  unit?: string;
-  decimals?: DecimalCount;
-  dateFormat?: string; // If set try to convert numbers to date
-
-  color?: string;
-  mappings?: ValueMapping[];
-  thresholds?: Threshold[];
-  prefix?: string;
-  suffix?: string;
-
-  // Alternative to empty string
-  noValue?: string;
-
-  // Context
-  isUtc?: boolean;
-  theme?: GrafanaTheme; // Will pick 'dark' if not defined
-}
+import { DecimalInfo, DisplayValue, DisplayValueOptions, GrafanaTheme, GrafanaThemeType, Threshold } from '../types';
 
 export type DisplayProcessor = (value: any) => DisplayValue;
 
@@ -74,8 +49,23 @@ export function getDisplayProcessor(options?: DisplayValueOptions): DisplayProce
 
       if (!isNaN(numeric)) {
         if (shouldFormat && !_.isBoolean(value)) {
+          let decimals;
+          let scaledDecimals = 0;
+
+          if (!options.decimals) {
             const decimalInfo = getDecimalsForValue(value);
-          text = formatFunc(numeric, decimalInfo.decimals, decimalInfo.scaledDecimals, options.isUtc);
+
+            decimals = decimalInfo.decimals;
+            scaledDecimals = decimalInfo.scaledDecimals;
+          } else {
+            decimals = options.decimals;
+          }
+
+          console.log('coin coin', value);
+          console.log(decimals);
+          console.log(scaledDecimals);
+
+          text = formatFunc(numeric, decimals, scaledDecimals, options.isUtc);
         }
         if (thresholds && thresholds.length > 0) {
           color = getColorFromThreshold(numeric, thresholds, theme);
@@ -152,7 +142,7 @@ export function getColorFromThreshold(value: number, thresholds: Threshold[], th
   return getColorFromHexRgbOrName(thresholds[0].color, themeType);
 }
 
-export function getDecimalsForValue(value: number): { decimals: number; scaledDecimals: number } {
+export function getDecimalsForValue(value: number): DecimalInfo {
   const delta = value / 2;
   let dec = -Math.floor(Math.log(delta) / Math.LN10);