Gauge: Re-introduce minVizHeight and minVizWidth (#116034)

packages/grafana-schema/src/raw/composable/newgauge/panelcfg/x/NewGaugePanelCfg_types.gen.ts

@@ -29,11 +29,14 @@ export interface Options extends common.SingleStatBaseOptions {
   barWidthFactor: number;
   effects: GaugePanelEffects;
   endpointMarker?: ('point' | 'glow' | 'none');
+  minVizHeight: number;
+  minVizWidth: number;
   segmentCount: number;
   segmentSpacing: number;
   shape: ('circle' | 'gauge');
   showThresholdLabels: boolean;
   showThresholdMarkers: boolean;
+  sizing: common.BarGaugeSizing;
   sparkline?: boolean;
   textMode?: ('auto' | 'value_and_name' | 'value' | 'name' | 'none');
 }
@@ -43,11 +46,14 @@ export const defaultOptions: Partial<Options> = {
   barWidthFactor: 0.5,
   effects: {},
   endpointMarker: 'point',
+  minVizHeight: 75,
+  minVizWidth: 75,
   segmentCount: 1,
   segmentSpacing: 0.3,
   shape: 'gauge',
   showThresholdLabels: false,
   showThresholdMarkers: true,
+  sizing: common.BarGaugeSizing.Auto,
   sparkline: true,
   textMode: 'auto',
 };

public/app/plugins/panel/radialbar/RadialBarPanel.tsx

@@ -85,9 +85,6 @@ export function RadialBarPanel({
     });
   }
 
-  const minVizHeight = 60;
-  const minVizWidth = 60;
-
   if (getValues()[0]?.display?.text === 'No data') {
     return <PanelDataErrorView panelId={id} fieldConfig={fieldConfig} data={data} needsNumberField />;
   }
@@ -104,8 +101,8 @@ export function RadialBarPanel({
         itemSpacing={16}
         renderCounter={renderCounter}
         orientation={options.orientation}
-        minVizHeight={minVizHeight}
-        minVizWidth={minVizWidth}
+        minVizHeight={options.sizing === 'auto' ? 0 : options.minVizHeight}
+        minVizWidth={options.sizing === 'auto' ? 0 : options.minVizWidth}
         getAlignmentFactors={getDisplayValueAlignmentFactors}
       />
     </Stack>

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

@@ -1,5 +1,6 @@
 import { PanelPlugin } from '@grafana/data';
 import { t } from '@grafana/i18n';
+import { BarGaugeSizing, VizOrientation } from '@grafana/schema';
 import { commonOptionsBuilder } from '@grafana/ui';
 
 import { addOrientationOption, addStandardDataReduceOptions } from '../stat/common';
@@ -16,7 +17,7 @@ export const plugin = new PanelPlugin<Options>(RadialBarPanel)
     const category = [t('gauge.category-radial-bar', 'Gauge')];
 
     addStandardDataReduceOptions(builder);
-    addOrientationOption(builder, category);
+
     commonOptionsBuilder.addTextSizeOptions(builder, { withTitle: true, withValue: true });
 
     builder.addRadio({
@@ -32,6 +33,51 @@ export const plugin = new PanelPlugin<Options>(RadialBarPanel)
       },
     });
 
+    addOrientationOption(builder, category);
+
+    builder
+      .addRadio({
+        path: 'sizing',
+        name: t('gauge.name-gauge-size', 'Gauge size'),
+        settings: {
+          options: [
+            { value: BarGaugeSizing.Auto, label: t('gauge.gauge-size-options.label-auto', 'Auto') },
+            { value: BarGaugeSizing.Manual, label: t('gauge.gauge-size-options.label-manual', 'Manual') },
+          ],
+        },
+        category,
+        defaultValue: defaultOptions.sizing,
+        showIf: (options: Options) => options.orientation !== VizOrientation.Auto,
+      })
+      .addSliderInput({
+        path: 'minVizWidth',
+        name: t('gauge.name-min-width', 'Min width'),
+        description: t('gauge.description-min-width', 'Minimum column width (vertical orientation)'),
+        defaultValue: defaultOptions.minVizWidth,
+        settings: {
+          min: 0,
+          max: 600,
+          step: 1,
+        },
+        category,
+        showIf: (options: Options) =>
+          options.sizing === BarGaugeSizing.Manual && options.orientation === VizOrientation.Vertical,
+      })
+      .addSliderInput({
+        path: 'minVizHeight',
+        name: t('gauge.name-min-height', 'Min height'),
+        description: t('gauge.description-min-height', 'Minimum row height (horizontal orientation)'),
+        defaultValue: defaultOptions.minVizHeight,
+        category,
+        settings: {
+          min: 0,
+          max: 600,
+          step: 1,
+        },
+        showIf: (options: Options) =>
+          options.sizing === BarGaugeSizing.Manual && options.orientation === VizOrientation.Horizontal,
+      });
+
     builder.addSliderInput({
       path: 'barWidthFactor',
       name: t('radialbar.config.bar-width', 'Bar width'),

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

@@ -44,6 +44,9 @@ composableKinds: PanelCfg: {
 					endpointMarker?: "point" | "glow" | "none" | *"point"
           textMode?: "auto" | "value_and_name" | "value" | "name" | "none" | *"auto"
 					effects: GaugePanelEffects | *{}
+					sizing: common.BarGaugeSizing & (*"auto" | _)
+					minVizWidth: uint32 | *75
+					minVizHeight: uint32 | *75
 				} @cuetsy(kind="interface")
 			}
 		}]

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

@@ -27,11 +27,14 @@ export interface Options extends common.SingleStatBaseOptions {
   barWidthFactor: number;
   effects: GaugePanelEffects;
   endpointMarker?: ('point' | 'glow' | 'none');
+  minVizHeight: number;
+  minVizWidth: number;
   segmentCount: number;
   segmentSpacing: number;
   shape: ('circle' | 'gauge');
   showThresholdLabels: boolean;
   showThresholdMarkers: boolean;
+  sizing: common.BarGaugeSizing;
   sparkline?: boolean;
   textMode?: ('auto' | 'value_and_name' | 'value' | 'name' | 'none');
 }
@@ -41,11 +44,14 @@ export const defaultOptions: Partial<Options> = {
   barWidthFactor: 0.5,
   effects: {},
   endpointMarker: 'point',
+  minVizHeight: 75,
+  minVizWidth: 75,
   segmentCount: 1,
   segmentSpacing: 0.3,
   shape: 'gauge',
   showThresholdLabels: false,
   showThresholdMarkers: true,
+  sizing: common.BarGaugeSizing.Auto,
   sparkline: true,
   textMode: 'auto',
 };