Update monthly graph labels

Update the monthly graph to display amounts in "K" format instead of full numbers and remove the currency symbol.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 02:49:00 +00:00
parent 75bf08a14e
commit cdcab05ba7

View File

@@ -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]} />