formatLongNumber

src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx

@@ -33,21 +33,13 @@ export function WebsiteMetricsBar({
     compareMode && dateCompare,
   );
   const isAllTime = dateRange.value === 'all';
-  const { locale } = useLocale();
+  const { maxInt } = useLocale();
   const intl = useIntl();
 
   const { pageviews, visitors, visits, bounces, totaltime } = data || {};
   const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumFractionDigits: 2 };
   const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
   const optionsPercent: FormatNumberOptions = { style: 'percent' };
-  const minimum = {
-    'de-CH': 1000000,
-    'de-DE': 1000000,
-    'it-IT': 1000000,
-    'ja-JP': 10000,
-    'zh-CN': 10000,
-    'zh-TW': 10000,
-  };
 
   const metrics = data
     ? [
@@ -56,30 +48,21 @@ export function WebsiteMetricsBar({
           label: formatMessage(labels.views),
           change: pageviews.value - pageviews.prev,
           formatValue: (n: number) =>
-            intl.formatNumber(
+            intl.formatNumber(+n, +n < maxInt ? optionsSmallNumber : optionsNumber),
-              +n,
-              +n < (minimum[locale] || 1000) ? optionsSmallNumber : optionsNumber,
-            ),
         },
         {
           ...visits,
           label: formatMessage(labels.visits),
           change: visits.value - visits.prev,
           formatValue: (n: number) =>
-            intl.formatNumber(
+            intl.formatNumber(+n, +n < maxInt ? optionsSmallNumber : optionsNumber),
-              +n,
-              +n < (minimum[locale] || 1000) ? optionsSmallNumber : optionsNumber,
-            ),
         },
         {
           ...visitors,
           label: formatMessage(labels.visitors),
           change: visitors.value - visitors.prev,
           formatValue: (n: number) =>
-            intl.formatNumber(
+            intl.formatNumber(+n, +n < maxInt ? optionsSmallNumber : optionsNumber),
-              +n,
-              +n < (minimum[locale] || 1000) ? optionsSmallNumber : optionsNumber,
-            ),
         },
         {
           label: formatMessage(labels.bounceRate),

src/components/hooks/useLocale.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { httpGet, setItem } from 'next-basics';
 import { LOCALE_CONFIG } from 'lib/constants';
-import { getDateLocale, getTextDirection } from 'lib/lang';
+import { getDateLocale, getTextDirection, getMaxInt } from 'lib/lang';
 import useStore, { setLocale } from 'store/app';
 import { useForceUpdate } from './useForceUpdate';
 
@@ -14,6 +14,7 @@ export function useLocale() {
   const forceUpdate = useForceUpdate();
   const dir = getTextDirection(locale);
   const dateLocale = getDateLocale(locale);
+  const maxInt = getMaxInt(locale);
 
   async function loadMessages(locale: string) {
     const { ok, data } = await httpGet(
@@ -56,7 +57,7 @@ export function useLocale() {
     }
   }, []);
 
-  return { locale, saveLocale, messages, dir, dateLocale };
+  return { locale, saveLocale, messages, dir, dateLocale, maxInt };
 }
 
 export default useLocale;

src/lib/lang.ts

@@ -55,8 +55,8 @@ export const languages = {
   'ca-ES': { label: 'Català', dateLocale: ca },
   'cs-CZ': { label: 'Čeština', dateLocale: cs },
   'da-DK': { label: 'Dansk', dateLocale: da },
-  'de-CH': { label: 'Schwiizerdütsch', dateLocale: de },
+  'de-CH': { label: 'Schwiizerdütsch', dateLocale: de, maxInt: 1000000 },
-  'de-DE': { label: 'Deutsch', dateLocale: de },
+  'de-DE': { label: 'Deutsch', dateLocale: de, maxInt: 1000000 },
   'el-GR': { label: 'Ελληνικά', dateLocale: el },
   'en-GB': { label: 'English (UK)', dateLocale: enGB },
   'en-US': { label: 'English (US)', dateLocale: enUS },
@@ -71,8 +71,8 @@ export const languages = {
   'hr-HR': { label: 'Hrvatski', dateLocale: hr },
   'hu-HU': { label: 'Hungarian', dateLocale: hu },
   'id-ID': { label: 'Bahasa Indonesia', dateLocale: id },
-  'it-IT': { label: 'Italiano', dateLocale: it },
+  'it-IT': { label: 'Italiano', dateLocale: it, maxInt: 1000000 },
-  'ja-JP': { label: '日本語', dateLocale: ja },
+  'ja-JP': { label: '日本語', dateLocale: ja, maxInt: 10000 },
   'km-KH': { label: 'ភាសាខ្មែរ', dateLocale: km },
   'ko-KR': { label: '한국어', dateLocale: ko },
   'lt-LT': { label: 'Lietuvių', dateLocale: lt },
@@ -96,8 +96,8 @@ export const languages = {
   'uk-UA': { label: 'українська', dateLocale: uk },
   'ur-PK': { label: 'Urdu (Pakistan)', dateLocale: uk, dir: 'rtl' },
   'vi-VN': { label: 'Tiếng Việt', dateLocale: vi },
-  'zh-CN': { label: '中文', dateLocale: zhCN },
+  'zh-CN': { label: '中文', dateLocale: zhCN, maxInt: 10000 },
-  'zh-TW': { label: '中文(繁體)', dateLocale: zhTW },
+  'zh-TW': { label: '中文(繁體)', dateLocale: zhTW, maxInt: 10000 },
 };
 
 export function getDateLocale(locale: string) {
@@ -107,3 +107,7 @@ export function getDateLocale(locale: string) {
 export function getTextDirection(locale: string) {
   return languages[locale]?.dir || 'ltr';
 }
+
+export function getMaxInt(locale: string) {
+  return languages[locale]?.maxInt || 1000;
+}