diff --git a/packages/grafana-data/src/types/constants.ts b/packages/grafana-data/src/types/constants.ts new file mode 100644 index 00000000000..f82ea4115ac --- /dev/null +++ b/packages/grafana-data/src/types/constants.ts @@ -0,0 +1,2 @@ +export const GAUGE_DEFAULT_MINIMUM = 0; +export const GAUGE_DEFAULT_MAXIMUM = 100; diff --git a/packages/grafana-data/src/types/index.ts b/packages/grafana-data/src/types/index.ts index 508920d0360..ff0f05e68b1 100644 --- a/packages/grafana-data/src/types/index.ts +++ b/packages/grafana-data/src/types/index.ts @@ -1,3 +1,4 @@ +export * from './constants'; export * from './data'; export * from './dataFrame'; export * from './dataFrameTypes'; diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx index 8a444b61352..6e32384abc1 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx @@ -6,6 +6,8 @@ import { DisplayValue, formattedValueToString, FormattedValue, + GAUGE_DEFAULT_MAXIMUM, + GAUGE_DEFAULT_MINIMUM, DisplayValueAlignmentFactors, ThresholdsMode, DisplayProcessor, @@ -132,8 +134,8 @@ export class BarGauge extends PureComponent { wrapperWidth, wrapperHeight, } = calculateBarAndValueDimensions(this.props); - const minValue = field.min!; - const maxValue = field.max!; + const minValue = field.min ?? GAUGE_DEFAULT_MINIMUM; + const maxValue = field.max ?? GAUGE_DEFAULT_MAXIMUM; const isVert = isVertical(orientation); const valueRange = maxValue - minValue; @@ -439,7 +441,9 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles const { displayMode, field, value, alignmentFactors, orientation, theme, text } = 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 valueToBaseSizeOn = alignmentFactors ? alignmentFactors : value; diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index 82b5133d6fd..0be0a4da88a 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -5,6 +5,8 @@ import { formattedValueToString, FieldConfig, ThresholdsMode, + GAUGE_DEFAULT_MAXIMUM, + GAUGE_DEFAULT_MINIMUM, getActiveThreshold, Threshold, getColorForTheme, @@ -58,15 +60,15 @@ export class Gauge extends PureComponent { const { field, theme, value } = this.props; 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 isPercent = thresholds.mode === ThresholdsMode.Percentage; const steps = thresholds.steps; - let min = field.min ?? 0; - let max = field.max ?? 100; + let min = field.min ?? GAUGE_DEFAULT_MINIMUM; + let max = field.max ?? GAUGE_DEFAULT_MAXIMUM; if (isPercent) { min = 0; @@ -116,8 +118,8 @@ export class Gauge extends PureComponent { const fontSize = this.props.text?.valueSize ?? calculateFontSize(text, valueWidth, dimension, 1, gaugeWidth * 1.7); const thresholdLabelFontSize = Math.max(fontSize / 2.5, 12); - let min = field.min ?? 0; - let max = field.max ?? 100; + let min = field.min ?? GAUGE_DEFAULT_MINIMUM; + let max = field.max ?? GAUGE_DEFAULT_MAXIMUM; let numeric = value.numeric; if (field.thresholds?.mode === ThresholdsMode.Percentage) {