From 7676a69190359d5d257911441d78fe2098914ac0 Mon Sep 17 00:00:00 2001
From: Minseo Lee <itoupluk427@gmail.com>
Date: Thu, 29 Aug 2024 22:59:56 +0900
Subject: [PATCH] Update RealtimeHeader.tsx

---
 .../[websiteId]/realtime/RealtimeHeader.tsx     | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx
index c27143aac..a73c5207f 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx
@@ -2,10 +2,15 @@ import MetricCard from 'components/metrics/MetricCard';
 import { useMessages } from 'components/hooks';
 import { RealtimeData } from 'lib/types';
 import styles from './RealtimeHeader.module.css';
+import { type FormatNumberOptions, useIntl } from 'react-intl';
 
 export function RealtimeHeader({ data }: { data: RealtimeData }) {
   const { formatMessage, labels } = useMessages();
   const { totals }: any = data || {};
+  const intl = useIntl();
+
+  const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
+  const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
 
   return (
     <div className={styles.header}>
@@ -14,21 +19,33 @@ export function RealtimeHeader({ data }: { data: RealtimeData }) {
           className={styles.card}
           label={formatMessage(labels.views)}
           value={totals.views}
+          formatValue={(n: number) =>
+            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
+          }
         />
         <MetricCard
           className={styles.card}
           label={formatMessage(labels.visitors)}
           value={totals.visitors}
+          formatValue={(n: number) =>
+            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
+          }
         />
         <MetricCard
           className={styles.card}
           label={formatMessage(labels.events)}
           value={totals.events}
+          formatValue={(n: number) =>
+            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
+          }
         />
         <MetricCard
           className={styles.card}
           label={formatMessage(labels.countries)}
           value={totals.countries}
+          formatValue={(n: number) =>
+            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
+          }
         />
       </div>
     </div>