Swap chart card positions
Swapped the positions of the category expense chart and the monthly comparison graph cards.
This commit is contained in:
@@ -4,6 +4,7 @@ import ExpenseChart from '@/components/ExpenseChart';
|
|||||||
import AddTransactionButton from '@/components/AddTransactionButton';
|
import AddTransactionButton from '@/components/AddTransactionButton';
|
||||||
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
|
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
|
||||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||||
|
|
||||||
const Analytics = () => {
|
const Analytics = () => {
|
||||||
const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
|
const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
|
||||||
|
|
||||||
@@ -48,10 +49,12 @@ const Analytics = () => {
|
|||||||
income: 2550000,
|
income: 2550000,
|
||||||
expense: 1740000
|
expense: 1740000
|
||||||
}];
|
}];
|
||||||
|
|
||||||
const totalIncome = 2550000;
|
const totalIncome = 2550000;
|
||||||
const totalExpense = 1740000;
|
const totalExpense = 1740000;
|
||||||
const savings = totalIncome - totalExpense;
|
const savings = totalIncome - totalExpense;
|
||||||
const savingsPercentage = Math.round(savings / totalIncome * 100);
|
const savingsPercentage = Math.round(savings / totalIncome * 100);
|
||||||
|
|
||||||
return <div className="min-h-screen bg-neuro-background pb-24">
|
return <div className="min-h-screen bg-neuro-background pb-24">
|
||||||
<div className="max-w-md mx-auto px-6">
|
<div className="max-w-md mx-auto px-6">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
@@ -106,11 +109,8 @@ const Analytics = () => {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* Category Pie Chart */}
|
{/* Monthly Comparison - MOVED UP */}
|
||||||
<ExpenseChart data={expenseData} />
|
<div className="mb-8">
|
||||||
|
|
||||||
{/* Monthly Comparison */}
|
|
||||||
<div className="mt-6 mb-8">
|
|
||||||
<h2 className="text-lg font-semibold mb-3">월별 그래프</h2>
|
<h2 className="text-lg font-semibold mb-3">월별 그래프</h2>
|
||||||
<div className="neuro-card h-72">
|
<div className="neuro-card h-72">
|
||||||
<ResponsiveContainer width="100%" height="100%">
|
<ResponsiveContainer width="100%" height="100%">
|
||||||
@@ -145,8 +145,11 @@ const Analytics = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Category Pie Chart - MOVED DOWN */}
|
||||||
|
<ExpenseChart data={expenseData} />
|
||||||
|
|
||||||
{/* Top Spending Categories */}
|
{/* Top Spending Categories */}
|
||||||
<h2 className="text-lg font-semibold mb-3">주요 지출 카테고리</h2>
|
<h2 className="text-lg font-semibold mb-3 mt-6">주요 지출 카테고리</h2>
|
||||||
<div className="neuro-card mb-6">
|
<div className="neuro-card mb-6">
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{expenseData.map((category, index) => <div key={category.name} className="flex items-center justify-between">
|
{expenseData.map((category, index) => <div key={category.name} className="flex items-center justify-between">
|
||||||
@@ -177,4 +180,5 @@ const Analytics = () => {
|
|||||||
<NavBar />
|
<NavBar />
|
||||||
</div>;
|
</div>;
|
||||||
};
|
};
|
||||||
export default Analytics;
|
|
||||||
|
export default Analytics;
|
||||||
|
|||||||
Reference in New Issue
Block a user