diff --git a/docs/sources/panels-visualizations/visualizations/bar-gauge/index.md b/docs/sources/panels-visualizations/visualizations/bar-gauge/index.md index 3e084037173..e01345c485c 100644 --- a/docs/sources/panels-visualizations/visualizations/bar-gauge/index.md +++ b/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 diff --git a/packages/grafana-schema/src/common/common.gen.ts b/packages/grafana-schema/src/common/common.gen.ts index 981c6442c73..4b1ba194812 100644 --- a/packages/grafana-schema/src/common/common.gen.ts +++ b/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', } diff --git a/packages/grafana-schema/src/common/mudball.cue b/packages/grafana-schema/src/common/mudball.cue index 5ea26081f0f..3ef52efbe31 100644 --- a/packages/grafana-schema/src/common/mudball.cue +++ b/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") diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx index 2624bc9f794..1048d86253a 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx +++ b/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'; + } } } diff --git a/public/app/plugins/panel/bargauge/module.tsx b/public/app/plugins/panel/bargauge/module.tsx index c3c7841bb4b..be5cd7b3443 100644 --- a/public/app/plugins/panel/bargauge/module.tsx +++ b/public/app/plugins/panel/bargauge/module.tsx @@ -49,11 +49,24 @@ export const plugin = new PanelPlugin(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',