1bde4b44c0
修复 React hooks 在 early return 之后调用导致的渲染崩溃， 将所有 useMemo 移至条件返回之前。趋势图三系列改用高对比色： 实际值(原色实线)、移动平均(青色短虚线)、趋势线(琥珀色长虚线)。
486 lines
18 KiB
TypeScript
486 lines
18 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { Line } from '@ant-design/charts';
|
|
import { Spin, Typography, Tag } from 'antd';
|
|
import { LineChartOutlined, CloseOutlined, WarningOutlined } from '@ant-design/icons';
|
|
import { healthDataApi } from '../../../api/health/healthData';
|
|
import { useThemeMode } from '../../../hooks/useThemeMode';
|
|
|
|
const { Text } = Typography;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// 统计计算工具函数（与后端 trend_stats.rs 对齐）
|
|
// ---------------------------------------------------------------------------
|
|
|
|
/** 最小二乘法线性回归 */
|
|
function linearRegression(points: { date: string; value: number }[]) {
|
|
const n = points.length;
|
|
if (n < 2) return null;
|
|
|
|
const xs = points.map((_, i) => i);
|
|
const ys = points.map((p) => p.value);
|
|
|
|
const sumX = xs.reduce((a, b) => a + b, 0);
|
|
const sumY = ys.reduce((a, b) => a + b, 0);
|
|
const sumXY = xs.reduce((acc, x, i) => acc + x * ys[i], 0);
|
|
const sumX2 = xs.reduce((acc, x) => acc + x * x, 0);
|
|
|
|
const denom = n * sumX2 - sumX * sumX;
|
|
if (Math.abs(denom) < 1e-10) return null;
|
|
|
|
const slope = (n * sumXY - sumX * sumY) / denom;
|
|
const intercept = (sumY - slope * sumX) / n;
|
|
|
|
const meanY = sumY / n;
|
|
const ssTot = ys.reduce((acc, y) => acc + (y - meanY) ** 2, 0);
|
|
const rSquared = ssTot > 0 ? 1 - ys.reduce((acc, y, i) => acc + (y - (intercept + slope * i)) ** 2, 0) / ssTot : 1;
|
|
|
|
return { slope, intercept, rSquared };
|
|
}
|
|
|
|
/** 移动平均 */
|
|
function movingAverage(values: number[], window: number): (number | null)[] {
|
|
if (values.length === 0 || window === 0) return [];
|
|
return values.map((_, i) => {
|
|
if (i + 1 < window) return null;
|
|
const slice = values.slice(i + 1 - window, i + 1);
|
|
return slice.reduce((a, b) => a + b, 0) / window;
|
|
});
|
|
}
|
|
|
|
/** 异常检测 */
|
|
function detectAnomalies(points: { date: string; value: number }[], threshold: number) {
|
|
if (points.length < 3) return new Set<number>();
|
|
|
|
const values = points.map((p) => p.value);
|
|
const n = values.length;
|
|
const mean = values.reduce((a, b) => a + b, 0) / n;
|
|
const variance = values.reduce((acc, v) => acc + (v - mean) ** 2, 0) / n;
|
|
const stdDev = Math.sqrt(variance);
|
|
|
|
if (stdDev < 1e-10) return new Set<number>();
|
|
|
|
const anomalies = new Set<number>();
|
|
values.forEach((v, i) => {
|
|
if (Math.abs((v - mean) / stdDev) > threshold) {
|
|
anomalies.add(i);
|
|
}
|
|
});
|
|
return anomalies;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// 组件
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface Props {
|
|
patientId: string;
|
|
refreshKey?: number;
|
|
}
|
|
|
|
interface MetricConfig {
|
|
key: string;
|
|
label: string;
|
|
unit: string;
|
|
color: string;
|
|
normalRange?: [number, number];
|
|
}
|
|
|
|
const METRICS: MetricConfig[] = [
|
|
{ key: 'systolic_bp_morning', label: '收缩压(晨)', unit: 'mmHg', color: '#ef4444', normalRange: [90, 140] },
|
|
{ key: 'diastolic_bp_morning', label: '舒张压(晨)', unit: 'mmHg', color: '#f97316', normalRange: [60, 90] },
|
|
{ key: 'heart_rate', label: '心率', unit: 'bpm', color: '#3b82f6', normalRange: [60, 100] },
|
|
{ key: 'weight', label: '体重', unit: 'kg', color: '#10b981' },
|
|
{ key: 'blood_sugar', label: '血糖', unit: 'mmol/L', color: '#8b5cf6', normalRange: [3.9, 6.1] },
|
|
];
|
|
|
|
interface MetricData {
|
|
points: { date: string; value: number }[];
|
|
latest: number | null;
|
|
}
|
|
|
|
function extractData(res: unknown): { date: string; value: number }[] {
|
|
const raw = (res as { data?: { date: string; value: number }[] })?.data;
|
|
const arr = Array.isArray(res) ? res : Array.isArray(raw) ? raw : [];
|
|
return arr.filter((d) => d?.value != null);
|
|
}
|
|
|
|
const emptyData: MetricData = { points: [], latest: null };
|
|
|
|
/** 概览卡片 — 指标名 + 最新值 + 趋势方向 + 微型趋势线 */
|
|
function MetricCard({
|
|
metric,
|
|
metricData,
|
|
selected,
|
|
onClick,
|
|
trendDirection,
|
|
anomalyCount,
|
|
}: {
|
|
metric: MetricConfig;
|
|
metricData: MetricData;
|
|
selected: boolean;
|
|
onClick: () => void;
|
|
trendDirection: 'rising' | 'falling' | 'stable' | null;
|
|
anomalyCount: number;
|
|
}) {
|
|
const hasData = metricData.points.length > 0;
|
|
const cardStyle: React.CSSProperties = {
|
|
minWidth: 130,
|
|
padding: '8px 12px',
|
|
background: 'var(--ant-color-bg-container, #fafafa)',
|
|
borderRadius: 8,
|
|
border: selected
|
|
? `2px solid ${metric.color}`
|
|
: '1px solid var(--ant-color-border-secondary, #f0f0f0)',
|
|
cursor: hasData ? 'pointer' : 'default',
|
|
transition: 'border-color 0.2s, box-shadow 0.2s',
|
|
flex: '0 0 auto',
|
|
...(selected && hasData ? { boxShadow: `0 0 0 1px ${metric.color}22` } : {}),
|
|
};
|
|
|
|
const directionIcon = trendDirection === 'rising' ? '↑' : trendDirection === 'falling' ? '↓' : '→';
|
|
const directionColor = trendDirection === 'rising' ? '#ef4444' : trendDirection === 'falling' ? '#3b82f6' : '#94a3b8';
|
|
|
|
return (
|
|
<div style={cardStyle} onClick={hasData ? onClick : undefined}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
|
|
<Text style={{ fontSize: 11, color: 'var(--ant-color-text-secondary)' }}>{metric.label}</Text>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
|
{anomalyCount > 0 && (
|
|
<WarningOutlined style={{ fontSize: 10, color: '#ef4444' }} />
|
|
)}
|
|
{trendDirection && (
|
|
<span style={{ fontSize: 11, color: directionColor, fontWeight: 600 }}>{directionIcon}</span>
|
|
)}
|
|
{metricData.latest != null && (
|
|
<Text style={{ fontSize: 12, fontWeight: 600, color: metric.color }}>
|
|
{metricData.latest}
|
|
<span style={{ fontWeight: 400, fontSize: 10, marginLeft: 2 }}>{metric.unit}</span>
|
|
</Text>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{hasData ? (
|
|
<Line
|
|
data={metricData.points}
|
|
xField="date"
|
|
yField="value"
|
|
smooth
|
|
height={32}
|
|
axis={false}
|
|
point={false}
|
|
style={{ lineWidth: 1.5, stroke: metric.color }}
|
|
tooltip={false}
|
|
/>
|
|
) : (
|
|
<div style={{ height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<Text type="secondary" style={{ fontSize: 10 }}>暂无数据</Text>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function VitalSignsChart({ patientId, refreshKey }: Props) {
|
|
const [metricsData, setMetricsData] = useState<Record<string, MetricData>>({});
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectedKey, setSelectedKey] = useState<string | null>(null);
|
|
const isDark = useThemeMode();
|
|
|
|
useEffect(() => {
|
|
if (!patientId) return;
|
|
setLoading(true);
|
|
|
|
Promise.allSettled(
|
|
METRICS.map((m) =>
|
|
healthDataApi
|
|
.getIndicatorTimeseries(patientId, m.key)
|
|
.then(extractData)
|
|
.then((points) => ({
|
|
key: m.key,
|
|
data: { points, latest: points.length > 0 ? points[points.length - 1].value : null },
|
|
}))
|
|
)
|
|
).then((results) => {
|
|
const map: Record<string, MetricData> = {};
|
|
results.forEach((r, i) => {
|
|
if (r.status === 'fulfilled') {
|
|
map[r.value.key] = r.value.data;
|
|
} else {
|
|
map[METRICS[i].key] = emptyData;
|
|
}
|
|
});
|
|
setMetricsData(map);
|
|
setLoading(false);
|
|
});
|
|
}, [patientId, refreshKey]);
|
|
|
|
// 趋势统计 — 所有 hooks 必须在 early return 之前调用
|
|
const trendStats = useMemo(() => {
|
|
const stats: Record<string, {
|
|
regression: ReturnType<typeof linearRegression>;
|
|
ma: (number | null)[];
|
|
anomalyIndices: Set<number>;
|
|
}> = {};
|
|
|
|
for (const m of METRICS) {
|
|
const data = metricsData[m.key];
|
|
if (!data || data.points.length < 2) {
|
|
stats[m.key] = { regression: null, ma: [], anomalyIndices: new Set() };
|
|
continue;
|
|
}
|
|
|
|
const regression = linearRegression(data.points);
|
|
const values = data.points.map((p) => p.value);
|
|
const maWindow = Math.min(7, Math.max(3, Math.floor(values.length / 3)));
|
|
const ma = movingAverage(values, maWindow);
|
|
const anomalyIndices = detectAnomalies(data.points, 2.0);
|
|
|
|
stats[m.key] = { regression, ma, anomalyIndices };
|
|
}
|
|
return stats;
|
|
}, [metricsData]);
|
|
|
|
const selectedMetric = METRICS.find((m) => m.key === selectedKey);
|
|
const selectedData = selectedKey ? metricsData[selectedKey] : null;
|
|
const axisLabelStyle = { fill: isDark ? '#94a3b8' : '#475569' };
|
|
|
|
const chartSeries = useMemo(() => {
|
|
if (!selectedKey || !selectedData) return [];
|
|
const stat = trendStats[selectedKey];
|
|
if (!stat) return [];
|
|
|
|
const points = selectedData.points;
|
|
const series: { date: string; value: number; series: string; isAnomaly?: boolean }[] = [];
|
|
|
|
points.forEach((p, i) => {
|
|
series.push({
|
|
date: p.date,
|
|
value: p.value,
|
|
series: '实际值',
|
|
isAnomaly: stat.anomalyIndices.has(i),
|
|
});
|
|
});
|
|
|
|
stat.ma.forEach((val, i) => {
|
|
if (val != null) {
|
|
series.push({
|
|
date: points[i].date,
|
|
value: val,
|
|
series: '移动平均',
|
|
});
|
|
}
|
|
});
|
|
|
|
if (stat.regression) {
|
|
const { intercept, slope } = stat.regression;
|
|
points.forEach((p, i) => {
|
|
series.push({
|
|
date: p.date,
|
|
value: intercept + slope * i,
|
|
series: '趋势线',
|
|
});
|
|
});
|
|
}
|
|
|
|
return series;
|
|
}, [selectedKey, selectedData, trendStats]);
|
|
|
|
const getTrendDirection = (key: string): 'rising' | 'falling' | 'stable' | null => {
|
|
const stat = trendStats[key];
|
|
if (!stat?.regression) return null;
|
|
const { slope } = stat.regression;
|
|
if (Math.abs(slope) < 0.01) return 'stable';
|
|
return slope > 0 ? 'rising' : 'falling';
|
|
};
|
|
|
|
const trendDescription = useMemo(() => {
|
|
if (!selectedKey || !selectedData || !trendStats[selectedKey]) return null;
|
|
const stat = trendStats[selectedKey];
|
|
if (!stat?.regression) return null;
|
|
|
|
const { slope, rSquared } = stat.regression;
|
|
const direction = getTrendDirection(selectedKey);
|
|
const anomalyCount = stat.anomalyIndices.size;
|
|
const points = selectedData.points;
|
|
const totalChange = slope * (points.length - 1);
|
|
|
|
return {
|
|
direction: direction === 'rising' ? '上升' : direction === 'falling' ? '下降' : '平稳',
|
|
slope,
|
|
rSquared,
|
|
totalChange,
|
|
periodDays: points.length > 1 ? points.length : 0,
|
|
anomalyCount,
|
|
};
|
|
}, [selectedKey, selectedData, trendStats]);
|
|
|
|
// Early returns — 放在所有 hooks 之后
|
|
if (loading) {
|
|
return (
|
|
<div style={{ height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<Spin size="small" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const hasAnyData = Object.values(metricsData).some((d) => d.points.length > 0);
|
|
if (!hasAnyData) {
|
|
return (
|
|
<div style={{
|
|
height: 48,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: 'var(--ant-color-bg-container, #fafafa)',
|
|
borderRadius: 6,
|
|
border: '1px dashed var(--ant-color-border, #d9d9d9)',
|
|
}}>
|
|
<LineChartOutlined style={{ fontSize: 14, color: '#bfbfbf', marginRight: 6 }} />
|
|
<Text type="secondary" style={{ fontSize: 12 }}>暂无趋势数据</Text>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{/* 概览卡片条 */}
|
|
<div style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 4 }}>
|
|
{METRICS.map((m) => (
|
|
<MetricCard
|
|
key={m.key}
|
|
metric={m}
|
|
metricData={metricsData[m.key] ?? emptyData}
|
|
selected={selectedKey === m.key}
|
|
onClick={() => setSelectedKey((prev) => (prev === m.key ? null : m.key))}
|
|
trendDirection={getTrendDirection(m.key)}
|
|
anomalyCount={trendStats[m.key]?.anomalyIndices.size ?? 0}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* 详情图区域 */}
|
|
{selectedMetric && selectedData && selectedData.points.length > 0 && (
|
|
<div style={{
|
|
marginTop: 12,
|
|
padding: 16,
|
|
background: 'var(--ant-color-bg-container, #fafafa)',
|
|
borderRadius: 8,
|
|
border: '1px solid var(--ant-color-border-secondary, #f0f0f0)',
|
|
}}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
|
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
|
|
<Text style={{ fontSize: 14, fontWeight: 600 }}>{selectedMetric.label}</Text>
|
|
<Text style={{ fontSize: 18, fontWeight: 700, color: selectedMetric.color }}>
|
|
{selectedData.latest}
|
|
</Text>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>{selectedMetric.unit}</Text>
|
|
{trendDescription && (
|
|
<Tag color={
|
|
trendDescription.direction === '上升' ? 'red' :
|
|
trendDescription.direction === '下降' ? 'blue' : 'default'
|
|
} style={{ marginLeft: 4, fontSize: 11 }}>
|
|
{trendDescription.direction} ({trendDescription.totalChange > 0 ? '+' : ''}{trendDescription.totalChange.toFixed(1)})
|
|
</Tag>
|
|
)}
|
|
</div>
|
|
<div
|
|
onClick={() => setSelectedKey(null)}
|
|
style={{ cursor: 'pointer', padding: '2px 6px', borderRadius: 4, color: 'var(--ant-color-text-secondary)' }}
|
|
>
|
|
<CloseOutlined style={{ fontSize: 12 }} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* 趋势统计摘要 */}
|
|
{trendDescription && (
|
|
<div style={{ display: 'flex', gap: 12, marginBottom: 8, flexWrap: 'wrap' }}>
|
|
<Text type="secondary" style={{ fontSize: 11 }}>
|
|
趋势斜率: {trendDescription.slope > 0 ? '+' : ''}{trendDescription.slope.toFixed(2)}/{selectedMetric.unit}/天
|
|
</Text>
|
|
<Text type="secondary" style={{ fontSize: 11 }}>
|
|
R²: {trendDescription.rSquared.toFixed(3)}
|
|
</Text>
|
|
{trendDescription.anomalyCount > 0 && (
|
|
<Text style={{ fontSize: 11, color: '#ef4444' }}>
|
|
<WarningOutlined style={{ marginRight: 2 }} />
|
|
{trendDescription.anomalyCount} 个异常点
|
|
</Text>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<Line
|
|
data={chartSeries}
|
|
xField="date"
|
|
yField="value"
|
|
colorField="series"
|
|
height={240}
|
|
axis={{
|
|
x: { labelAutoRotate: true, label: { style: axisLabelStyle } },
|
|
y: { title: selectedMetric.unit, label: { style: axisLabelStyle } },
|
|
}}
|
|
style={{
|
|
lineWidth: (datum: Record<string, unknown>) => {
|
|
const series = datum.series as string;
|
|
if (series === '趋势线') return 1.5;
|
|
if (series === '移动平均') return 2;
|
|
return 2.5;
|
|
},
|
|
stroke: (datum: Record<string, unknown>) => {
|
|
const series = datum.series as string;
|
|
if (series === '趋势线') return '#f59e0b';
|
|
if (series === '移动平均') return '#14b8a6';
|
|
return selectedMetric.color;
|
|
},
|
|
lineDash: (datum: Record<string, unknown>) => {
|
|
const series = datum.series as string;
|
|
if (series === '趋势线') return [8, 4];
|
|
if (series === '移动平均') return [4, 2];
|
|
return [];
|
|
},
|
|
}}
|
|
point={{
|
|
shapeField: 'circle',
|
|
sizeField: 4,
|
|
style: {
|
|
fill: (datum: Record<string, unknown>) => {
|
|
if (datum.isAnomaly) return '#ef4444';
|
|
return selectedMetric.color;
|
|
},
|
|
r: (datum: Record<string, unknown>) => {
|
|
if (datum.isAnomaly) return 5;
|
|
return 3;
|
|
},
|
|
},
|
|
}}
|
|
tooltip={{
|
|
title: (d: Record<string, unknown>) => d.date as string,
|
|
items: [{ channel: 'y', valueFormatter: (v: number) => `${v} ${selectedMetric.unit}` }],
|
|
}}
|
|
/>
|
|
|
|
{/* 图例说明 */}
|
|
<div style={{ display: 'flex', gap: 16, marginTop: 4, justifyContent: 'center' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
|
<div style={{ width: 16, height: 2.5, background: selectedMetric.color, borderRadius: 1 }} />
|
|
<Text type="secondary" style={{ fontSize: 10 }}>实际值</Text>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
|
<div style={{ width: 16, height: 2, background: '#14b8a6', borderRadius: 1, backgroundRepeat: 'repeat-x', backgroundImage: 'linear-gradient(#14b8a6, #14b8a6)', backgroundSize: '4px 2px', backgroundPosition: '0 0' }} />
|
|
<Text type="secondary" style={{ fontSize: 10 }}>移动平均</Text>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
|
<div style={{ width: 16, borderTop: '2px dashed #f59e0b' }} />
|
|
<Text type="secondary" style={{ fontSize: 10 }}>趋势线</Text>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
|
<div style={{ width: 8, height: 8, borderRadius: '50%', background: '#ef4444' }} />
|
|
<Text type="secondary" style={{ fontSize: 10 }}>异常点</Text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|