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:
@@ -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]} />
|
||||
|
||||
Reference in New Issue
Block a user