Gauge: Improve font size auto sizing (#28797) (#28828)

* Gauge: Improved font size calculations

* Added some comments

* update

* Moving to variable

(cherry picked from commit 2b7a570273)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

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!;