From 3e08abff3ba12724f63e437748c40be7aa331486 Mon Sep 17 00:00:00 2001 From: Nathan Marrs Date: Fri, 17 Nov 2023 12:59:30 -0700 Subject: [PATCH] Gauge: Simplify gauge dimension panel options (#76216) Co-authored-by: Ihor Yeromin --- .../gauge/panelcfg/schema-reference.md | 5 ++- .../panelcfg/x/GaugePanelCfg_types.gen.ts | 6 ++- public/app/plugins/panel/gauge/GaugePanel.tsx | 23 +++++++++-- public/app/plugins/panel/gauge/module.tsx | 38 +++++++++++++++---- public/app/plugins/panel/gauge/panelcfg.cue | 5 ++- .../app/plugins/panel/gauge/panelcfg.gen.ts | 6 ++- 6 files changed, 65 insertions(+), 18 deletions(-) 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, };