Redid logic for fontcolor and thresholds in Gauge and added tests

packages/grafana-ui/src/components/Gauge/Gauge.test.tsx

@@ -45,7 +45,7 @@ describe('Get font color', () => {
     expect(instance.getFontColor(49)).toEqual('#7EB26D');
   });
 
-  it('should get the next threshold color if value is same as a threshold', () => {
+  it('should get the threshold color if value is same as a threshold', () => {
     const { instance } = setup({
       thresholds: [
         { index: 2, value: 75, color: '#6ED0E0' },
@@ -54,10 +54,10 @@ describe('Get font color', () => {
       ],
     });
 
-    expect(instance.getFontColor(50)).toEqual('#6ED0E0');
+    expect(instance.getFontColor(50)).toEqual('#EAB839');
   });
 
-  it('should get the nearest threshold color', () => {
+  it('should get the nearest threshold color between thresholds', () => {
     const { instance } = setup({
       thresholds: [
         { index: 2, value: 75, color: '#6ED0E0' },
@@ -66,7 +66,35 @@ describe('Get font color', () => {
       ],
     });
 
-    expect(instance.getFontColor(6.5)).toEqual('#EAB839');
+    expect(instance.getFontColor(55)).toEqual('#EAB839');
+  });
+});
+
+describe('Get thresholds formatted', () => {
+  it('should return first thresholds color for min and max', () => {
+    const { instance } = setup({ thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }] });
+
+    expect(instance.getFormattedThresholds()).toEqual([
+      { value: 0, color: '#7EB26D' },
+      { value: 100, color: '#7EB26D' },
+    ]);
+  });
+
+  it('should get the correct formatted values when thresholds are added', () => {
+    const { instance } = setup({
+      thresholds: [
+        { index: 2, value: 75, color: '#6ED0E0' },
+        { index: 1, value: 50, color: '#EAB839' },
+        { index: 0, value: -Infinity, color: '#7EB26D' },
+      ],
+    });
+
+    expect(instance.getFormattedThresholds()).toEqual([
+      { value: 0, color: '#7EB26D' },
+      { value: 50, color: '#7EB26D' },
+      { value: 75, color: '#EAB839' },
+      { value: 100, color: '#6ED0E0' },
+    ]);
   });
 });
 

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

@@ -149,16 +149,42 @@ export class Gauge extends PureComponent<Props> {
       return thresholds[0].color;
     }
 
-    const atThreshold = thresholds.filter(threshold => (value as number) < threshold.value);
+    const atThreshold = thresholds.filter(threshold => (value as number) === threshold.value)[0];
+    if (atThreshold) {
+      return atThreshold.color;
+    }
+
+    const belowThreshold = thresholds.filter(threshold => (value as number) > threshold.value);
 
-    if (atThreshold.length > 0) {
-      const nearestThreshold = atThreshold.sort((t1, t2) => t1.value - t2.value)[0];
+    if (belowThreshold.length > 0) {
+      const nearestThreshold = belowThreshold.sort((t1, t2) => t2.value - t1.value)[0];
       return nearestThreshold.color;
     }
 
     return BasicGaugeColor.Red;
   }
 
+  getFormattedThresholds() {
+    const { maxValue, minValue, thresholds } = this.props;
+
+    const thresholdsSortedByIndex = [...thresholds].sort((t1, t2) => t1.index - t2.index);
+    const lastThreshold = thresholdsSortedByIndex[thresholdsSortedByIndex.length - 1];
+
+    const formattedThresholds = [
+      ...thresholdsSortedByIndex.map(threshold => {
+        if (threshold.index === 0) {
+          return { value: minValue, color: threshold.color };
+        }
+
+        const previousThreshold = thresholdsSortedByIndex[threshold.index - 1];
+        return { value: threshold.value, color: previousThreshold.color };
+      }),
+      { value: maxValue, color: lastThreshold.color },
+    ];
+
+    return formattedThresholds;
+  }
+
   draw() {
     const {
       maxValue,
@@ -166,7 +192,6 @@ export class Gauge extends PureComponent<Props> {
       timeSeries,
       showThresholdLabels,
       showThresholdMarkers,
-      thresholds,
       width,
       height,
       stat,
@@ -190,17 +215,6 @@ export class Gauge extends PureComponent<Props> {
     const thresholdMarkersWidth = gaugeWidth / 5;
     const thresholdLabelFontSize = fontSize / 2.5;
 
-    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: {
         gauges: {
@@ -217,7 +231,7 @@ export class Gauge extends PureComponent<Props> {
           layout: { margin: 0, thresholdWidth: 0 },
           cell: { border: { width: 0 } },
           threshold: {
-            values: formattedThresholds,
+            values: this.getFormattedThresholds(),
             label: {
               show: showThresholdLabels,
               margin: thresholdMarkersWidth + 1,