fix(ui): 暴力重构净值图表数据流,彻底对齐法币本金渲染
This commit is contained in:
@@ -6,19 +6,30 @@ interface Snapshot {
|
||||
date: string;
|
||||
totalValueCny: string;
|
||||
totalCostCny: string;
|
||||
total_value_cny?: string;
|
||||
total_cost_cny?: string;
|
||||
}
|
||||
|
||||
interface ChartDatum {
|
||||
date: string;
|
||||
totalValueCny: number;
|
||||
totalCostCny: number;
|
||||
_raw: Snapshot;
|
||||
}
|
||||
|
||||
interface NetWorthChartProps {
|
||||
snapshots: Snapshot[];
|
||||
}
|
||||
|
||||
function CustomTooltip({ active, payload, label }: { active?: boolean; payload?: Array<{ name: string; value: string; payload: Snapshot }>; label?: string }) {
|
||||
function CustomTooltip({ active, payload, label }: { active?: boolean; payload?: Array<{ name: string; value: string; payload: any }>; label?: string }) {
|
||||
if (active && payload && payload.length) {
|
||||
const data = payload[0].payload;
|
||||
const totalValue = parseFloat(data.totalValueCny);
|
||||
const totalCost = parseFloat(data.totalCostCny);
|
||||
const pnl = totalValue - totalCost;
|
||||
const pnlPercent = totalCost > 0 ? (pnl / totalCost) * 100 : 0;
|
||||
const dataNode = payload[0].payload;
|
||||
|
||||
const value = Number(dataNode.totalValueCny || dataNode._raw?.totalValueCny || 0) || 0;
|
||||
const cost = Number(dataNode.totalCostCny || dataNode._raw?.totalCostCny || 0) || 0;
|
||||
|
||||
const pnl = value - cost;
|
||||
const pnlPercent = cost > 0 ? (pnl / cost) * 100 : 0;
|
||||
const isPositive = pnl >= 0;
|
||||
|
||||
const formattedDate = (label || '').replace(/-/g, '/');
|
||||
@@ -42,7 +53,7 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
|
||||
总市值
|
||||
</span>
|
||||
<span style={{ fontWeight: '700', color: '#f59e0b' }}>
|
||||
¥{totalValue.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
¥{value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', gap: '24px', marginBottom: '4px' }}>
|
||||
@@ -51,7 +62,7 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
|
||||
投入本金
|
||||
</span>
|
||||
<span style={{ fontWeight: '600', color: 'hsl(var(--muted-foreground))' }}>
|
||||
¥{totalCost.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
¥{cost.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', gap: '24px', paddingTop: '6px', borderTop: '1px solid hsl(var(--border))' }}>
|
||||
@@ -79,11 +90,18 @@ export default function NetWorthChart({ snapshots }: NetWorthChartProps) {
|
||||
);
|
||||
}
|
||||
|
||||
const chartData = snapshots.map(s => ({
|
||||
date: s.date.replace(/-/g, '/'),
|
||||
totalValueCny: parseFloat(s.totalValueCny),
|
||||
totalCostCny: parseFloat(s.totalCostCny),
|
||||
}));
|
||||
console.log("【CHART DATA DEBUG】", snapshots[0]);
|
||||
|
||||
const chartData = snapshots.map(s => {
|
||||
const totalValueCny = parseFloat(s.totalValueCny) || parseFloat((s as any).total_value_cny || 0);
|
||||
const totalCostCny = parseFloat(s.totalCostCny) || parseFloat((s as any).total_cost_cny || 0);
|
||||
return {
|
||||
date: s.date.replace(/-/g, '/'),
|
||||
totalValueCny,
|
||||
totalCostCny,
|
||||
_raw: s,
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="h-[320px] w-full">
|
||||
|
||||
Reference in New Issue
Block a user