diff --git a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx index 075f298e4..79ed2c532 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx +++ b/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( - +n, - +n < (minimum[locale] || 1000) ? optionsSmallNumber : optionsNumber, - ), + intl.formatNumber(+n, +n < maxInt ? optionsSmallNumber : optionsNumber), }, { ...visits, label: formatMessage(labels.visits), change: visits.value - visits.prev, formatValue: (n: number) => - intl.formatNumber( - +n, - +n < (minimum[locale] || 1000) ? optionsSmallNumber : optionsNumber, - ), + intl.formatNumber(+n, +n < maxInt ? optionsSmallNumber : optionsNumber), }, { ...visitors, label: formatMessage(labels.visitors), change: visitors.value - visitors.prev, formatValue: (n: number) => - intl.formatNumber( - +n, - +n < (minimum[locale] || 1000) ? optionsSmallNumber : optionsNumber, - ), + intl.formatNumber(+n, +n < maxInt ? optionsSmallNumber : optionsNumber), }, { label: formatMessage(labels.bounceRate), diff --git a/src/components/hooks/useLocale.ts b/src/components/hooks/useLocale.ts index dca2b5737..8bd3ba8f5 100644 --- a/src/components/hooks/useLocale.ts +++ b/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; diff --git a/src/lib/lang.ts b/src/lib/lang.ts index 48176d0a9..4d741cea4 100644 --- a/src/lib/lang.ts +++ b/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-DE': { label: 'Deutsch', dateLocale: de }, + 'de-CH': { label: 'Schwiizerdütsch', dateLocale: de, maxInt: 1000000 }, + '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 }, - 'ja-JP': { label: '日本語', dateLocale: ja }, + 'it-IT': { label: 'Italiano', dateLocale: it, maxInt: 1000000 }, + '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-TW': { label: '中文(繁體)', dateLocale: zhTW }, + 'zh-CN': { label: '中文', dateLocale: zhCN, maxInt: 10000 }, + '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; +}