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

Gauge: Simplify gauge dimension panel options (#76216)

Browse Source 
Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com>
This commit is contained in:
Nathan Marrs 2023-11-17 12:59:30 -07:00 committed by GitHub
parent 49fc8214a0
commit 3e08abff3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/sources/developers/kinds/composable/gauge/panelcfg/schema-reference.md
View File

@ -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<br/>Possible values are: `auto`, `manual`. |
| `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 |

6
packages/grafana-schema/src/raw/composable/gauge/panelcfg/x/GaugePanelCfg_types.gen.ts
View File

@ -18,11 +18,13 @@ export interface Options extends common.SingleStatBaseOptions {
minVizWidth: number;
showThresholdLabels: boolean;
showThresholdMarkers: boolean;
sizing: common.BarGaugeSizing;
}
export const defaultOptions: Partial<Options> = {
minVizHeight: 75,
minVizWidth: 75,
minVizHeight: 200,
minVizWidth: 200,
showThresholdLabels: false,
showThresholdMarkers: true,
sizing: common.BarGaugeSizing.Auto,
};

23
public/app/plugins/panel/gauge/GaugePanel.tsx
View File

@ -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<PanelProps<Options>> {
renderComponent = (
@ -78,9 +79,25 @@ export class GaugePanel extends PureComponent<PanelProps<Options>> {
});
};
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 (
<VizRepeater
getValues={this.getValues}
@ -91,8 +108,8 @@ export class GaugePanel extends PureComponent<PanelProps<Options>> {
autoGrid={true}
renderCounter={renderCounter}
orientation={options.orientation}
minVizHeight={options.minVizHeight}
minVizWidth={options.minVizWidth}
minVizHeight={minVizHeight}
minVizWidth={minVizWidth}
/>
);
}

38
public/app/plugins/panel/gauge/module.tsx
View File

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

5
public/app/plugins/panel/gauge/panelcfg.cue
View File

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

6
public/app/plugins/panel/gauge/panelcfg.gen.ts
View File

@ -15,11 +15,13 @@ export interface Options extends common.SingleStatBaseOptions {
minVizWidth: number;
showThresholdLabels: boolean;
showThresholdMarkers: boolean;
sizing: common.BarGaugeSizing;
}
export const defaultOptions: Partial<Options> = {
minVizHeight: 75,
minVizWidth: 75,
minVizHeight: 200,
minVizWidth: 200,
showThresholdLabels: false,
showThresholdMarkers: true,
sizing: common.BarGaugeSizing.Auto,
};