From 8f08639058a99f07200a2a6f359dd22af35c1a71 Mon Sep 17 00:00:00 2001
From: Minseo Lee <itoupluk427@gmail.com>
Date: Thu, 29 Aug 2024 22:58:08 +0900
Subject: [PATCH] Update SessionStats.tsx

---
 .../sessions/[sessionId]/SessionStats.tsx     | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx
index ea606582f..2e1542421 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx
@@ -2,15 +2,38 @@ import { useMessages } from 'components/hooks';
 import MetricCard from 'components/metrics/MetricCard';
 import MetricsBar from 'components/metrics/MetricsBar';
 import { formatShortTime } from 'lib/format';
+import { type FormatNumberOptions, useIntl } from 'react-intl';
 
 export function SessionStats({ data }) {
   const { formatMessage, labels } = useMessages();
+  const intl = useIntl();
+
+  const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
+  const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
 
   return (
     <MetricsBar isFetched={true}>
-      <MetricCard label={formatMessage(labels.visits)} value={data?.visits} />
-      <MetricCard label={formatMessage(labels.views)} value={data?.views} />
-      <MetricCard label={formatMessage(labels.events)} value={data?.events} />
+      <MetricCard
+        label={formatMessage(labels.visits)}
+        value={data?.visits}
+        formatValue={(n: number) =>
+          intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
+        }
+      />
+      <MetricCard
+        label={formatMessage(labels.views)}
+        value={data?.views}
+        formatValue={(n: number) =>
+          intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
+        }
+      />
+      <MetricCard
+        label={formatMessage(labels.events)}
+        value={data?.events}
+        formatValue={(n: number) =>
+          intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
+        }
+      />
       <MetricCard
         label={formatMessage(labels.visitDuration)}
         value={data?.totaltime / data?.visits}