From bb4862a6f730cc6ef294649eaecb9df18d53a4ce Mon Sep 17 00:00:00 2001
From: Minseo Lee <itoupluk427@gmail.com>
Date: Fri, 30 Aug 2024 00:13:45 +0900
Subject: [PATCH] Update ListTable.tsx

---
 src/components/metrics/ListTable.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/metrics/ListTable.tsx b/src/components/metrics/ListTable.tsx
index 59ded4917..098b21f94 100644
--- a/src/components/metrics/ListTable.tsx
+++ b/src/components/metrics/ListTable.tsx
@@ -2,7 +2,8 @@ import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from '@react-spring/web';
 import classNames from 'classnames';
 import Empty from 'components/common/Empty';
-import { formatLongNumber } from 'lib/format';
+import { formatLongNumberOptions } from 'lib/format';
+import { useIntl } from 'react-intl';
 import { useMessages } from 'components/hooks';
 import styles from './ListTable.module.css';
 import { ReactNode } from 'react';
@@ -82,6 +83,7 @@ export function ListTable({
 }
 
 const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentage = true }) => {
+  const intl = useIntl();
   const props = useSpring({
     width: percent,
     y: value,
@@ -95,13 +97,15 @@ const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentag
       <div className={styles.value}>
         {change}
         <animated.div className={styles.value} title={props?.y as any}>
-          {props.y?.to(formatLongNumber)}
+          {props.y?.to((n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n)))}
         </animated.div>
       </div>
       {showPercentage && (
         <div className={styles.percent}>
           <animated.div className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
-          <animated.span>{props.width.to(n => `${n?.toFixed?.(0)}%`)}</animated.span>
+          <animated.span>
+            {props.width.to(n => intl.formatNumber(+n / 100, { style: 'percent' }))}
+          </animated.span>
         </div>
       )}
     </div>