diff --git a/packages/grafana-schema/src/raw/composable/newgauge/panelcfg/x/NewGaugePanelCfg_types.gen.ts b/packages/grafana-schema/src/raw/composable/newgauge/panelcfg/x/NewGaugePanelCfg_types.gen.ts index c0f8481a7f5..daead8f5295 100644 --- a/packages/grafana-schema/src/raw/composable/newgauge/panelcfg/x/NewGaugePanelCfg_types.gen.ts +++ b/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 = { 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', }; diff --git a/public/app/plugins/panel/radialbar/RadialBarPanel.tsx b/public/app/plugins/panel/radialbar/RadialBarPanel.tsx index 8b32e651f84..3b952381554 100644 --- a/public/app/plugins/panel/radialbar/RadialBarPanel.tsx +++ b/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 ; } @@ -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} /> diff --git a/public/app/plugins/panel/radialbar/module.tsx b/public/app/plugins/panel/radialbar/module.tsx index f7afa0ef2c9..b40eb2c594b 100644 --- a/public/app/plugins/panel/radialbar/module.tsx +++ b/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(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(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'), diff --git a/public/app/plugins/panel/radialbar/panelcfg.cue b/public/app/plugins/panel/radialbar/panelcfg.cue index 6e5fd7eec21..01e2b5e3b98 100644 --- a/public/app/plugins/panel/radialbar/panelcfg.cue +++ b/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") } }] diff --git a/public/app/plugins/panel/radialbar/panelcfg.gen.ts b/public/app/plugins/panel/radialbar/panelcfg.gen.ts index 594747136ef..58b17cbd293 100644 --- a/public/app/plugins/panel/radialbar/panelcfg.gen.ts +++ b/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 = { 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', };