Increase pie chart size

Make the pie charts in ExpenseChart and PaymentMethodChart components slightly larger.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-22 12:51:25 +00:00
parent 2a1fc6aa7a
commit eb13fa76a1
3 changed files with 9 additions and 10 deletions

View File

@@ -15,15 +15,15 @@ interface ExpenseChartProps {
const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => { const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
return ( return (
<div className="neuro-card h-64 desktop-card"> <div className="neuro-card h-72 desktop-card">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<PieChart margin={{ left: 50, right: 30, top: 20, bottom: 20 }}> <PieChart margin={{ left: 50, right: 30, top: 20, bottom: 20 }}>
<Pie <Pie
data={data} data={data}
cx="50%" cx="50%"
cy="50%" cy="50%"
innerRadius={40} innerRadius={50}
outerRadius={60} outerRadius={80}
paddingAngle={5} paddingAngle={5}
dataKey="value" dataKey="value"
labelLine={false} labelLine={false}

View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from 'recharts'; import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
interface PaymentMethodData { interface PaymentMethodData {
method: string; method: string;
@@ -30,15 +30,15 @@ const PaymentMethodChart: React.FC<PaymentMethodChartProps> = ({ data, isEmpty }
})); }));
return ( return (
<div className="neuro-card h-64 desktop-card"> <div className="neuro-card h-72 desktop-card">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<PieChart margin={{ left: 30, right: 30, top: 20, bottom: 5 }}> <PieChart margin={{ left: 30, right: 30, top: 20, bottom: 5 }}>
<Pie <Pie
data={chartData} data={chartData}
cx="50%" cx="50%"
cy="50%" cy="50%"
innerRadius={40} innerRadius={50}
outerRadius={60} outerRadius={80}
paddingAngle={5} paddingAngle={5}
dataKey="value" dataKey="value"
labelLine={false} labelLine={false}

View File

@@ -1,4 +1,3 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import NavBar from '@/components/NavBar'; import NavBar from '@/components/NavBar';
import ExpenseChart from '@/components/ExpenseChart'; import ExpenseChart from '@/components/ExpenseChart';
@@ -145,14 +144,14 @@ const Analytics = () => {
{/* Category Pie Chart */} {/* Category Pie Chart */}
<h2 className="text-lg font-semibold mb-3"> </h2> <h2 className="text-lg font-semibold mb-3"> </h2>
<div className="w-full"> <div className="w-full mb-8">
{expenseData.some(item => item.value > 0) ? <ExpenseChart data={expenseData} /> : <div className="neuro-card h-52 w-full flex items-center justify-center text-gray-400"> {expenseData.some(item => item.value > 0) ? <ExpenseChart data={expenseData} /> : <div className="neuro-card h-52 w-full flex items-center justify-center text-gray-400">
<p> </p> <p> </p>
</div>} </div>}
</div> </div>
{/* 결제 방법 차트 추가 */} {/* 결제 방법 차트 추가 */}
<h2 className="text-lg font-semibold mb-3 mt-6"> </h2> <h2 className="text-lg font-semibold mb-3"> </h2>
<PaymentMethodChart <PaymentMethodChart
data={paymentMethodData} data={paymentMethodData}
isEmpty={!hasPaymentData} isEmpty={!hasPaymentData}