Reverted to edit edt-0b69430e-05e6-40e3-9ee2-b28a21c97d9a: "Adjust font sizes

Reduce font sizes in several components for better readability and UI consistency."
This commit is contained in:
gpt-engineer-app[bot]
2025-03-21 12:06:53 +00:00
parent acea18c368
commit 3b90e7396d
3 changed files with 7 additions and 72 deletions

View File

@@ -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>
<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} />