import React, { useState, useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
import { TrendingUp, DollarSign, Calendar, Percent } from 'lucide-react';
const InvestmentCalculator = () => {
const [monthlyInvestment, setMonthlyInvestment] = useState(50);
const [years, setYears] = useState(10);
const [annualReturn, setAnnualReturn] = useState(30);
const [results, setResults] = useState(null);
const [chartData, setChartData] = useState([]);
const calculateResults = () => {
const monthlyRate = annualReturn / 100 / 12;
const totalMonths = years * 12;
let totalInvested = 0;
let finalAmount = 0;
const yearlyData = [];
// Расчет сложного процента с ежемесячными взносами
for (let month = 1; month <= totalMonths; month++) {
totalInvested += monthlyInvestment;
finalAmount = (finalAmount + monthlyInvestment) * (1 + monthlyRate);
// Добавляем данные для графика каждый год
if (month % 12 === 0) {
yearlyData.push({
year: month / 12,
invested: totalInvested,
total: Math.round(finalAmount),
profit: Math.round(finalAmount - totalInvested)
});
}
}
const totalProfit = finalAmount - totalInvested;
const percentageGrowth = ((finalAmount - totalInvested) / totalInvested) * 100;
setResults({
totalInvested: Math.round(totalInvested),
finalAmount: Math.round(finalAmount),
totalProfit: Math.round(totalProfit),
percentageGrowth: Math.round(percentageGrowth)
});
setChartData(yearlyData);
};
useEffect(() => {
calculateResults();
}, [monthlyInvestment, years, annualReturn]);
const formatNumber = (num) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}).format(num);
};
const pieData = results ? [
{ name: 'Sizning hissangiz', value: results.totalInvested, color: '#8B5CF6' },
{ name: 'Foyda', value: results.totalProfit, color: '#10B981' }
] : [];
return (
{/* Header */}
Investitsiya kalkulyatori
Murakkab foizning kuchini bilib oling!
{/* Input Card */}
{/* Monthly Investment */}
{/* Years */}
{/* Annual Return */}
{/* Results Cards */}
{results && (
{/* Final Amount */}
Jami summa {years} yildan keyin
{formatNumber(results.finalAmount)}
{/* Stats Grid */}
Sizning hissangiz
{formatNumber(results.totalInvested)}
Foyda
{formatNumber(results.totalProfit)}
{/* Growth Percentage */}
Kapital o'sishi
+{results.percentageGrowth.toLocaleString()}%
)}
{/* Charts */}
{chartData.length > 0 && (
{/* Line Chart */}
Investitsiyangizning o'sishi
`$${(value/1000).toFixed(0)}k`}
/> [formatNumber(value), name === 'invested' ? 'Hissa' : 'Jami summa']}
labelFormatter={(year) => `Yil ${year}`}
/>
{/* Pie Chart */}
Kapital tuzilishi
`${name} ${(percent * 100).toFixed(0)}%`}
labelLine={false}
fontSize={12}
>
{pieData.map((entry, index) => (
|
))}
formatNumber(value)} />
)}
{/* Footer */}
???? Bugundan investitsiya qilishni boshlang!
{/* Disclaimer */}
Haqiqiy daromad farq qilishi mumkin, chunki bu faqat matematik model. Investitsiya tavsiyasi emas.
);
};
export default InvestmentCalculator;
