Fixed getFontColor, added tests and fixed thresholds logic

public/app/viz/Gauge.test.tsx

@@ -38,17 +38,33 @@ const setup = (propOverrides?: object) => {
 };
 
 describe('Get font color', () => {
-  it('should get base color if no threshold', () => {
-    const { instance } = setup();
+  it('should get first threshold color when only one threshold', () => {
+    const { instance } = setup({ thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }] });
 
-    expect(instance.getFontColor(40)).toEqual('#7EB26D');
+    expect(instance.getFontColor(49)).toEqual('#7EB26D');
   });
 
-  it('should be f2f2f2', () => {
+  it('should get the next threshold color if value is same as a threshold', () => {
     const { instance } = setup({
-      thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 1, value: 59, color: '#f2f2f2' }],
+      thresholds: [
+        { index: 2, value: 75, color: '#6ED0E0' },
+        { index: 1, value: 50, color: '#EAB839' },
+        { index: 0, value: -Infinity, color: '#7EB26D' },
+      ],
     });
 
-    expect(instance.getFontColor(58)).toEqual('#f2f2f2');
+    expect(instance.getFontColor(50)).toEqual('#6ED0E0');
+  });
+
+  it('should get the nearest threshold color', () => {
+    const { instance } = setup({
+      thresholds: [
+        { index: 2, value: 75, color: '#6ED0E0' },
+        { index: 1, value: 50, color: '#EAB839' },
+        { index: 0, value: -Infinity, color: '#7EB26D' },
+      ],
+    });
+
+    expect(instance.getFontColor(6.5)).toEqual('#EAB839');
   });
 });

public/app/viz/Gauge.tsx

@@ -82,14 +82,14 @@ export class Gauge extends PureComponent<Props> {
     }
 
     if (isNaN(value)) {
-      return '-';
+      return value;
     }
 
     return `${prefix} ${formattedValue} ${suffix}`;
   }
 
-  getFontColor(value) {
-    const { maxValue, thresholds } = this.props;
+  getFontColor(value: string | number) {
+    const { thresholds } = this.props;
 
     if (thresholds.length === 1) {
       return thresholds[0].color;
@@ -98,12 +98,11 @@ export class Gauge extends PureComponent<Props> {
     const atThreshold = thresholds.filter(threshold => value < threshold.value);
 
     if (atThreshold.length > 0) {
-      return atThreshold[0].color;
-    } else if (value <= maxValue) {
-      return BasicGaugeColor.Red;
+      const nearestThreshold = atThreshold.sort((t1, t2) => t1.value - t2.value)[0];
+      return nearestThreshold.color;
     }
 
-    return '';
+    return BasicGaugeColor.Red;
   }
 
   draw() {
@@ -136,16 +135,16 @@ export class Gauge extends PureComponent<Props> {
     const thresholdMarkersWidth = gaugeWidth / 5;
     const thresholdLabelFontSize = fontSize / 2.5;
 
-    // const formattedThresholds = [
-    //   { value: minValue, color: BasicGaugeColor.Green },
-    //   ...thresholds.map((threshold, index) => {
-    //     return {
-    //       value: threshold.value,
-    //       color: index === 0 ? threshold.color : thresholds[index].color,
-    //     };
-    //   }),
-    //   { value: maxValue, color: thresholds.length > 0 ? BasicGaugeColor.Red : baseColor },
-    // ];
+    const formattedThresholds = [
+      { value: minValue, color: thresholds.length === 1 ? thresholds[0].color : BasicGaugeColor.Green },
+      ...thresholds.map((threshold, index) => {
+        return {
+          value: threshold.value,
+          color: thresholds[index].color,
+        };
+      }),
+      { value: maxValue, color: thresholds.length === 1 ? thresholds[0].color : BasicGaugeColor.Red },
+    ];
 
     const options = {
       series: {
@@ -163,7 +162,7 @@ export class Gauge extends PureComponent<Props> {
           layout: { margin: 0, thresholdWidth: 0 },
           cell: { border: { width: 0 } },
           threshold: {
-            values: thresholds,
+            values: formattedThresholds,
             label: {
               show: showThresholdLabels,
               margin: thresholdMarkersWidth + 1,