Increase pie chart size
Make the pie charts in ExpenseChart and PaymentMethodChart components slightly larger.
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user