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 90248a9b6b0..d4d8442593e 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -1,12 +1,9 @@ import React, { PureComponent } from 'react'; import $ from 'jquery'; -import { ValueMapping, Threshold, BasicGaugeColor } from '../../types/panel'; -import { TimeSeriesVMs } from '../../types/series'; -import { GrafanaTheme } from '../../types'; +import { ValueMapping, Threshold, BasicGaugeColor, TimeSeriesVMs, GrafanaTheme } from '../../types'; import { getMappedValue } from '../../utils/valueMappings'; -import { getValueFormat } from '../../utils/valueFormats/valueFormats'; -import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; +import { getColorFromHexRgbOrName, getValueFormat } from '../../utils'; type TimeSeriesValue = string | number | null; @@ -28,6 +25,8 @@ export interface Props { theme?: GrafanaTheme; } +const FONT_SCALE = 1; + export class Gauge extends PureComponent { canvasElement: any; @@ -63,7 +62,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}`; } } @@ -71,7 +70,7 @@ export class Gauge extends PureComponent { const formattedValue = formatFunc(value as number, decimals); const handleNoValueValue = formattedValue || 'no value'; - return `${prefix} ${handleNoValueValue} ${suffix}`; + return `${prefix && prefix + ' '}${handleNoValueValue}${suffix && ' ' + suffix}`; } getFontColor(value: TimeSeriesValue) { @@ -102,7 +101,7 @@ export class Gauge extends PureComponent { const thresholdsSortedByIndex = [...thresholds].sort((t1, t2) => t1.index - t2.index); const lastThreshold = thresholdsSortedByIndex[thresholdsSortedByIndex.length - 1]; - const formattedThresholds = [ + return [ ...thresholdsSortedByIndex.map(threshold => { if (threshold.index === 0) { return { value: minValue, color: getColorFromHexRgbOrName(threshold.color, theme) }; @@ -113,8 +112,13 @@ export class Gauge extends PureComponent { }), { value: maxValue, color: getColorFromHexRgbOrName(lastThreshold.color, theme) }, ]; + } - return formattedThresholds; + getFontScale(length: number): number { + if (length > 12) { + return FONT_SCALE - length * 5 / 120; + } + return FONT_SCALE - length * 5 / 105; } draw() { @@ -138,13 +142,14 @@ export class Gauge extends PureComponent { value = null; } + const formattedValue = this.formatValue(value) as string; const dimension = Math.min(width, height * 1.3); const backgroundColor = theme === GrafanaTheme.Light ? 'rgb(230,230,230)' : 'rgb(38,38,38)'; - const fontScale = parseInt('80', 10) / 100; - const fontSize = Math.min(dimension / 5, 100) * fontScale; const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1; const gaugeWidth = Math.min(dimension / 6, 60) / gaugeWidthReduceRatio; const thresholdMarkersWidth = gaugeWidth / 5; + const fontSize = + Math.min(dimension / 5, 100) * (formattedValue !== null ? this.getFontScale(formattedValue.length) : 1); const thresholdLabelFontSize = fontSize / 2.5; const options = { @@ -175,7 +180,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' }, }, diff --git a/yarn.lock b/yarn.lock index c674f3e1709..b2508f7f7da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6077,7 +6077,7 @@ debug@^4.1.0: dependencies: ms "^2.1.1" -debuglog@*, debuglog@^1.0.1: +debuglog@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492" integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI= @@ -8991,7 +8991,7 @@ import-local@^2.0.0: pkg-dir "^3.0.0" resolve-cwd "^2.0.0" -imurmurhash@*, imurmurhash@^0.1.4: +imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= @@ -10763,11 +10763,6 @@ lockfile@^1.0.4: dependencies: signal-exit "^3.0.2" -lodash._baseindexof@*: - version "3.1.0" - resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c" - integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw= - lodash._baseuniq@~4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8" @@ -10776,29 +10771,12 @@ lodash._baseuniq@~4.6.0: lodash._createset "~4.0.0" lodash._root "~3.0.0" -lodash._bindcallback@*: - version "3.0.1" - resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e" - integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4= - -lodash._cacheindexof@*: - version "3.0.2" - resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92" - integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI= - -lodash._createcache@*: - version "3.1.2" - resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093" - integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM= - dependencies: - lodash._getnative "^3.0.0" - lodash._createset@~4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26" integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY= -lodash._getnative@*, lodash._getnative@^3.0.0: +lodash._getnative@^3.0.0: version "3.9.1" resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U= @@ -10892,11 +10870,6 @@ lodash.mergewith@^4.6.0: resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927" integrity sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ== -lodash.restparam@*: - version "3.6.1" - resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805" - integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU= - lodash.some@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d" @@ -14463,7 +14436,7 @@ readable-stream@~1.1.10: isarray "0.0.1" string_decoder "~0.10.x" -readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0: +readdir-scoped-modules@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.0.2.tgz#9fafa37d286be5d92cbaebdee030dc9b5f406747" integrity sha1-n6+jfShr5dksuuve4DDcm19AZ0c=