update color on gauge when changing

public/app/plugins/panel/gauge/Threshold.test.tsx

@@ -16,8 +16,8 @@ const setup = (propOverrides?: object) => {
 };
 
 const thresholds = [
-  { index: 0, label: 'Min', value: 0, canRemove: false, color: '#3aa655' },
-  { index: 1, label: '', value: 50, canRemove: true, color: '#ff851b' },
+  { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
+  { index: 1, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
   { index: 2, label: 'Max', value: 100, canRemove: false },
 ];
 
@@ -28,8 +28,8 @@ describe('Add threshold', () => {
     instance.onAddThreshold(1);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 0, label: 'Min', value: 0, canRemove: false, color: '#3aa655' },
-      { index: 1, label: '', value: 50, canRemove: true, color: '#ff851b' },
+      { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
+      { index: 1, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
       { index: 2, label: 'Max', value: 100, canRemove: false },
     ]);
   });
@@ -45,9 +45,9 @@ describe('Add threshold', () => {
     instance.onAddThreshold(1);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 0, label: 'Min', value: 0, canRemove: false, color: '#3aa655' },
-      { index: 1, label: '', value: 25, canRemove: true, color: '#ff851b' },
-      { index: 2, label: '', value: 50, canRemove: true, color: '#ff851b' },
+      { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
+      { index: 1, label: '', value: 25, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
+      { index: 2, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
       { index: 3, label: 'Max', value: 100, canRemove: false },
     ]);
   });
@@ -116,9 +116,9 @@ describe('change threshold value', () => {
   it('should update value and resort rows', () => {
     const instance = setup();
     const mockThresholds = [
-      { index: 0, label: 'Min', value: 0, canRemove: false, color: '#3aa655' },
-      { index: 1, label: '', value: 50, canRemove: true, color: '#ff851b' },
-      { index: 2, label: '', value: 75, canRemove: true, color: '#ff851b' },
+      { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
+      { index: 1, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
+      { index: 2, label: '', value: 75, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
       { index: 3, label: 'Max', value: 100, canRemove: false },
     ];
 
@@ -132,9 +132,9 @@ describe('change threshold value', () => {
     instance.onChangeThresholdValue(mockEvent, mockThresholds[1]);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 0, label: 'Min', value: 0, canRemove: false, color: '#3aa655' },
-      { index: 1, label: '', value: 78, canRemove: true, color: '#ff851b' },
-      { index: 2, label: '', value: 75, canRemove: true, color: '#ff851b' },
+      { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
+      { index: 1, label: '', value: 78, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
+      { index: 2, label: '', value: 75, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
       { index: 3, label: 'Max', value: 100, canRemove: false },
     ]);
   });

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

@@ -15,7 +15,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
 
     this.state = {
       thresholds: this.props.options.thresholds || [
-        { index: 0, label: 'Min', value: 0, canRemove: false, color: '#3aa655' },
+        { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
         { index: 1, label: 'Max', value: 100, canRemove: false },
       ],
       userAddedThresholds: 0,
@@ -35,13 +35,16 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
 
     const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2;
 
-    this.setState(prevState => ({
-      thresholds: this.sortThresholds([
-        ...newThresholds,
-        { index: index, label: '', value: value, canRemove: true, color: '#ff851b' },
-      ]),
-      userAddedThresholds: prevState.userAddedThresholds + 1,
-    }));
+    this.setState(
+      prevState => ({
+        thresholds: this.sortThresholds([
+          ...newThresholds,
+          { index: index, label: '', value: value, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
+        ]),
+        userAddedThresholds: prevState.userAddedThresholds + 1,
+      }),
+      () => this.updateGauge()
+    );
   };
 
   onRemoveThreshold = threshold => {
@@ -78,9 +81,12 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
       return currentThreshold;
     });
 
-    this.setState({
-      thresholds: newThresholds,
-    });
+    this.setState(
+      {
+        thresholds: newThresholds,
+      },
+      () => this.updateGauge()
+    );
   };
 
   onBlur = () => {
@@ -88,6 +94,10 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
       thresholds: this.sortThresholds(prevState.thresholds),
     }));
 
+    this.updateGauge();
+  };
+
+  updateGauge = () => {
     this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds });
   };
 
@@ -106,7 +116,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
       return thresholds[index].color;
     }
 
-    return '#d44939';
+    return 'rgb(212, 74, 58)';
   }
 
   renderNoThresholds() {

public/app/viz/Gauge.tsx

@@ -20,8 +20,6 @@ interface Props {
   suffix: string;
 }
 
-const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
-
 export class Gauge extends PureComponent<Props> {
   canvasElement: any;
 
@@ -32,7 +30,10 @@ export class Gauge extends PureComponent<Props> {
     showThresholdMarkers: true,
     showThresholdLabels: false,
     suffix: '',
-    thresholds: [{ label: 'Min', value: 0 }, { label: 'Max', value: 100 }],
+    thresholds: [
+      { label: 'Min', value: 0, color: 'rgba(50, 172, 45, 0.97)' },
+      { label: 'Max', value: 100, color: 'rgba(245, 54, 54, 0.9)' },
+    ],
   };
 
   componentDidMount() {
@@ -76,10 +77,13 @@ export class Gauge extends PureComponent<Props> {
     const formattedThresholds = thresholds.map((threshold, index) => {
       return {
         value: threshold.value,
-        color: colors[index],
+        // Hacky way to get correct color for threshold.
+        color: index === 0 ? threshold.color : thresholds[index - 1].color,
       };
     });
 
+    console.log(formattedThresholds);
+
     const options = {
       series: {
         gauges: {