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

* BarGauge: Improve behaviour when working with streaming data

* BarGauge: Refactor default min/max into grafana/data

packages/grafana-data/src/types/constants.ts

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

packages/grafana-data/src/types/index.ts

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

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<Props> {
       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;

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<Props> {
     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<Props> {
     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) {