Bar Gauge: Add max height option (#76042)

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>

public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { dateMath, dateTime, EventBus, LoadingState, TimeRange, toDataFrame, VizOrientation } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { BarGaugeDisplayMode, BarGaugeValueMode } from '@grafana/schema';
-import { BarGaugeNamePlacement } from '@grafana/schema/dist/esm/common/common.gen';
+import { BarGaugeNamePlacement, BarGaugeSizing } from '@grafana/schema/dist/esm/common/common.gen';
 
 import { BarGaugePanel, BarGaugePanelProps } from './BarGaugePanel';
 
@@ -100,10 +100,12 @@ function buildPanelData(overrideValues?: Partial<BarGaugePanelProps>): BarGaugeP
       },
       orientation: VizOrientation.Horizontal,
       showUnfilled: true,
+      maxVizHeight: 100,
       minVizHeight: 10,
       minVizWidth: 0,
       valueMode: BarGaugeValueMode.Color,
       namePlacement: BarGaugeNamePlacement.Auto,
+      sizing: BarGaugeSizing.Auto,
     },
     transparent: false,
     timeRange,

public/app/plugins/panel/bargauge/BarGaugePanel.tsx

@@ -12,11 +12,12 @@ import {
   DisplayValue,
   VizOrientation,
 } from '@grafana/data';
+import { BarGaugeSizing } from '@grafana/schema';
 import { BarGauge, DataLinksContextMenu, VizRepeater, VizRepeaterRenderValueProps } from '@grafana/ui';
 import { DataLinksContextMenuApi } from '@grafana/ui/src/components/DataLinks/DataLinksContextMenu';
 import { config } from 'app/core/config';
 
