Gauge: apply decimal limits to gauge min/max labels (#24192)

* limit label size

* fix tests

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

@@ -48,7 +48,7 @@ describe('Get thresholds formatted', () => {
       thresholds: { mode: ThresholdsMode.Absolute, steps: [{ value: -Infinity, color: '#7EB26D' }] },
     });
 
-    expect(instance.getFormattedThresholds()).toEqual([
+    expect(instance.getFormattedThresholds(2)).toEqual([
       { value: 0, color: '#7EB26D' },
       { value: 100, color: '#7EB26D' },
     ]);
@@ -66,7 +66,7 @@ describe('Get thresholds formatted', () => {
       },
     });
 
-    expect(instance.getFormattedThresholds()).toEqual([
+    expect(instance.getFormattedThresholds(2)).toEqual([
       { value: 0, color: '#7EB26D' },
       { value: 50, color: '#7EB26D' },
       { value: 75, color: '#EAB839' },

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

@@ -52,7 +52,7 @@ export class Gauge extends PureComponent<Props> {
     this.draw();
   }
 
-  getFormattedThresholds(): Threshold[] {
+  getFormattedThresholds(decimals: number): Threshold[] {
     const { field, theme } = this.props;
     const thresholds = field.thresholds ?? Gauge.defaultProps.field?.thresholds!;
     const isPercent = thresholds.mode === ThresholdsMode.Percentage;
@@ -67,7 +67,7 @@ export class Gauge extends PureComponent<Props> {
     const first = getActiveThreshold(min, steps);
     const last = getActiveThreshold(max, steps);
     const formatted: Threshold[] = [];
-    formatted.push({ value: min, color: getColorFromHexRgbOrName(first.color, theme.type) });
+    formatted.push({ value: +min.toFixed(decimals), color: getColorFromHexRgbOrName(first.color, theme.type) });
     let skip = true;
     for (let i = 0; i < steps.length; i++) {
       const step = steps[i];
@@ -83,7 +83,7 @@ export class Gauge extends PureComponent<Props> {
         break;
       }
     }
-    formatted.push({ value: max, color: getColorFromHexRgbOrName(last.color, theme.type) });
+    formatted.push({ value: +max.toFixed(decimals), color: getColorFromHexRgbOrName(last.color, theme.type) });
     return formatted;
   }
 
@@ -129,6 +129,12 @@ export class Gauge extends PureComponent<Props> {
       }
     }
 
+    const decimals = field.decimals === undefined ? 2 : field.decimals!;
+    if (showThresholdMarkers) {
+      min = +min.toFixed(decimals);
+      max = +max.toFixed(decimals);
+    }
+
     const options: any = {
       series: {
         gauges: {
@@ -145,7 +151,7 @@ export class Gauge extends PureComponent<Props> {
           layout: { margin: 0, thresholdWidth: 0, vMargin: 0 },
           cell: { border: { width: 0 } },
           threshold: {
-            values: this.getFormattedThresholds(),
+            values: this.getFormattedThresholds(decimals),
             label: {
               show: showThresholdLabels,
               margin: thresholdMarkersWidth + 1,