Update WebsiteMetricsBar.tsx

umami-software · Aug 29, 2024 · 4e07e70 · 4e07e70
1 parent cb0210a
commit 4e07e70
Showing 1 changed file with 33 additions and 7 deletions.
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
@@ -1,14 +1,15 @@
 import classNames from 'classnames';
-import { useDateRange, useMessages, useSticky } from 'components/hooks';
+import { useDateRange, useLocale, useMessages, useSticky } from 'components/hooks';
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
 import MetricCard from 'components/metrics/MetricCard';
 import MetricsBar from 'components/metrics/MetricsBar';
-import { formatShortTime, formatLongNumber } from 'lib/format';
+import { formatShortTime } from 'lib/format';
 import WebsiteFilterButton from './WebsiteFilterButton';
 import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
 import styles from './WebsiteMetricsBar.module.css';
 import { Dropdown, Item } from 'react-basics';
 import useStore, { setWebsiteDateCompare } from 'store/websites';
+import { type FormatNumberOptions, useIntl } from 'react-intl';
 
 export function WebsiteMetricsBar({
   websiteId,
@@ -32,28 +33,53 @@ export function WebsiteMetricsBar({
     compareMode && dateCompare,
   );
   const isAllTime = dateRange.value === 'all';
+  const { locale } = 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
     ? [
         {
           ...pageviews,
           label: formatMessage(labels.views),
           change: pageviews.value - pageviews.prev,
-          formatValue: formatLongNumber,
+          formatValue: (n: number) =>
+            intl.formatNumber(
+              +n,
+              +n < (minimum[locale] || 1000) ? optionsSmallNumber : optionsNumber,
+            ),
         },
         {
           ...visits,
           label: formatMessage(labels.visits),
           change: visits.value - visits.prev,
-          formatValue: formatLongNumber,
+          formatValue: (n: number) =>
+            intl.formatNumber(
+              +n,
+              +n < (minimum[locale] || 1000) ? optionsSmallNumber : optionsNumber,
+            ),
         },
         {
           ...visitors,
           label: formatMessage(labels.visitors),
           change: visitors.value - visitors.prev,
-          formatValue: formatLongNumber,
+          formatValue: (n: number) =>
+            intl.formatNumber(
+              +n,
+              +n < (minimum[locale] || 1000) ? optionsSmallNumber : optionsNumber,
+            ),
         },
         {
           label: formatMessage(labels.bounceRate),
@@ -62,15 +88,15 @@ export function WebsiteMetricsBar({
           change:
             (Math.min(visits.value, bounces.value) / visits.value) * 100 -
             (Math.min(visits.prev, bounces.prev) / visits.prev) * 100,
-          formatValue: n => Math.round(+n) + '%',
+          formatValue: (n: number) => intl.formatNumber(+n / 100, optionsPercent),
           reverseColors: true,
         },
         {
           label: formatMessage(labels.visitDuration),
           value: totaltime.value / visits.value,
           prev: totaltime.prev / visits.prev,
           change: totaltime.value / visits.value - totaltime.prev / visits.prev,
-          formatValue: n =>
+          formatValue: (n: number) =>
             `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`,
         },
       ]