From 2b7a5702734eae53d800763252c5088711a92446 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Wed, 4 Nov 2020 17:07:37 +0100
Subject: [PATCH] Gauge: Improve font size auto sizing (#28797)

* Gauge: Improved font size calculations

* Added some comments

* update

* Moving to variable
---
 .../grafana-ui/src/components/Gauge/Gauge.tsx    | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx
index 1987a7b0d10..7ad6add7c19 100644
--- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx
+++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx
@@ -25,8 +25,6 @@ export interface Props extends Themeable {
   className?: string;
 }
 
-const FONT_SCALE = 1;
-
 export class Gauge extends PureComponent<Props> {
   canvasElement: any;
 
@@ -95,13 +93,6 @@ export class Gauge extends PureComponent<Props> {
     return formatted;
   }
 
-  getFontScale(length: number): number {
-    if (length > 12) {
-      return FONT_SCALE - (length * 5) / 110;
-    }
-    return FONT_SCALE - (length * 5) / 101;
-  }
-
   draw() {
     const { field, showThresholdLabels, showThresholdMarkers, width, height, theme, value } = this.props;
 
@@ -112,7 +103,12 @@ export class Gauge extends PureComponent<Props> {
     const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio;
     const thresholdMarkersWidth = gaugeWidth / 5;
     const text = formattedValueToString(value);
-    const fontSize = calculateFontSize(text, dimension - gaugeWidth * 3, dimension, 1, 48);
+    // This not 100% accurate as I am unsure of flot's calculations here
+    const valueWidthBase = Math.min(width, dimension * 1.3) * 0.9;
+    // remove gauge & marker width (on left and right side)
+    // and 10px is some padding that flot adds to the outer canvas
+    const valueWidth = valueWidthBase - ((gaugeWidth + (showThresholdMarkers ? thresholdMarkersWidth : 0)) * 2 + 10);
+    const fontSize = calculateFontSize(text, valueWidth, dimension, 1, 48);
     const thresholdLabelFontSize = fontSize / 2.5;
 
     let min = field.min!;