From 876286ed28380ed8560ffe82c3d795efa6a00d18 Mon Sep 17 00:00:00 2001
From: Minseo Lee <itoupluk427@gmail.com>
Date: Thu, 29 Aug 2024 22:48:32 +0900
Subject: [PATCH] Update SessionsMetricsBar.tsx

---
 .../sessions/SessionsMetricsBar.tsx           | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
index 803e7a069..106c9fb18 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
@@ -3,12 +3,16 @@ import useWebsiteSessionStats from 'components/hooks/queries/useWebsiteSessionSt
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
 import MetricCard from 'components/metrics/MetricCard';
 import MetricsBar from 'components/metrics/MetricsBar';
-import { formatLongNumber } from 'lib/format';
 import { Flexbox } from 'react-basics';
+import { type FormatNumberOptions, useIntl } from 'react-intl';
 
 export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
+  const intl = useIntl();
+
+  const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
+  const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
 
   return (
     <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
@@ -16,22 +20,30 @@ export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
         <MetricCard
           value={data?.visitors?.value}
           label={formatMessage(labels.visitors)}
-          formatValue={formatLongNumber}
+          formatValue={(n: number) =>
+            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
+          }
         />
         <MetricCard
           value={data?.visits?.value}
           label={formatMessage(labels.visits)}
-          formatValue={formatLongNumber}
+          formatValue={(n: number) =>
+            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
+          }
         />
         <MetricCard
           value={data?.pageviews?.value}
           label={formatMessage(labels.views)}
-          formatValue={formatLongNumber}
+          formatValue={(n: number) =>
+            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
+          }
         />
         <MetricCard
           value={data?.countries?.value}
           label={formatMessage(labels.countries)}
-          formatValue={formatLongNumber}
+          formatValue={(n: number) =>
+            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
+          }
         />
       </MetricsBar>
       <WebsiteDateFilter websiteId={websiteId} />