diff --git a/docs/sources/developers/kinds/composable/bargauge/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/bargauge/panelcfg/schema-reference.md index 9109f367bd4..b14e5954f99 100644 --- a/docs/sources/developers/kinds/composable/bargauge/panelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/bargauge/panelcfg/schema-reference.md @@ -29,10 +29,12 @@ It extends [SingleStatBaseOptions](#singlestatbaseoptions). | Property | Type | Required | Default | Description | |-----------------|-------------------------------------------------|----------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------| | `displayMode` | string | **Yes** | | Enum expressing the possible display modes
for the bar gauge component of Grafana UI
Possible values are: `basic`, `lcd`, `gradient`. | -| `minVizHeight` | uint32 | **Yes** | `10` | | -| `minVizWidth` | uint32 | **Yes** | `0` | | +| `maxVizHeight` | uint32 | **Yes** | `300` | | +| `minVizHeight` | uint32 | **Yes** | `75` | | +| `minVizWidth` | uint32 | **Yes** | `75` | | | `namePlacement` | string | **Yes** | | Allows for the bar gauge name to be placed explicitly
Possible values are: `auto`, `top`, `left`. | | `showUnfilled` | boolean | **Yes** | `true` | | +| `sizing` | string | **Yes** | | Allows for the bar gauge size to be set explicitly
Possible values are: `auto`, `manual`. | | `valueMode` | string | **Yes** | | Allows for the table cell gauge display type to set the gauge mode.
Possible values are: `color`, `text`, `hidden`. | | `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 | diff --git a/packages/grafana-schema/src/common/common.gen.ts b/packages/grafana-schema/src/common/common.gen.ts index 76676b232cc..b05a4bdf359 100644 --- a/packages/grafana-schema/src/common/common.gen.ts +++ b/packages/grafana-schema/src/common/common.gen.ts @@ -644,6 +644,14 @@ export enum BarGaugeNamePlacement { Top = 'top', } +/** + * Allows for the bar gauge size to be set explicitly + */ +export enum BarGaugeSizing { + Auto = 'auto', + Manual = 'manual', +} + /** * TODO docs */ diff --git a/packages/grafana-schema/src/common/mudball.cue b/packages/grafana-schema/src/common/mudball.cue index 9dbc0219ac1..ce4c0626d4b 100644 --- a/packages/grafana-schema/src/common/mudball.cue +++ b/packages/grafana-schema/src/common/mudball.cue @@ -249,6 +249,9 @@ BarGaugeValueMode: "color" | "text" | "hidden" @cuetsy(kind="enum") // Allows for the bar gauge name to be placed explicitly BarGaugeNamePlacement: "auto" | "top" | "left" @cuetsy(kind="enum") +// Allows for the bar gauge size to be set explicitly +BarGaugeSizing: "auto" | "manual" @cuetsy(kind="enum") + // TODO docs VizTooltipOptions: { mode: TooltipDisplayMode diff --git a/packages/grafana-schema/src/raw/composable/bargauge/panelcfg/x/BarGaugePanelCfg_types.gen.ts b/packages/grafana-schema/src/raw/composable/bargauge/panelcfg/x/BarGaugePanelCfg_types.gen.ts index c4513a6f2dc..70cdf925bef 100644 --- a/packages/grafana-schema/src/raw/composable/bargauge/panelcfg/x/BarGaugePanelCfg_types.gen.ts +++ b/packages/grafana-schema/src/raw/composable/bargauge/panelcfg/x/BarGaugePanelCfg_types.gen.ts @@ -15,18 +15,22 @@ export const pluginVersion = "10.3.0-pre"; export interface Options extends common.SingleStatBaseOptions { displayMode: common.BarGaugeDisplayMode; + maxVizHeight: number; minVizHeight: number; minVizWidth: number; namePlacement: common.BarGaugeNamePlacement; showUnfilled: boolean; + sizing: common.BarGaugeSizing; valueMode: common.BarGaugeValueMode; } export const defaultOptions: Partial = { displayMode: common.BarGaugeDisplayMode.Gradient, - minVizHeight: 10, - minVizWidth: 0, + maxVizHeight: 300, + minVizHeight: 75, + minVizWidth: 75, namePlacement: common.BarGaugeNamePlacement.Auto, showUnfilled: true, + sizing: common.BarGaugeSizing.Auto, valueMode: common.BarGaugeValueMode.Color, }; diff --git a/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx b/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx index 7fb1cc112dc..0af1bfb3e7b 100644 --- a/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx +++ b/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx @@ -1,3 +1,4 @@ +import { clamp } from 'lodash'; import React, { PureComponent, CSSProperties } from 'react'; import { VizOrientation } from '@grafana/data'; @@ -28,6 +29,7 @@ interface Props { autoGrid?: boolean; minVizWidth?: number; minVizHeight?: number; + maxVizHeight?: number; } export interface VizRepeaterRenderValueProps { @@ -149,6 +151,7 @@ export class VizRepeater extends PureComponent, State> getAlignmentFactors, autoGrid, orientation, + maxVizHeight, minVizWidth, minVizHeight, } = this.props as PropsWithDefaults; @@ -170,15 +173,16 @@ export class VizRepeater extends PureComponent, State> let vizHeight = height; let vizWidth = width; - let resolvedOrientation = this.getOrientation(); + const resolvedOrientation = this.getOrientation(); switch (resolvedOrientation) { case VizOrientation.Horizontal: + const defaultVizHeight = (height + itemSpacing) / values.length - itemSpacing; repeaterStyle.flexDirection = 'column'; repeaterStyle.height = `${height}px`; itemStyles.marginBottom = `${itemSpacing}px`; vizWidth = width; - vizHeight = Math.max(height / values.length - itemSpacing + itemSpacing / values.length, minVizHeight ?? 0); + vizHeight = clamp(defaultVizHeight, minVizHeight ?? 0, maxVizHeight ?? defaultVizHeight); break; case VizOrientation.Vertical: repeaterStyle.flexDirection = 'row'; diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx index 3d0d37ad973..af4c44203b3 100644 --- a/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx +++ b/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx @@ -5,7 +5,7 @@ import React from 'react'; import { dateMath, dateTime, EventBus, LoadingState, TimeRange, toDataFrame, VizOrientation } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { BarGaugeDisplayMode, BarGaugeValueMode } from '@grafana/schema'; -import { BarGaugeNamePlacement } from '@grafana/schema/dist/esm/common/common.gen'; +import { BarGaugeNamePlacement, BarGaugeSizing } from '@grafana/schema/dist/esm/common/common.gen'; import { BarGaugePanel, BarGaugePanelProps } from './BarGaugePanel'; @@ -100,10 +100,12 @@ function buildPanelData(overrideValues?: Partial): BarGaugeP }, orientation: VizOrientation.Horizontal, showUnfilled: true, + maxVizHeight: 100, minVizHeight: 10, minVizWidth: 0, valueMode: BarGaugeValueMode.Color, namePlacement: BarGaugeNamePlacement.Auto, + sizing: BarGaugeSizing.Auto, }, transparent: false, timeRange, diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx index 6eab0ca5a10..a76285a0799 100644 --- a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx +++ b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx @@ -12,11 +12,12 @@ import { DisplayValue, VizOrientation, } from '@grafana/data'; +import { BarGaugeSizing } from '@grafana/schema'; import { BarGauge, DataLinksContextMenu, VizRepeater, VizRepeaterRenderValueProps } from '@grafana/ui'; import { DataLinksContextMenuApi } from '@grafana/ui/src/components/DataLinks/DataLinksContextMenu'; import { config } from 'app/core/config'; -import { Options } from './panelcfg.gen'; +import { Options, defaultOptions } from './panelcfg.gen'; export class BarGaugePanel extends PureComponent { renderComponent = ( @@ -93,9 +94,40 @@ export class BarGaugePanel extends PureComponent { return 10; } + getOrientation(): VizOrientation { + const { options, width, height } = this.props; + const { orientation } = options; + + if (orientation === VizOrientation.Auto) { + if (width > height) { + return VizOrientation.Vertical; + } else { + return VizOrientation.Horizontal; + } + } + + return orientation; + } + + calcBarSize() { + const { options } = this.props; + + const orientation = this.getOrientation(); + const isManualSizing = options.sizing === BarGaugeSizing.Manual; + const isVertical = orientation === VizOrientation.Vertical; + const isHorizontal = orientation === VizOrientation.Horizontal; + const minVizWidth = isManualSizing && isVertical ? options.minVizWidth : defaultOptions.minVizWidth; + const minVizHeight = isManualSizing && isHorizontal ? options.minVizHeight : defaultOptions.minVizHeight; + const maxVizHeight = isManualSizing && isHorizontal ? options.maxVizHeight : defaultOptions.maxVizHeight; + + return { minVizWidth, minVizHeight, maxVizHeight }; + } + render() { const { height, width, options, data, renderCounter } = this.props; + const { minVizWidth, minVizHeight, maxVizHeight } = this.calcBarSize(); + return ( { renderCounter={renderCounter} width={width} height={height} - minVizWidth={options.minVizWidth} - minVizHeight={options.minVizHeight} + maxVizHeight={maxVizHeight} + minVizWidth={minVizWidth} + minVizHeight={minVizHeight} itemSpacing={this.getItemSpacing()} orientation={options.orientation} /> diff --git a/public/app/plugins/panel/bargauge/module.tsx b/public/app/plugins/panel/bargauge/module.tsx index ebd07747271..c3c7841bb4b 100644 --- a/public/app/plugins/panel/bargauge/module.tsx +++ b/public/app/plugins/panel/bargauge/module.tsx @@ -1,5 +1,5 @@ import { PanelPlugin, VizOrientation } from '@grafana/data'; -import { BarGaugeDisplayMode, BarGaugeNamePlacement, BarGaugeValueMode } from '@grafana/schema'; +import { BarGaugeDisplayMode, BarGaugeNamePlacement, BarGaugeSizing, BarGaugeValueMode } from '@grafana/schema'; import { commonOptionsBuilder, sharedSingleStatPanelChangedHandler } from '@grafana/ui'; import { addOrientationOption, addStandardDataReduceOptions } from '../stat/common'; @@ -61,19 +61,58 @@ export const plugin = new PanelPlugin(BarGaugePanel) defaultValue: defaultOptions.showUnfilled, showIf: (options) => options.displayMode !== 'lcd', }) - .addNumberInput({ + .addRadio({ + path: 'sizing', + name: 'Bar size', + settings: { + options: [ + { value: BarGaugeSizing.Auto, label: 'Auto' }, + { value: BarGaugeSizing.Manual, label: 'Manual' }, + ], + }, + defaultValue: defaultOptions.sizing, + }) + .addSliderInput({ path: 'minVizWidth', name: 'Min width', - description: 'Minimum column width', + description: 'Minimum column width (vertical orientation)', defaultValue: defaultOptions.minVizWidth, - showIf: (options) => options.orientation === VizOrientation.Vertical, + settings: { + min: 0, + max: 300, + step: 1, + }, + showIf: (options) => + options.sizing === BarGaugeSizing.Manual && + (options.orientation === VizOrientation.Auto || 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.orientation === VizOrientation.Horizontal, + settings: { + min: 0, + max: 300, + step: 1, + }, + showIf: (options) => + options.sizing === BarGaugeSizing.Manual && + (options.orientation === VizOrientation.Auto || options.orientation === VizOrientation.Horizontal), + }) + .addSliderInput({ + path: 'maxVizHeight', + name: 'Max height', + description: 'Maximum row height (horizontal orientation)', + defaultValue: defaultOptions.maxVizHeight, + settings: { + min: 0, + max: 300, + step: 1, + }, + showIf: (options) => + options.sizing === BarGaugeSizing.Manual && + (options.orientation === VizOrientation.Auto || options.orientation === VizOrientation.Horizontal), }); }) .setPanelChangeHandler(sharedSingleStatPanelChangedHandler) diff --git a/public/app/plugins/panel/bargauge/panelcfg.cue b/public/app/plugins/panel/bargauge/panelcfg.cue index 9ad72f9ef9c..7942d515828 100644 --- a/public/app/plugins/panel/bargauge/panelcfg.cue +++ b/public/app/plugins/panel/bargauge/panelcfg.cue @@ -31,8 +31,10 @@ composableKinds: PanelCfg: { valueMode: common.BarGaugeValueMode & (*"color" | _) namePlacement: common.BarGaugeNamePlacement & (*"auto" | _) showUnfilled: bool | *true - minVizWidth: uint32 | *0 - minVizHeight: uint32 | *10 + sizing: common.BarGaugeSizing & (*"auto" | _) + minVizWidth: uint32 | *75 + minVizHeight: uint32 | *75 + maxVizHeight: uint32 | *300 } @cuetsy(kind="interface") } }] diff --git a/public/app/plugins/panel/bargauge/panelcfg.gen.ts b/public/app/plugins/panel/bargauge/panelcfg.gen.ts index 94b61640a9a..1993dc303ee 100644 --- a/public/app/plugins/panel/bargauge/panelcfg.gen.ts +++ b/public/app/plugins/panel/bargauge/panelcfg.gen.ts @@ -12,18 +12,22 @@ import * as common from '@grafana/schema'; export interface Options extends common.SingleStatBaseOptions { displayMode: common.BarGaugeDisplayMode; + maxVizHeight: number; minVizHeight: number; minVizWidth: number; namePlacement: common.BarGaugeNamePlacement; showUnfilled: boolean; + sizing: common.BarGaugeSizing; valueMode: common.BarGaugeValueMode; } export const defaultOptions: Partial = { displayMode: common.BarGaugeDisplayMode.Gradient, - minVizHeight: 10, - minVizWidth: 0, + maxVizHeight: 300, + minVizHeight: 75, + minVizWidth: 75, namePlacement: common.BarGaugeNamePlacement.Auto, showUnfilled: true, + sizing: common.BarGaugeSizing.Auto, valueMode: common.BarGaugeValueMode.Color, };