IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Bar Gauge: Add max height option (#76042)

Browse Source 
Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
This commit is contained in:
Ihor Yeromin 2023-11-07 07:11:13 +02:00 committed by GitHub
parent 581b93c124
commit 4b87f38f66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 122 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/sources/developers/kinds/composable/bargauge/panelcfg/schema-reference.md
View File

@ -29,10 +29,12 @@ It extends [SingleStatBaseOptions](#singlestatbaseoptions).
| Property | Type | Required | Default | Description |
|-----------------|-------------------------------------------------|----------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------|
| `displayMode` | string | **Yes** | | Enum expressing the possible display modes<br/>for the bar gauge component of Grafana UI<br/>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<br/>Possible values are: `auto`, `top`, `left`. |
| `showUnfilled` | boolean | **Yes** | `true` | |
| `sizing` | string | **Yes** | | Allows for the bar gauge size to be set explicitly<br/>Possible values are: `auto`, `manual`. |
| `valueMode` | string | **Yes** | | Allows for the table cell gauge display type to set the gauge mode.<br/>Possible values are: `color`, `text`, `hidden`. |
| `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 |

8
packages/grafana-schema/src/common/common.gen.ts
View File

@ -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
*/

3
packages/grafana-schema/src/common/mudball.cue
View File

@ -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

8
packages/grafana-schema/src/raw/composable/bargauge/panelcfg/x/BarGaugePanelCfg_types.gen.ts
View File

@ -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<Options> = {
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,
};

8
packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx
View File

@ -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<V, D> {
autoGrid?: boolean;
minVizWidth?: number;
minVizHeight?: number;
maxVizHeight?: number;
}
export interface VizRepeaterRenderValueProps<V, D = {}> {
@ -149,6 +151,7 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
getAlignmentFactors,
autoGrid,
orientation,
maxVizHeight,
minVizWidth,
minVizHeight,
} = this.props as PropsWithDefaults<V, D>;
@ -170,15 +173,16 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
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';

4
public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx
View File

@ -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<BarGaugePanelProps>): BarGaugeP
},
orientation: VizOrientation.Horizontal,
showUnfilled: true,
maxVizHeight: 100,
minVizHeight: 10,
minVizWidth: 0,
valueMode: BarGaugeValueMode.Color,
namePlacement: BarGaugeNamePlacement.Auto,
sizing: BarGaugeSizing.Auto,
},
transparent: false,
timeRange,

39
public/app/plugins/panel/bargauge/BarGaugePanel.tsx
View File

@ -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<BarGaugePanelProps> {
renderComponent = (
@ -93,9 +94,40 @@ export class BarGaugePanel extends PureComponent<BarGaugePanelProps> {
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 (
<VizRepeater
source={data}
@ -105,8 +137,9 @@ export class BarGaugePanel extends PureComponent<BarGaugePanelProps> {
renderCounter={renderCounter}
width={width}
height={height}
minVizWidth={options.minVizWidth}
minVizHeight={options.minVizHeight}
maxVizHeight={maxVizHeight}
minVizWidth={minVizWidth}
minVizHeight={minVizHeight}
itemSpacing={this.getItemSpacing()}
orientation={options.orientation}
/>

53
public/app/plugins/panel/bargauge/module.tsx
View File

@ -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<Options>(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)

6
public/app/plugins/panel/bargauge/panelcfg.cue
View File

@ -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")
}
}]

8
public/app/plugins/panel/bargauge/panelcfg.gen.ts
View File

@ -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<Options> = {
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,
};