-import { Options } from './panelcfg.gen';
+import { Options, defaultOptions } from './panelcfg.gen';
 
 export class BarGaugePanel extends PureComponent<BarGaugePanelProps> {
   renderComponent = (
@@ -93,9 +94,40 @@ export class BarGaugePanel extends PureComponent<BarGaugePanelProps> {
     return 10;
   }
 
+  getOrientation(): VizOrientation {
+    const { options, width, height } = this.props;
+    const { orientation } = options;
+
+    if (orientation === VizOrientation.Auto) {
+      if (width > height) {
+        return VizOrientation.Vertical;
+      } else {
+        return VizOrientation.Horizontal;
+      }
+    }
+
+    return orientation;
+  }
+
+  calcBarSize() {
+    const { options } = this.props;
+
+    const orientation = this.getOrientation();
+    const isManualSizing = options.sizing === BarGaugeSizing.Manual;
+    const isVertical = orientation === VizOrientation.Vertical;
+    const isHorizontal = orientation === VizOrientation.Horizontal;
+    const minVizWidth = isManualSizing && isVertical ? options.minVizWidth : defaultOptions.minVizWidth;
+    const minVizHeight = isManualSizing && isHorizontal ? options.minVizHeight : defaultOptions.minVizHeight;
+    const maxVizHeight = isManualSizing && isHorizontal ? options.maxVizHeight : defaultOptions.maxVizHeight;
+
+    return { minVizWidth, minVizHeight, maxVizHeight };
+  }
+
   render() {
     const { height, width, options, data, renderCounter } = this.props;
 
+    const { minVizWidth, minVizHeight, maxVizHeight } = this.calcBarSize();
+
     return (
       <VizRepeater
         source={data}
@@ -105,8 +137,9 @@ export class BarGaugePanel extends PureComponent<BarGaugePanelProps> {
         renderCounter={renderCounter}
         width={width}
         height={height}
-        minVizWidth={options.minVizWidth}
-        minVizHeight={options.minVizHeight}
+        maxVizHeight={maxVizHeight}
+        minVizWidth={minVizWidth}
+        minVizHeight={minVizHeight}
         itemSpacing={this.getItemSpacing()}
         orientation={options.orientation}
       />

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

@@ -1,5 +1,5 @@
 import { PanelPlugin, VizOrientation } from '@grafana/data';
-import { BarGaugeDisplayMode, BarGaugeNamePlacement, BarGaugeValueMode } from '@grafana/schema';
+import { BarGaugeDisplayMode, BarGaugeNamePlacement, BarGaugeSizing, BarGaugeValueMode } from '@grafana/schema';
 import { commonOptionsBuilder, sharedSingleStatPanelChangedHandler } from '@grafana/ui';
 
 import { addOrientationOption, addStandardDataReduceOptions } from '../stat/common';
@@ -61,19 +61,58 @@ export const plugin = new PanelPlugin<Options>(BarGaugePanel)
         defaultValue: defaultOptions.showUnfilled,
         showIf: (options) => options.displayMode !== 'lcd',
       })
-      .addNumberInput({
+      .addRadio({
+        path: 'sizing',
+        name: 'Bar size',
+        settings: {
+          options: [
+            { value: BarGaugeSizing.Auto, label: 'Auto' },
+            { value: BarGaugeSizing.Manual, label: 'Manual' },
+          ],
+        },
+        defaultValue: defaultOptions.sizing,
+      })
+      .addSliderInput({
         path: 'minVizWidth',
         name: 'Min width',
-        description: 'Minimum column width',
+        description: 'Minimum column width (vertical orientation)',
         defaultValue: defaultOptions.minVizWidth,
-        showIf: (options) => options.orientation === VizOrientation.Vertical,
+        settings: {
+          min: 0,
+          max: 300,
+          step: 1,
+        },
+        showIf: (options) =>
+          options.sizing === BarGaugeSizing.Manual &&
+          (options.orientation === VizOrientation.Auto || 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.orientation === VizOrientation.Horizontal,
+        settings: {
+          min: 0,
+          max: 300,
+          step: 1,
+        },
+        showIf: (options) =>
+          options.sizing === BarGaugeSizing.Manual &&
+          (options.orientation === VizOrientation.Auto || options.orientation === VizOrientation.Horizontal),
+      })
+      .addSliderInput({
+        path: 'maxVizHeight',
+        name: 'Max height',
+        description: 'Maximum row height (horizontal orientation)',
+        defaultValue: defaultOptions.maxVizHeight,
+        settings: {
+          min: 0,
+          max: 300,
+          step: 1,
+        },
+        showIf: (options) =>
+          options.sizing === BarGaugeSizing.Manual &&
+          (options.orientation === VizOrientation.Auto || options.orientation === VizOrientation.Horizontal),
       });
   })
   .setPanelChangeHandler(sharedSingleStatPanelChangedHandler)

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

@@ -31,8 +31,10 @@ composableKinds: PanelCfg: {
 					valueMode:     common.BarGaugeValueMode & (*"color" | _)
 					namePlacement: common.BarGaugeNamePlacement & (*"auto" | _)
 					showUnfilled:  bool | *true
-					minVizWidth:   uint32 | *0
-					minVizHeight:  uint32 | *10
+					sizing:        common.BarGaugeSizing & (*"auto" | _)
+					minVizWidth:   uint32 | *75
+					minVizHeight:  uint32 | *75
+					maxVizHeight:  uint32 | *300
 				} @cuetsy(kind="interface")
 			}
 		}]

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

@@ -12,18 +12,22 @@ import * as common from '@grafana/schema';
 
 export interface Options extends common.SingleStatBaseOptions {
   displayMode: common.BarGaugeDisplayMode;
+  maxVizHeight: number;
   minVizHeight: number;
   minVizWidth: number;
   namePlacement: common.BarGaugeNamePlacement;
   showUnfilled: boolean;
+  sizing: common.BarGaugeSizing;
   valueMode: common.BarGaugeValueMode;
 }
 
 export const defaultOptions: Partial<Options> = {
   displayMode: common.BarGaugeDisplayMode.Gradient,
-  minVizHeight: 10,
-  minVizWidth: 0,
+  maxVizHeight: 300,
+  minVizHeight: 75,
+  minVizWidth: 75,
   namePlacement: common.BarGaugeNamePlacement.Auto,
   showUnfilled: true,
+  sizing: common.BarGaugeSizing.Auto,
   valueMode: common.BarGaugeValueMode.Color,
 };