61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
|
import type { Pnl } from "../types";
|
||
|
|
|
||
|
|
export function PnlChart({ points }: { points: Pnl["points"] }) {
|
||
|
|
const values = points
|
||
|
|
.map((p) => p.value)
|
||
|
|
.filter((v): v is number => v !== null && Number.isFinite(v));
|
||
|
|
if (!values.length)
|
||
|
|
return <div className="chart-empty">暂无可绘制的 PnL 数据</div>;
|
||
|
|
const low = Math.min(...values),
|
||
|
|
high = Math.max(...values),
|
||
|
|
range = high - low || Math.max(1, Math.abs(high) * 0.1);
|
||
|
|
const x = (index: number) =>
|
||
|
|
62 + (index / Math.max(1, points.length - 1)) * 610;
|
||
|
|
const y = (v: number) => 24 + ((high - v) / range) * 180;
|
||
|
|
let segments = "";
|
||
|
|
let connected = false;
|
||
|
|
points.forEach((point, i) => {
|
||
|
|
if (point.value === null) {
|
||
|
|
connected = false;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
segments += `${connected ? " L" : " M"}${x(i)} ${y(point.value)}`;
|
||
|
|
connected = true;
|
||
|
|
});
|
||
|
|
return (
|
||
|
|
<svg
|
||
|
|
className="pnl-chart"
|
||
|
|
viewBox="0 0 700 240"
|
||
|
|
role="img"
|
||
|
|
aria-label={`PnL 曲线，共 ${points.length} 条记录`}
|
||
|
|
>
|
||
|
|
{[0, 1, 2, 3].map((i) => (
|
||
|
|
<g key={i}>
|
||
|
|
<line
|
||
|
|
x1="62"
|
||
|
|
x2="672"
|
||
|
|
y1={24 + i * 60}
|
||
|
|
y2={24 + i * 60}
|
||
|
|
stroke="var(--line)"
|
||
|
|
/>
|
||
|
|
<text x="52" y={28 + i * 60} textAnchor="end">
|
||
|
|
{(high - (i * range) / 3).toLocaleString(undefined, {
|
||
|
|
maximumFractionDigits: 0,
|
||
|
|
})}
|
||
|
|
</text>
|
||
|
|
</g>
|
||
|
|
))}
|
||
|
|
<path d={segments} fill="none" stroke="var(--accent)" strokeWidth="2" />
|
||
|
|
{points.length === 1 && points[0].value !== null && (
|
||
|
|
<circle cx={x(0)} cy={y(points[0].value)} r="3" fill="var(--accent)" />
|
||
|
|
)}
|
||
|
|
<text x="62" y="230">
|
||
|
|
{points[0]?.date.slice(0, 10)}
|
||
|
|
</text>
|
||
|
|
<text x="672" y="230" textAnchor="end">
|
||
|
|
{points.at(-1)?.date.slice(0, 10)}
|
||
|
|
</text>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
}
|