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, };