From d67b58422e6222f00da89f4f1c3a9b176c872518 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 21 Mar 2025 12:08:13 +0000
Subject: [PATCH] Reverted to edit edt-4426a05b-1f41-4ec2-95c4-fdef3127d8df:
 "Center align pie chart

The pie chart was not properly centered. This commit aligns the pie chart to the center of the component."
---
 src/components/ExpenseChart.tsx | 36 ++++++---------------------------
 1 file changed, 6 insertions(+), 30 deletions(-)

diff --git a/src/components/ExpenseChart.tsx b/src/components/ExpenseChart.tsx
index 135ce03..5d60d63 100644
--- a/src/components/ExpenseChart.tsx
+++ b/src/components/ExpenseChart.tsx
@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { PieChart, Pie, Cell, ResponsiveContainer, Label } from 'recharts';
+import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
 import { getCategoryColor } from '@/utils/categoryColorUtils';
 
 interface ExpenseData {
@@ -17,7 +17,7 @@ const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
   return (
     <div className="neuro-card h-64 desktop-card">
       <ResponsiveContainer width="100%" height="100%">
-        <PieChart margin={{ left: 30, right: 30, top: 20, bottom: 20 }}>
+        <PieChart margin={{ left: 20, right: 20, top: 20, bottom: 20 }}>
           <Pie
             data={data}
             cx="50%"
@@ -27,34 +27,10 @@ const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
             paddingAngle={5}
             dataKey="value"
             labelLine={true}
-            label={({ name, percent, x, y }) => {
-              // 좌표 조정으로 레이블 위치 최적화
-              const radius = 90; // 레이블을 더 바깥쪽으로 배치
-              const centerX = parseInt(x.toString());
-              const centerY = parseInt(y.toString());
-              
-              // 차트 중심으로부터의 각도 계산
-              const angle = Math.atan2(centerY - 100, centerX - 100);
-              
-              // 레이블을 원 바깥으로 배치
-              const labelX = 100 + Math.cos(angle) * radius;
-              const labelY = 100 + Math.sin(angle) * radius;
-              
-              return (
-                <g>
-                  <text 
-                    x={labelX} 
-                    y={labelY} 
-                    fill="#666" 
-                    textAnchor={labelX > 100 ? "start" : "end"}
-                    dominantBaseline="central"
-                    fontSize={12}
-                  >
-                    {`${name} ${(percent * 100).toFixed(0)}%`}
-                  </text>
-                </g>
-              );
-            }}
+            label={({ name, percent }) => (
+              `${name} ${(percent * 100).toFixed(0)}%`
+            )}
+            fontSize={12}
           >
             {data.map((entry, index) => (
               <Cell key={`cell-${index}`} fill={entry.color} />