[v10.0.x] Gauge: Set min and max for percent unit (#67719)

Gauge: Set min and max for percent unit (#67517)

* Gauge: Set min and max for percent unit

* Remove exclamation mark

* Add parentheses around ternary

(cherry picked from commit 6570ec7afe)

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

public/app/plugins/panel/gauge/GaugePanel.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 
-import { FieldDisplay, getFieldDisplayValues, PanelProps } from '@grafana/data';
+import { FieldDisplay, getDisplayProcessor, getFieldDisplayValues, PanelProps } from '@grafana/data';
 import { DataLinksContextMenu, Gauge, VizRepeater, VizRepeaterRenderValueProps } from '@grafana/ui';
 import { DataLinksContextMenuApi } from '@grafana/ui/src/components/DataLinks/DataLinksContextMenu';
 import { config } from 'app/core/config';
@@ -54,6 +54,19 @@ export class GaugePanel extends PureComponent<PanelProps<PanelOptions>> {
 
   getValues = (): FieldDisplay[] => {
     const { data, options, replaceVariables, fieldConfig, timeZone } = this.props;
+
+    for (let frame of data.series) {
+      for (let field of frame.fields) {
+        // Set the Min/Max value automatically for percent and percentunit
+        if (field.config.unit === 'percent' || field.config.unit === 'percentunit') {
+          const min = field.config.min ?? 0;
+          const max = field.config.max ?? (field.config.unit === 'percent' ? 100 : 1);
+          field.state = field.state ?? {};
+          field.state.range = { min, max, delta: max - min };
+          field.display = getDisplayProcessor({ field, theme: config.theme2 });
+        }
+      }
+    }
     return getFieldDisplayValues({
       fieldConfig,
       reduceOptions: options.reduceOptions,