feat:业绩走势对比线数据格式化问题

This commit is contained in:
hzm
2026-03-16 21:44:49 +08:00
parent 26bb966f90
commit ac591c54c4
2 changed files with 53 additions and 25 deletions

View File

@@ -166,14 +166,28 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
const key = `${series.name || 'series'}_${idx}`; const key = `${series.name || 'series'}_${idx}`;
const isHidden = hiddenGrandSeries.has(key); const isHidden = hiddenGrandSeries.has(key);
const pointsByDate = new Map(series.points.map(p => [p.date, p.value])); const pointsByDate = new Map(series.points.map(p => [p.date, p.value]));
const seriesData = labels.map(date => {
// 方案 2将对比线同样归一到当前区间首日展示为“相对本区间首日的累计收益率百分点变化
let baseValue = null;
for (const date of labels) {
const v = pointsByDate.get(date); const v = pointsByDate.get(date);
if (isHidden) return null; if (typeof v === 'number' && Number.isFinite(v)) {
return typeof v === 'number' ? v : null; 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 { return {
type: 'line', type: 'line',
label: series.name || '累计收益', label: series.name || '累计收益',
data: seriesData, data: seriesData,
borderColor: color, borderColor: color,
backgroundColor: color, backgroundColor: color,
@@ -191,7 +205,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
datasets: [ datasets: [
{ {
type: 'line', type: 'line',
label: '净值涨跌幅', label: '本基金',
data: percentageData, data: percentageData,
borderColor: lineColor, borderColor: lineColor,
backgroundColor: (context) => { backgroundColor: (context) => {
@@ -576,7 +590,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
backgroundColor: lineColor backgroundColor: lineColor
}} }}
/> />
<span className="muted">净值涨跌幅</span> <span className="muted">本基金</span>
</div> </div>
{currentIndex != null && percentageData[currentIndex] !== undefined && ( {currentIndex != null && percentageData[currentIndex] !== undefined && (
<span <span
@@ -607,11 +621,24 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
let valueText = '--'; let valueText = '--';
if (!isHidden && currentIndex != null && data[currentIndex]) { if (!isHidden && currentIndex != null && data[currentIndex]) {
const targetDate = data[currentIndex].date; const targetDate = data[currentIndex].date;
const point = Array.isArray(series.points)
? series.points.find(p => p.date === targetDate) // 与折线一致:对比线显示“相对当前区间首日”的累计收益率变化
: null; const pointsArray = Array.isArray(series.points) ? series.points : [];
if (point && typeof point.value === 'number') { const pointsByDate = new Map(pointsArray.map(p => [p.date, p.value]));
valueText = `${point.value.toFixed(2)}%`;
let baseValue = null;
for (const d of data) {
const v = pointsByDate.get(d.date);
if (typeof v === 'number' && Number.isFinite(v)) {
baseValue = v;
break;
}
}
const rawPoint = pointsByDate.get(targetDate);
if (baseValue != null && typeof rawPoint === 'number' && Number.isFinite(rawPoint)) {
const normalized = rawPoint - baseValue;
valueText = `${normalized.toFixed(2)}%`;
} }
} }
return ( return (
@@ -644,9 +671,10 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
className="muted" className="muted"
style={{ opacity: isHidden ? 0.5 : 1 }} style={{ opacity: isHidden ? 0.5 : 1 }}
> >
{series.name || '累计收益'} {series.name}
</span> </span>
<button <button
className="muted"
type="button" type="button"
style={{ style={{
border: 'none', border: 'none',
@@ -683,18 +711,18 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
</svg> </svg>
</button> </button>
</div> </div>
{!isHidden && valueText !== '--' && (
<span <span
className="muted" className="muted"
style={{ style={{
fontSize: 10, fontSize: 10,
fontVariantNumeric: 'tabular-nums', fontVariantNumeric: 'tabular-nums',
paddingLeft: 14, paddingLeft: 14,
minHeight: 14,
visibility: isHidden || valueText === '--' ? 'hidden' : 'visible',
}} }}
> >
{valueText} {valueText}
</span> </span>
)}
</div> </div>
); );
})} })}

View File

@@ -47,7 +47,7 @@ export default function MobileFundCardDrawer({
{children} {children}
</DrawerTrigger> </DrawerTrigger>
<DrawerContent <DrawerContent
className="h-[77vh] max-h-[88vh] mt-0 flex flex-col" className="h-[85vh] max-h-[90vh] mt-0 flex flex-col"
onPointerDownOutside={(e) => { onPointerDownOutside={(e) => {
if (blockDrawerClose) return; if (blockDrawerClose) return;
if (e?.target?.closest?.('[data-slot="dialog-content"], [role="dialog"]')) { if (e?.target?.closest?.('[data-slot="dialog-content"], [role="dialog"]')) {