210 lines
7.5 KiB
TypeScript
210 lines
7.5 KiB
TypeScript
import { useMemo } from 'react'
|
|
import { useECharts } from './useECharts'
|
|
import type { StrategyBacktestResult } from '@/lib/api'
|
|
|
|
interface Props {
|
|
result: StrategyBacktestResult
|
|
}
|
|
|
|
export function StrategyNavChart({ result }: Props) {
|
|
const option = useMemo(() => {
|
|
if (!result.equity_curve.length) return null
|
|
|
|
const moneyFmt = new Intl.NumberFormat('zh-CN', { maximumFractionDigits: 0 })
|
|
const valueFmt = new Intl.NumberFormat('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
const axisMoneyFmt = (v: number) => {
|
|
if (Math.abs(v) >= 100_000_000) return `${(v / 100_000_000).toFixed(1)}亿`
|
|
if (Math.abs(v) >= 10_000) return `${(v / 10_000).toFixed(0)}万`
|
|
return moneyFmt.format(v)
|
|
}
|
|
const dates = result.equity_curve.map(r => r.date.slice(0, 10))
|
|
const navValues = result.equity_curve.map(r => r.value)
|
|
const benchmarkByDate = new Map((result.benchmark_curve ?? []).map(r => [r.date.slice(0, 10), r.close ?? r.value]))
|
|
const benchmarkValues = dates.map(d => benchmarkByDate.get(d) ?? null)
|
|
const hasBenchmark = benchmarkValues.some(v => v != null)
|
|
const ddValues = result.drawdown_curve.map(r => r.value * 100)
|
|
|
|
return {
|
|
animation: false,
|
|
axisPointer: {
|
|
link: [{ xAxisIndex: 'all' }],
|
|
label: { backgroundColor: '#334155' },
|
|
},
|
|
grid: [
|
|
{ left: 64, right: hasBenchmark ? 64 : 16, top: 14, bottom: '40%' },
|
|
{ left: 64, right: hasBenchmark ? 64 : 16, top: '68%', bottom: 46 },
|
|
],
|
|
xAxis: [
|
|
{
|
|
type: 'category', data: dates, gridIndex: 0,
|
|
axisLabel: { show: false }, axisTick: { show: false },
|
|
axisPointer: { show: true, type: 'line' },
|
|
axisLine: { lineStyle: { color: '#334155' } },
|
|
},
|
|
{
|
|
type: 'category', data: dates, gridIndex: 1,
|
|
axisLabel: { color: '#64748b', fontSize: 10, interval: Math.floor(dates.length / 6) },
|
|
axisTick: { show: false },
|
|
axisPointer: { show: true, type: 'line' },
|
|
axisLine: { lineStyle: { color: '#334155' } },
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value', gridIndex: 0,
|
|
scale: true,
|
|
name: hasBenchmark ? '上证点位' : '策略资金',
|
|
nameTextStyle: { color: hasBenchmark ? 'rgba(148,163,184,0.55)' : '#64748b', fontSize: 10, padding: [0, 0, 4, 0] },
|
|
axisLabel: {
|
|
color: hasBenchmark ? 'rgba(148,163,184,0.55)' : '#64748b',
|
|
fontSize: 10,
|
|
formatter: hasBenchmark ? ((v: number) => v.toFixed(0)) : axisMoneyFmt,
|
|
},
|
|
splitLine: { lineStyle: { color: '#1e293b' } },
|
|
axisLine: { show: false },
|
|
},
|
|
{
|
|
type: 'value', gridIndex: 0,
|
|
position: 'right',
|
|
scale: true,
|
|
name: hasBenchmark ? '策略资金' : '',
|
|
nameTextStyle: { color: '#64748b', fontSize: 10, padding: [0, 0, 4, 0] },
|
|
axisLabel: {
|
|
show: hasBenchmark,
|
|
color: '#64748b',
|
|
fontSize: 10,
|
|
formatter: axisMoneyFmt,
|
|
},
|
|
splitLine: { show: false },
|
|
axisLine: { show: false },
|
|
},
|
|
{
|
|
type: 'value', gridIndex: 1,
|
|
position: 'right',
|
|
max: 0,
|
|
axisLabel: {
|
|
color: '#64748b', fontSize: 10,
|
|
formatter: (v: number) => `${v.toFixed(1)}%`,
|
|
},
|
|
splitLine: { lineStyle: { color: '#1e293b' } },
|
|
axisLine: { show: false },
|
|
},
|
|
],
|
|
dataZoom: [
|
|
{
|
|
type: 'inside',
|
|
xAxisIndex: [0, 1],
|
|
filterMode: 'filter',
|
|
zoomOnMouseWheel: true,
|
|
moveOnMouseMove: true,
|
|
moveOnMouseWheel: false,
|
|
},
|
|
{
|
|
type: 'slider',
|
|
xAxisIndex: [0, 1],
|
|
filterMode: 'filter',
|
|
height: 16,
|
|
bottom: 10,
|
|
borderColor: 'rgba(148,163,184,0.18)',
|
|
backgroundColor: 'rgba(15,23,42,0.55)',
|
|
fillerColor: 'rgba(59,130,246,0.18)',
|
|
handleStyle: { color: '#64748b', borderColor: '#94a3b8' },
|
|
textStyle: { color: '#64748b', fontSize: 10 },
|
|
brushSelect: false,
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
backgroundColor: 'rgba(15,23,42,0.95)',
|
|
borderColor: 'rgba(148,163,184,0.2)',
|
|
textStyle: { color: '#e2e8f0', fontSize: 12 },
|
|
formatter: (params: any) => {
|
|
const date = params[0]?.axisValue ?? ''
|
|
let html = `<div style="font-size:11px;color:#94a3b8;margin-bottom:4px">${date}</div>`
|
|
for (const p of params) {
|
|
if (p.value == null) continue
|
|
const isDrawdown = p.seriesName === '回撤'
|
|
const isBenchmark = p.seriesName === '同期上证指数'
|
|
html += `<div style="display:flex;justify-content:space-between;gap:16px">
|
|
<span style="color:${p.color}">${p.seriesName}</span>
|
|
<span style="font-family:monospace">${
|
|
isDrawdown
|
|
? `${(p.value as number).toFixed(2)}%`
|
|
: isBenchmark
|
|
? `${valueFmt.format(p.value as number)} 点`
|
|
: moneyFmt.format(p.value as number)
|
|
}</span>
|
|
</div>`
|
|
}
|
|
return html
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '净值',
|
|
type: 'line',
|
|
xAxisIndex: 0,
|
|
yAxisIndex: hasBenchmark ? 1 : 0,
|
|
data: navValues,
|
|
symbol: 'none',
|
|
lineStyle: { color: '#3b82f6', width: 2.2 },
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(59,130,246,0.15)' },
|
|
{ offset: 1, color: 'rgba(59,130,246,0.01)' },
|
|
],
|
|
} as any,
|
|
},
|
|
},
|
|
...(hasBenchmark ? [{
|
|
name: '同期上证指数',
|
|
type: 'line',
|
|
xAxisIndex: 0,
|
|
yAxisIndex: 0,
|
|
data: benchmarkValues,
|
|
symbol: 'none',
|
|
connectNulls: true,
|
|
lineStyle: { color: 'rgba(148,163,184,0.45)', width: 1, type: 'dashed' },
|
|
}] : []),
|
|
{
|
|
name: '回撤',
|
|
type: 'line',
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 2,
|
|
data: ddValues,
|
|
symbol: 'none',
|
|
lineStyle: { color: 'rgba(240,68,56,0.6)', width: 1 },
|
|
areaStyle: { color: 'rgba(240,68,56,0.12)' },
|
|
},
|
|
],
|
|
} as any
|
|
}, [result.equity_curve, result.drawdown_curve, result.benchmark_curve, result.run_id])
|
|
|
|
const chartRef = useECharts(option, [result.run_id])
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex flex-wrap items-center gap-4 px-4 pb-2">
|
|
<span className="flex items-center gap-1.5 text-[10px] text-secondary">
|
|
<span className="w-3 h-0.5 rounded bg-accent" />
|
|
策略净值
|
|
</span>
|
|
<span className="flex items-center gap-1.5 text-[10px] text-secondary">
|
|
<span className="w-3 h-0.5 rounded bg-red-400/60" />
|
|
回撤
|
|
</span>
|
|
{(result.benchmark_curve?.length ?? 0) > 0 && (
|
|
<span className="flex items-center gap-1.5 text-[10px] text-secondary">
|
|
<span className="w-3 h-0.5 rounded border-t border-dashed border-slate-400/60" />
|
|
同期上证指数
|
|
</span>
|
|
)}
|
|
<span className="ml-auto text-[10px] text-muted">滚轮缩放 · 拖动平移</span>
|
|
</div>
|
|
<div ref={chartRef} className="h-[282px]" />
|
|
</div>
|
|
)
|
|
}
|