Add metric prefixes for stats and charts.

lib/formatNumberToMetricPrefix.ts

+export default function formatNumberToMetricPrefix(number: number) {
+  return Intl.NumberFormat('en-US', {
+    notation: 'compact',
+    maximumFractionDigits: 3,
+  }).format(number);
+}

ui/shared/chart/useTimeChartController.tsx

@@ -3,6 +3,8 @@ import { useMemo } from 'react';
 
 import type { TimeChartData } from 'ui/shared/chart/types';
 
+import formatNumberToMetricPrefix from 'lib/formatNumberToMetricPrefix';
+
 interface Props {
   data: TimeChartData;
   width: number;
@@ -50,7 +52,7 @@ export default function useTimeChartController({ data, width, height }: Props) {
   );
 
   const xTickFormat = (d: d3.AxisDomain) => d.toLocaleString();
-  const yTickFormat = (d: d3.AxisDomain) => d.toLocaleString();
+  const yTickFormat = (d: d3.AxisDomain) => formatNumberToMetricPrefix(Number(d));
 
   return {
     xTickFormat,

ui/stats/NumberWidgetsList.tsx

@@ -2,6 +2,7 @@ import { Grid } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import formatNumberToMetricPrefix from 'lib/formatNumberToMetricPrefix';
 
 import { numberWidgetsScheme } from './constants/number-widgets-scheme';
 import NumberWidget from './NumberWidget';
@@ -12,15 +13,23 @@ const skeletonsCount = 8;
 const NumberWidgetsList = () => {
   const { data, isLoading } = useApiQuery('stats_counters');
 
+  const skeletonElement = [ ...Array(skeletonsCount) ]
+    .map((e, i) => <NumberWidgetSkeleton key={ i }/>);
+
   return (
     <Grid
       gridTemplateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}
       gridGap={ 4 }
     >
-      { isLoading ? [ ...Array(skeletonsCount) ]
-        .map((e, i) => <NumberWidgetSkeleton key={ i }/>) :
+      { isLoading ? skeletonElement :
         numberWidgetsScheme.map(({ id, title }) =>
-          data?.counters[id] ? <NumberWidget key={ id } label={ title } value={ Number(data.counters[id]).toLocaleString() }/> : null) }
+          data?.counters[id] ? (
+            <NumberWidget
+              key={ id }
+              label={ title }
+              value={ formatNumberToMetricPrefix(Number(data.counters[id])) }
+            />
+          ) : null) }
     </Grid>
   );
 };

ui/stats/constants/number-widgets-scheme.ts

@@ -35,8 +35,4 @@ export const numberWidgetsScheme: Array<{id: Key; title: string}> = [
     id: 'totalNativeCoinTransfers',
     title: 'Total native coin transfers',
   },
-  {
-    id: 'totalAccounts',
-    title: 'Total accounts',
-  },
 ];