857 lines
30 KiB
JavaScript
857 lines
30 KiB
JavaScript
'use client';
|
||
|
||
import { useState, useEffect, useMemo, useRef } from 'react';
|
||
import { fetchFundHistory } from '../api/fund';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
import { ChevronIcon } from './Icons';
|
||
import {
|
||
Chart as ChartJS,
|
||
CategoryScale,
|
||
LinearScale,
|
||
PointElement,
|
||
LineElement,
|
||
Title,
|
||
Tooltip,
|
||
Legend,
|
||
Filler
|
||
} from 'chart.js';
|
||
import { Line } from 'react-chartjs-2';
|
||
import { cachedRequest } from '../lib/cacheRequest';
|
||
import FundHistoryNetValue from './FundHistoryNetValue';
|
||
|
||
ChartJS.register(
|
||
CategoryScale,
|
||
LinearScale,
|
||
PointElement,
|
||
LineElement,
|
||
Title,
|
||
Tooltip,
|
||
Legend,
|
||
Filler
|
||
);
|
||
|
||
const CHART_COLORS = {
|
||
dark: {
|
||
danger: '#f87171',
|
||
success: '#34d399',
|
||
primary: '#22d3ee',
|
||
muted: '#9ca3af',
|
||
border: '#1f2937',
|
||
text: '#e5e7eb',
|
||
crosshairText: '#0f172a',
|
||
},
|
||
light: {
|
||
danger: '#dc2626',
|
||
success: '#059669',
|
||
primary: '#0891b2',
|
||
muted: '#475569',
|
||
border: '#e2e8f0',
|
||
text: '#0f172a',
|
||
crosshairText: '#ffffff',
|
||
}
|
||
};
|
||
|
||
function getChartThemeColors(theme) {
|
||
return CHART_COLORS[theme] || CHART_COLORS.dark;
|
||
}
|
||
|
||
export default function FundTrendChart({ code, isExpanded, onToggleExpand, transactions = [], theme = 'dark', hideHeader = false }) {
|
||
const [range, setRange] = useState('3m');
|
||
const [data, setData] = useState([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState(null);
|
||
const chartRef = useRef(null);
|
||
const hoverTimeoutRef = useRef(null);
|
||
const clearActiveIndexRef = useRef(null);
|
||
const [hiddenGrandSeries, setHiddenGrandSeries] = useState(() => new Set());
|
||
const [activeIndex, setActiveIndex] = useState(null);
|
||
|
||
useEffect(() => {
|
||
clearActiveIndexRef.current = () => setActiveIndex(null);
|
||
});
|
||
|
||
const chartColors = useMemo(() => getChartThemeColors(theme), [theme]);
|
||
|
||
useEffect(() => {
|
||
// If collapsed, don't fetch data unless we have no data yet
|
||
if (!isExpanded && data.length > 0) return;
|
||
|
||
let active = true;
|
||
setLoading(true);
|
||
setError(null);
|
||
const cacheKey = `fund_history_${code}_${range}`;
|
||
|
||
if (isExpanded) {
|
||
cachedRequest(
|
||
() => fetchFundHistory(code, range),
|
||
cacheKey,
|
||
{ cacheTime: 10 * 60 * 1000 }
|
||
)
|
||
.then(res => {
|
||
if (active) {
|
||
setData(res || []);
|
||
setLoading(false);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
if (active) {
|
||
setError(err);
|
||
setLoading(false);
|
||
}
|
||
});
|
||
|
||
}
|
||
return () => { active = false; };
|
||
}, [code, range, isExpanded, data.length]);
|
||
|
||
const ranges = [
|
||
{ label: '近1月', value: '1m' },
|
||
{ label: '近3月', value: '3m' },
|
||
{ label: '近6月', value: '6m' },
|
||
{ label: '近1年', value: '1y' },
|
||
{ label: '近3年', value: '3y' },
|
||
{ label: '成立来', value: 'all' }
|
||
];
|
||
|
||
const change = useMemo(() => {
|
||
if (!data.length) return 0;
|
||
const first = data[0].value;
|
||
const last = data[data.length - 1].value;
|
||
return ((last - first) / first) * 100;
|
||
}, [data]);
|
||
|
||
// Red for up, Green for down (CN market style)，随主题使用 CSS 变量
|
||
const upColor = chartColors.danger;
|
||
const downColor = chartColors.success;
|
||
const lineColor = change >= 0 ? upColor : downColor;
|
||
const primaryColor = chartColors.primary;
|
||
|
||
const percentageData = useMemo(() => {
|
||
if (!data.length) return [];
|
||
const firstValue = data[0].value ?? 1;
|
||
return data.map(d => ((d.value - firstValue) / firstValue) * 100);
|
||
}, [data]);
|
||
|
||
const chartData = useMemo(() => {
|
||
// Data_grandTotal：在 fetchFundHistory 中解析为 data.grandTotalSeries 数组
|
||
const grandTotalSeries = Array.isArray(data.grandTotalSeries) ? data.grandTotalSeries : [];
|
||
|
||
// Map transaction dates to chart indices
|
||
const dateToIndex = new Map(data.map((d, i) => [d.date, i]));
|
||
const buyPoints = new Array(data.length).fill(null);
|
||
const sellPoints = new Array(data.length).fill(null);
|
||
|
||
transactions.forEach(t => {
|
||
// Simple date matching (assuming formats match)
|
||
// If formats differ, dayjs might be needed
|
||
const idx = dateToIndex.get(t.date);
|
||
if (idx !== undefined) {
|
||
const val = percentageData[idx];
|
||
if (t.type === 'buy') {
|
||
buyPoints[idx] = val;
|
||
} else {
|
||
sellPoints[idx] = val;
|
||
}
|
||
}
|
||
});
|
||
|
||
// 将 Data_grandTotal 的多条曲线按日期对齐到主 labels 上
|
||
const labels = data.map(d => d.date);
|
||
// 对比线颜色：避免与主线红/绿（upColor/downColor）重复
|
||
// 第三条对比线需要在亮/暗主题下都足够清晰，因此使用高对比的橙色强调
|
||
const grandAccent3 = theme === 'light' ? '#f97316' : '#fb923c';
|
||
const grandColors = [
|
||
primaryColor,
|
||
chartColors.muted,
|
||
grandAccent3,
|
||
chartColors.text,
|
||
];
|
||
// 隐藏第一条对比线（数据与图示）；第二条用原第一条颜色，第三条用原第二条，顺延
|
||
const visibleGrandSeries = grandTotalSeries.filter((_, idx) => idx > 0);
|
||
const grandDatasets = visibleGrandSeries.map((series, displayIdx) => {
|
||
const color = grandColors[displayIdx % grandColors.length];
|
||
const idx = displayIdx + 1; // 原始索引，用于 hiddenGrandSeries 的 key
|
||
const key = `${series.name || 'series'}_${idx}`;
|
||
const isHidden = hiddenGrandSeries.has(key);
|
||
const pointsByDate = new Map(series.points.map(p => [p.date, p.value]));
|
||
|
||
// 方案 2：将对比线同样归一到当前区间首日，展示为“相对本区间首日的累计收益率（百分点变化）”
|
||
let baseValue = null;
|
||
for (const date of labels) {
|
||
const v = pointsByDate.get(date);
|
||
if (typeof v === 'number' && Number.isFinite(v)) {
|
||
baseValue = v;
|
||
break;
|
||
}
|
||
}
|
||
|
||
const seriesData = labels.map(date => {
|
||
if (isHidden || baseValue == null) return null;
|
||
const v = pointsByDate.get(date);
|
||
if (typeof v !== 'number' || !Number.isFinite(v)) return null;
|
||
// Data_grandTotal 中的 value 已是百分比，这里按区间首日做“差值”，保持同一坐标含义（相对区间首日的收益率变化）
|
||
return v - baseValue;
|
||
});
|
||
|
||
return {
|
||
type: 'line',
|
||
label: series.name || '累计收益率',
|
||
data: seriesData,
|
||
borderColor: color,
|
||
backgroundColor: color,
|
||
borderWidth: 1.5,
|
||
pointRadius: 0,
|
||
pointHoverRadius: 3,
|
||
fill: false,
|
||
tension: 0.2,
|
||
order: 2,
|
||
};
|
||
});
|
||
|
||
return {
|
||
labels: data.map(d => d.date),
|
||
datasets: [
|
||
{
|
||
type: 'line',
|
||
label: '本基金',
|
||
data: percentageData,
|
||
borderColor: lineColor,
|
||
backgroundColor: (context) => {
|
||
const ctx = context.chart.ctx;
|
||
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
|
||
gradient.addColorStop(0, `${lineColor}33`); // 20% opacity
|
||
gradient.addColorStop(1, `${lineColor}00`); // 0% opacity
|
||
return gradient;
|
||
},
|
||
borderWidth: 2,
|
||
pointRadius: 0,
|
||
pointHoverRadius: 4,
|
||
fill: true,
|
||
tension: 0.2,
|
||
order: 2
|
||
},
|
||
...(['1y', '3y', 'all'].includes(range) ? [] : grandDatasets),
|
||
{
|
||
type: 'line', // Use line type with showLine: false to simulate scatter on Category scale
|
||
label: '买入',
|
||
isTradePoint: true,
|
||
data: buyPoints,
|
||
borderColor: '#ffffff',
|
||
borderWidth: 1,
|
||
backgroundColor: primaryColor,
|
||
pointStyle: 'circle',
|
||
pointRadius: 2.5,
|
||
pointHoverRadius: 4,
|
||
showLine: false,
|
||
order: 1
|
||
},
|
||
{
|
||
type: 'line',
|
||
label: '卖出',
|
||
isTradePoint: true,
|
||
data: sellPoints,
|
||
borderColor: '#ffffff',
|
||
borderWidth: 1,
|
||
backgroundColor: upColor,
|
||
pointStyle: 'circle',
|
||
pointRadius: 2.5,
|
||
pointHoverRadius: 4,
|
||
showLine: false,
|
||
order: 1
|
||
}
|
||
]
|
||
};
|
||
}, [data, transactions, lineColor, primaryColor, upColor, chartColors, theme, hiddenGrandSeries, percentageData, range]);
|
||
|
||
const options = useMemo(() => {
|
||
const colors = getChartThemeColors(theme);
|
||
return {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
display: false
|
||
},
|
||
tooltip: {
|
||
enabled: false, // 禁用默认 Tooltip，使用自定义绘制
|
||
mode: 'index',
|
||
intersect: false,
|
||
external: () => {} // 禁用外部 HTML tooltip
|
||
}
|
||
},
|
||
scales: {
|
||
x: {
|
||
display: true,
|
||
grid: {
|
||
display: false,
|
||
drawBorder: false
|
||
},
|
||
ticks: {
|
||
color: colors.muted,
|
||
font: { size: 10 },
|
||
maxTicksLimit: 4,
|
||
maxRotation: 0
|
||
},
|
||
border: { display: false }
|
||
},
|
||
y: {
|
||
display: true,
|
||
position: 'left',
|
||
grid: {
|
||
color: colors.border,
|
||
drawBorder: false,
|
||
tickLength: 0
|
||
},
|
||
ticks: {
|
||
color: colors.muted,
|
||
font: { size: 10 },
|
||
count: 5,
|
||
callback: (value) => `${value.toFixed(2)}%`
|
||
},
|
||
border: { display: false }
|
||
}
|
||
},
|
||
interaction: {
|
||
mode: 'index',
|
||
intersect: false,
|
||
},
|
||
onHover: (event, chartElement, chart) => {
|
||
const target = event?.native?.target;
|
||
const currentChart = chart || chartRef.current;
|
||
if (!currentChart) return;
|
||
|
||
const tooltipActive = currentChart.tooltip?._active ?? [];
|
||
const activeElements = currentChart.getActiveElements
|
||
? currentChart.getActiveElements()
|
||
: [];
|
||
const hasActive =
|
||
(chartElement && chartElement.length > 0) ||
|
||
(tooltipActive && tooltipActive.length > 0) ||
|
||
(activeElements && activeElements.length > 0);
|
||
|
||
if (target) {
|
||
target.style.cursor = hasActive ? 'crosshair' : 'default';
|
||
}
|
||
|
||
// 记录当前激活的横轴索引，用于图示下方展示对应百分比
|
||
if (Array.isArray(chartElement) && chartElement.length > 0) {
|
||
const idx = chartElement[0].index;
|
||
setActiveIndex(typeof idx === 'number' ? idx : null);
|
||
} else {
|
||
setActiveIndex(null);
|
||
}
|
||
|
||
// 仅用于桌面端 hover 改变光标，不在这里做 2 秒清除，避免移动端 hover 事件不稳定
|
||
},
|
||
onClick: (_event, elements) => {
|
||
if (Array.isArray(elements) && elements.length > 0) {
|
||
const idx = elements[0].index;
|
||
setActiveIndex(typeof idx === 'number' ? idx : null);
|
||
}
|
||
}
|
||
};
|
||
}, [theme]);
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
if (hoverTimeoutRef.current) {
|
||
clearTimeout(hoverTimeoutRef.current);
|
||
}
|
||
};
|
||
}, []);
|
||
|
||
const plugins = useMemo(() => {
|
||
const colors = getChartThemeColors(theme);
|
||
return [{
|
||
id: 'crosshair',
|
||
afterEvent: (chart, args) => {
|
||
const { event, replay } = args || {};
|
||
if (!event || replay) return; // 忽略动画重放
|
||
|
||
const type = event.type;
|
||
if (type === 'mousemove' || type === 'click') {
|
||
if (hoverTimeoutRef.current) {
|
||
clearTimeout(hoverTimeoutRef.current);
|
||
hoverTimeoutRef.current = null;
|
||
}
|
||
|
||
hoverTimeoutRef.current = setTimeout(() => {
|
||
if (!chart) return;
|
||
chart.setActiveElements([]);
|
||
if (chart.tooltip) {
|
||
chart.tooltip.setActiveElements([], { x: 0, y: 0 });
|
||
}
|
||
chart.update();
|
||
clearActiveIndexRef.current?.();
|
||
}, 2000);
|
||
}
|
||
},
|
||
afterDraw: (chart) => {
|
||
const ctx = chart.ctx;
|
||
const datasets = chart.data.datasets;
|
||
const primaryColor = colors.primary;
|
||
|
||
// 绘制圆角矩形（兼容无 roundRect 的环境）
|
||
const drawRoundRect = (left, top, w, h, r) => {
|
||
const rad = Math.min(r, w / 2, h / 2);
|
||
ctx.beginPath();
|
||
ctx.moveTo(left + rad, top);
|
||
ctx.lineTo(left + w - rad, top);
|
||
ctx.quadraticCurveTo(left + w, top, left + w, top + rad);
|
||
ctx.lineTo(left + w, top + h - rad);
|
||
ctx.quadraticCurveTo(left + w, top + h, left + w - rad, top + h);
|
||
ctx.lineTo(left + rad, top + h);
|
||
ctx.quadraticCurveTo(left, top + h, left, top + h - rad);
|
||
ctx.lineTo(left, top + rad);
|
||
ctx.quadraticCurveTo(left, top, left + rad, top);
|
||
ctx.closePath();
|
||
};
|
||
|
||
const drawPointLabel = (datasetIndex, index, text, bgColor, textColor = '#ffffff', yOffset = 0) => {
|
||
const meta = chart.getDatasetMeta(datasetIndex);
|
||
if (!meta.data[index]) return;
|
||
const element = meta.data[index];
|
||
if (element.skip) return;
|
||
|
||
const x = element.x;
|
||
const y = element.y + yOffset;
|
||
const paddingH = 10;
|
||
const paddingV = 6;
|
||
const radius = 8;
|
||
|
||
ctx.save();
|
||
ctx.font = 'bold 11px sans-serif';
|
||
const textW = ctx.measureText(text).width;
|
||
const w = textW + paddingH * 2;
|
||
const h = 18;
|
||
|
||
// 计算原始 left，并对左右边界做收缩，避免在最右/最左侧被裁剪
|
||
const chartLeft = chart.scales.x.left;
|
||
const chartRight = chart.scales.x.right;
|
||
let left = x - w / 2;
|
||
if (left < chartLeft) left = chartLeft;
|
||
if (left + w > chartRight) left = chartRight - w;
|
||
const centerX = left + w / 2;
|
||
|
||
const top = y - 24;
|
||
|
||
drawRoundRect(left, top, w, h, radius);
|
||
ctx.globalAlpha = 0.7;
|
||
ctx.fillStyle = bgColor;
|
||
ctx.fill();
|
||
|
||
ctx.globalAlpha = 0.7;
|
||
ctx.fillStyle = textColor;
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(text, centerX, top + h / 2);
|
||
ctx.restore();
|
||
};
|
||
|
||
// Resolve active elements (hover/focus) first — used to decide whether to show default labels
|
||
let activeElements = [];
|
||
if (chart.tooltip?._active?.length) {
|
||
activeElements = chart.tooltip._active;
|
||
} else {
|
||
activeElements = chart.getActiveElements();
|
||
}
|
||
|
||
const isBuyOrSellDataset = (ds) =>
|
||
!!ds && (ds.isTradePoint === true || ds.label === '买入' || ds.label === '卖出');
|
||
|
||
// 1. Draw default labels for first buy and sell points only when NOT focused/hovering
|
||
// datasets 顺序是动态的：主线(0) + 对比线(若干) + 买入 + 卖出
|
||
const buyDatasetIndex = datasets.findIndex(ds => ds?.label === '买入' || (ds?.isTradePoint === true && ds?.label === '买入'));
|
||
const sellDatasetIndex = datasets.findIndex(ds => ds?.label === '卖出' || (ds?.isTradePoint === true && ds?.label === '卖出'));
|
||
|
||
if (!activeElements?.length && buyDatasetIndex !== -1 && datasets[buyDatasetIndex]?.data) {
|
||
const firstBuyIndex = datasets[buyDatasetIndex].data.findIndex(v => v !== null && v !== undefined);
|
||
if (firstBuyIndex !== -1) {
|
||
let sellIndex = -1;
|
||
if (sellDatasetIndex !== -1 && datasets[sellDatasetIndex]?.data) {
|
||
sellIndex = datasets[sellDatasetIndex].data.findIndex(v => v !== null && v !== undefined);
|
||
}
|
||
const isCollision = (firstBuyIndex === sellIndex);
|
||
drawPointLabel(buyDatasetIndex, firstBuyIndex, '买入', primaryColor, '#ffffff', isCollision ? -20 : 0);
|
||
}
|
||
}
|
||
|
||
if (!activeElements?.length && sellDatasetIndex !== -1 && datasets[sellDatasetIndex]?.data) {
|
||
const firstSellIndex = datasets[sellDatasetIndex].data.findIndex(v => v !== null && v !== undefined);
|
||
if (firstSellIndex !== -1) {
|
||
drawPointLabel(sellDatasetIndex, firstSellIndex, '卖出', '#f87171');
|
||
}
|
||
}
|
||
|
||
// 2. Handle active elements (hover crosshair)
|
||
// 始终保留十字线与 X/Y 坐标轴对应标签（坐标参照）
|
||
if (activeElements && activeElements.length) {
|
||
const activePoint = activeElements[0];
|
||
const x = activePoint.element.x;
|
||
const y = activePoint.element.y;
|
||
const topY = chart.scales.y.top;
|
||
const bottomY = chart.scales.y.bottom;
|
||
const leftX = chart.scales.x.left;
|
||
const rightX = chart.scales.x.right;
|
||
|
||
ctx.save();
|
||
ctx.beginPath();
|
||
ctx.setLineDash([3, 3]);
|
||
ctx.lineWidth = 1;
|
||
ctx.strokeStyle = colors.muted;
|
||
|
||
// Draw vertical line
|
||
ctx.moveTo(x, topY);
|
||
ctx.lineTo(x, bottomY);
|
||
|
||
// Draw horizontal line (based on first point - usually the main line)
|
||
ctx.moveTo(leftX, y);
|
||
ctx.lineTo(rightX, y);
|
||
|
||
ctx.stroke();
|
||
|
||
// Draw labels
|
||
ctx.font = '10px sans-serif';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
|
||
// Draw Axis Labels：始终使用主线（净值涨跌幅，索引 0）作为数值来源，
|
||
// 避免对比线在悬停时显示自己的数值标签
|
||
const baseIndex = activePoint.index;
|
||
const labels = chart.data.labels;
|
||
const mainDataset = datasets[0];
|
||
|
||
if (labels && mainDataset && Array.isArray(mainDataset.data)) {
|
||
const dateStr = labels[baseIndex];
|
||
const value = mainDataset.data[baseIndex];
|
||
|
||
if (dateStr !== undefined && value !== undefined) {
|
||
// X axis label (date) with boundary clamping
|
||
const textWidth = ctx.measureText(dateStr).width + 8;
|
||
const chartLeft = chart.scales.x.left;
|
||
const chartRight = chart.scales.x.right;
|
||
let labelLeft = x - textWidth / 2;
|
||
if (labelLeft < chartLeft) labelLeft = chartLeft;
|
||
if (labelLeft + textWidth > chartRight) labelLeft = chartRight - textWidth;
|
||
const labelCenterX = labelLeft + textWidth / 2;
|
||
ctx.fillStyle = primaryColor;
|
||
ctx.fillRect(labelLeft, bottomY, textWidth, 16);
|
||
ctx.fillStyle = colors.crosshairText;
|
||
ctx.fillText(dateStr, labelCenterX, bottomY + 8);
|
||
|
||
// Y axis label (value) — 始终基于主线百分比
|
||
const valueStr = (typeof value === 'number' ? value.toFixed(2) : value) + '%';
|
||
const valWidth = ctx.measureText(valueStr).width + 8;
|
||
ctx.fillStyle = primaryColor;
|
||
ctx.fillRect(leftX, y - 8, valWidth, 16);
|
||
ctx.fillStyle = colors.crosshairText;
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText(valueStr, leftX + valWidth / 2, y);
|
||
}
|
||
}
|
||
|
||
// Check for collision between Buy and Sell in active elements
|
||
const activeBuy = activeElements.find(e => datasets?.[e.datasetIndex]?.label === '买入');
|
||
const activeSell = activeElements.find(e => datasets?.[e.datasetIndex]?.label === '卖出');
|
||
const isCollision = activeBuy && activeSell && activeBuy.index === activeSell.index;
|
||
|
||
// Iterate through active points，仅为买入/卖出绘制标签
|
||
activeElements.forEach(element => {
|
||
const dsIndex = element.datasetIndex;
|
||
const ds = datasets?.[dsIndex];
|
||
if (!isBuyOrSellDataset(ds)) return;
|
||
|
||
const label = ds.label;
|
||
const bgColor = label === '买入' ? primaryColor : colors.danger;
|
||
|
||
// 如果买入/卖出在同一天，买入标签上移避免遮挡
|
||
let yOffset = 0;
|
||
if (isCollision && label === '买入') {
|
||
yOffset = -20;
|
||
}
|
||
|
||
drawPointLabel(dsIndex, element.index, label, bgColor, '#ffffff', yOffset);
|
||
});
|
||
|
||
ctx.restore();
|
||
}
|
||
}
|
||
}];
|
||
}, [theme]); // theme 变化时重算以应用亮色/暗色坐标轴与 crosshair
|
||
|
||
const lastIndex = data.length > 0 ? data.length - 1 : null;
|
||
const currentIndex = activeIndex != null && activeIndex < data.length ? activeIndex : lastIndex;
|
||
|
||
const chartBlock = (
|
||
<>
|
||
{/* 顶部图示：说明不同颜色/标记代表的含义 */}
|
||
<div
|
||
className="row"
|
||
style={{ marginBottom: 8, gap: 12, alignItems: 'center', flexWrap: 'wrap', fontSize: 11 }}
|
||
>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||
<span
|
||
style={{
|
||
width: 10,
|
||
height: 2,
|
||
borderRadius: 999,
|
||
backgroundColor: lineColor
|
||
}}
|
||
/>
|
||
<span className="muted">本基金</span>
|
||
</div>
|
||
{currentIndex != null && percentageData[currentIndex] !== undefined && (
|
||
<span
|
||
className="muted"
|
||
style={{
|
||
fontSize: 10,
|
||
fontVariantNumeric: 'tabular-nums',
|
||
paddingLeft: 14,
|
||
}}
|
||
>
|
||
{percentageData[currentIndex].toFixed(2)}%
|
||
</span>
|
||
)}
|
||
</div>
|
||
{Array.isArray(data.grandTotalSeries) &&
|
||
!['1y', '3y', 'all'].includes(range) &&
|
||
data.grandTotalSeries
|
||
.filter((_, idx) => idx > 0)
|
||
.map((series, displayIdx) => {
|
||
const idx = displayIdx + 1;
|
||
const legendAccent3 = theme === 'light' ? '#f97316' : '#fb923c';
|
||
const legendColors = [
|
||
primaryColor,
|
||
chartColors.muted,
|
||
legendAccent3,
|
||
chartColors.text,
|
||
];
|
||
const color = legendColors[displayIdx % legendColors.length];
|
||
const key = `${series.name || 'series'}_${idx}`;
|
||
const isHidden = hiddenGrandSeries.has(key);
|
||
let valueText = '--';
|
||
if (!isHidden && currentIndex != null && data[currentIndex]) {
|
||
const targetDate = data[currentIndex].date;
|
||
|
||
// 与折线一致：对比线显示“相对当前区间首日”的累计收益率变化
|
||
const pointsArray = Array.isArray(series.points) ? series.points : [];
|
||
const pointsByDate = new Map(pointsArray.map(p => [p.date, p.value]));
|
||
|
||
let baseValue = null;
|
||
for (const d of data) {
|
||
const v = pointsByDate.get(d.date);
|
||
if (typeof v === 'number' && Number.isFinite(v)) {
|
||
baseValue = v;
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 注意：Data_grandTotal 某些对比线可能不包含区间最后一天的点。
|
||
// 旧逻辑是对 `targetDate` 做严格匹配，缺点就会得到 `--`。
|
||
// 新逻辑：找不到精确日期时，回退到该对比线在区间内最近的可用日期。
|
||
let rawPoint = pointsByDate.get(targetDate);
|
||
if ((rawPoint === undefined || rawPoint === null) && baseValue != null) {
|
||
for (let i = currentIndex; i >= 0; i--) {
|
||
const d = data[i];
|
||
if (!d) continue;
|
||
const v = pointsByDate.get(d.date);
|
||
if (typeof v === 'number' && Number.isFinite(v)) {
|
||
rawPoint = v;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (baseValue != null && typeof rawPoint === 'number' && Number.isFinite(rawPoint)) {
|
||
const normalized = rawPoint - baseValue;
|
||
valueText = `${normalized.toFixed(2)}%`;
|
||
}
|
||
}
|
||
return (
|
||
<div
|
||
key={series.name || idx}
|
||
style={{ display: 'flex', flexDirection: 'column', gap: 2 }}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setHiddenGrandSeries(prev => {
|
||
const next = new Set(prev);
|
||
if (next.has(key)) {
|
||
next.delete(key);
|
||
} else {
|
||
next.add(key);
|
||
}
|
||
return next;
|
||
});
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||
<span
|
||
style={{
|
||
width: 10,
|
||
height: 2,
|
||
borderRadius: 999,
|
||
backgroundColor: isHidden ? '#4b5563' : color,
|
||
}}
|
||
/>
|
||
<span
|
||
className="muted"
|
||
style={{ opacity: isHidden ? 0.5 : 1 }}
|
||
>
|
||
{series.name}
|
||
</span>
|
||
<button
|
||
className="muted"
|
||
type="button"
|
||
style={{
|
||
border: 'none',
|
||
padding: 0,
|
||
background: 'transparent',
|
||
cursor: 'pointer',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<svg
|
||
width="12"
|
||
height="12"
|
||
viewBox="0 0 24 24"
|
||
aria-hidden="true"
|
||
style={{ opacity: isHidden ? 0.4 : 0.9 }}
|
||
>
|
||
<path
|
||
d="M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="1.6"
|
||
/>
|
||
{isHidden && (
|
||
<line
|
||
x1="4"
|
||
y1="20"
|
||
x2="20"
|
||
y2="4"
|
||
stroke="currentColor"
|
||
strokeWidth="1.6"
|
||
/>
|
||
)}
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<span
|
||
className="muted"
|
||
style={{
|
||
fontSize: 10,
|
||
fontVariantNumeric: 'tabular-nums',
|
||
paddingLeft: 14,
|
||
minHeight: 14,
|
||
visibility: isHidden || valueText === '--' ? 'hidden' : 'visible',
|
||
}}
|
||
>
|
||
{valueText}
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<div style={{ position: 'relative', height: 180, width: '100%', touchAction: 'pan-y' }}>
|
||
{loading && (
|
||
<div className="chart-overlay" style={{ backdropFilter: 'blur(2px)' }}>
|
||
<span className="muted" style={{ fontSize: '12px' }}>加载中...</span>
|
||
</div>
|
||
)}
|
||
|
||
{!loading && data.length === 0 && (
|
||
<div className="chart-overlay">
|
||
<span className="muted" style={{ fontSize: '12px' }}>暂无数据</span>
|
||
</div>
|
||
)}
|
||
|
||
{data.length > 0 && (
|
||
<Line ref={chartRef} data={chartData} options={options} plugins={plugins} />
|
||
)}
|
||
</div>
|
||
|
||
<div className="trend-range-bar">
|
||
{ranges.map(r => (
|
||
<button
|
||
key={r.value}
|
||
type="button"
|
||
className={`trend-range-btn ${range === r.value ? 'active' : ''}`}
|
||
onClick={(e) => { e.stopPropagation(); setRange(r.value); }}
|
||
>
|
||
{r.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<FundHistoryNetValue code={code} range={range} theme={theme} />
|
||
</>
|
||
);
|
||
|
||
return (
|
||
<div style={{ marginTop: hideHeader ? 0 : 16 }} onClick={(e) => e.stopPropagation()}>
|
||
{!hideHeader && (
|
||
<div
|
||
style={{ marginBottom: 8, cursor: 'pointer', userSelect: 'none' }}
|
||
className="title"
|
||
onClick={onToggleExpand}
|
||
>
|
||
<div className="row" style={{ width: '100%', flex: 1 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||
<span>业绩走势</span>
|
||
<ChevronIcon
|
||
width="16"
|
||
height="16"
|
||
className="muted"
|
||
style={{
|
||
transform: !isExpanded ? 'rotate(-90deg)' : 'rotate(0deg)',
|
||
transition: 'transform 0.2s ease'
|
||
}}
|
||
/>
|
||
</div>
|
||
{data.length > 0 && (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<span className="muted">{ranges.find(r => r.value === range)?.label}涨跌幅</span>
|
||
<span style={{ color: lineColor, fontWeight: 600 }}>
|
||
{change > 0 ? '+' : ''}{change.toFixed(2)}%
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{hideHeader && data.length > 0 && (
|
||
<div className="row" style={{ marginBottom: 8, justifyContent: 'flex-end' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<span className="muted">{ranges.find(r => r.value === range)?.label}涨跌幅</span>
|
||
<span style={{ color: lineColor, fontWeight: 600 }}>
|
||
{change > 0 ? '+' : ''}{change.toFixed(2)}%
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{hideHeader ? (
|
||
chartBlock
|
||
) : (
|
||
<AnimatePresence>
|
||
{isExpanded && (
|
||
<motion.div
|
||
initial={{ height: 0, opacity: 0 }}
|
||
animate={{ height: 'auto', opacity: 1 }}
|
||
exit={{ height: 0, opacity: 0 }}
|
||
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||
style={{ overflow: 'hidden' }}
|
||
>
|
||
{chartBlock}
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|