Bar Gauge: Add max height option (#76042)

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

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

@@ -29,10 +29,12 @@ It extends [SingleStatBaseOptions](#singlestatbaseoptions).
 | Property        | Type                                            | Required | Default | Description                                                                                                                                   |
 |-----------------|-------------------------------------------------|----------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------|
 | `displayMode`   | string                                          | **Yes**  |         | Enum expressing the possible display modes<br/>for the bar gauge component of Grafana UI<br/>Possible values are: `basic`, `lcd`, `gradient`. |
-| `minVizHeight`  | uint32                                          | **Yes**  | `10`    |                                                                                                                                               |
+| `maxVizHeight`  | uint32                                          | **Yes**  | `300`   |                                                                                                                                               |
-| `minVizWidth`   | uint32                                          | **Yes**  | `0`     |                                                                                                                                               |
+| `minVizHeight`  | uint32                                          | **Yes**  | `75`    |                                                                                                                                               |
+| `minVizWidth`   | uint32                                          | **Yes**  | `75`    |                                                                                                                                               |
 | `namePlacement` | string                                          | **Yes**  |         | Allows for the bar gauge name to be placed explicitly<br/>Possible values are: `auto`, `top`, `left`.                                         |
 | `showUnfilled`  | boolean                                         | **Yes**  | `true`  |                                                                                                                                               |
+| `sizing`        | string                                          | **Yes**  |         | Allows for the bar gauge size to be set explicitly<br/>Possible values are: `auto`, `manual`.                                                 |
 | `valueMode`     | string                                          | **Yes**  |         | Allows for the table cell gauge display type to set the gauge mode.<br/>Possible values are: `color`, `text`, `hidden`.                       |
 | `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                                                              |

packages/grafana-schema/src/common/common.gen.ts

@@ -644,6 +644,14 @@ export enum BarGaugeNamePlacement {
   Top = 'top',
 }
 
+/**
+ * Allows for the bar gauge size to be set explicitly
+ */
+export enum BarGaugeSizing {
+  Auto = 'auto',
+  Manual = 'manual',
+}
+
 /**
  * TODO docs
  */

packages/grafana-schema/src/common/mudball.cue

@@ -249,6 +249,9 @@ BarGaugeValueMode: "color" | "text" | "hidden" @cuetsy(kind="enum")
 // Allows for the bar gauge name to be placed explicitly
 BarGaugeNamePlacement: "auto" | "top" | "left" @cuetsy(kind="enum")
 
+// Allows for the bar gauge size to be set explicitly
+BarGaugeSizing: "auto" | "manual" @cuetsy(kind="enum")
+
 // TODO docs
 VizTooltipOptions: {
 	mode: TooltipDisplayMode

packages/grafana-schema/src/raw/composable/bargauge/panelcfg/x/BarGaugePanelCfg_types.gen.ts

@@ -15,18 +15,22 @@ export const pluginVersion = "10.3.0-pre";
 
 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,
+  maxVizHeight: 300,
-  minVizWidth: 0,
+  minVizHeight: 75,
+  minVizWidth: 75,
   namePlacement: common.BarGaugeNamePlacement.Auto,
   showUnfilled: true,
+  sizing: common.BarGaugeSizing.Auto,
   valueMode: common.BarGaugeValueMode.Color,
 };

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

@@ -1,3 +1,4 @@
+import { clamp } from 'lodash';
 import React, { PureComponent, CSSProperties } from 'react';
 
 import { VizOrientation } from '@grafana/data';
@@ -28,6 +29,7 @@ interface Props<V, D> {
   autoGrid?: boolean;
   minVizWidth?: number;
   minVizHeight?: number;
+  maxVizHeight?: number;
 }
 
 export interface VizRepeaterRenderValueProps<V, D = {}> {
@@ -149,6 +151,7 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
       getAlignmentFactors,
       autoGrid,
       orientation,
+      maxVizHeight,
       minVizWidth,
       minVizHeight,
     } = this.props as PropsWithDefaults<V, D>;
@@ -170,15 +173,16 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
     let vizHeight = height;
     let vizWidth = width;
 
-    let resolvedOrientation = this.getOrientation();
+    const resolvedOrientation = this.getOrientation();
 
     switch (resolvedOrientation) {
       case VizOrientation.Horizontal:
+        const defaultVizHeight = (height + itemSpacing) / values.length - itemSpacing;
         repeaterStyle.flexDirection = 'column';
         repeaterStyle.height = `${height}px`;
         itemStyles.marginBottom = `${itemSpacing}px`;
         vizWidth = width;
-        vizHeight = Math.max(height / values.length - itemSpacing + itemSpacing / values.length, minVizHeight ?? 0);
+        vizHeight = clamp(defaultVizHeight, minVizHeight ?? 0, maxVizHeight ?? defaultVizHeight);
         break;
       case VizOrientation.Vertical:
         repeaterStyle.flexDirection = 'row';

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}
+        maxVizHeight={maxVizHeight}
-        minVizHeight={options.minVizHeight}
+        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
+					sizing:        common.BarGaugeSizing & (*"auto" | _)
-					minVizHeight:  uint32 | *10
+					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,
+  maxVizHeight: 300,
-  minVizWidth: 0,
+  minVizHeight: 75,
+  minVizWidth: 75,
   namePlacement: common.BarGaugeNamePlacement.Auto,
   showUnfilled: true,
+  sizing: common.BarGaugeSizing.Auto,
   valueMode: common.BarGaugeValueMode.Color,
 };