Merge pull request #15110 from grafana/15053/gauge-value-font-size

Automatically scale font size on Gauge value

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');
   });
 });

packages/grafana-ui/src/components/Gauge/Gauge.tsx

 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<Props> {
   canvasElement: any;
 
@@ -63,7 +62,7 @@ export class Gauge extends PureComponent<Props> {
     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<Props> {
     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<Props> {
     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<Props> {
       }),
       { 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<Props> {
       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<Props> {
           value: {
             color: this.getFontColor(value),
             formatter: () => {
-              return this.formatValue(value);
+              return formattedValue;
             },
             font: { size: fontSize, family: '"Helvetica Neue", Helvetica, Arial, sans-serif' },
           },

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=