From dfb45a07951f89149a8e4b46048e11da08fa6bd6 Mon Sep 17 00:00:00 2001
From: Minseo Lee <itoupluk427@gmail.com>
Date: Thu, 29 Aug 2024 22:01:01 +0900
Subject: [PATCH] percent

---
 src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx | 3 +--
 src/components/metrics/MetricCard.tsx                     | 6 +++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
index de1ec39d2..42c77146e 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
@@ -38,7 +38,6 @@ 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
     ? [
@@ -70,7 +69,7 @@ export function WebsiteMetricsBar({
           change:
             (Math.min(visits.value, bounces.value) / visits.value) * 100 -
             (Math.min(visits.prev, bounces.prev) / visits.prev) * 100,
-          formatValue: (n: number) => intl.formatNumber(+n / 100, optionsPercent),
+          formatValue: (n: number) => intl.formatNumber(+n / 100, { style: 'percent' }),
           reverseColors: true,
         },
         {
diff --git a/src/components/metrics/MetricCard.tsx b/src/components/metrics/MetricCard.tsx
index 64f2a1b6b..c82aad1ef 100644
--- a/src/components/metrics/MetricCard.tsx
+++ b/src/components/metrics/MetricCard.tsx
@@ -3,6 +3,7 @@ import { useSpring, animated } from '@react-spring/web';
 import { formatNumber } from 'lib/format';
 import ChangeLabel from 'components/metrics/ChangeLabel';
 import styles from './MetricCard.module.css';
+import { useIntl } from 'react-intl';
 
 export interface MetricCardProps {
   value: number;
@@ -33,6 +34,7 @@ export const MetricCard = ({
   const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
   const changeProps = useSpring({ x: Number(pct) || 0, from: { x: 0 } });
   const prevProps = useSpring({ x: Number(diff) || 0, from: { x: 0 } });
+  const intl = useIntl();
 
   return (
     <div className={classNames(styles.card, className, showPrevious && styles.compare)}>
@@ -47,7 +49,9 @@ export const MetricCard = ({
           title={formatValue(change)}
           reverseColors={reverseColors}
         >
-          <animated.span>{changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}</animated.span>
+          <animated.span>
+            {changeProps?.x?.to(x => intl.formatNumber(Math.abs(~~x) / 100, { style: 'percent' }))}
+          </animated.span>
         </ChangeLabel>
       )}
       {showPrevious && (