Refactor monthly comparison chart

Modify expense text and bar color in the monthly comparison chart legend from black to main green.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-22 12:56:28 +00:00
parent d7f0e6be4c
commit 273362ecb7

View File

@@ -58,6 +58,9 @@ const MonthlyComparisonChart: React.FC<MonthlyComparisonChartProps> = ({
return "#81c784"; // 기본 초록색
};
// 지출 색상을 메인 그린으로 통일
const mainGreenColor = "#81c784";
return (
<div className="neuro-card h-72 w-full">
{hasValidData ? (
@@ -77,15 +80,15 @@ const MonthlyComparisonChart: React.FC<MonthlyComparisonChartProps> = ({
contentStyle={{ backgroundColor: 'white', border: 'none' }}
cursor={{ fill: 'transparent' }}
/>
<Legend />
<Legend
formatter={(value) => {
// 범례 텍스트 색상 설정
return <span style={{ color: value === '지출' ? mainGreenColor : undefined }}>{value}</span>;
}}
/>
<Bar dataKey="budget" name="예산" fill="#C8C8C9" radius={[4, 4, 0, 0]} />
<Bar dataKey="expense" name="지출" radius={[4, 4, 0, 0]}>
{monthlyData.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={getExpenseColor(entry.budget, entry.expense)}
/>
))}
<Bar dataKey="expense" name="지출" fill={mainGreenColor} radius={[4, 4, 0, 0]}>
{/* 개별 셀 색상 설정은 제거하고 통일된 메인 그린 색상 사용 */}
</Bar>
</BarChart>
</ResponsiveContainer>