Removed baseColor

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

@@ -19,9 +19,15 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    const thresholds: Threshold[] =
-      props.thresholds.length > 0 ? props.thresholds : [{ index: 0, value: -Infinity, color: colors[0] }];
+    const addDefaultThreshold = this.props.thresholds.length === 0;
+    const thresholds: Threshold[] = addDefaultThreshold
+      ? [{ index: 0, value: -Infinity, color: colors[0] }]
+      : props.thresholds;
     this.state = { thresholds };
+
+    if (addDefaultThreshold) {
+      this.onChange();
+    }
   }
 
   onAddThreshold = (index: number) => {
@@ -62,7 +68,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
           },
         ]),
       },
-      () => this.updateGauge()
+      () => this.onChange()
     );
   };
 
@@ -85,7 +91,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
           thresholds: newThresholds.filter(t => t !== threshold),
         };
       },
-      () => this.updateGauge()
+      () => this.onChange()
     );
   };
 
@@ -124,11 +130,10 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
       {
         thresholds: newThresholds,
       },
-      () => this.updateGauge()
+      () => this.onChange()
     );
   };
 
-  onChangeBaseColor = (color: string) => this.props.onChange(this.state.thresholds);
   onBlur = () => {
     this.setState(prevState => {
       const sortThresholds = this.sortThresholds([...prevState.thresholds]);
@@ -139,10 +144,10 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
       return { thresholds: sortThresholds };
     });
 
-    this.updateGauge();
+    this.onChange();
   };
 
-  updateGauge = () => {
+  onChange = () => {
     this.props.onChange(this.state.thresholds);
   };
 

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

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import {
-  BasicGaugeColor,
   PanelOptionsProps,
   ThresholdsEditor,
   Threshold,
@@ -15,7 +14,6 @@ import { GaugeOptions } from './types';
 
 export const defaultProps = {
   options: {
-    baseColor: BasicGaugeColor.Green,
     minValue: 0,
     maxValue: 100,
     prefix: '',

public/app/plugins/panel/gauge/types.ts

@@ -1,7 +1,6 @@
 import { Threshold, ValueMapping } from '@grafana/ui';
 
 export interface GaugeOptions {
-  baseColor: string;
   decimals: number;
   valueMappings: ValueMapping[];
   maxValue: number;

public/app/viz/Gauge.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { BasicGaugeColor, TimeSeriesVMs } from '@grafana/ui';
+import { TimeSeriesVMs } from '@grafana/ui';
 
 import { Gauge, Props } from './Gauge';
 
@@ -10,7 +10,6 @@ jest.mock('jquery', () => ({
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
-    baseColor: BasicGaugeColor.Green,
     maxValue: 100,
     valueMappings: [],
     minValue: 0,
@@ -18,7 +17,7 @@ const setup = (propOverrides?: object) => {
     showThresholdMarkers: true,
     showThresholdLabels: false,
     suffix: '',
-    thresholds: [],
+    thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }],
     unit: 'none',
     stat: 'avg',
     height: 300,
@@ -42,12 +41,12 @@ describe('Get font color', () => {
   it('should get base color if no threshold', () => {
     const { instance } = setup();
 
-    expect(instance.getFontColor(40)).toEqual(BasicGaugeColor.Green);
+    expect(instance.getFontColor(40)).toEqual('#7EB26D');
   });
 
   it('should be f2f2f2', () => {
     const { instance } = setup({
-      thresholds: [{ value: 59, color: '#f2f2f2' }],
+      thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 1, value: 59, color: '#f2f2f2' }],
     });
 
     expect(instance.getFontColor(58)).toEqual('#f2f2f2');

public/app/viz/Gauge.tsx

@@ -6,7 +6,6 @@ import config from '../core/config';
 import kbn from '../core/utils/kbn';
 
 export interface Props {
-  baseColor: string;
   decimals: number;
   height: number;
   valueMappings: ValueMapping[];
@@ -27,7 +26,6 @@ export class Gauge extends PureComponent<Props> {
   canvasElement: any;
 
   static defaultProps = {
-    baseColor: BasicGaugeColor.Green,
     maxValue: 100,
     valueMappings: [],
     minValue: 0,
@@ -91,24 +89,25 @@ export class Gauge extends PureComponent<Props> {
   }
 
   getFontColor(value) {
-    const { baseColor, maxValue, thresholds } = this.props;
+    const { maxValue, thresholds } = this.props;
 
-    if (thresholds.length > 0) {
-      const atThreshold = thresholds.filter(threshold => value <= threshold.value);
-
-      if (atThreshold.length > 0) {
-        return atThreshold[0].color;
-      } else if (value <= maxValue) {
-        return BasicGaugeColor.Red;
-      }
+    if (thresholds.length === 1) {
+      return thresholds[0].color;
     }
 
-    return baseColor;
+    const atThreshold = thresholds.filter(threshold => value < threshold.value);
+
+    if (atThreshold.length > 0) {
+      return atThreshold[0].color;
+    } else if (value <= maxValue) {
+      return BasicGaugeColor.Red;
+    }
+
+    return '';
   }
 
   draw() {
     const {
-      baseColor,
       maxValue,
       minValue,
       timeSeries,
@@ -137,16 +136,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: 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 options = {
       series: {
@@ -164,7 +163,7 @@ export class Gauge extends PureComponent<Props> {
           layout: { margin: 0, thresholdWidth: 0 },
           cell: { border: { width: 0 } },
           threshold: {
-            values: formattedThresholds,
+            values: thresholds,
             label: {
               show: showThresholdLabels,
               margin: thresholdMarkersWidth + 1,