From 142ebc754652ee22882366f8d545495466d4d75e Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Fri, 25 Jan 2019 16:38:51 +0100 Subject: [PATCH 1/3] some working solution, needs refactor --- .../grafana-ui/src/components/Gauge/Gauge.tsx | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index 2dce20543fd..2ca7cddb05e 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -1,10 +1,10 @@ import React, { PureComponent } from 'react'; import $ from 'jquery'; -import { ValueMapping, Threshold, ThemeName, BasicGaugeColor, ThemeNames } from '../../types/panel'; -import { TimeSeriesVMs } from '../../types/series'; -import { getValueFormat } from '../../utils/valueFormats/valueFormats'; -import { TimeSeriesValue, getMappedValue } from '../../utils/valueMappings'; +import { BasicGaugeColor, ThemeName, ThemeNames, Threshold, ValueMapping } from '../../types'; +import { TimeSeriesVMs } from '../../types'; +import { getValueFormat } from '../../utils'; +import { getMappedValue, TimeSeriesValue } from '../../utils/valueMappings'; export interface Props { decimals: number; @@ -24,6 +24,8 @@ export interface Props { theme?: ThemeName; } +const FONT_SCALE = 1; + export class Gauge extends PureComponent { canvasElement: any; @@ -67,7 +69,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) { @@ -98,7 +100,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: threshold.color }; @@ -109,8 +111,13 @@ export class Gauge extends PureComponent { }), { value: maxValue, color: lastThreshold.color }, ]; + } - return formattedThresholds; + getFontScale(length: number): number { + if (length > 12) { + return FONT_SCALE - length * 5 / 115; + } + return FONT_SCALE - length * 5 / 105; } draw() { @@ -134,13 +141,15 @@ 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 === ThemeNames.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.ceil( + Math.min(dimension / 5, 100) * (formattedValue !== null ? this.getFontScale(formattedValue.length) : 1) + ); const thresholdLabelFontSize = fontSize / 2.5; const options = { From 4b0df606d5e0ebee5cbbf01defa12a8362df0527 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 29 Jan 2019 10:35:42 +0100 Subject: [PATCH 2/3] magic number solution --- packages/grafana-ui/src/components/Gauge/Gauge.test.tsx | 6 +++--- packages/grafana-ui/src/components/Gauge/Gauge.tsx | 9 ++++----- 2 files changed, 7 insertions(+), 8 deletions(-) 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' }, }, From 462bdb6d13bd981930cf6682d1864ccccf80ede7 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 29 Jan 2019 11:01:35 +0100 Subject: [PATCH 3/3] increasing font size on longer strings --- packages/grafana-ui/src/components/Gauge/Gauge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index 06bebcf8bb2..e1f634b8071 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -115,7 +115,7 @@ export class Gauge extends PureComponent { getFontScale(length: number): number { if (length > 12) { - return FONT_SCALE - length * 5 / 115; + return FONT_SCALE - length * 5 / 120; } return FONT_SCALE - length * 5 / 105; }