diff --git a/docs/sources/developers/kinds/composable/gauge/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/gauge/panelcfg/schema-reference.md
index be536fd6df6..2015674854a 100644
--- a/docs/sources/developers/kinds/composable/gauge/panelcfg/schema-reference.md
+++ b/docs/sources/developers/kinds/composable/gauge/panelcfg/schema-reference.md
@@ -28,10 +28,11 @@ It extends [SingleStatBaseOptions](#singlestatbaseoptions).
| Property | Type | Required | Default | Description |
|------------------------|-------------------------------------------------|----------|---------|---------------------------------------------------------------------------------------------------------------------------------------------|
-| `minVizHeight` | uint32 | **Yes** | `75` | |
-| `minVizWidth` | uint32 | **Yes** | `75` | |
+| `minVizHeight` | uint32 | **Yes** | `200` | |
+| `minVizWidth` | uint32 | **Yes** | `200` | |
| `showThresholdLabels` | boolean | **Yes** | `false` | |
| `showThresholdMarkers` | boolean | **Yes** | `true` | |
+| `sizing` | string | **Yes** | | Allows for the bar gauge size to be set explicitly
Possible values are: `auto`, `manual`. |
| `orientation` | string | No | | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*
TODO docs
Possible values are: `auto`, `vertical`, `horizontal`. |
| `reduceOptions` | [ReduceDataOptions](#reducedataoptions) | No | | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*
TODO docs |
| `text` | [VizTextDisplayOptions](#viztextdisplayoptions) | No | | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*
TODO docs |
diff --git a/packages/grafana-schema/src/raw/composable/gauge/panelcfg/x/GaugePanelCfg_types.gen.ts b/packages/grafana-schema/src/raw/composable/gauge/panelcfg/x/GaugePanelCfg_types.gen.ts
index b00ca10dee6..18c6625d9ee 100644
--- a/packages/grafana-schema/src/raw/composable/gauge/panelcfg/x/GaugePanelCfg_types.gen.ts
+++ b/packages/grafana-schema/src/raw/composable/gauge/panelcfg/x/GaugePanelCfg_types.gen.ts
@@ -18,11 +18,13 @@ export interface Options extends common.SingleStatBaseOptions {
minVizWidth: number;
showThresholdLabels: boolean;
showThresholdMarkers: boolean;
+ sizing: common.BarGaugeSizing;
}
export const defaultOptions: Partial = {
- minVizHeight: 75,
- minVizWidth: 75,
+ minVizHeight: 200,
+ minVizWidth: 200,
showThresholdLabels: false,
showThresholdMarkers: true,
+ sizing: common.BarGaugeSizing.Auto,
};
diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index ee4b622e710..7b798f63402 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -1,13 +1,14 @@
import React, { PureComponent } from 'react';
import { FieldDisplay, getDisplayProcessor, getFieldDisplayValues, PanelProps } from '@grafana/data';
+import { BarGaugeSizing, VizOrientation } from '@grafana/schema';
import { DataLinksContextMenu, Gauge, VizRepeater, VizRepeaterRenderValueProps } from '@grafana/ui';
import { DataLinksContextMenuApi } from '@grafana/ui/src/components/DataLinks/DataLinksContextMenu';
import { config } from 'app/core/config';
import { clearNameForSingleSeries } from '../bargauge/BarGaugePanel';
-import { Options } from './panelcfg.gen';
+import { defaultOptions, Options } from './panelcfg.gen';
export class GaugePanel extends PureComponent> {
renderComponent = (
@@ -78,9 +79,25 @@ export class GaugePanel extends PureComponent> {
});
};
+ calculateGaugeSize = () => {
+ const { options } = this.props;
+
+ const orientation = options.orientation;
+ const isManualSizing = options.sizing === BarGaugeSizing.Manual;
+ const isVerticalOrientation = orientation === VizOrientation.Vertical;
+ const isHorizontalOrientation = orientation === VizOrientation.Horizontal;
+
+ const minVizWidth = isManualSizing && isVerticalOrientation ? options.minVizWidth : defaultOptions.minVizWidth;
+ const minVizHeight = isManualSizing && isHorizontalOrientation ? options.minVizHeight : defaultOptions.minVizHeight;
+
+ return { minVizWidth, minVizHeight };
+ };
+
render() {
const { height, width, data, renderCounter, options } = this.props;
+ const { minVizHeight, minVizWidth } = this.calculateGaugeSize();
+
return (
> {
autoGrid={true}
renderCounter={renderCounter}
orientation={options.orientation}
- minVizHeight={options.minVizHeight}
- minVizWidth={options.minVizWidth}
+ minVizHeight={minVizHeight}
+ minVizWidth={minVizWidth}
/>
);
}
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index c62938bf84a..d2dbf9369fc 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -1,5 +1,5 @@
import { PanelPlugin } from '@grafana/data';
-import { VizOrientation } from '@grafana/schema';
+import { BarGaugeSizing, VizOrientation } from '@grafana/schema';
import { commonOptionsBuilder } from '@grafana/ui';
import { addOrientationOption, addStandardDataReduceOptions } from '../stat/common';
@@ -39,19 +39,43 @@ export const plugin = new PanelPlugin(GaugePanel)
description: 'Renders the thresholds as an outer bar',
defaultValue: defaultOptions.showThresholdMarkers,
})
- .addNumberInput({
+ .addRadio({
+ path: 'sizing',
+ name: 'Gauge size',
+ settings: {
+ options: [
+ { value: BarGaugeSizing.Auto, label: 'Auto' },
+ { value: BarGaugeSizing.Manual, label: 'Manual' },
+ ],
+ },
+ defaultValue: defaultOptions.sizing,
+ showIf: (options: Options) => options.orientation !== VizOrientation.Auto,
+ })
+ .addSliderInput({
path: 'minVizWidth',
name: 'Min width',
- description: 'Minimum column width',
+ description: 'Minimum column width (vertical orientation)',
defaultValue: defaultOptions.minVizWidth,
- showIf: (options: Options) => options.orientation === VizOrientation.Vertical,
+ settings: {
+ min: 0,
+ max: 600,
+ step: 1,
+ },
+ showIf: (options: Options) =>
+ options.sizing === BarGaugeSizing.Manual && 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) => options.orientation === VizOrientation.Horizontal,
+ settings: {
+ min: 0,
+ max: 600,
+ step: 1,
+ },
+ showIf: (options: Options) =>
+ options.sizing === BarGaugeSizing.Manual && options.orientation === VizOrientation.Horizontal,
});
commonOptionsBuilder.addTextSizeOptions(builder);
diff --git a/public/app/plugins/panel/gauge/panelcfg.cue b/public/app/plugins/panel/gauge/panelcfg.cue
index b3fc121d0eb..eaf9fb258da 100644
--- a/public/app/plugins/panel/gauge/panelcfg.cue
+++ b/public/app/plugins/panel/gauge/panelcfg.cue
@@ -29,8 +29,9 @@ composableKinds: PanelCfg: {
common.SingleStatBaseOptions
showThresholdLabels: bool | *false
showThresholdMarkers: bool | *true
- minVizWidth: uint32 | *75
- minVizHeight: uint32 | *75
+ sizing: common.BarGaugeSizing & (*"auto" | _)
+ minVizWidth: uint32 | *200
+ minVizHeight: uint32 | *200
} @cuetsy(kind="interface")
}
}]
diff --git a/public/app/plugins/panel/gauge/panelcfg.gen.ts b/public/app/plugins/panel/gauge/panelcfg.gen.ts
index 742a66a1ea8..ebd5bce670d 100644
--- a/public/app/plugins/panel/gauge/panelcfg.gen.ts
+++ b/public/app/plugins/panel/gauge/panelcfg.gen.ts
@@ -15,11 +15,13 @@ export interface Options extends common.SingleStatBaseOptions {
minVizWidth: number;
showThresholdLabels: boolean;
showThresholdMarkers: boolean;
+ sizing: common.BarGaugeSizing;
}
export const defaultOptions: Partial = {
- minVizHeight: 75,
- minVizWidth: 75,
+ minVizHeight: 200,
+ minVizWidth: 200,
showThresholdLabels: false,
showThresholdMarkers: true,
+ sizing: common.BarGaugeSizing.Auto,
};