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 React, { useState } from 'react';
|
||||||
import NavBar from '@/components/NavBar';
|
import NavBar from '@/components/NavBar';
|
||||||
import ExpenseChart from '@/components/ExpenseChart';
|
import ExpenseChart from '@/components/ExpenseChart';
|
||||||
@@ -56,6 +55,23 @@ const Analytics = () => {
|
|||||||
const savings = totalIncome - totalExpense;
|
const savings = totalIncome - totalExpense;
|
||||||
const savingsPercentage = Math.round(savings / totalIncome * 100);
|
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">
|
return <div className="min-h-screen bg-neuro-background pb-24">
|
||||||
<div className="max-w-md mx-auto px-6">
|
<div className="max-w-md mx-auto px-6">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
@@ -122,22 +138,8 @@ const Analytics = () => {
|
|||||||
bottom: 5
|
bottom: 5
|
||||||
}}>
|
}}>
|
||||||
<XAxis dataKey="name" />
|
<XAxis dataKey="name" />
|
||||||
<YAxis tickFormatter={value => new Intl.NumberFormat('ko-KR', {
|
<YAxis tickFormatter={formatYAxisTick} />
|
||||||
style: 'currency',
|
<Tooltip formatter={formatTooltip} />
|
||||||
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;
|
|
||||||
}} />
|
|
||||||
<Legend />
|
<Legend />
|
||||||
<Bar dataKey="income" name="수입" fill="#81c784" radius={[4, 4, 0, 0]} />
|
<Bar dataKey="income" name="수입" fill="#81c784" radius={[4, 4, 0, 0]} />
|
||||||
<Bar dataKey="expense" name="지출" fill="#e57373" radius={[4, 4, 0, 0]} />
|
<Bar dataKey="expense" name="지출" fill="#e57373" radius={[4, 4, 0, 0]} />
|
||||||
|
|||||||
Reference in New Issue
Block a user