From 909fe4705076a2b4d2b2b01e5f5608629654d8aa Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Thu, 29 Nov 2018 13:44:35 +0100 Subject: [PATCH] update color on gauge when changing --- .../plugins/panel/gauge/Threshold.test.tsx | 26 +++++++------- public/app/plugins/panel/gauge/Thresholds.tsx | 34 ++++++++++++------- public/app/viz/Gauge.tsx | 12 ++++--- 3 files changed, 43 insertions(+), 29 deletions(-) diff --git a/public/app/plugins/panel/gauge/Threshold.test.tsx b/public/app/plugins/panel/gauge/Threshold.test.tsx index 9e02c2e3bcc..e74ed9ffcc2 100644 --- a/public/app/plugins/panel/gauge/Threshold.test.tsx +++ b/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 }, ]); }); diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx index 146bf808765..e066d486842 100644 --- a/public/app/plugins/panel/gauge/Thresholds.tsx +++ b/public/app/plugins/panel/gauge/Thresholds.tsx @@ -15,7 +15,7 @@ export default class Thresholds extends PureComponent ({ - 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 this.updateGauge() + ); }; onBlur = () => { @@ -88,6 +94,10 @@ export default class Thresholds extends PureComponent { this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds }); }; @@ -106,7 +116,7 @@ export default class Thresholds extends PureComponent { canvasElement: any; @@ -32,7 +30,10 @@ export class Gauge extends PureComponent { 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 { 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: {