108 lines
4.4 KiB
React
108 lines
4.4 KiB
React
import { useEffect, useState } from 'react'
|
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
|
|
import { api } from '../../api/client.js'
|
|
|
|
// 策略研究: 顶部 chip 行选策略, 下面显示 4 张图 (debt / gdp / debtToGdp / interestToGdp) + 表格
|
|
const SERIES = [
|
|
{ key: 'debt', label: '政府债务 (万亿美元)', color: '#8884d8' },
|
|
{ key: 'gdp', label: 'GDP (万亿美元)', color: '#3cb44b' },
|
|
{ key: 'debtToGdp', label: '债务/GDP (%)', color: '#4363d8' },
|
|
{ key: 'interestToGdp', label: '债务利息/GDP (%)', color: '#f58231' },
|
|
]
|
|
|
|
export default function StrategyView() {
|
|
const [strategies, setStrategies] = useState([])
|
|
const [selected, setSelected] = useState(null)
|
|
const [err, setErr] = useState('')
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
setLoading(true)
|
|
api('/strategies')
|
|
.then((data) => {
|
|
if (cancelled) return
|
|
setStrategies(data.strategies || [])
|
|
if (data.strategies && data.strategies[0]) setSelected(data.strategies[0].name)
|
|
})
|
|
.catch((e) => !cancelled && setErr(e.message))
|
|
.finally(() => !cancelled && setLoading(false))
|
|
return () => { cancelled = true }
|
|
}, [])
|
|
|
|
if (loading) return <div className="loading">加载中...</div>
|
|
if (err) return <div className="error-banner">{err}</div>
|
|
if (!strategies.length) return <div className="empty">暂无策略数据</div>
|
|
|
|
const cur = strategies.find((s) => s.name === selected)
|
|
const rows = cur ? cur.data.rows : []
|
|
|
|
return (
|
|
<div>
|
|
<div className="page-title">策略研究</div>
|
|
<div className="chip-row" style={{ paddingLeft: 12 }}>
|
|
{strategies.map((s) => (
|
|
<button
|
|
key={s.name}
|
|
className={'chip' + (selected === s.name ? ' active' : '')}
|
|
onClick={() => setSelected(s.name)}
|
|
>
|
|
{s.description || s.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{cur && (
|
|
<div style={{ padding: '0 12px 12px' }}>
|
|
<div className="card">
|
|
<div style={{ fontWeight: 600, marginBottom: 4 }}>{cur.description || cur.name}</div>
|
|
<div style={{ fontSize: 12, color: 'var(--color-muted)', marginBottom: 8 }}>
|
|
数据 {rows.length} 条 · 来源 {cur.data.source || 'seed'}
|
|
</div>
|
|
{SERIES.map((s) => (
|
|
<div key={s.key} style={{ marginBottom: 12 }}>
|
|
<div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4 }}>{s.label}</div>
|
|
<div className="chart-wrap">
|
|
<ResponsiveContainer width="100%" height={220}>
|
|
<LineChart data={rows} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="year" tick={{ fontSize: 11 }} />
|
|
<YAxis tick={{ fontSize: 11 }} />
|
|
<Tooltip />
|
|
<Legend />
|
|
<Line type="monotone" dataKey={s.key} name={s.label} stroke={s.color} strokeWidth={2} dot={{ r: 3 }} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<div style={{ maxHeight: 220, overflow: 'auto', marginTop: 8 }}>
|
|
<table className="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>年份</th>
|
|
<th style={{ textAlign: 'right' }}>债务</th>
|
|
<th style={{ textAlign: 'right' }}>GDP</th>
|
|
<th style={{ textAlign: 'right' }}>债务/GDP</th>
|
|
<th style={{ textAlign: 'right' }}>利息/GDP</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((r) => (
|
|
<tr key={r.year}>
|
|
<td>{r.year}</td>
|
|
<td style={{ textAlign: 'right' }}>{r.debt}</td>
|
|
<td style={{ textAlign: 'right' }}>{r.gdp}</td>
|
|
<td style={{ textAlign: 'right' }}>{r.debtToGdp}</td>
|
|
<td style={{ textAlign: 'right' }}>{r.interestToGdp}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
} |