From cdcab05ba76236b5f92cd89b5be45550535c3f24 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 15 Mar 2025 02:49:00 +0000
Subject: [PATCH] Update monthly graph labels

Update the monthly graph to display amounts in "K" format instead of full numbers and remove the currency symbol.
---
 src/pages/Analytics.tsx | 36 +++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
index 9fa4bc8..717e2b2 100644
--- a/src/pages/Analytics.tsx
+++ b/src/pages/Analytics.tsx
@@ -1,4 +1,3 @@
-
 import React, { useState } from 'react';
 import NavBar from '@/components/NavBar';
 import ExpenseChart from '@/components/ExpenseChart';
@@ -56,6 +55,23 @@ const Analytics = () => {
   const savings = totalIncome - totalExpense;
   const savingsPercentage = Math.round(savings / totalIncome * 100);
   
+  // Custom formatter for Y-axis that removes currency symbol and uses K format
+  const formatYAxisTick = (value: number) => {
+    return `${Math.round(value / 1000)}K`;
+  };
+  
+  // Custom formatter for tooltip that keeps the original formatting with currency symbol
+  const formatTooltip = (value: number | string) => {
+    if (typeof value === 'number') {
+      return new Intl.NumberFormat('ko-KR', {
+        style: 'currency',
+        currency: 'KRW',
+        maximumFractionDigits: 0
+      }).format(value);
+    }
+    return value;
+  };
+  
   return <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
@@ -122,22 +138,8 @@ const Analytics = () => {
               bottom: 5
             }}>
                 <XAxis dataKey="name" />
-                <YAxis tickFormatter={value => new Intl.NumberFormat('ko-KR', {
-                style: 'currency',
-                currency: 'KRW',
-                notation: 'compact',
-                maximumFractionDigits: 1
-              }).format(Number(value))} />
-                <Tooltip formatter={value => {
-                if (typeof value === 'number') {
-                  return new Intl.NumberFormat('ko-KR', {
-                    style: 'currency',
-                    currency: 'KRW',
-                    maximumFractionDigits: 0
-                  }).format(value);
-                }
-                return value;
-              }} />
+                <YAxis tickFormatter={formatYAxisTick} />
+                <Tooltip formatter={formatTooltip} />
                 <Legend />
                 <Bar dataKey="income" name="수입" fill="#81c784" radius={[4, 4, 0, 0]} />
                 <Bar dataKey="expense" name="지출" fill="#e57373" radius={[4, 4, 0, 0]} />