From 2660c44a6a0c94676334f2086563a801c08852d0 Mon Sep 17 00:00:00 2001
From: Minseo Lee <itoupluk427@gmail.com>
Date: Thu, 29 Aug 2024 21:31:50 +0900
Subject: [PATCH] Update WebsiteMetricsBar.tsx

---
 .../(main)/websites/[websiteId]/WebsiteMetricsBar.tsx  | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
index b19e23a90..de1ec39d2 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
@@ -37,6 +37,7 @@ export function WebsiteMetricsBar({
 
   const { pageviews, visitors, visits, bounces, totaltime } = data || {};
   const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
+  const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
   const optionsPercent: FormatNumberOptions = { style: 'percent' };
 
   const metrics = data
@@ -45,19 +46,22 @@ export function WebsiteMetricsBar({
           ...pageviews,
           label: formatMessage(labels.views),
           change: pageviews.value - pageviews.prev,
-          formatValue: (n: number) => intl.formatNumber(+n, optionsNumber),
+          formatValue: (n: number) =>
+            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber),
         },
         {
           ...visits,
           label: formatMessage(labels.visits),
           change: visits.value - visits.prev,
-          formatValue: (n: number) => intl.formatNumber(+n, optionsNumber),
+          formatValue: (n: number) =>
+            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber),
         },
         {
           ...visitors,
           label: formatMessage(labels.visitors),
           change: visitors.value - visitors.prev,
-          formatValue: (n: number) => intl.formatNumber(+n, optionsNumber),
+          formatValue: (n: number) =>
+            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber),
         },
         {
           label: formatMessage(labels.bounceRate),