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 getFontColor, added tests and fixed thresholds logic

Browse Source
This commit is contained in:
Hugo Häggmark 2019-01-17 09:54:31 +01:00
parent 533b938fcd
commit 9dcf3d58ea
2 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/app/viz/Gauge.test.tsx
View File

@ -38,17 +38,33 @@ const setup = (propOverrides?: object) => {
};
describe('Get font color', () => {
it('should get base color if no threshold', () => {
const { instance } = setup();
it('should get first threshold color when only one threshold', () => {
const { instance } = setup({ thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }] });
expect(instance.getFontColor(40)).toEqual('#7EB26D');
expect(instance.getFontColor(49)).toEqual('#7EB26D');
});
it('should be f2f2f2', () => {
it('should get the next threshold color if value is same as a threshold', () => {
const { instance } = setup({
thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 1, value: 59, color: '#f2f2f2' }],
thresholds: [
{ index: 2, value: 75, color: '#6ED0E0' },
{ index: 1, value: 50, color: '#EAB839' },
{ index: 0, value: -Infinity, color: '#7EB26D' },
],
});
expect(instance.getFontColor(58)).toEqual('#f2f2f2');
expect(instance.getFontColor(50)).toEqual('#6ED0E0');
});
it('should get the nearest threshold color', () => {
const { instance } = setup({
thresholds: [
{ index: 2, value: 75, color: '#6ED0E0' },
{ index: 1, value: 50, color: '#EAB839' },
{ index: 0, value: -Infinity, color: '#7EB26D' },
],
});
expect(instance.getFontColor(6.5)).toEqual('#EAB839');
});
});

35
public/app/viz/Gauge.tsx
View File

@ -82,14 +82,14 @@ export class Gauge extends PureComponent<Props> {
}
if (isNaN(value)) {
return '-';
return value;
}
return `${prefix} ${formattedValue} ${suffix}`;
}
getFontColor(value) {
const { maxValue, thresholds } = this.props;
getFontColor(value: string | number) {
const { thresholds } = this.props;
if (thresholds.length === 1) {
return thresholds[0].color;
@ -98,12 +98,11 @@ export class Gauge extends PureComponent<Props> {
const atThreshold = thresholds.filter(threshold => value < threshold.value);
if (atThreshold.length > 0) {
return atThreshold[0].color;
} else if (value <= maxValue) {
return BasicGaugeColor.Red;
const nearestThreshold = atThreshold.sort((t1, t2) => t1.value - t2.value)[0];
return nearestThreshold.color;
}
return '';
return BasicGaugeColor.Red;
}
draw() {
@ -136,16 +135,16 @@ export class Gauge extends PureComponent<Props> {
const thresholdMarkersWidth = gaugeWidth / 5;
const thresholdLabelFontSize = fontSize / 2.5;
// const formattedThresholds = [
// { value: minValue, color: BasicGaugeColor.Green },
// ...thresholds.map((threshold, index) => {
// return {
// value: threshold.value,
// color: index === 0 ? threshold.color : thresholds[index].color,
// };
// }),
// { value: maxValue, color: thresholds.length > 0 ? BasicGaugeColor.Red : baseColor },
// ];
const formattedThresholds = [
{ value: minValue, color: thresholds.length === 1 ? thresholds[0].color : BasicGaugeColor.Green },
...thresholds.map((threshold, index) => {
return {
value: threshold.value,
color: thresholds[index].color,
};
}),
{ value: maxValue, color: thresholds.length === 1 ? thresholds[0].color : BasicGaugeColor.Red },
];
const options = {
series: {
@ -163,7 +162,7 @@ export class Gauge extends PureComponent<Props> {
layout: { margin: 0, thresholdWidth: 0 },
cell: { border: { width: 0 } },
threshold: {
values: thresholds,
values: formattedThresholds,
label: {
show: showThresholdLabels,
margin: thresholdMarkersWidth + 1,