Gauge: Improve text sizing and support non threshold color modes (#28256)

* Gauge: Improve text sizing and support non threshold color modes

* Updated tests

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

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 
 
 import { Gauge, Props } from './Gauge';
 import { Gauge, Props } from './Gauge';
 import { getTheme } from '../../themes';
 import { getTheme } from '../../themes';
-import { ThresholdsMode, FieldConfig } from '@grafana/data';
+import { ThresholdsMode, FieldConfig, FieldColorModeId } from '@grafana/data';
 
 
 jest.mock('jquery', () => ({
 jest.mock('jquery', () => ({
   plot: jest.fn(),
   plot: jest.fn(),
@@ -13,6 +13,9 @@ const setup = (propOverrides?: FieldConfig) => {
   const field: FieldConfig = {
   const field: FieldConfig = {
     min: 0,
     min: 0,
     max: 100,
     max: 100,
+    color: {
+      mode: FieldColorModeId.Thresholds,
+    },
     thresholds: {
     thresholds: {
       mode: ThresholdsMode.Absolute,
       mode: ThresholdsMode.Absolute,
       steps: [{ value: -Infinity, color: '#7EB26D' }],
       steps: [{ value: -Infinity, color: '#7EB26D' }],

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

@@ -8,9 +8,11 @@ import {
   getActiveThreshold,
   getActiveThreshold,
   Threshold,
   Threshold,
   getColorForTheme,
   getColorForTheme,
+  FieldColorModeId,
+  FALLBACK_COLOR,
 } from '@grafana/data';
 } from '@grafana/data';
 import { Themeable } from '../../types';
 import { Themeable } from '../../types';
-import { selectThemeVariant } from '../../themes';
+import { calculateFontSize } from '../../utils/measureText';
 
 
 export interface Props extends Themeable {
 export interface Props extends Themeable {
   height: number;
   height: number;
@@ -53,12 +55,18 @@ export class Gauge extends PureComponent<Props> {
   }
   }
 
 
   getFormattedThresholds(decimals: number): Threshold[] {
   getFormattedThresholds(decimals: number): Threshold[] {
-    const { field, theme } = this.props;
+    const { field, theme, value } = this.props;
+
+    if (field.color?.mode !== FieldColorModeId.Thresholds) {
+      return [{ value: field.min ?? 0, color: value.color ?? FALLBACK_COLOR }];
+    }
+
     const thresholds = field.thresholds ?? Gauge.defaultProps.field?.thresholds!;
     const thresholds = field.thresholds ?? Gauge.defaultProps.field?.thresholds!;
     const isPercent = thresholds.mode === ThresholdsMode.Percentage;
     const isPercent = thresholds.mode === ThresholdsMode.Percentage;
     const steps = thresholds.steps;
     const steps = thresholds.steps;
     let min = field.min!;
     let min = field.min!;
     let max = field.max!;
     let max = field.max!;
+
     if (isPercent) {
     if (isPercent) {
       min = 0;
       min = 0;
       max = 100;
       max = 100;
@@ -99,21 +107,12 @@ export class Gauge extends PureComponent<Props> {
 
 
     const autoProps = calculateGaugeAutoProps(width, height, value.title);
     const autoProps = calculateGaugeAutoProps(width, height, value.title);
     const dimension = Math.min(width, autoProps.gaugeHeight);
     const dimension = Math.min(width, autoProps.gaugeHeight);
-
-    const backgroundColor = selectThemeVariant(
-      {
-        dark: theme.palette.dark8,
-        light: theme.palette.gray6,
-      },
-      theme.type
-    );
-
+    const backgroundColor = theme.colors.bg2;
     const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
     const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
     const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio;
     const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio;
     const thresholdMarkersWidth = gaugeWidth / 5;
     const thresholdMarkersWidth = gaugeWidth / 5;
     const text = formattedValueToString(value);
     const text = formattedValueToString(value);
-    const fontSize = Math.min(dimension / 4, 100) * (text !== null ? this.getFontScale(text.length) : 1);
-
+    const fontSize = calculateFontSize(text, dimension - gaugeWidth * 3, dimension, 1, 48);
     const thresholdLabelFontSize = fontSize / 2.5;
     const thresholdLabelFontSize = fontSize / 2.5;
 
 
     let min = field.min!;
     let min = field.min!;