diff --git a/docs/sources/developers/kinds/composable/stat/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/stat/panelcfg/schema-reference.md
index e83f6c0b608..b5e134bc426 100644
--- a/docs/sources/developers/kinds/composable/stat/panelcfg/schema-reference.md
+++ b/docs/sources/developers/kinds/composable/stat/panelcfg/schema-reference.md
@@ -32,6 +32,7 @@ It extends [SingleStatBaseOptions](#singlestatbaseoptions).
| `graphMode` | string | **Yes** | | TODO docs
Possible values are: `none`, `line`, `area`. |
| `justifyMode` | string | **Yes** | | TODO docs
Possible values are: `auto`, `center`. |
| `textMode` | string | **Yes** | | TODO docs
Possible values are: `auto`, `value`, `value_and_name`, `name`, `none`. |
+| `wideLayout` | boolean | **Yes** | `true` | |
| `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/docs/sources/panels-visualizations/visualizations/stat/index.md b/docs/sources/panels-visualizations/visualizations/stat/index.md
index a53d31b00c5..de4e82b3a71 100644
--- a/docs/sources/panels-visualizations/visualizations/stat/index.md
+++ b/docs/sources/panels-visualizations/visualizations/stat/index.md
@@ -88,6 +88,17 @@ You can use the Text mode option to control what text the visualization renders.
- **Name -** Show name instead of value. Value is displayed in the hover tooltip.
- **None -** Show nothing (empty). Name and value are displayed in the hover tooltip.
+### Wide layout
+
+Set whether wide layout is enabled or not. Wide layout is enabled by default.
+
+- **On -** Wide layout is enabled.
+- **Off -** Wide layout is disabled.
+
+{{% admonition type="note" %}}
+This option is only applicable when **Text mode** is set to **Value and name**. When wide layout is enabled, the value and name are displayed side-by-side with the value on the right, if the panel is wide enough. When wide layout is disabled, the value is always rendered underneath the name.
+{{% /admonition %}}
+
### Color mode
Select a color mode.
diff --git a/packages/grafana-schema/src/raw/composable/stat/panelcfg/x/StatPanelCfg_types.gen.ts b/packages/grafana-schema/src/raw/composable/stat/panelcfg/x/StatPanelCfg_types.gen.ts
index 842651d79f4..f372445d382 100644
--- a/packages/grafana-schema/src/raw/composable/stat/panelcfg/x/StatPanelCfg_types.gen.ts
+++ b/packages/grafana-schema/src/raw/composable/stat/panelcfg/x/StatPanelCfg_types.gen.ts
@@ -18,6 +18,7 @@ export interface Options extends common.SingleStatBaseOptions {
graphMode: common.BigValueGraphMode;
justifyMode: common.BigValueJustifyMode;
textMode: common.BigValueTextMode;
+ wideLayout: boolean;
}
export const defaultOptions: Partial = {
@@ -25,4 +26,5 @@ export const defaultOptions: Partial = {
graphMode: common.BigValueGraphMode.Area,
justifyMode: common.BigValueJustifyMode.Auto,
textMode: common.BigValueTextMode.Auto,
+ wideLayout: true,
};
diff --git a/public/app/plugins/panel/stat/StatPanel.tsx b/public/app/plugins/panel/stat/StatPanel.tsx
index 2300fc20dcd..827b6aac29f 100644
--- a/public/app/plugins/panel/stat/StatPanel.tsx
+++ b/public/app/plugins/panel/stat/StatPanel.tsx
@@ -48,7 +48,7 @@ export class StatPanel extends PureComponent> {
theme={config.theme2}
onClick={openMenu}
className={targetClassName}
- disableWideLayout={true}
+ disableWideLayout={!options.wideLayout}
/>
);
};
diff --git a/public/app/plugins/panel/stat/module.tsx b/public/app/plugins/panel/stat/module.tsx
index 98b5b4c8784..f401feb8024 100644
--- a/public/app/plugins/panel/stat/module.tsx
+++ b/public/app/plugins/panel/stat/module.tsx
@@ -17,22 +17,36 @@ export const plugin = new PanelPlugin(StatPanel)
addOrientationOption(builder, mainCategory);
commonOptionsBuilder.addTextSizeOptions(builder);
- builder.addSelect({
- path: 'textMode',
- name: 'Text mode',
- description: 'Control if name and value is displayed or just name',
- category: mainCategory,
- settings: {
- options: [
- { value: BigValueTextMode.Auto, label: 'Auto' },
- { value: BigValueTextMode.Value, label: 'Value' },
- { value: BigValueTextMode.ValueAndName, label: 'Value and name' },
- { value: BigValueTextMode.Name, label: 'Name' },
- { value: BigValueTextMode.None, label: 'None' },
- ],
- },
- defaultValue: defaultOptions.textMode,
- });
+ builder
+ .addSelect({
+ path: 'textMode',
+ name: 'Text mode',
+ description: 'Control if name and value is displayed or just name',
+ category: mainCategory,
+ settings: {
+ options: [
+ { value: BigValueTextMode.Auto, label: 'Auto' },
+ { value: BigValueTextMode.Value, label: 'Value' },
+ { value: BigValueTextMode.ValueAndName, label: 'Value and name' },
+ { value: BigValueTextMode.Name, label: 'Name' },
+ { value: BigValueTextMode.None, label: 'None' },
+ ],
+ },
+ defaultValue: defaultOptions.textMode,
+ })
+ .addRadio({
+ path: 'wideLayout',
+ name: 'Wide layout',
+ category: mainCategory,
+ settings: {
+ options: [
+ { value: true, label: 'On' },
+ { value: false, label: 'Off' },
+ ],
+ },
+ defaultValue: defaultOptions.wideLayout,
+ showIf: (config) => config.textMode === BigValueTextMode.ValueAndName,
+ });
builder
.addSelect({
diff --git a/public/app/plugins/panel/stat/panelcfg.cue b/public/app/plugins/panel/stat/panelcfg.cue
index 1cc5b2d768c..a3f1476d28f 100644
--- a/public/app/plugins/panel/stat/panelcfg.cue
+++ b/public/app/plugins/panel/stat/panelcfg.cue
@@ -31,6 +31,7 @@ composableKinds: PanelCfg: {
colorMode: common.BigValueColorMode & (*"value" | _)
justifyMode: common.BigValueJustifyMode & (*"auto" | _)
textMode: common.BigValueTextMode & (*"auto" | _)
+ wideLayout: bool | *true
} @cuetsy(kind="interface")
}
}]
diff --git a/public/app/plugins/panel/stat/panelcfg.gen.ts b/public/app/plugins/panel/stat/panelcfg.gen.ts
index 03bf666935c..62634532009 100644
--- a/public/app/plugins/panel/stat/panelcfg.gen.ts
+++ b/public/app/plugins/panel/stat/panelcfg.gen.ts
@@ -15,6 +15,7 @@ export interface Options extends common.SingleStatBaseOptions {
graphMode: common.BigValueGraphMode;
justifyMode: common.BigValueJustifyMode;
textMode: common.BigValueTextMode;
+ wideLayout: boolean;
}
export const defaultOptions: Partial = {
@@ -22,4 +23,5 @@ export const defaultOptions: Partial = {
graphMode: common.BigValueGraphMode.Area,
justifyMode: common.BigValueJustifyMode.Auto,
textMode: common.BigValueTextMode.Auto,
+ wideLayout: true,
};