Skip to content

N
nexpie-grafana-theme
Commit 909fe470 by Peter Holmberg
Options

update color on gauge when changing

parent 460d642b
Showing with 38 additions and 24 deletions
public/app/plugins/panel/gauge/Threshold.test.tsx
...@@ -16,8 +16,8 @@ const setup = (propOverrides?: object) => { ...@@ -16,8 +16,8 @@ const setup = (propOverrides?: object) => {
}; };
const thresholds = [ const 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: '', value: 50, canRemove: true, color: '#ff851b' }, { index: 1, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
{ index: 2, label: 'Max', value: 100, canRemove: false }, { index: 2, label: 'Max', value: 100, canRemove: false },
]; ];
...@@ -28,8 +28,8 @@ describe('Add threshold', () => { ...@@ -28,8 +28,8 @@ describe('Add threshold', () => {
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: '#3aa655' }, { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
{ index: 1, label: '', value: 50, canRemove: true, color: '#ff851b' }, { index: 1, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
{ index: 2, label: 'Max', value: 100, canRemove: false }, { index: 2, label: 'Max', value: 100, canRemove: false },
]); ]);
}); });
...@@ -45,9 +45,9 @@ describe('Add threshold', () => { ...@@ -45,9 +45,9 @@ describe('Add threshold', () => {
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: '#3aa655' }, { index: 0, label: 'Min', value: 0, canRemove: false, color: 'rgba(50, 172, 45, 0.97)' },
{ index: 1, label: '', value: 25, canRemove: true, color: '#ff851b' }, { index: 1, label: '', value: 25, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
{ index: 2, label: '', value: 50, canRemove: true, color: '#ff851b' }, { index: 2, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
{ index: 3, label: 'Max', value: 100, canRemove: false }, { index: 3, label: 'Max', value: 100, canRemove: false },
]); ]);
}); });
...@@ -116,9 +116,9 @@ describe('change threshold value', () => { ...@@ -116,9 +116,9 @@ describe('change threshold value', () => {
it('should update value and resort rows', () => { it('should update value and resort rows', () => {
const instance = setup(); const instance = setup();
const mockThresholds = [ const mockThresholds = [
{ 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: '', value: 50, canRemove: true, color: '#ff851b' }, { index: 1, label: '', value: 50, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
{ index: 2, label: '', value: 75, canRemove: true, color: '#ff851b' }, { index: 2, label: '', value: 75, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
{ index: 3, label: 'Max', value: 100, canRemove: false }, { index: 3, label: 'Max', value: 100, canRemove: false },
]; ];
...@@ -132,9 +132,9 @@ describe('change threshold value', () => { ...@@ -132,9 +132,9 @@ describe('change threshold value', () => {
instance.onChangeThresholdValue(mockEvent, mockThresholds[1]); instance.onChangeThresholdValue(mockEvent, mockThresholds[1]);
expect(instance.state.thresholds).toEqual([ expect(instance.state.thresholds).toEqual([
{ 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: '', value: 78, canRemove: true, color: '#ff851b' }, { index: 1, label: '', value: 78, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
{ index: 2, label: '', value: 75, canRemove: true, color: '#ff851b' }, { index: 2, label: '', value: 75, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
{ index: 3, label: 'Max', value: 100, canRemove: false }, { index: 3, label: 'Max', value: 100, canRemove: false },
]); ]);
}); });
......
public/app/plugins/panel/gauge/Thresholds.tsx
...@@ -15,7 +15,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP ...@@ -15,7 +15,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
this.state = { this.state = {
thresholds: this.props.options.thresholds || [ 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 }, { index: 1, label: 'Max', value: 100, canRemove: false },
], ],
userAddedThresholds: 0, userAddedThresholds: 0,
...@@ -35,13 +35,16 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP ...@@ -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; const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2;
this.setState(prevState => ({ this.setState(
prevState => ({
thresholds: this.sortThresholds([ thresholds: this.sortThresholds([
...newThresholds, ...newThresholds,
{ index: index, label: '', value: value, canRemove: true, color: '#ff851b' }, { index: index, label: '', value: value, canRemove: true, color: 'rgba(237, 129, 40, 0.89)' },
]), ]),
userAddedThresholds: prevState.userAddedThresholds + 1, userAddedThresholds: prevState.userAddedThresholds + 1,
})); }),
() => this.updateGauge()
);
}; };
onRemoveThreshold = threshold => { onRemoveThreshold = threshold => {
...@@ -78,9 +81,12 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP ...@@ -78,9 +81,12 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
return currentThreshold; return currentThreshold;
}); });
this.setState({ this.setState(
{
thresholds: newThresholds, thresholds: newThresholds,
}); },
() => this.updateGauge()
);
}; };
onBlur = () => { onBlur = () => {
...@@ -88,6 +94,10 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP ...@@ -88,6 +94,10 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
thresholds: this.sortThresholds(prevState.thresholds), thresholds: this.sortThresholds(prevState.thresholds),
})); }));
this.updateGauge();
};
updateGauge = () => {
this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds }); this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds });
}; };
...@@ -106,7 +116,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP ...@@ -106,7 +116,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
return thresholds[index].color; return thresholds[index].color;
} }
return '#d44939'; return 'rgb(212, 74, 58)';
} }
renderNoThresholds() { renderNoThresholds() {
......
public/app/viz/Gauge.tsx
...@@ -20,8 +20,6 @@ interface Props { ...@@ -20,8 +20,6 @@ interface Props {
suffix: string; 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> { export class Gauge extends PureComponent<Props> {
canvasElement: any; canvasElement: any;
...@@ -32,7 +30,10 @@ export class Gauge extends PureComponent<Props> { ...@@ -32,7 +30,10 @@ export class Gauge extends PureComponent<Props> {
showThresholdMarkers: true, showThresholdMarkers: true,
showThresholdLabels: false, showThresholdLabels: false,
suffix: '', 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() { componentDidMount() {
...@@ -76,10 +77,13 @@ export class Gauge extends PureComponent<Props> { ...@@ -76,10 +77,13 @@ export class Gauge extends PureComponent<Props> {
const formattedThresholds = thresholds.map((threshold, index) => { const formattedThresholds = thresholds.map((threshold, index) => {
return { return {
value: threshold.value, 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 = { const options = {
series: { series: {
gauges: { gauges: {
......
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