Fix: prevents the BarGauge from exploding when the datasource returns empty result. (#21791)

* Fixed issue where gauge throw error on empty result.

* Some refactorings to improve the code.

* Added some tests to make sure this doesn't happen again.

packages/grafana-data/src/dataframe/DataFrameView.ts

@@ -1,5 +1,6 @@
 import { Vector } from '../types/vector';
 import { DataFrame } from '../types/dataFrame';
+import { DisplayProcessor } from '../types';
 
 /**
  * This abstraction will present the contents of a DataFrame as if
@@ -55,6 +56,20 @@ export class DataFrameView<T = any> implements Vector<T> {
     return this.data.length;
   }
 
+  getFieldDisplayProcessor(colIndex: number): DisplayProcessor | null {
+    if (!this.dataFrame || !this.dataFrame.fields) {
+      return null;
+    }
+
+    const field = this.dataFrame.fields[colIndex];
+
+    if (!field || !field.display) {
+      return null;
+    }
+
+    return field.display;
+  }
+
   get(idx: number) {
     this.index = idx;
     return this.obj;

packages/grafana-ui/src/components/BarGauge/BarGauge.tsx

@@ -131,7 +131,8 @@ export class BarGauge extends PureComponent<Props> {
       };
     }
 
-    const color = display(positionValue).color;
+    const color = display ? display(positionValue).color : null;
+
     if (color) {
       // if we are past real value the cell is not "on"
       if (value === null || (positionValue !== null && positionValue > value.numeric)) {