diff --git a/src/components/mypage/Chart.tsx b/src/components/mypage/Chart.tsx index 8d8a1da7..fa8c8a14 100644 --- a/src/components/mypage/Chart.tsx +++ b/src/components/mypage/Chart.tsx @@ -1,4 +1,5 @@ import { EmotionLog, EmotionTypeEN } from '@/types/emotion'; +import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts'; import Image from 'next/image'; import { iconPaths } from '../../user/utill/constants'; @@ -22,52 +23,51 @@ export default function Chart({ monthlyEmotionLogs }: ChartProps) { // 감정 종류 및 총 감정 수 계산 const TOTAL_COUNT = monthlyEmotionLogs.length; const EMOTIONS: EmotionTypeEN[] = ['MOVED', 'HAPPY', 'WORRIED', 'SAD', 'ANGRY']; - const RADIUS = 90; // 원의 반지름 - const CIRCUMFERENCE = 2 * Math.PI * RADIUS; // 가장 많이 나타나는 감정 찾기 const maxEmotion = EMOTIONS.reduce((max, emotion) => (emotionCounts[emotion] > emotionCounts[max] ? emotion : max), EMOTIONS[0]); - // 원형 차트의 각 감정에 대한 strokeDasharray와 strokeDashoffset 계산 - let offset = 0; + // 원형 차트 데이터 생성 및 정렬 (가장 많은 감정부터) + const chartData = EMOTIONS.map((emotion) => ({ + name: emotion, + value: emotionCounts[emotion] || 0, + })).sort((a, b) => b.value - a.value); + + // 감정 색상 설정 + const COLORS = { + MOVED: '#48BB98', + HAPPY: '#FBC85B', + WORRIED: '#C7D1E0', + SAD: '#E3E9F1', + ANGRY: '#EFF3F8', + }; return (
{percentage}%