58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
'use client';
|
||
|
||
import {
|
||
Area,
|
||
AreaChart,
|
||
CartesianGrid,
|
||
ResponsiveContainer,
|
||
Tooltip,
|
||
XAxis,
|
||
YAxis,
|
||
} from 'recharts';
|
||
|
||
type Point = {
|
||
ts: string;
|
||
capital: number;
|
||
};
|
||
|
||
type Props = {
|
||
title: string;
|
||
points: Point[];
|
||
maxDrawdown: number;
|
||
};
|
||
|
||
export function EquityCurveChart({ title, points, maxDrawdown }: Props) {
|
||
return (
|
||
<article className="panel-glow rounded-2xl p-4">
|
||
<h3 className="dot-matrix text-lg text-[#7d2a15]">{title}</h3>
|
||
<div className="mt-3 h-72 w-full">
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<AreaChart data={points} margin={{ top: 6, right: 18, bottom: 6, left: 6 }}>
|
||
<defs>
|
||
<linearGradient id="equityGradient" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stopColor="#d1432d" stopOpacity={0.45} />
|
||
<stop offset="100%" stopColor="#d1432d" stopOpacity={0.02} />
|
||
</linearGradient>
|
||
</defs>
|
||
<CartesianGrid strokeDasharray="4 4" stroke="#eadcb9" />
|
||
<XAxis dataKey="ts" tick={{ fill: '#6d4d39', fontSize: 11 }} />
|
||
<YAxis tick={{ fill: '#6d4d39', fontSize: 11 }} />
|
||
<Tooltip
|
||
contentStyle={{ background: '#fff8e6', borderColor: '#d8b58c' }}
|
||
itemStyle={{ color: '#5f4031' }}
|
||
/>
|
||
<Area
|
||
type="monotone"
|
||
dataKey="capital"
|
||
stroke="#b83822"
|
||
fill="url(#equityGradient)"
|
||
strokeWidth={2.4}
|
||
/>
|
||
</AreaChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
<p className="mt-3 text-sm font-semibold text-[#8c2f2f]">最大回撤：{maxDrawdown.toFixed(2)}%</p>
|
||
</article>
|
||
);
|
||
}
|