diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx index 396b7a03162..d4051b5ea22 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx @@ -116,7 +116,7 @@ describe('Format value', () => { const result = instance.formatValue(value); - expect(result).toEqual(' 6.0 '); + expect(result).toEqual('6.0'); }); it('should return formatted value if there are no matching value mappings', () => { @@ -129,7 +129,7 @@ describe('Format value', () => { const result = instance.formatValue(value); - expect(result).toEqual(' 10.0 '); + expect(result).toEqual('10.0'); }); it('should return mapped value if there are matching value mappings', () => { @@ -142,6 +142,6 @@ describe('Format value', () => { const result = instance.formatValue(value); - expect(result).toEqual(' 1-20 '); + expect(result).toEqual('1-20'); }); }); diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index 2ca7cddb05e..06bebcf8bb2 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -61,7 +61,7 @@ export class Gauge extends PureComponent { if (valueMappings.length > 0) { const valueMappedValue = getMappedValue(valueMappings, value); if (valueMappedValue) { - return `${prefix} ${valueMappedValue.text} ${suffix}`; + return `${prefix && prefix + ' '}${valueMappedValue.text}${suffix && ' ' + suffix}`; } } @@ -147,9 +147,8 @@ export class Gauge extends PureComponent { const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1; const gaugeWidth = Math.min(dimension / 6, 60) / gaugeWidthReduceRatio; const thresholdMarkersWidth = gaugeWidth / 5; - const fontSize = Math.ceil( - Math.min(dimension / 5, 100) * (formattedValue !== null ? this.getFontScale(formattedValue.length) : 1) - ); + const fontSize = + Math.min(dimension / 5, 100) * (formattedValue !== null ? this.getFontScale(formattedValue.length) : 1); const thresholdLabelFontSize = fontSize / 2.5; const options = { @@ -180,7 +179,7 @@ export class Gauge extends PureComponent { value: { color: this.getFontColor(value), formatter: () => { - return this.formatValue(value); + return formattedValue; }, font: { size: fontSize, family: '"Helvetica Neue", Helvetica, Arial, sans-serif' }, },