moen0
88 lines
3.1 KiB
React
88 lines
3.1 KiB
React
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
|
|
|
|
function formatCurrency(value) {
|
|
return value.toLocaleString('en-US', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
});
|
|
}
|
|
|
|
function CustomTooltip({ active, payload, total }) {
|
|
if (active && payload && payload.length) {
|
|
return (
|
|
<div className="bg-[#0a0a0a] border border-[#262626] px-4 py-3 shadow-xl">
|
|
<p className="text-[13px] text-[#fafafa] font-semibold mb-1">{payload[0].name}</p>
|
|
<p className="text-[15px] text-[#737373]">
|
|
{payload[0].value} trades ({((payload[0].value / total) * 100).toFixed(1)}%)
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
export function TradeDistribution({ wins = 0, losses = 0, avgWin = 0, avgLoss = 0, largestWin = 0, largestLoss = 0 }) {
|
|
const total = wins + losses;
|
|
const data = [
|
|
{ name: 'Wins', value: wins },
|
|
{ name: 'Losses', value: losses },
|
|
];
|
|
const COLORS = ['#10b981', '#ef4444'];
|
|
|
|
return (
|
|
<div className="border border-[#262626] bg-[#0a0a0a] p-8">
|
|
<div className="mb-6">
|
|
<h2 className="text-[20px] font-semibold tracking-tight mb-1">Trade Distribution</h2>
|
|
<p className="text-[13px] text-[#737373]">Win/Loss breakdown</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col lg:flex-row items-center gap-8">
|
|
<div className="w-full lg:w-1/2">
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<PieChart>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={60}
|
|
outerRadius={90}
|
|
paddingAngle={2}
|
|
dataKey="value"
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index]} stroke="none" />
|
|
))}
|
|
</Pie>
|
|
<Tooltip content={<CustomTooltip total={total} />} />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
<div className="w-full lg:w-1/2 space-y-4">
|
|
<div className="flex items-center justify-between p-4 border border-[#1a1a1a] bg-black/40">
|
|
<div>
|
|
<p className="text-[13px] text-[#737373] mb-1">Winning Trades</p>
|
|
<p className="text-[24px] font-semibold text-[#10b981]">{wins}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-[13px] text-[#737373] mb-1">Avg. Win</p>
|
|
<p className="text-[16px] font-semibold text-[#10b981]">${formatCurrency(avgWin)}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-4 border border-[#1a1a1a] bg-black/40">
|
|
<div>
|
|
<p className="text-[13px] text-[#737373] mb-1">Losing Trades</p>
|
|
<p className="text-[24px] font-semibold text-[#ef4444]">{losses}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-[13px] text-[#737373] mb-1">Avg. Loss</p>
|
|
<p className="text-[16px] font-semibold text-[#ef4444]">${formatCurrency(avgLoss)}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|