mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Bar Gauge: Add max height option (#76042)
Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
This commit is contained in:
parent
581b93c124
commit
4b87f38f66
@ -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 |
|
||||
|
@ -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
|
||||
*/
|
||||
|
@ -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
|
||||
|
@ -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,
|
||||
};
|
||||
|
@ -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';
|
||||
|
@ -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,
|
||||
|
@ -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}
|
||||
/>
|
||||
|
@ -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)
|
||||
|
@ -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")
|
||||
}
|
||||
}]
|
||||
|
@ -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,
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user