Rename chart labels

Rename income/expense labels to budget/expense in monthly chart.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 02:52:22 +00:00
parent c22dcd52f9
commit feb055d315

View File

@@ -24,37 +24,38 @@ const Analytics = () => {
color: '#81c784' color: '#81c784'
}]; }];
// Sample data for the monthly comparison // Sample data for the monthly comparison - renamed income to budget
const monthlyData = [{ const monthlyData = [{
name: '3월', name: '3월',
income: 2400000, budget: 2400000,
expense: 1800000 expense: 1800000
}, { }, {
name: '4월', name: '4월',
income: 2300000, budget: 2300000,
expense: 1700000 expense: 1700000
}, { }, {
name: '5월', name: '5월',
income: 2700000, budget: 2700000,
expense: 1900000 expense: 1900000
}, { }, {
name: '6월', name: '6월',
income: 2200000, budget: 2200000,
expense: 1500000 expense: 1500000
}, { }, {
name: '7월', name: '7월',
income: 2500000, budget: 2500000,
expense: 1650000 expense: 1650000
}, { }, {
name: '8월', name: '8월',
income: 2550000, budget: 2550000,
expense: 1740000 expense: 1740000
}]; }];
const totalIncome = 2550000; // Updated variable names to match new terminology
const totalBudget = 2550000;
const totalExpense = 1740000; const totalExpense = 1740000;
const savings = totalIncome - totalExpense; const savings = totalBudget - totalExpense;
const savingsPercentage = Math.round(savings / totalIncome * 100); const savingsPercentage = Math.round(savings / totalBudget * 100);
// Custom formatter for Y-axis that removes currency symbol and uses K format // Custom formatter for Y-axis that removes currency symbol and uses K format
const formatYAxisTick = (value: number) => { const formatYAxisTick = (value: number) => {
@@ -104,7 +105,7 @@ const Analytics = () => {
currency: 'KRW', currency: 'KRW',
notation: 'compact', notation: 'compact',
maximumFractionDigits: 1 maximumFractionDigits: 1
}).format(totalIncome)} }).format(totalBudget)}
</p> </p>
</div> </div>
<div className="neuro-card"> <div className="neuro-card">
@@ -146,7 +147,7 @@ const Analytics = () => {
<YAxis tickFormatter={formatYAxisTick} /> <YAxis tickFormatter={formatYAxisTick} />
<Tooltip formatter={formatTooltip} /> <Tooltip formatter={formatTooltip} />
<Legend /> <Legend />
<Bar dataKey="income" name="수입" fill="#81c784" radius={[4, 4, 0, 0]} /> <Bar dataKey="budget" 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]} />
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>