Rename chart labels
Rename income/expense labels to budget/expense in monthly chart.
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user