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:
@@ -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 />
|
||||
<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)}
|
||||
<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="지출" fill={mainGreenColor} radius={[4, 4, 0, 0]}>
|
||||
{/* 개별 셀 색상 설정은 제거하고 통일된 메인 그린 색상 사용 */}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
Reference in New Issue
Block a user