Skip to content

N
nexpie-grafana-theme
Commit ade2f297 by Peter Holmberg
Options

adding threshold

parent 7c83d7ba
Showing with 77 additions and 154 deletions
public/app/plugins/panel/gauge/Threshold.test.tsx
...@@ -2,17 +2,14 @@ import React from 'react'; ...@@ -2,17 +2,14 @@ import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import Thresholds from './Thresholds'; import Thresholds from './Thresholds';
import { defaultProps, OptionsProps } from './module'; import { defaultProps, OptionsProps } from './module';
import { BasicGaugeColor, PanelOptionsProps } from '../../../types'; import { PanelOptionsProps } from 'app/types';
const setup = (propOverrides?: object) => { const setup = (propOverrides?: object) => {
const props: PanelOptionsProps<OptionsProps> = { const props: PanelOptionsProps<OptionsProps> = {
onChange: jest.fn(), onChange: jest.fn(),
options: { options: {
...defaultProps.options, ...defaultProps.options,
thresholds: [ thresholds: [],
{ index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
{ index: 1, label: 'Max', value: 100, canRemove: false },
],
}, },
}; };
...@@ -22,124 +19,55 @@ const setup = (propOverrides?: object) => { ...@@ -22,124 +19,55 @@ const setup = (propOverrides?: object) => {
}; };
describe('Add threshold', () => { describe('Add threshold', () => {
it('should add threshold between min and max', () => { it('should add threshold', () => {
const instance = setup(); const instance = setup();
instance.onAddThreshold(1); instance.onAddThreshold(0);
expect(instance.state.thresholds).toEqual([ expect(instance.state.thresholds).toEqual([{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }]);
{ 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 },
]);
}); });
it('should add threshold between min and added threshold', () => { it('should add another threshold above a first', () => {
const instance = setup({ const instance = setup({
options: { options: {
...defaultProps.options, ...defaultProps.options,
thresholds: [ thresholds: [{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }],
{ 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 },
],
}, },
}); });
instance.onAddThreshold(1); instance.onAddThreshold(1);
expect(instance.state.thresholds).toEqual([ expect(instance.state.thresholds).toEqual([
{ index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' }, { index: 0, value: 50, color: 'rgb(127, 115, 64)' },
{ index: 1, label: '', value: 25, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' }, { index: 1, value: 75, color: 'rgb(170, 95, 61)' },
{ index: 2, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
{ index: 3, label: 'Max', value: 100, canRemove: false },
]); ]);
}); });
}); });
describe('Add at index', () => { // describe('change threshold value', () => {
it('should return 1, no added thresholds', () => { // it('should update value and resort rows', () => {
const instance = setup(); // const instance = setup();
// const mockThresholds = [
const result = instance.insertAtIndex(1); // { 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)' },
expect(result).toEqual(1); // { index: 2, label: '', value: 75, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
}); // { index: 3, label: 'Max', value: 100, canRemove: false },
// ];
it('should return 1, one added threshold', () => { //
const instance = setup(); // instance.state = {
instance.state = { // baseColor: BasicGaugeColor.Green,
baseColor: BasicGaugeColor.Green, // thresholds: mockThresholds,
thresholds: [ // };
{ index: 0, label: 'Min', value: 0, canRemove: false }, //
{ index: 1, label: '', value: 50, canRemove: true }, // const mockEvent = { target: { value: 78 } };
{ index: 2, label: 'Max', value: 100, canRemove: false }, //
], // instance.onChangeThresholdValue(mockEvent, mockThresholds[1]);
}; //
// expect(instance.state.thresholds).toEqual([
const result = instance.insertAtIndex(1); // { 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)' },
expect(result).toEqual(1); // { index: 2, label: '', value: 75, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
}); // { index: 3, label: 'Max', value: 100, canRemove: false },
// ]);
it('should return 2, two added thresholds', () => { // });
const instance = setup({ // });
options: {
thresholds: [
{ index: 0, label: 'Min', value: 0, canRemove: false },
{ index: 1, label: '', value: 25, canRemove: true },
{ index: 2, label: '', value: 50, canRemove: true },
{ index: 3, label: 'Max', value: 100, canRemove: false },
],
},
});
const result = instance.insertAtIndex(2);
expect(result).toEqual(2);
});
it('should return 2, one added threshold', () => {
const instance = setup();
instance.state = {
baseColor: BasicGaugeColor.Green,
thresholds: [
{ index: 0, label: 'Min', value: 0, canRemove: false },
{ index: 1, label: '', value: 50, canRemove: true },
{ index: 2, label: 'Max', value: 100, canRemove: false },
],
};
const result = instance.insertAtIndex(2);
expect(result).toEqual(2);
});
});
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: '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 },
];
instance.state = {
baseColor: BasicGaugeColor.Green,
thresholds: mockThresholds,
};
const mockEvent = { target: { value: 78 } };
instance.onChangeThresholdValue(mockEvent, mockThresholds[1]);
expect(instance.state.thresholds).toEqual([
{ 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 },
]);
});
});
public/app/plugins/panel/gauge/Thresholds.tsx
...@@ -14,14 +14,17 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State> ...@@ -14,14 +14,17 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
super(props); super(props);
this.state = { this.state = {
thresholds: [{ value: 50, canRemove: true, color: '#f2f2f2', index: 0, label: '' }], thresholds: props.options.thresholds,
baseColor: props.options.baseColor, baseColor: props.options.baseColor,
}; };
} }
onAddThreshold = index => { onAddThreshold = index => {
const { maxValue, minValue } = this.props.options;
const { thresholds } = this.state; const { thresholds } = this.state;
console.log('add at index:', index);
const newThresholds = thresholds.map(threshold => { const newThresholds = thresholds.map(threshold => {
if (threshold.index >= index) { if (threshold.index >= index) {
threshold = { ...threshold, index: threshold.index + 1 }; threshold = { ...threshold, index: threshold.index + 1 };
...@@ -31,17 +34,27 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State> ...@@ -31,17 +34,27 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
}); });
// Setting value to a value between the previous thresholds // Setting value to a value between the previous thresholds
const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2; let value;
if (index === 0 && thresholds.length === 0) {
value = maxValue - (maxValue - minValue) / 2;
} else if (index === 0 && thresholds.length > 0) {
value = newThresholds[index + 1].value - (newThresholds[index + 1].value - minValue) / 2;
} else if (index > newThresholds[newThresholds.length - 1].index) {
value = maxValue - (maxValue - newThresholds[index - 1].value) / 2;
}
// Set a color that lies between the previous thresholds // Set a color that lies between the previous thresholds
const color = tinycolor.mix(thresholds[index - 1].color, thresholds[index].color, 50).toRgbString(); let color;
if (index === 0 && thresholds.length === 0) {
color = tinycolor.mix(BasicGaugeColor.Green, BasicGaugeColor.Red, 50).toRgbString();
} else {
color = tinycolor.mix(thresholds[index - 1].color, BasicGaugeColor.Red, 50).toRgbString();
}
this.setState( this.setState(
{ {
thresholds: this.sortThresholds([ thresholds: this.sortThresholds([...newThresholds, { index: index, value: value, color: color }]),
...newThresholds,
{ index: index, label: '', value: value, canRemove: true, color: color },
]),
}, },
() => this.updateGauge() () => this.updateGauge()
); );
...@@ -106,32 +119,10 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State> ...@@ -106,32 +119,10 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
sortThresholds = thresholds => { sortThresholds = thresholds => {
return thresholds.sort((t1, t2) => { return thresholds.sort((t1, t2) => {
return t1.value - t2.value; return t2.value - t1.value;
}); });
}; };
getIndicatorColor = index => {
const { thresholds } = this.state;
if (index === 0) {
return thresholds[0].color;
}
return index < thresholds.length ? thresholds[index].color : BasicGaugeColor.Red;
};
insertAtIndex(index) {
const { thresholds } = this.state;
// If thresholds.length is greater or equal to 3
// it means a user has added one threshold
if (thresholds.length < 3 || index < 0) {
return 1;
}
return index;
}
renderThresholds() { renderThresholds() {
const { thresholds } = this.state; const { thresholds } = this.state;
...@@ -170,20 +161,25 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State> ...@@ -170,20 +161,25 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
return thresholds.map((t, i) => { return thresholds.map((t, i) => {
return ( return (
<div <div key={`${t.value}-${i}`} className="indicator-section">
key={`${t.value}-${i}`}
className="indicator-section"
style={{
height: '50%',
}}
>
<div <div
onClick={() => this.onAddThreshold(this.insertAtIndex(1))} onClick={() => this.onAddThreshold(t.index + 1)}
style={{ style={{
height: '100%', height: '50%',
background: this.getIndicatorColor(i), backgroundColor: t.color,
}} }}
/> >
{t.index}
</div>
<div
onClick={() => this.onAddThreshold(t.index)}
style={{
height: '50%',
backgroundColor: t.color,
}}
>
{t.index}
</div>
</div> </div>
); );
}); });
...@@ -193,8 +189,8 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State> ...@@ -193,8 +189,8 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
return ( return (
<div className="indicator-section" style={{ height: '100%' }}> <div className="indicator-section" style={{ height: '100%' }}>
<div <div
onClick={() => this.onAddThreshold(1)} onClick={() => this.onAddThreshold(0)}
style={{ height: '50px', backgroundColor: this.props.options.baseColor }} style={{ height: '100%', backgroundColor: this.props.options.baseColor }}
/> />
</div> </div>
); );
......
public/app/types/panel.ts
...@@ -31,10 +31,8 @@ export interface PanelMenuItem { ...@@ -31,10 +31,8 @@ export interface PanelMenuItem {
export interface Threshold { export interface Threshold {
index: number; index: number;
label: string;
value: number; value: number;
color?: string; color?: string;
canRemove: boolean;
} }
export enum MappingType { export enum MappingType {
......
public/sass/components/_thresholds.scss
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
.threshold-row { .threshold-row {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 5px 0; margin-top: 3px;
padding: 5px; padding: 5px;
&::before { &::before {
...@@ -95,6 +95,7 @@ ...@@ -95,6 +95,7 @@
.indicator-section { .indicator-section {
width: 100%; width: 100%;
height: 50px;
cursor: pointer; cursor: pointer;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment