diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx index 300d113b1ac..4f0be7ef19a 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx @@ -48,7 +48,7 @@ describe('Get thresholds formatted', () => { thresholds: { mode: ThresholdsMode.Absolute, steps: [{ value: -Infinity, color: '#7EB26D' }] }, }); - expect(instance.getFormattedThresholds()).toEqual([ + expect(instance.getFormattedThresholds(2)).toEqual([ { value: 0, color: '#7EB26D' }, { value: 100, color: '#7EB26D' }, ]); @@ -66,7 +66,7 @@ describe('Get thresholds formatted', () => { }, }); - expect(instance.getFormattedThresholds()).toEqual([ + expect(instance.getFormattedThresholds(2)).toEqual([ { value: 0, color: '#7EB26D' }, { value: 50, color: '#7EB26D' }, { value: 75, color: '#EAB839' }, diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index e05fa68e8b6..8d31ec27a8f 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -52,7 +52,7 @@ export class Gauge extends PureComponent { this.draw(); } - getFormattedThresholds(): Threshold[] { + getFormattedThresholds(decimals: number): Threshold[] { const { field, theme } = this.props; const thresholds = field.thresholds ?? Gauge.defaultProps.field?.thresholds!; const isPercent = thresholds.mode === ThresholdsMode.Percentage; @@ -67,7 +67,7 @@ export class Gauge extends PureComponent { const first = getActiveThreshold(min, steps); const last = getActiveThreshold(max, steps); const formatted: Threshold[] = []; - formatted.push({ value: min, color: getColorFromHexRgbOrName(first.color, theme.type) }); + formatted.push({ value: +min.toFixed(decimals), color: getColorFromHexRgbOrName(first.color, theme.type) }); let skip = true; for (let i = 0; i < steps.length; i++) { const step = steps[i]; @@ -83,7 +83,7 @@ export class Gauge extends PureComponent { break; } } - formatted.push({ value: max, color: getColorFromHexRgbOrName(last.color, theme.type) }); + formatted.push({ value: +max.toFixed(decimals), color: getColorFromHexRgbOrName(last.color, theme.type) }); return formatted; } @@ -129,6 +129,12 @@ export class Gauge extends PureComponent { } } + const decimals = field.decimals === undefined ? 2 : field.decimals!; + if (showThresholdMarkers) { + min = +min.toFixed(decimals); + max = +max.toFixed(decimals); + } + const options: any = { series: { gauges: { @@ -145,7 +151,7 @@ export class Gauge extends PureComponent { layout: { margin: 0, thresholdWidth: 0, vMargin: 0 }, cell: { border: { width: 0 } }, threshold: { - values: this.getFormattedThresholds(), + values: this.getFormattedThresholds(decimals), label: { show: showThresholdLabels, margin: thresholdMarkersWidth + 1,