diff --git a/src/components/analytics/MonthlyComparisonChart.tsx b/src/components/analytics/MonthlyComparisonChart.tsx index 337589b..d868c50 100644 --- a/src/components/analytics/MonthlyComparisonChart.tsx +++ b/src/components/analytics/MonthlyComparisonChart.tsx @@ -1,20 +1,16 @@ - import React from 'react'; import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend, Cell } from 'recharts'; import { formatCurrency } from '@/utils/formatters'; - interface MonthlyData { name: string; budget: number; expense: number; } - interface MonthlyComparisonChartProps { monthlyData: MonthlyData[]; isEmpty?: boolean; } - -const MonthlyComparisonChart: React.FC = ({ +const MonthlyComparisonChart: React.FC = ({ monthlyData, isEmpty = false }) => { @@ -33,26 +29,21 @@ const MonthlyComparisonChart: React.FC = ({ // 데이터 확인 로깅 console.log('MonthlyComparisonChart 데이터:', monthlyData); - + // EmptyGraphState 컴포넌트: 데이터가 없을 때 표시 - const EmptyGraphState = () => ( -
+ const EmptyGraphState = () =>

데이터가 없습니다

지출 내역을 추가하면 그래프가 표시됩니다

-
- ); +
; // 데이터 여부 확인 로직 개선 - 데이터가 비어있거나 모든 값이 0인 경우도 고려 - const hasValidData = monthlyData && - monthlyData.length > 0 && - monthlyData.some(item => (item.budget > 0 || item.expense > 0)); + const hasValidData = monthlyData && monthlyData.length > 0 && monthlyData.some(item => item.budget > 0 || item.expense > 0); // 지출 색상 결정 함수 추가 const getExpenseColor = (budget: number, expense: number) => { if (budget === 0) return "#81c784"; // 예산이 0이면 기본 색상 - + const ratio = expense / budget; - if (ratio > 1) return "#f44336"; // 빨간색 (예산 초과) if (ratio >= 0.9) return "#ffeb3b"; // 노란색 (예산의 90% 이상) return "#81c784"; // 기본 초록색 @@ -60,46 +51,40 @@ const MonthlyComparisonChart: React.FC = ({ // 지출 색상을 메인 그린으로 통일 const mainGreenColor = "#81c784"; - + // 예산 색상을 좀 더 짙은 회색으로 변경 const darkGrayColor = "#9F9EA1"; // 이전 색상 #C8C8C9에서 더 짙은 회색으로 변경 - return ( -
- {hasValidData ? ( - + return
+ {hasValidData ? + top: 20, + right: 10, + left: -10, + bottom: 5 + }} style={{ + fontSize: '11px' + }}> - - { - // 범례 텍스트 색상 설정 - return {value}; - }} - /> + + { + // 범례 텍스트 색상 설정 + return {value}; + }} /> {/* 개별 셀 색상 설정은 제거하고 통일된 메인 그린 색상 사용 */} - - ) : ( - - )} -
- ); +
: } +
; }; - -export default MonthlyComparisonChart; +export default MonthlyComparisonChart; \ No newline at end of file