From 4f6e87bbbf1ea66dfd780956caaf09c15649c41f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Thu, 17 Jan 2019 14:48:20 +0100 Subject: [PATCH] Small refactor of Gauge and tests --- .../src/components/Gauge/Gauge.test.tsx | 78 +++++++++++++++++++ .../grafana-ui/src/components/Gauge/Gauge.tsx | 50 +++++------- 2 files changed, 99 insertions(+), 29 deletions(-) diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx index 999f3f581ab..84f6b921a38 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx @@ -3,6 +3,7 @@ import { shallow } from 'enzyme'; import { Gauge, Props } from './Gauge'; import { TimeSeriesVMs } from '../../types/series'; +import { ValueMapping, MappingType } from '../../types'; jest.mock('jquery', () => ({ plot: jest.fn(), @@ -68,3 +69,80 @@ describe('Get font color', () => { expect(instance.getFontColor(6.5)).toEqual('#EAB839'); }); }); + +describe('Format value with value mappings', () => { + it('should return undefined with no valuemappings', () => { + const valueMappings: ValueMapping[] = []; + const value = 10; + const { instance } = setup({ valueMappings }); + + const result = instance.getFirstFormattedValueMapping(valueMappings, value); + + expect(result).toBeUndefined(); + }); + + it('should return undefined with no matching valuemappings', () => { + const valueMappings: ValueMapping[] = [ + { id: 0, operator: '', text: 'elva', type: MappingType.ValueToText, value: '11' }, + { id: 1, operator: '', text: '1-9', type: MappingType.RangeToText, from: '1', to: '9' }, + ]; + const value = 10; + const { instance } = setup({ valueMappings }); + + const result = instance.getFirstFormattedValueMapping(valueMappings, value); + + expect(result).toBeUndefined(); + }); + + it('should return first matching mapping with lowest id', () => { + const valueMappings: ValueMapping[] = [ + { id: 0, operator: '', text: '1-20', type: MappingType.RangeToText, from: '1', to: '20' }, + { id: 1, operator: '', text: 'tio', type: MappingType.ValueToText, value: '10' }, + ]; + const value = 10; + const { instance } = setup({ valueMappings }); + + const result = instance.getFirstFormattedValueMapping(valueMappings, value); + + expect(result.text).toEqual('1-20'); + }); + + it('should return rangeToText mapping where value equals to', () => { + const valueMappings: ValueMapping[] = [ + { id: 0, operator: '', text: '1-10', type: MappingType.RangeToText, from: '1', to: '10' }, + { id: 1, operator: '', text: 'elva', type: MappingType.ValueToText, value: '11' }, + ]; + const value = 10; + const { instance } = setup({ valueMappings }); + + const result = instance.getFirstFormattedValueMapping(valueMappings, value); + + expect(result.text).toEqual('1-10'); + }); + + it('should return rangeToText mapping where value equals from', () => { + const valueMappings: ValueMapping[] = [ + { id: 0, operator: '', text: '10-20', type: MappingType.RangeToText, from: '10', to: '20' }, + { id: 1, operator: '', text: 'elva', type: MappingType.ValueToText, value: '11' }, + ]; + const value = 10; + const { instance } = setup({ valueMappings }); + + const result = instance.getFirstFormattedValueMapping(valueMappings, value); + + expect(result.text).toEqual('10-20'); + }); + + it('should return rangeToText mapping where value is between from and to', () => { + const valueMappings: ValueMapping[] = [ + { id: 0, operator: '', text: '1-20', type: MappingType.RangeToText, from: '1', to: '20' }, + { id: 1, operator: '', text: 'elva', type: MappingType.ValueToText, value: '11' }, + ]; + const value = 10; + const { instance } = setup({ valueMappings }); + + const result = instance.getFirstFormattedValueMapping(valueMappings, value); + + expect(result.text).toEqual('1-20'); + }); +}); diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index aefd6ed7882..6a219a580c7 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -58,34 +58,26 @@ export class Gauge extends PureComponent { this.draw(); } - addValueToTextMappingText( - allTexts: Array<{ text: string; type: MappingType }>, - valueToTextMapping: ValueMap, - value: TimeSeriesValue - ) { + addValueToTextMappingText(allValueMappings: ValueMapping[], valueToTextMapping: ValueMap, value: TimeSeriesValue) { if (!valueToTextMapping.value) { - return allTexts; + return allValueMappings; } const valueAsNumber = parseFloat(value as string); const valueToTextMappingAsNumber = parseFloat(valueToTextMapping.value as string); if (isNaN(valueAsNumber) || isNaN(valueToTextMappingAsNumber)) { - return allTexts; + return allValueMappings; } if (valueAsNumber !== valueToTextMappingAsNumber) { - return allTexts; + return allValueMappings; } - return allTexts.concat({ text: valueToTextMapping.text, type: MappingType.ValueToText }); + return allValueMappings.concat(valueToTextMapping); } - addRangeToTextMappingText( - allTexts: Array<{ text: string; type: MappingType }>, - rangeToTextMapping: RangeMap, - value: TimeSeriesValue - ) { + addRangeToTextMappingText(allValueMappings: ValueMapping[], rangeToTextMapping: RangeMap, value: TimeSeriesValue) { if ( rangeToTextMapping.from && rangeToTextMapping.to && @@ -93,35 +85,35 @@ export class Gauge extends PureComponent { value >= rangeToTextMapping.from && value <= rangeToTextMapping.to ) { - return allTexts.concat({ text: rangeToTextMapping.text, type: MappingType.RangeToText }); + return allValueMappings.concat(rangeToTextMapping); } - return allTexts; + return allValueMappings; } - getAllMappingTexts(valueMappings: ValueMapping[], value: TimeSeriesValue) { - const allMappingTexts = valueMappings.reduce( - (allTexts, valueMapping) => { + getAllFormattedValueMappings(valueMappings: ValueMapping[], value: TimeSeriesValue) { + const allFormattedValueMappings = valueMappings.reduce( + (allValueMappings, valueMapping) => { if (valueMapping.type === MappingType.ValueToText) { - allTexts = this.addValueToTextMappingText(allTexts, valueMapping as ValueMap, value); + allValueMappings = this.addValueToTextMappingText(allValueMappings, valueMapping as ValueMap, value); } else if (valueMapping.type === MappingType.RangeToText) { - allTexts = this.addRangeToTextMappingText(allTexts, valueMapping as RangeMap, value); + allValueMappings = this.addRangeToTextMappingText(allValueMappings, valueMapping as RangeMap, value); } - return allTexts; + return allValueMappings; }, - [] as Array<{ text: string; type: MappingType }> + [] as ValueMapping[] ); - allMappingTexts.sort((t1, t2) => { - return t1.type - t2.type; + allFormattedValueMappings.sort((t1, t2) => { + return t1.id - t2.id; }); - return allMappingTexts; + return allFormattedValueMappings; } - formatWithValueMappings(valueMappings: ValueMapping[], value: TimeSeriesValue) { - return this.getAllMappingTexts(valueMappings, value)[0]; + getFirstFormattedValueMapping(valueMappings: ValueMapping[], value: TimeSeriesValue) { + return this.getAllFormattedValueMappings(valueMappings, value)[0]; } formatValue(value: TimeSeriesValue) { @@ -132,7 +124,7 @@ export class Gauge extends PureComponent { } if (valueMappings.length > 0) { - const valueMappedValue = this.formatWithValueMappings(valueMappings, value); + const valueMappedValue = this.getFirstFormattedValueMapping(valueMappings, value); if (valueMappedValue) { return `${prefix} ${valueMappedValue.text} ${suffix}`; }