BarGauge: Add option to hide the names (#92450)

docs/sources/panels-visualizations/visualizations/bar-gauge/index.md

@@ -98,6 +98,7 @@ This option only applies when the orientation of the bar gauge is horizontal. Wh
 - **Auto -** Grafana determines the best placement.
 - **Top -** Names are placed on top of each bar gauge.
 - **Left -** Names are placed to the left of each bar gauge.
+- **Hidden -** Names are hidden on each bar gauge.
 
 ### Show unfilled area
 

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

@@ -658,6 +658,7 @@ export enum BarGaugeValueMode {
  */
 export enum BarGaugeNamePlacement {
   Auto = 'auto',
+  Hidden = 'hidden',
   Left = 'left',
   Top = 'top',
 }

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

@@ -251,7 +251,7 @@ BarGaugeDisplayMode: "basic" | "lcd" | "gradient" @cuetsy(kind="enum")
 BarGaugeValueMode: "color" | "text" | "hidden" @cuetsy(kind="enum")
 
 // Allows for the bar gauge name to be placed explicitly
-BarGaugeNamePlacement: "auto" | "top" | "left" @cuetsy(kind="enum")
+BarGaugeNamePlacement: "auto" | "top" | "left" | "hidden" @cuetsy(kind="enum")
 
 // Allows for the bar gauge size to be set explicitly
 BarGaugeSizing: "auto" | "manual" @cuetsy(kind="enum")

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

@@ -229,7 +229,7 @@ interface CellColors {
 
 interface TitleDimensions {
   fontSize: number;
-  placement: 'above' | 'left' | 'below';
+  placement: 'above' | 'left' | 'below' | 'hidden';
   width: number;
   height: number;
 }
@@ -246,6 +246,15 @@ function calculateTitleDimensions(props: Props): TitleDimensions {
     return { fontSize: 0, width: 0, height: 0, placement: 'above' };
   }
 
+  if (namePlacement === BarGaugeNamePlacement.Hidden) {
+    return {
+      fontSize: 0,
+      width: 0,
+      height: 0,
+      placement: BarGaugeNamePlacement.Hidden,
+    };
+  }
+
   if (isVertical(orientation)) {
     const fontSize = text?.titleSize ?? 14;
     return {
@@ -316,18 +325,22 @@ export function getTitleStyles(props: Props): { wrapper: CSSProperties; title: C
     alignSelf: 'center',
   };
 
-  if (isVertical(props.orientation)) {
-    wrapperStyles.flexDirection = 'column-reverse';
-    titleStyles.textAlign = 'center';
+  if (titleDim.placement === 'hidden') {
+    titleStyles.display = 'none';
   } else {
-    if (titleDim.placement === 'above') {
-      wrapperStyles.flexDirection = 'column';
+    if (isVertical(props.orientation)) {
+      wrapperStyles.flexDirection = 'column-reverse';
+      titleStyles.textAlign = 'center';
     } else {
-      wrapperStyles.flexDirection = 'row';
+      if (titleDim.placement === 'above') {
+        wrapperStyles.flexDirection = 'column';
+      } else {
+        wrapperStyles.flexDirection = 'row';
 
-      titleStyles.width = `${titleDim.width}px`;
-      titleStyles.textAlign = 'right';
-      titleStyles.paddingRight = '10px';
+        titleStyles.width = `${titleDim.width}px`;
+        titleStyles.textAlign = 'right';
+        titleStyles.paddingRight = '10px';
+      }
     }
   }
 

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

@@ -49,11 +49,24 @@ export const plugin = new PanelPlugin<Options>(BarGaugePanel)
             { value: BarGaugeNamePlacement.Auto, label: 'Auto' },
             { value: BarGaugeNamePlacement.Top, label: 'Top' },
             { value: BarGaugeNamePlacement.Left, label: 'Left' },
+            { value: BarGaugeNamePlacement.Hidden, label: 'Hidden' },
           ],
         },
         defaultValue: defaultOptions.namePlacement,
         showIf: (options) => options.orientation !== VizOrientation.Vertical,
       })
+      .addRadio({
+        path: 'namePlacement',
+        name: 'Name placement',
+        settings: {
+          options: [
+            { value: BarGaugeNamePlacement.Auto, label: 'Auto' },
+            { value: BarGaugeNamePlacement.Hidden, label: 'Hidden' },
+          ],
+        },
+        defaultValue: defaultOptions.namePlacement,
+        showIf: (options) => options.orientation === VizOrientation.Vertical,
+      })
       .addBooleanSwitch({
         path: 'showUnfilled',
         name: 'Show unfilled area',