IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fixed so added threshold colors are always unique

Browse Source
This commit is contained in:
Hugo Häggmark 2019-01-15 11:07:06 +01:00
parent 2836bc2a13
commit aaaf3f7ff1
2 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
View File

@ -19,7 +19,7 @@ describe('Initialization', () => {
it('should add a base threshold if missing', () => { it('should add a base threshold if missing', () => {
const instance = setup(); const instance = setup();
expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#299c46' }]); expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]);
}); });
}); });
@ -29,7 +29,7 @@ describe('Add threshold', () => {
instance.onAddThreshold(0); instance.onAddThreshold(0);
expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#299c46' }]); expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]);
}); });
it('should add threshold', () => { it('should add threshold', () => {
@ -39,13 +39,13 @@ describe('Add threshold', () => {
expect(instance.state.thresholds).toEqual([ expect(instance.state.thresholds).toEqual([
{ index: 1, value: 50, color: '#EAB839' }, { index: 1, value: 50, color: '#EAB839' },
{ index: 0, value: -Infinity, color: '#299c46' }, { index: 0, value: -Infinity, color: '#7EB26D' },
]); ]);
}); });
it('should add another threshold above a first', () => { it('should add another threshold above a first', () => {
const instance = setup({ const instance = setup({
thresholds: [{ index: 0, value: -Infinity, color: '#299c46' }, { index: 1, value: 50, color: '#EAB839' }], thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 1, value: 50, color: '#EAB839' }],
}); });
instance.onAddThreshold(2); instance.onAddThreshold(2);
@ -53,14 +53,14 @@ describe('Add threshold', () => {
expect(instance.state.thresholds).toEqual([ expect(instance.state.thresholds).toEqual([
{ index: 2, value: 75, color: '#6ED0E0' }, { index: 2, value: 75, color: '#6ED0E0' },
{ index: 1, value: 50, color: '#EAB839' }, { index: 1, value: 50, color: '#EAB839' },
{ index: 0, value: -Infinity, color: '#299c46' }, { index: 0, value: -Infinity, color: '#7EB26D' },
]); ]);
}); });
it('should add another threshold between first and second index', () => { it('should add another threshold between first and second index', () => {
const instance = setup({ const instance = setup({
thresholds: [ thresholds: [
{ index: 0, value: -Infinity, color: '#299c46' }, { index: 0, value: -Infinity, color: '#7EB26D' },
{ index: 1, value: 50, color: '#EAB839' }, { index: 1, value: 50, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' }, { index: 2, value: 75, color: '#6ED0E0' },
], ],
@ -69,10 +69,10 @@ describe('Add threshold', () => {
instance.onAddThreshold(2); instance.onAddThreshold(2);
expect(instance.state.thresholds).toEqual([ expect(instance.state.thresholds).toEqual([
{ index: 3, value: 75, color: '#EF843C' }, { index: 3, value: 75, color: '#6ED0E0' },
{ index: 2, value: 62.5, color: '#6ED0E0' }, { index: 2, value: 62.5, color: '#EF843C' },
{ index: 1, value: 50, color: '#EAB839' }, { index: 1, value: 50, color: '#EAB839' },
{ index: 0, value: -Infinity, color: '#299c46' }, { index: 0, value: -Infinity, color: '#7EB26D' },
]); ]);
}); });
}); });
@ -80,7 +80,7 @@ describe('Add threshold', () => {
describe('Remove threshold', () => { describe('Remove threshold', () => {
it('should not remove threshold at index 0', () => { it('should not remove threshold at index 0', () => {
const thresholds = [ const thresholds = [
{ index: 0, value: -Infinity, color: '#299c46' }, { index: 0, value: -Infinity, color: '#7EB26D' },
{ index: 1, value: 50, color: '#EAB839' }, { index: 1, value: 50, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' }, { index: 2, value: 75, color: '#6ED0E0' },
]; ];
@ -93,7 +93,7 @@ describe('Remove threshold', () => {
it('should remove threshold', () => { it('should remove threshold', () => {
const thresholds = [ const thresholds = [
{ index: 0, value: -Infinity, color: '#299c46' }, { index: 0, value: -Infinity, color: '#7EB26D' },
{ index: 1, value: 50, color: '#EAB839' }, { index: 1, value: 50, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' }, { index: 2, value: 75, color: '#6ED0E0' },
]; ];
@ -104,7 +104,7 @@ describe('Remove threshold', () => {
instance.onRemoveThreshold(thresholds[1]); instance.onRemoveThreshold(thresholds[1]);
expect(instance.state.thresholds).toEqual([ expect(instance.state.thresholds).toEqual([
{ index: 0, value: -Infinity, color: '#299c46' }, { index: 0, value: -Infinity, color: '#7EB26D' },
{ index: 1, value: 75, color: '#6ED0E0' }, { index: 1, value: 75, color: '#6ED0E0' },
]); ]);
}); });
@ -114,7 +114,7 @@ describe('change threshold value', () => {
it('should update value', () => { it('should update value', () => {
const instance = setup(); const instance = setup();
const thresholds = [ const thresholds = [
{ index: 0, value: -Infinity, color: '#299c46' }, { index: 0, value: -Infinity, color: '#7EB26D' },
{ index: 1, value: 50, color: '#EAB839' }, { index: 1, value: 50, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' }, { index: 2, value: 75, color: '#6ED0E0' },
]; ];
@ -129,7 +129,7 @@ describe('change threshold value', () => {
instance.onChangeThresholdValue(mockEvent, thresholds[1]); instance.onChangeThresholdValue(mockEvent, thresholds[1]);
expect(instance.state.thresholds).toEqual([ expect(instance.state.thresholds).toEqual([
{ index: 0, value: -Infinity, color: '#299c46' }, { index: 0, value: -Infinity, color: '#7EB26D' },
{ index: 1, value: 78, color: '#EAB839' }, { index: 1, value: 78, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' }, { index: 2, value: 75, color: '#6ED0E0' },
]); ]);
@ -140,7 +140,7 @@ describe('on blur threshold value', () => {
it('should resort rows and update indexes', () => { it('should resort rows and update indexes', () => {
const instance = setup(); const instance = setup();
const thresholds = [ const thresholds = [
{ index: 0, value: -Infinity, color: '#299c46' }, { index: 0, value: -Infinity, color: '#7EB26D' },
{ index: 1, value: 78, color: '#EAB839' }, { index: 1, value: 78, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' }, { index: 2, value: 75, color: '#6ED0E0' },
]; ];
@ -155,7 +155,7 @@ describe('on blur threshold value', () => {
expect(instance.state.thresholds).toEqual([ expect(instance.state.thresholds).toEqual([
{ index: 2, value: 78, color: '#EAB839' }, { index: 2, value: 78, color: '#EAB839' },
{ index: 1, value: 75, color: '#6ED0E0' }, { index: 1, value: 75, color: '#6ED0E0' },
{ index: 0, value: -Infinity, color: '#299c46' }, { index: 0, value: -Infinity, color: '#7EB26D' },
]); ]);
}); });
}); });

6
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
View File

@ -21,7 +21,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
super(props); super(props);
const thresholds: Threshold[] = const thresholds: Threshold[] =
props.thresholds.length > 0 ? props.thresholds : [{ index: 0, value: -Infinity, color: '#299c46' }]; props.thresholds.length > 0 ? props.thresholds : [{ index: 0, value: -Infinity, color: colors[0] }];
this.state = { thresholds, baseColor: BasicGaugeColor.Green }; this.state = { thresholds, baseColor: BasicGaugeColor.Green };
} }
@ -37,7 +37,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
const newThresholds = thresholds.map(threshold => { const newThresholds = thresholds.map(threshold => {
if (threshold.index >= index) { if (threshold.index >= index) {
const index = threshold.index + 1; const index = threshold.index + 1;
threshold = { ...threshold, index, color: colors[index] }; threshold = { ...threshold, index };
} }
return threshold; return threshold;
}); });
@ -50,7 +50,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
const value = afterThresholdValue - (afterThresholdValue - beforeThresholdValue) / 2; const value = afterThresholdValue - (afterThresholdValue - beforeThresholdValue) / 2;
// Set a color // Set a color
const color = colors[index]; const color = colors.filter(c => newThresholds.some(t => t.color === c) === false)[0];
this.setState( this.setState(
{ {