Gauge: Simplify gauge dimension panel options (#76216)

Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com>

docs/sources/developers/kinds/composable/gauge/panelcfg/schema-reference.md

@@ -28,10 +28,11 @@ It extends [SingleStatBaseOptions](#singlestatbaseoptions).
 
 | Property               | Type                                            | Required | Default | Description                                                                                                                                 |
 |------------------------|-------------------------------------------------|----------|---------|---------------------------------------------------------------------------------------------------------------------------------------------|
-| `minVizHeight`         | uint32                                          | **Yes**  | `75`    |                                                                                                                                             |
+| `minVizHeight`         | uint32                                          | **Yes**  | `200`   |                                                                                                                                             |
-| `minVizWidth`          | uint32                                          | **Yes**  | `75`    |                                                                                                                                             |
+| `minVizWidth`          | uint32                                          | **Yes**  | `200`   |                                                                                                                                             |
 | `showThresholdLabels`  | boolean                                         | **Yes**  | `false` |                                                                                                                                             |
 | `showThresholdMarkers` | boolean                                         | **Yes**  | `true`  |                                                                                                                                             |
+| `sizing`               | string                                          | **Yes**  |         | Allows for the bar gauge size to be set explicitly<br/>Possible values are: `auto`, `manual`.                                               |
 | `orientation`          | string                                          | No       |         | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs<br/>Possible values are: `auto`, `vertical`, `horizontal`. |
 | `reduceOptions`        | [ReduceDataOptions](#reducedataoptions)         | No       |         | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs                                                            |
 | `text`                 | [VizTextDisplayOptions](#viztextdisplayoptions) | No       |         | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs                                                            |

packages/grafana-schema/src/raw/composable/gauge/panelcfg/x/GaugePanelCfg_types.gen.ts

@@ -18,11 +18,13 @@ export interface Options extends common.SingleStatBaseOptions {
   minVizWidth: number;
   showThresholdLabels: boolean;
   showThresholdMarkers: boolean;
+  sizing: common.BarGaugeSizing;
 }
 
 export const defaultOptions: Partial<Options> = {
-  minVizHeight: 75,
+  minVizHeight: 200,
-  minVizWidth: 75,
+  minVizWidth: 200,
   showThresholdLabels: false,
   showThresholdMarkers: true,
+  sizing: common.BarGaugeSizing.Auto,
 };

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

@@ -1,13 +1,14 @@
 import React, { PureComponent } from 'react';
 
 import { FieldDisplay, getDisplayProcessor, getFieldDisplayValues, PanelProps } from '@grafana/data';
+import { BarGaugeSizing, VizOrientation } from '@grafana/schema';
 import { DataLinksContextMenu, Gauge, VizRepeater, VizRepeaterRenderValueProps } from '@grafana/ui';
 import { DataLinksContextMenuApi } from '@grafana/ui/src/components/DataLinks/DataLinksContextMenu';
 import { config } from 'app/core/config';
 
 import { clearNameForSingleSeries } from '../bargauge/BarGaugePanel';
 
-import { Options } from './panelcfg.gen';
+import { defaultOptions, Options } from './panelcfg.gen';
 
 export class GaugePanel extends PureComponent<PanelProps<Options>> {
   renderComponent = (
@@ -78,9 +79,25 @@ export class GaugePanel extends PureComponent<PanelProps<Options>> {
     });
   };
 
+  calculateGaugeSize = () => {
+    const { options } = this.props;
+
+    const orientation = options.orientation;
+    const isManualSizing = options.sizing === BarGaugeSizing.Manual;
+    const isVerticalOrientation = orientation === VizOrientation.Vertical;
+    const isHorizontalOrientation = orientation === VizOrientation.Horizontal;
+
+    const minVizWidth = isManualSizing && isVerticalOrientation ? options.minVizWidth : defaultOptions.minVizWidth;
+    const minVizHeight = isManualSizing && isHorizontalOrientation ? options.minVizHeight : defaultOptions.minVizHeight;
+
+    return { minVizWidth, minVizHeight };
+  };
+
   render() {
     const { height, width, data, renderCounter, options } = this.props;
 
+    const { minVizHeight, minVizWidth } = this.calculateGaugeSize();
+
     return (
       <VizRepeater
         getValues={this.getValues}
@@ -91,8 +108,8 @@ export class GaugePanel extends PureComponent<PanelProps<Options>> {
         autoGrid={true}
         renderCounter={renderCounter}
         orientation={options.orientation}
-        minVizHeight={options.minVizHeight}
+        minVizHeight={minVizHeight}
-        minVizWidth={options.minVizWidth}
+        minVizWidth={minVizWidth}
       />
     );
   }

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

@@ -1,5 +1,5 @@
 import { PanelPlugin } from '@grafana/data';
-import { VizOrientation } from '@grafana/schema';
+import { BarGaugeSizing, VizOrientation } from '@grafana/schema';
 import { commonOptionsBuilder } from '@grafana/ui';
 
 import { addOrientationOption, addStandardDataReduceOptions } from '../stat/common';
@@ -39,19 +39,43 @@ export const plugin = new PanelPlugin<Options>(GaugePanel)
         description: 'Renders the thresholds as an outer bar',
         defaultValue: defaultOptions.showThresholdMarkers,
       })
-      .addNumberInput({
+      .addRadio({
+        path: 'sizing',
+        name: 'Gauge size',
+        settings: {
+          options: [
+            { value: BarGaugeSizing.Auto, label: 'Auto' },
+            { value: BarGaugeSizing.Manual, label: 'Manual' },
+          ],
+        },
+        defaultValue: defaultOptions.sizing,
+        showIf: (options: Options) => options.orientation !== VizOrientation.Auto,
+      })
+      .addSliderInput({
         path: 'minVizWidth',
         name: 'Min width',
-        description: 'Minimum column width',
+        description: 'Minimum column width (vertical orientation)',
         defaultValue: defaultOptions.minVizWidth,
-        showIf: (options: Options) => options.orientation === VizOrientation.Vertical,
+        settings: {
+          min: 0,
+          max: 600,
+          step: 1,
+        },
+        showIf: (options: Options) =>
+          options.sizing === BarGaugeSizing.Manual && options.orientation === VizOrientation.Vertical,
       })
-      .addNumberInput({
+      .addSliderInput({
         path: 'minVizHeight',
         name: 'Min height',
-        description: 'Minimum row height',
+        description: 'Minimum row height (horizontal orientation)',
         defaultValue: defaultOptions.minVizHeight,
-        showIf: (options: Options) => options.orientation === VizOrientation.Horizontal,
+        settings: {
+          min: 0,
+          max: 600,
+          step: 1,
+        },
+        showIf: (options: Options) =>
+          options.sizing === BarGaugeSizing.Manual && options.orientation === VizOrientation.Horizontal,
       });
 
     commonOptionsBuilder.addTextSizeOptions(builder);

public/app/plugins/panel/gauge/panelcfg.cue

@@ -29,8 +29,9 @@ composableKinds: PanelCfg: {
 					common.SingleStatBaseOptions
 					showThresholdLabels:  bool | *false
 					showThresholdMarkers: bool | *true
-					minVizWidth:          uint32 | *75
+					sizing:               common.BarGaugeSizing & (*"auto" | _)
-					minVizHeight:         uint32 | *75
+					minVizWidth:          uint32 | *200
+					minVizHeight:         uint32 | *200
 				} @cuetsy(kind="interface")
 			}
 		}]

public/app/plugins/panel/gauge/panelcfg.gen.ts

@@ -15,11 +15,13 @@ export interface Options extends common.SingleStatBaseOptions {
   minVizWidth: number;
   showThresholdLabels: boolean;
   showThresholdMarkers: boolean;
+  sizing: common.BarGaugeSizing;
 }
 
 export const defaultOptions: Partial<Options> = {
-  minVizHeight: 75,
+  minVizHeight: 200,
-  minVizWidth: 75,
+  minVizWidth: 200,
   showThresholdLabels: false,
   showThresholdMarkers: true,
+  sizing: common.BarGaugeSizing.Auto,
 };