[CST-7217] Implement short number pipe

This commit is contained in:
Giuseppe Digilio
2023-02-02 15:54:04 +01:00
parent 078ce10922
commit 29b9bb048d
3 changed files with 147 additions and 9 deletions

View File

@@ -242,9 +242,10 @@ import {
} from './object-list/listable-notification-object/listable-notification-object.component'; } from './object-list/listable-notification-object/listable-notification-object.component';
import { ThemedCollectionDropdownComponent } from './collection-dropdown/themed-collection-dropdown.component'; import { ThemedCollectionDropdownComponent } from './collection-dropdown/themed-collection-dropdown.component';
import { MetadataFieldWrapperComponent } from './metadata-field-wrapper/metadata-field-wrapper.component'; import { MetadataFieldWrapperComponent } from './metadata-field-wrapper/metadata-field-wrapper.component';
import { LogInExternalProviderComponent } from './log-in/methods/log-in-external-provider/log-in-external-provider.component'; import {
LogInExternalProviderComponent
} from './log-in/methods/log-in-external-provider/log-in-external-provider.component';
import { ShortNumberPipe } from './utils/short-number.pipe';
const MODULES = [ const MODULES = [
CommonModule, CommonModule,
@@ -283,6 +284,7 @@ const PIPES = [
ObjNgFor, ObjNgFor,
BrowserOnlyPipe, BrowserOnlyPipe,
MarkdownPipe, MarkdownPipe,
ShortNumberPipe
]; ];
const COMPONENTS = [ const COMPONENTS = [

View File

@@ -0,0 +1,96 @@
import { TestBed } from '@angular/core/testing';
import { ShortNumberPipe } from './short-number.pipe';
describe('ShortNumber Pipe', () => {
let shortNumberPipe: ShortNumberPipe;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
ShortNumberPipe
],
}).compileComponents();
shortNumberPipe = TestBed.inject(ShortNumberPipe);
});
it('should not transform with an invalid number', async () => {
await testTransform(
'tre',
'tre'
);
});
it('should not transform with an empty string', async () => {
await testTransform(
'',
''
);
});
it('should not transform with zero', async () => {
await testTransform(
0,
'0'
);
});
it('should render 1K', async () => {
await testTransform(
'1000',
'1K'
);
});
it('should render 1K', async () => {
await testTransform(
1000,
'1K'
);
});
it('should render 19.3K', async () => {
await testTransform(
19300,
'19.3K'
);
});
it('should render 1M', async () => {
await testTransform(
1000000,
'1M'
);
});
it('should render 1B', async () => {
await testTransform(
1000000000,
'1B'
);
});
it('should render 1T', async () => {
await testTransform(
1000000000000,
'1T'
);
});
it('should render 1Q', async () => {
await testTransform(
1000000000000000,
'1Q'
);
});
async function testTransform(input: any, output: string) {
expect(
await shortNumberPipe.transform(input)
).toMatch(
output
);
}
});

View File

@@ -0,0 +1,40 @@
import { Pipe, PipeTransform } from '@angular/core';
import { isEmpty } from '../empty.util';
@Pipe({
name: 'dsShortNumber'
})
export class ShortNumberPipe implements PipeTransform {
transform(number: number, args?: any): any {
// will only work value is a valid number
if (isNaN(number) || isEmpty(number) || number === 0) {
return number;
}
let abs = Math.abs(number);
const rounder = Math.pow(10, 1);
const isNegative = number < 0; // will also work for Negetive numbers
let key = '';
const powers = [
{key: 'Q', value: Math.pow(10, 15)},
{key: 'T', value: Math.pow(10, 12)},
{key: 'B', value: Math.pow(10, 9)},
{key: 'M', value: Math.pow(10, 6)},
{key: 'K', value: 1000}
];
for (let i = 0; i < powers.length; i++) {
let reduced = abs / powers[i].value;
reduced = Math.round(reduced * rounder) / rounder;
if (reduced >= 1) {
abs = reduced;
key = powers[i].key;
break;
}
}
return (isNegative ? '-' : '') + abs + key;
}
}