diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx index 99d2d061a11..a5a2190b8ca 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx +++ b/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; diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index f812cc971bc..8118fe82f19 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -1,10 +1,9 @@ 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; diff --git a/packages/grafana-ui/src/types/displayValue.ts b/packages/grafana-ui/src/types/displayValue.ts new file mode 100644 index 00000000000..3d8f2d23ddb --- /dev/null +++ b/packages/grafana-ui/src/types/displayValue.ts @@ -0,0 +1,34 @@ +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; +} diff --git a/packages/grafana-ui/src/types/index.ts b/packages/grafana-ui/src/types/index.ts index c0aede431d0..1aec63c8690 100644 --- a/packages/grafana-ui/src/types/index.ts +++ b/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'; diff --git a/packages/grafana-ui/src/utils/displayValue.test.ts b/packages/grafana-ui/src/utils/displayValue.test.ts index c52aee6f87b..39f5ea4de3c 100644 --- a/packages/grafana-ui/src/utils/displayValue.test.ts +++ b/packages/grafana-ui/src/utils/displayValue.test.ts @@ -1,11 +1,5 @@ -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', () => { diff --git a/packages/grafana-ui/src/utils/displayValue.ts b/packages/grafana-ui/src/utils/displayValue.ts index 2d424805d2c..7c83d85d882 100644 --- a/packages/grafana-ui/src/utils/displayValue.ts +++ b/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)) { - const decimalInfo = getDecimalsForValue(value); - text = formatFunc(numeric, decimalInfo.decimals, decimalInfo.scaledDecimals, options.isUtc); + let decimals; + let scaledDecimals = 0; + + if (!options.decimals) { + const decimalInfo = getDecimalsForValue(value); + + 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);