feat:业绩走势对比线数据格式化问题
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -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"]')) {
|
||||||
|
|||||||
Reference in New Issue
Block a user