getting closer with no thresholds

public/app/plugins/panel/gauge/Thresholds.tsx

@@ -29,8 +29,10 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
       return threshold;
     });
 
-    // Setting value to a value between the new threshold.
+    // Setting value to a value between the previous thresholds
     const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2;
+
+    // Set a color that lies between the previous thresholds
     const color = tinycolor.mix(thresholds[index - 1].color, thresholds[index].color, 50).toRgbString();
 
     this.setState(

public/app/plugins/panel/gauge/module.tsx

@@ -48,10 +48,7 @@ export const defaultProps = {
     stat: '',
     unit: '',
     mappings: [],
-    thresholds: [
-      { index: 0, value: 0, color: BasicGaugeColor.Green, label: 'Min', canRemove: false },
-      { index: 1, value: 100, color: BasicGaugeColor.Red, label: 'Max', canRemove: false },
-    ],
+    thresholds: [],
   },
 };
 

public/app/types/panel.ts

@@ -43,9 +43,8 @@ export enum MappingType {
 }
 
 export enum BasicGaugeColor {
-  Green = 'rgba(50, 172, 45, 0.97)',
-  Orange = 'rgba(237, 129, 40, 0.89)',
-  Red = 'rgb(212, 74, 58)',
+  Green = 'lightgreen',
+  Red = 'red',
 }
 
 interface BaseMap {

public/app/viz/Gauge.tsx

@@ -34,7 +34,7 @@ export class Gauge extends PureComponent<Props> {
     showThresholdMarkers: true,
     showThresholdLabels: false,
     suffix: '',
-    thresholds: [{ value: 0, color: BasicGaugeColor.Green }, { value: 100, color: BasicGaugeColor.Red }],
+    thresholds: [],
     unit: 'none',
     stat: 'avg',
   };
@@ -136,13 +136,20 @@ export class Gauge extends PureComponent<Props> {
     const thresholdMarkersWidth = gaugeWidth / 5;
     const thresholdLabelFontSize = fontSize / 2.5;
 
-    const formattedThresholds = thresholds.map((threshold, index) => {
-      return {
-        value: threshold.value,
-        // Hacky way to get correct color for threshold.
-        color: index === 0 ? threshold.color : thresholds[index - 1].color,
-      };
-    });
+    const formattedThresholds = [
+      { value: minValue, color: BasicGaugeColor.Green },
+      ...thresholds.map((threshold, index) => {
+        return {
+          value: threshold.value,
+          // Hacky way to get correct color for threshold.
+          color: index === 0 ? threshold.color : thresholds[index - 1].color,
+        };
+      }),
+      {
+        value: maxValue,
+        color: BasicGaugeColor.Red,
+      },
+    ];
 
     console.log(formattedThresholds);
 
@@ -174,11 +181,7 @@ export class Gauge extends PureComponent<Props> {
           value: {
             color: this.getFontColor(value),
             formatter: () => {
-              if (timeSeries[0]) {
-                return this.formatValue(value);
-              }
-
-              return '';
+              return this.formatValue(value);
             },
             font: {
               size: fontSize,