mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
parent
57835c71b1
commit
20c0fbf92d
@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -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 }) => {
|
||||
|
@ -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) {
|
||||
|
@ -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' },
|
||||
|
Loading…
Reference in New Issue
Block a user