public/grafana
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update color on gauge when changing

Browse Source
This commit is contained in:
Peter Holmberg committed 2018-11-29 13:44:35 +01:00
1 parent 460d642b06
commit 909fe47050
3 files changed
+43 -29
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/app/plugins/panel/gauge/Threshold.test.tsx
+13 -13
View File
@@ -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 },
]);
});
public/app/plugins/panel/gauge/Thresholds.tsx
+22 -12
View File
@@ -15,7 +15,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
this.state = {
thresholds: this.props.options.thresholds || [
{ index: 0, label: 'Min', value: 0, canRemove: false, color: '#3aa655' },
{ index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
{ index: 1, label: 'Max', value: 100, canRemove: false },
],
userAddedThresholds: 0,
@@ -35,13 +35,16 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2;
this.setState(prevState => ({
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<PanelOptionsProps<OptionsP
return currentThreshold;
});
this.setState({
thresholds: newThresholds,
});
this.setState(
{
thresholds: newThresholds,
},
() => this.updateGauge()
);
};
onBlur = () => {
@@ -88,6 +94,10 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
thresholds: this.sortThresholds(prevState.thresholds),
}));
this.updateGauge();
};
updateGauge = () => {
this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds });
};
@@ -106,7 +116,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
return thresholds[index].color;
}
return '#d44939';
return 'rgb(212, 74, 58)';
}
renderNoThresholds() {
public/app/viz/Gauge.tsx
+8 -4
View File
@@ -20,8 +20,6 @@ interface Props {
suffix: string;
}
const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
export class Gauge extends PureComponent<Props> {
canvasElement: any;
@@ -32,7 +30,10 @@ export class Gauge extends PureComponent<Props> {
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<Props> {
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: {