diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx index 6e8d88051f3..bd4f83f4dba 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx @@ -19,9 +19,15 @@ export class ThresholdsEditor extends PureComponent { 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 { }, ]), }, - () => this.updateGauge() + () => this.onChange() ); }; @@ -85,7 +91,7 @@ export class ThresholdsEditor extends PureComponent { thresholds: newThresholds.filter(t => t !== threshold), }; }, - () => this.updateGauge() + () => this.onChange() ); }; @@ -124,11 +130,10 @@ export class ThresholdsEditor extends PureComponent { { 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 { return { thresholds: sortThresholds }; }); - this.updateGauge(); + this.onChange(); }; - updateGauge = () => { + onChange = () => { this.props.onChange(this.state.thresholds); }; diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx index 9729416b7e6..18a445d840d 100644 --- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx +++ b/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: '', diff --git a/public/app/plugins/panel/gauge/types.ts b/public/app/plugins/panel/gauge/types.ts index b698a3389c2..42262178dc8 100644 --- a/public/app/plugins/panel/gauge/types.ts +++ b/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; diff --git a/public/app/viz/Gauge.test.tsx b/public/app/viz/Gauge.test.tsx index 69c7733f44b..2678b3f2ad1 100644 --- a/public/app/viz/Gauge.test.tsx +++ b/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'); diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx index 094e630a1c0..069a8dbcc3c 100644 --- a/public/app/viz/Gauge.tsx +++ b/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 { canvasElement: any; static defaultProps = { - baseColor: BasicGaugeColor.Green, maxValue: 100, valueMappings: [], minValue: 0, @@ -91,24 +89,25 @@ export class Gauge extends PureComponent { } 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 { 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 { layout: { margin: 0, thresholdWidth: 0 }, cell: { border: { width: 0 } }, threshold: { - values: formattedThresholds, + values: thresholds, label: { show: showThresholdLabels, margin: thresholdMarkersWidth + 1,