From 85d7119709a1b3d92c88b3797c452b5a9bc7ebee Mon Sep 17 00:00:00 2001 From: kungasc Date: Thu, 28 Mar 2024 21:14:41 +0300 Subject: [PATCH 1/3] feat(formatNumber): render numbers with spaces instead of comas --- .../TopShards/getTopShardsColumns.tsx | 1 + src/utils/dataFormatters/dataFormatters.ts | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx b/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx index 277f7eb63d..ec13e899df 100644 --- a/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx +++ b/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx @@ -70,6 +70,7 @@ const dataSizeColumn: Column = { return formatNumber(row.DataSize); }, align: DataTable.RIGHT, + customStyle: () => ({fontFamily: 'var(--g-font-family-monospace)'}), }; const tabletIdColumn: Column = { diff --git a/src/utils/dataFormatters/dataFormatters.ts b/src/utils/dataFormatters/dataFormatters.ts index 3788f72972..78f19cdfd8 100644 --- a/src/utils/dataFormatters/dataFormatters.ts +++ b/src/utils/dataFormatters/dataFormatters.ts @@ -95,7 +95,22 @@ export const formatNumber = (number?: unknown) => { return ''; } - return configuredNumeral(number).format('0,0.[00000]'); + const formatted = configuredNumeral(number).format('0.[00000]'); + // eslint-disable-next-line prefer-const + let [whole, frac = ''] = formatted.split('.'); + + if (whole.length > 3) { + const chars = []; + for (let i = 0; i < whole.length; i++) { + chars.push(whole[whole.length - i - 1]); + if (i % 3 === 2) { + chars.push(' '); + } + } + whole = chars.reverse().join(''); + } + + return frac ? [whole, frac].join('.') : whole; }; export const roundToPrecision = (value: number | string, precision = 0) => { From 82d702a2edbbd94096a4a8444002cbffdb0ad56e Mon Sep 17 00:00:00 2001 From: mufazalov Date: Fri, 29 Mar 2024 15:17:34 +0300 Subject: [PATCH 2/3] fix: update --- src/containers/App/App.scss | 3 +++ .../TopShards/getTopShardsColumns.tsx | 1 - .../bytesParsers/__test__/formatBytes.test.ts | 14 +++++++------- src/utils/dataFormatters/dataFormatters.ts | 18 ++---------------- src/utils/numeral.ts | 9 ++++++++- 5 files changed, 20 insertions(+), 25 deletions(-) diff --git a/src/containers/App/App.scss b/src/containers/App/App.scss index 4ea50cf5c7..849b26070f 100644 --- a/src/containers/App/App.scss +++ b/src/containers/App/App.scss @@ -4,6 +4,9 @@ * { // FIXME: this is an overkill, potentially could break external components, needs refactoring box-sizing: border-box; + + // Make all numbers in the app monospace + font-variant-numeric: tabular-nums; } .yc-select-popup__tick-icon { diff --git a/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx b/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx index ec13e899df..277f7eb63d 100644 --- a/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx +++ b/src/containers/Tenant/Diagnostics/TopShards/getTopShardsColumns.tsx @@ -70,7 +70,6 @@ const dataSizeColumn: Column = { return formatNumber(row.DataSize); }, align: DataTable.RIGHT, - customStyle: () => ({fontFamily: 'var(--g-font-family-monospace)'}), }; const tabletIdColumn: Column = { diff --git a/src/utils/bytesParsers/__test__/formatBytes.test.ts b/src/utils/bytesParsers/__test__/formatBytes.test.ts index 09fb5bb24f..e5cf024fb9 100644 --- a/src/utils/bytesParsers/__test__/formatBytes.test.ts +++ b/src/utils/bytesParsers/__test__/formatBytes.test.ts @@ -9,23 +9,23 @@ describe('formatBytes', () => { expect(formatBytes({value: 100_000_000_000_000})).toBe('100 TB'); }); it('should convert to size', () => { - expect(formatBytes({value: 100_000, size: 'b'})).toBe('100,000 B'); - expect(formatBytes({value: 100_000_000_000_000, size: 'gb'})).toBe('100,000 GB'); + expect(formatBytes({value: 100_000, size: 'b'})).toBe('100 000 B'); + expect(formatBytes({value: 100_000_000_000_000, size: 'gb'})).toBe('100 000 GB'); }); it('should convert without labels', () => { - expect(formatBytes({value: 100_000, size: 'b', withSizeLabel: false})).toBe('100,000'); + expect(formatBytes({value: 100_000, size: 'b', withSizeLabel: false})).toBe('100 000'); expect(formatBytes({value: 100_000_000_000_000, size: 'gb', withSizeLabel: false})).toBe( - '100,000', + '100 000', ); }); it('should convert to speed', () => { expect(formatBytes({value: 100_000, withSpeedLabel: true})).toBe('100 KB/s'); - expect(formatBytes({value: 100_000, size: 'b', withSpeedLabel: true})).toBe('100,000 B/s'); + expect(formatBytes({value: 100_000, size: 'b', withSpeedLabel: true})).toBe('100 000 B/s'); }); it('should return fixed amount of significant digits', () => { - expect(formatBytes({value: 99_000, significantDigits: 2})).toEqual('99,000 B'); + expect(formatBytes({value: 99_000, significantDigits: 2})).toEqual('99 000 B'); expect(formatBytes({value: 100_000, significantDigits: 2})).toEqual('100 KB'); - expect(formatBytes({value: 99_000_000_000_000, significantDigits: 2})).toEqual('99,000 GB'); + expect(formatBytes({value: 99_000_000_000_000, significantDigits: 2})).toEqual('99 000 GB'); expect(formatBytes({value: 100_000_000_000_000, significantDigits: 2})).toEqual('100 TB'); }); it('should return empty string on invalid data', () => { diff --git a/src/utils/dataFormatters/dataFormatters.ts b/src/utils/dataFormatters/dataFormatters.ts index 78f19cdfd8..b24589e595 100644 --- a/src/utils/dataFormatters/dataFormatters.ts +++ b/src/utils/dataFormatters/dataFormatters.ts @@ -95,22 +95,8 @@ export const formatNumber = (number?: unknown) => { return ''; } - const formatted = configuredNumeral(number).format('0.[00000]'); - // eslint-disable-next-line prefer-const - let [whole, frac = ''] = formatted.split('.'); - - if (whole.length > 3) { - const chars = []; - for (let i = 0; i < whole.length; i++) { - chars.push(whole[whole.length - i - 1]); - if (i % 3 === 2) { - chars.push(' '); - } - } - whole = chars.reverse().join(''); - } - - return frac ? [whole, frac].join('.') : whole; + // "," in format is delimeter sign, not delimeter itself + return configuredNumeral(number).format('0,0.[00000]'); }; export const roundToPrecision = (value: number | string, precision = 0) => { diff --git a/src/utils/numeral.ts b/src/utils/numeral.ts index e3a8b26472..ef4bab3406 100644 --- a/src/utils/numeral.ts +++ b/src/utils/numeral.ts @@ -1,7 +1,14 @@ import numeral from 'numeral'; import 'numeral/locales'; // Without this numeral will throw an error when using not 'en' locale -import {i18n} from './i18n'; +import {Lang, i18n} from './i18n'; + +// Set space delimeter for all locales possible in project +Object.values(Lang).forEach((value) => { + if (numeral.locales[value]) { + numeral.locales[value].delimiters.thousands = ' '; + } +}); numeral.locale(i18n.lang); From 23e0ef8c40d107eab7567ca6a2b6c590ff4423e8 Mon Sep 17 00:00:00 2001 From: mufazalov Date: Fri, 29 Mar 2024 15:43:00 +0300 Subject: [PATCH 3/3] fix: fix typos --- src/containers/App/App.scss | 2 +- src/utils/dataFormatters/dataFormatters.ts | 2 +- src/utils/numeral.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/containers/App/App.scss b/src/containers/App/App.scss index 849b26070f..58f586da42 100644 --- a/src/containers/App/App.scss +++ b/src/containers/App/App.scss @@ -5,7 +5,7 @@ // FIXME: this is an overkill, potentially could break external components, needs refactoring box-sizing: border-box; - // Make all numbers in the app monospace + // Make all digits in the app monospace font-variant-numeric: tabular-nums; } diff --git a/src/utils/dataFormatters/dataFormatters.ts b/src/utils/dataFormatters/dataFormatters.ts index b24589e595..542b991691 100644 --- a/src/utils/dataFormatters/dataFormatters.ts +++ b/src/utils/dataFormatters/dataFormatters.ts @@ -95,7 +95,7 @@ export const formatNumber = (number?: unknown) => { return ''; } - // "," in format is delimeter sign, not delimeter itself + // "," in format is delimiter sign, not delimiter itself return configuredNumeral(number).format('0,0.[00000]'); }; diff --git a/src/utils/numeral.ts b/src/utils/numeral.ts index ef4bab3406..2c2b74669c 100644 --- a/src/utils/numeral.ts +++ b/src/utils/numeral.ts @@ -3,7 +3,7 @@ import 'numeral/locales'; // Without this numeral will throw an error when using import {Lang, i18n} from './i18n'; -// Set space delimeter for all locales possible in project +// Set space delimiter for all locales possible in project Object.values(Lang).forEach((value) => { if (numeral.locales[value]) { numeral.locales[value].delimiters.thousands = ' ';