From 15cfa5f5837d29b7e0299ae48729575c458f9889 Mon Sep 17 00:00:00 2001
From: Minseo Lee <itoupluk427@gmail.com>
Date: Thu, 29 Aug 2024 23:24:14 +0900
Subject: [PATCH] Update EventsMetricsBar.tsx

---
 .../websites/[websiteId]/events/EventsMetricsBar.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx
index d039b67f7..5180bf3b4 100644
--- a/src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx
@@ -3,12 +3,14 @@ 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 { formatLongNumberOptions } from 'lib/format';
+import { useIntl } from 'react-intl';
 import { Flexbox } from 'react-basics';
 
 export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
+  const intl = useIntl();
 
   return (
     <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
@@ -16,22 +18,22 @@ export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
         <MetricCard
           value={data?.visitors?.value}
           label={formatMessage(labels.visitors)}
-          formatValue={formatLongNumber}
+          formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
         />
         <MetricCard
           value={data?.visits?.value}
           label={formatMessage(labels.visits)}
-          formatValue={formatLongNumber}
+          formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
         />
         <MetricCard
           value={data?.pageviews?.value}
           label={formatMessage(labels.views)}
-          formatValue={formatLongNumber}
+          formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
         />
         <MetricCard
           value={data?.events?.value}
           label={formatMessage(labels.events)}
-          formatValue={formatLongNumber}
+          formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
         />
       </MetricsBar>
       <WebsiteDateFilter websiteId={websiteId} />