mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Stat: Add panel option to control wide layout (#77018)
Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com> Co-authored-by: drew08t <drew08@gmail.com>
This commit is contained in:
Nathan Marrs
GitHub
parent
8cd8eb7882
commit
e9e7e0b628
@ -32,6 +32,7 @@ It extends [SingleStatBaseOptions](#singlestatbaseoptions).
|
||||
| `graphMode` | string | **Yes** | | TODO docs<br/>Possible values are: `none`, `line`, `area`. |
|
||||
| `justifyMode` | string | **Yes** | | TODO docs<br/>Possible values are: `auto`, `center`. |
|
||||
| `textMode` | string | **Yes** | | TODO docs<br/>Possible values are: `auto`, `value`, `value_and_name`, `name`, `none`. |
|
||||
| `wideLayout` | boolean | **Yes** | `true` | |
|
||||
| `orientation` | string | No | | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs<br/>Possible values are: `auto`, `vertical`, `horizontal`. |
|
||||
| `reduceOptions` | [ReduceDataOptions](#reducedataoptions) | No | | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs |
|
||||
| `text` | [VizTextDisplayOptions](#viztextdisplayoptions) | No | | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs |
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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<Options> = {
|
||||
@ -25,4 +26,5 @@ export const defaultOptions: Partial<Options> = {
|
||||
graphMode: common.BigValueGraphMode.Area,
|
||||
justifyMode: common.BigValueJustifyMode.Auto,
|
||||
textMode: common.BigValueTextMode.Auto,
|
||||
wideLayout: true,
|
||||
};
|
||||
|
||||
@ -48,7 +48,7 @@ export class StatPanel extends PureComponent<PanelProps<Options>> {
|
||||
theme={config.theme2}
|
||||
onClick={openMenu}
|
||||
className={targetClassName}
|
||||
disableWideLayout={true}
|
||||
disableWideLayout={!options.wideLayout}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -17,22 +17,36 @@ export const plugin = new PanelPlugin<Options>(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({
|
||||
|
||||
@ -31,6 +31,7 @@ composableKinds: PanelCfg: {
|
||||
colorMode: common.BigValueColorMode & (*"value" | _)
|
||||
justifyMode: common.BigValueJustifyMode & (*"auto" | _)
|
||||
textMode: common.BigValueTextMode & (*"auto" | _)
|
||||
wideLayout: bool | *true
|
||||
} @cuetsy(kind="interface")
|
||||
}
|
||||
}]
|
||||
|
||||
@ -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<Options> = {
|
||||
@ -22,4 +23,5 @@ export const defaultOptions: Partial<Options> = {
|
||||
graphMode: common.BigValueGraphMode.Area,
|
||||
justifyMode: common.BigValueJustifyMode.Auto,
|
||||
textMode: common.BigValueTextMode.Auto,
|
||||
wideLayout: true,
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user