feat(formatNumber): render numbers with spaces instead of comas (#778)

Co-authored-by: mufazalov <[email protected]>

Author: kunga

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 digits in the app monospace
+    font-variant-numeric: tabular-nums;
 }
 
 .yc-select-popup__tick-icon {

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', () => {

src/utils/dataFormatters/dataFormatters.ts

@@ -95,6 +95,7 @@ export const formatNumber = (number?: unknown) => {
         return '';
     }
 
+    // "," in format is delimiter sign, not delimiter itself
     return configuredNumeral(number).format('0,0.[00000]');
 };
 

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 delimiter for all locales possible in project
+Object.values(Lang).forEach((value) => {
+    if (numeral.locales[value]) {
+        numeral.locales[value].delimiters.thousands = ' ';
+    }
+});
 
 numeral.locale(i18n.lang);