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

BarGauge: Improve behaviour when working with streaming data (#39737)

Browse Source 
* BarGauge: Improve behaviour when working with streaming data

* BarGauge: Refactor default min/max into grafana/data
This commit is contained in:
Ashley Harrison 2021-09-29 10:12:27 +01:00 committed by GitHub
parent c786d22705
commit 2058193e98
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-data/src/types/constants.ts Normal file
View File

@ -0,0 +1,2 @@
export const GAUGE_DEFAULT_MINIMUM = 0;
export const GAUGE_DEFAULT_MAXIMUM = 100;

1
packages/grafana-data/src/types/index.ts
View File

@ -1,3 +1,4 @@
export * from './constants';
export * from './data'; export * from './data';
export * from './dataFrame'; export * from './dataFrame';
export * from './dataFrameTypes'; export * from './dataFrameTypes';

10
packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
View File

@ -6,6 +6,8 @@ import {
DisplayValue, DisplayValue,
formattedValueToString, formattedValueToString,
FormattedValue, FormattedValue,
GAUGE_DEFAULT_MAXIMUM,
GAUGE_DEFAULT_MINIMUM,
DisplayValueAlignmentFactors, DisplayValueAlignmentFactors,
ThresholdsMode, ThresholdsMode,
DisplayProcessor, DisplayProcessor,
@ -132,8 +134,8 @@ export class BarGauge extends PureComponent<Props> {
wrapperWidth, wrapperWidth,
wrapperHeight, wrapperHeight,
} = calculateBarAndValueDimensions(this.props); } = calculateBarAndValueDimensions(this.props);
const minValue = field.min!; const minValue = field.min ?? GAUGE_DEFAULT_MINIMUM;
const maxValue = field.max!; const maxValue = field.max ?? GAUGE_DEFAULT_MAXIMUM;
const isVert = isVertical(orientation); const isVert = isVertical(orientation);
const valueRange = maxValue - minValue; const valueRange = maxValue - minValue;
@ -439,7 +441,9 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
const { displayMode, field, value, alignmentFactors, orientation, theme, text } = props; const { displayMode, field, value, alignmentFactors, orientation, theme, text } = props;
const { valueWidth, valueHeight, maxBarHeight, maxBarWidth } = calculateBarAndValueDimensions(props); const { valueWidth, valueHeight, maxBarHeight, maxBarWidth } = calculateBarAndValueDimensions(props);
const valuePercent = getValuePercent(value.numeric, field.min!, field.max!); const minValue = field.min ?? GAUGE_DEFAULT_MINIMUM;
const maxValue = field.max ?? GAUGE_DEFAULT_MAXIMUM;
const valuePercent = getValuePercent(value.numeric, minValue, maxValue);
const valueColor = getValueColor(props); const valueColor = getValueColor(props);
const valueToBaseSizeOn = alignmentFactors ? alignmentFactors : value; const valueToBaseSizeOn = alignmentFactors ? alignmentFactors : value;

12
packages/grafana-ui/src/components/Gauge/Gauge.tsx
View File

@ -5,6 +5,8 @@ import {
formattedValueToString, formattedValueToString,
FieldConfig, FieldConfig,
ThresholdsMode, ThresholdsMode,
GAUGE_DEFAULT_MAXIMUM,
GAUGE_DEFAULT_MINIMUM,
getActiveThreshold, getActiveThreshold,
Threshold, Threshold,
getColorForTheme, getColorForTheme,
@ -58,15 +60,15 @@ export class Gauge extends PureComponent<Props> {
const { field, theme, value } = this.props; const { field, theme, value } = this.props;
if (field.color?.mode !== FieldColorModeId.Thresholds) { if (field.color?.mode !== FieldColorModeId.Thresholds) {
return [{ value: field.min ?? 0, color: value.color ?? FALLBACK_COLOR }]; return [{ value: field.min ?? GAUGE_DEFAULT_MINIMUM, color: value.color ?? FALLBACK_COLOR }];
} }
const thresholds = field.thresholds ?? Gauge.defaultProps.field?.thresholds!; const thresholds = field.thresholds ?? Gauge.defaultProps.field?.thresholds!;
const isPercent = thresholds.mode === ThresholdsMode.Percentage; const isPercent = thresholds.mode === ThresholdsMode.Percentage;
const steps = thresholds.steps; const steps = thresholds.steps;
let min = field.min ?? 0; let min = field.min ?? GAUGE_DEFAULT_MINIMUM;
let max = field.max ?? 100; let max = field.max ?? GAUGE_DEFAULT_MAXIMUM;
if (isPercent) { if (isPercent) {
min = 0; min = 0;
@ -116,8 +118,8 @@ export class Gauge extends PureComponent<Props> {
const fontSize = this.props.text?.valueSize ?? calculateFontSize(text, valueWidth, dimension, 1, gaugeWidth * 1.7); const fontSize = this.props.text?.valueSize ?? calculateFontSize(text, valueWidth, dimension, 1, gaugeWidth * 1.7);
const thresholdLabelFontSize = Math.max(fontSize / 2.5, 12); const thresholdLabelFontSize = Math.max(fontSize / 2.5, 12);
let min = field.min ?? 0; let min = field.min ?? GAUGE_DEFAULT_MINIMUM;
let max = field.max ?? 100; let max = field.max ?? GAUGE_DEFAULT_MAXIMUM;
let numeric = value.numeric; let numeric = value.numeric;
if (field.thresholds?.mode === ThresholdsMode.Percentage) { if (field.thresholds?.mode === ThresholdsMode.Percentage) {