ValueFormats: Use plural for time units (#77337)

* Dashboard: Use plural values for time units

* Cleaned up code a bit and added support for negative values.

---------

Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>
This commit is contained in:
Utkarsh Deepak 2023-11-01 18:20:33 +05:30 committed by GitHub
parent 57835c71b1
commit 20c0fbf92d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 5 deletions

View File

@ -350,19 +350,25 @@ describe('to nanoseconds', () => {
it('should correctly display as minutes', () => {
const eightMinutes = toNanoSeconds(480000000000);
expect(eightMinutes.text).toBe('8');
expect(eightMinutes.suffix).toBe(' mins');
});
it('should correctly display as minute', () => {
const eightMinutes = toNanoSeconds(60000000000);
expect(eightMinutes.text).toBe('1');
expect(eightMinutes.suffix).toBe(' min');
});
it('should correctly display as hours', () => {
const nineHours = toNanoSeconds(32400000000000);
expect(nineHours.text).toBe('9');
expect(nineHours.suffix).toBe(' hour');
expect(nineHours.suffix).toBe(' hours');
});
it('should correctly display as days', () => {
const tenDays = toNanoSeconds(864000000000000);
expect(tenDays.text).toBe('10');
expect(tenDays.suffix).toBe(' day');
expect(tenDays.suffix).toBe(' days');
});
});

View File

@ -25,7 +25,8 @@ describe('valueFormats', () => {
${'ms'} | ${4} | ${0.0024} | ${'0.0024 ms'}
${'ms'} | ${0} | ${100} | ${'100 ms'}
${'ms'} | ${2} | ${1250} | ${'1.25 s'}
${'ms'} | ${1} | ${10000086.123} | ${'2.8 hour'}
${'ms'} | ${1} | ${10000086.123} | ${'2.8 hours'}
${'ms'} | ${1} | ${-10000086.123} | ${'-2.8 hours'}
${'ms'} | ${undefined} | ${1000} | ${'1 s'}
${'ms'} | ${0} | ${1200} | ${'1 s'}
${'short'} | ${undefined} | ${1000} | ${'1 K'}
@ -69,6 +70,7 @@ describe('valueFormats', () => {
${'dateTimeAsUS'} | ${0} | ${dateTime(new Date(2010, 6, 2)).valueOf()} | ${'07/02/2010 12:00:00 am'}
${'dateTimeAsSystem'} | ${0} | ${dateTime(new Date(2010, 6, 2)).valueOf()} | ${'2010-07-02 00:00:00'}
${'dtdurationms'} | ${undefined} | ${100000} | ${'1 minute'}
${'dtdurationms'} | ${undefined} | ${150000} | ${'2 minutes'}
`(
'With format=$format decimals=$decimals and value=$value then result shoudl be = $expected',
async ({ format, value, decimals, expected }) => {

View File

@ -102,10 +102,27 @@ function getDecimalsForValue(value: number): number {
export function toFixedScaled(value: number, decimals: DecimalCount, ext?: string): FormattedValue {
return {
text: toFixed(value, decimals),
suffix: ext,
suffix: appendPluralIf(ext, Math.abs(value) > 1),
};
}
function appendPluralIf(ext: string | undefined, condition: boolean): string | undefined {
if (!condition) {
return ext;
}
switch (ext) {
case ' min':
case ' hour':
case ' day':
case ' week':
case ' year':
return `${ext}s`;
default:
return ext;
}
}
export function toFixedUnit(unit: string, asPrefix?: boolean): ValueFormatter {
return (size: number, decimals?: DecimalCount) => {
if (size === null) {

View File

@ -27,7 +27,7 @@ const formatTests: ValueFormatTest[] = [
{ id: 'ms', decimals: 4, value: 0.0024, result: '0.0024 ms' },
{ id: 'ms', decimals: 0, value: 100, result: '100 ms' },
{ id: 'ms', decimals: 2, value: 1250, result: '1.25 s' },
{ id: 'ms', decimals: 1, value: 10000086.123, result: '2.8 hour' },
{ id: 'ms', decimals: 1, value: 10000086.123, result: '2.8 hours' },
{ id: 'ms', decimals: 0, value: 1200, result: '1 s' },
{ id: 'short', decimals: 0, value: 98765, result: '99 K' },
{ id: 'short', decimals: 0, value: 9876543, result: '10 Mil' },