Removed formatRelevantDigits from text_utils.js and added it to a new file number_utils.js
Also improved code formatting
This commit is contained in:
parent
d745876e23
commit
3069a2c959
5 changed files with 172 additions and 145 deletions
34
app/assets/javascripts/lib/utils/number_utils.js
Normal file
34
app/assets/javascripts/lib/utils/number_utils.js
Normal file
|
@ -0,0 +1,34 @@
|
|||
/* eslint-disable import/prefer-default-export */
|
||||
|
||||
/**
|
||||
* Function that allows a number with an X amount of decimals
|
||||
* to be formatted in the following fashion:
|
||||
* * For 1 digit to the left of the decimal point and X digits to the right of it
|
||||
* * * Show 3 digits to the right
|
||||
* * For 2 digits to the left of the decimal point and X digits to the right of it
|
||||
* * * Show 2 digits to the right
|
||||
*/
|
||||
export function formatRelevantDigits(number) {
|
||||
let digitsLeft = '';
|
||||
let relevantDigits = 0;
|
||||
let formattedNumber = '';
|
||||
if (!isNaN(Number(number))) {
|
||||
digitsLeft = number.split('.')[0];
|
||||
switch (digitsLeft.length) {
|
||||
case 1:
|
||||
relevantDigits = 3;
|
||||
break;
|
||||
case 2:
|
||||
relevantDigits = 2;
|
||||
break;
|
||||
case 3:
|
||||
relevantDigits = 1;
|
||||
break;
|
||||
default:
|
||||
relevantDigits = 4;
|
||||
break;
|
||||
}
|
||||
formattedNumber = Number(number).toFixed(relevantDigits);
|
||||
}
|
||||
return formattedNumber;
|
||||
}
|
|
@ -188,29 +188,5 @@ require('vendor/latinise');
|
|||
gl.text.slugify = function(str) {
|
||||
return str.trim().toLowerCase().latinise();
|
||||
};
|
||||
gl.text.formatRelevantDigits = function(number) {
|
||||
var digitsLeft = '';
|
||||
var relevantDigits = 0;
|
||||
if (isNaN(Number(number))) {
|
||||
return 0;
|
||||
} else {
|
||||
digitsLeft = number.split('.')[0];
|
||||
switch (digitsLeft.length) {
|
||||
case 1:
|
||||
relevantDigits = 3;
|
||||
break;
|
||||
case 2:
|
||||
relevantDigits = 2;
|
||||
break;
|
||||
case 3:
|
||||
relevantDigits = 1;
|
||||
break;
|
||||
default:
|
||||
relevantDigits = 4;
|
||||
break;
|
||||
}
|
||||
return Number(number).toFixed(relevantDigits);
|
||||
}
|
||||
};
|
||||
})(window);
|
||||
}).call(window);
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
import d3 from 'd3';
|
||||
import statusCodes from '~/lib/utils/http_status';
|
||||
import '../lib/utils/common_utils';
|
||||
import { formatRelevantDigits } from '~/lib/utils/number_utils';
|
||||
import '../flash';
|
||||
|
||||
const prometheusGraphsContainer = '.prometheus-graph';
|
||||
|
@ -157,6 +157,7 @@ class PrometheusGraph {
|
|||
x2: 10,
|
||||
y2: this.originalHeight - this.margin.top,
|
||||
});
|
||||
|
||||
axisLabelContainer.append('rect')
|
||||
.attr('class', 'rect-axis-text')
|
||||
.attr('x', 0)
|
||||
|
@ -270,12 +271,13 @@ class PrometheusGraph {
|
|||
.attr('y', maxMetricValue + 15)
|
||||
.text(dayFormat(currentData.time));
|
||||
|
||||
let currentMetricValue = gl.text.formatRelevantDigits(currentData.value);
|
||||
let currentMetricValue = formatRelevantDigits(currentData.value);
|
||||
if (key === 'cpu_values') {
|
||||
currentMetricValue = `${currentMetricValue}%`;
|
||||
} else {
|
||||
currentMetricValue = `${currentMetricValue} MB`;
|
||||
}
|
||||
|
||||
d3.select(`${currentPrometheusGraphContainer} .text-metric-usage`)
|
||||
.text(currentMetricValue);
|
||||
});
|
||||
|
|
41
spec/javascripts/lib/utils/number_utility_spec.js
Normal file
41
spec/javascripts/lib/utils/number_utility_spec.js
Normal file
|
@ -0,0 +1,41 @@
|
|||
import { formatRelevantDigits } from '~/lib/utils/number_utils';
|
||||
|
||||
describe('Number Utils', () => {
|
||||
describe('formatRelevantDigits', () => {
|
||||
it('returns an empty string when the number is NaN', () => {
|
||||
expect(formatRelevantDigits('fail')).toBe('');
|
||||
});
|
||||
|
||||
it('returns 4 decimals when there is 4 plus digits to the left', () => {
|
||||
const formattedNumber = formatRelevantDigits('1000.1234567');
|
||||
const rightFromDecimal = formattedNumber.split('.')[1];
|
||||
const leftFromDecimal = formattedNumber.split('.')[0];
|
||||
expect(rightFromDecimal.length).toBe(4);
|
||||
expect(leftFromDecimal.length).toBe(4);
|
||||
});
|
||||
|
||||
it('returns 3 decimals when there is 1 digit to the left', () => {
|
||||
const formattedNumber = formatRelevantDigits('0.1234567');
|
||||
const rightFromDecimal = formattedNumber.split('.')[1];
|
||||
const leftFromDecimal = formattedNumber.split('.')[0];
|
||||
expect(rightFromDecimal.length).toBe(3);
|
||||
expect(leftFromDecimal.length).toBe(1);
|
||||
});
|
||||
|
||||
it('returns 2 decimals when there is 2 digits to the left', () => {
|
||||
const formattedNumber = formatRelevantDigits('10.1234567');
|
||||
const rightFromDecimal = formattedNumber.split('.')[1];
|
||||
const leftFromDecimal = formattedNumber.split('.')[0];
|
||||
expect(rightFromDecimal.length).toBe(2);
|
||||
expect(leftFromDecimal.length).toBe(2);
|
||||
});
|
||||
|
||||
it('returns 1 decimal when there is 3 digits to the left', () => {
|
||||
const formattedNumber = formatRelevantDigits('100.1234567');
|
||||
const rightFromDecimal = formattedNumber.split('.')[1];
|
||||
const leftFromDecimal = formattedNumber.split('.')[0];
|
||||
expect(rightFromDecimal.length).toBe(1);
|
||||
expect(leftFromDecimal.length).toBe(3);
|
||||
});
|
||||
});
|
||||
});
|
|
@ -105,32 +105,6 @@ require('~/lib/utils/text_utility');
|
|||
expect(textArea.value).toEqual(`${initialValue}* `);
|
||||
});
|
||||
});
|
||||
|
||||
describe('gl.text.formatRelevantDigits', () => {
|
||||
it('returns 0 when the number is NaN', () => {
|
||||
expect(gl.text.formatRelevantDigits('fail')).toBe(0);
|
||||
});
|
||||
|
||||
it('returns 4 decimals when there is 4 plus digits to the left', () => {
|
||||
const formattedNumber = gl.text.formatRelevantDigits('1000.1234567').split('.')[1];
|
||||
expect(formattedNumber.length).toBe(4);
|
||||
});
|
||||
|
||||
it('returns 3 decimals when there is 1 digit to the left', () => {
|
||||
const formattedNumber = gl.text.formatRelevantDigits('0.1234567').split('.')[1];
|
||||
expect(formattedNumber.length).toBe(3);
|
||||
});
|
||||
|
||||
it('returns 2 decimals when there is 2 digits to the left', () => {
|
||||
const formattedNumber = gl.text.formatRelevantDigits('10.1234567').split('.')[1];
|
||||
expect(formattedNumber.length).toBe(2);
|
||||
});
|
||||
|
||||
it('returns 1 decimal when there is 3 digits to the left', () => {
|
||||
const formattedNumber = gl.text.formatRelevantDigits('100.1234567').split('.')[1];
|
||||
expect(formattedNumber.length).toBe(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
Loading…
Reference in a new issue