IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-10 07:35:45 -06:00
Code Issues Packages Projects Releases Wiki Activity

Redid logic for fontcolor and thresholds in Gauge and added tests

Browse Source
This commit is contained in:
Hugo Häggmark 2019-01-18 09:54:25 +01:00
parent c17ccf2289
commit 4cc0be2568
2 changed files with 62 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/grafana-ui/src/components/Gauge/Gauge.test.tsx
View File

@ -45,7 +45,7 @@ describe('Get font color', () => {
expect(instance.getFontColor(49)).toEqual('#7EB26D');
});
it('should get the next threshold color if value is same as a threshold', () => {
it('should get the threshold color if value is same as a threshold', () => {
const { instance } = setup({
thresholds: [
{ index: 2, value: 75, color: '#6ED0E0' },
@ -54,10 +54,10 @@ describe('Get font color', () => {
],
});
expect(instance.getFontColor(50)).toEqual('#6ED0E0');
expect(instance.getFontColor(50)).toEqual('#EAB839');
});
it('should get the nearest threshold color', () => {
it('should get the nearest threshold color between thresholds', () => {
const { instance } = setup({
thresholds: [
{ index: 2, value: 75, color: '#6ED0E0' },
@ -66,7 +66,35 @@ describe('Get font color', () => {
],
});
expect(instance.getFontColor(6.5)).toEqual('#EAB839');
expect(instance.getFontColor(55)).toEqual('#EAB839');
});
});
describe('Get thresholds formatted', () => {
it('should return first thresholds color for min and max', () => {
const { instance } = setup({ thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }] });
expect(instance.getFormattedThresholds()).toEqual([
{ value: 0, color: '#7EB26D' },
{ value: 100, color: '#7EB26D' },
]);
});
it('should get the correct formatted values when thresholds are added', () => {
const { instance } = setup({
thresholds: [
{ index: 2, value: 75, color: '#6ED0E0' },
{ index: 1, value: 50, color: '#EAB839' },
{ index: 0, value: -Infinity, color: '#7EB26D' },
],
});
expect(instance.getFormattedThresholds()).toEqual([
{ value: 0, color: '#7EB26D' },
{ value: 50, color: '#7EB26D' },
{ value: 75, color: '#EAB839' },
{ value: 100, color: '#6ED0E0' },
]);
});
});

46
packages/grafana-ui/src/components/Gauge/Gauge.tsx
View File

@ -149,16 +149,42 @@ export class Gauge extends PureComponent<Props> {
return thresholds[0].color;
}
const atThreshold = thresholds.filter(threshold => (value as number) < threshold.value);
const atThreshold = thresholds.filter(threshold => (value as number) === threshold.value)[0];
if (atThreshold) {
return atThreshold.color;
}
if (atThreshold.length > 0) {
const nearestThreshold = atThreshold.sort((t1, t2) => t1.value - t2.value)[0];
const belowThreshold = thresholds.filter(threshold => (value as number) > threshold.value);
if (belowThreshold.length > 0) {
const nearestThreshold = belowThreshold.sort((t1, t2) => t2.value - t1.value)[0];
return nearestThreshold.color;
}
return BasicGaugeColor.Red;
}
getFormattedThresholds() {
const { maxValue, minValue, thresholds } = this.props;
const thresholdsSortedByIndex = [...thresholds].sort((t1, t2) => t1.index - t2.index);
const lastThreshold = thresholdsSortedByIndex[thresholdsSortedByIndex.length - 1];
const formattedThresholds = [
...thresholdsSortedByIndex.map(threshold => {
if (threshold.index === 0) {
return { value: minValue, color: threshold.color };
}
const previousThreshold = thresholdsSortedByIndex[threshold.index - 1];
return { value: threshold.value, color: previousThreshold.color };
}),
{ value: maxValue, color: lastThreshold.color },
];
return formattedThresholds;
}
draw() {
const {
maxValue,
@ -166,7 +192,6 @@ export class Gauge extends PureComponent<Props> {
timeSeries,
showThresholdLabels,
showThresholdMarkers,
thresholds,
width,
height,
stat,
@ -190,17 +215,6 @@ export class Gauge extends PureComponent<Props> {
const thresholdMarkersWidth = gaugeWidth / 5;
const thresholdLabelFontSize = fontSize / 2.5;
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: {
gauges: {
@ -217,7 +231,7 @@ export class Gauge extends PureComponent<Props> {
layout: { margin: 0, thresholdWidth: 0 },
cell: { border: { width: 0 } },
threshold: {
values: formattedThresholds,
values: this.getFormattedThresholds(),
label: {
show: showThresholdLabels,
margin: thresholdMarkersWidth + 1,