Akiba So
fc468464b2
Context: Build a spatial risk assessment system correlating air quality data with children's respiratory disease incidence across Wuhan. Approach: FastAPI backend serving PostGIS spatial queries, React frontend with Deck.gl maps, and a PyTorch SpatialTemporalGCN pipeline for multi-day (1d/3d/7d) risk prediction. Changes: - backend/ — FastAPI API with auth (JWT), alerts, risk analysis, geocoded case data, grid statistics, and report endpoints - frontend/ — React dashboard with interactive risk maps, alert monitoring, district comparison charts, and timeline player - models/ — SpatialTemporalGCN model with trained weights and ONNX export for inference - scripts/ — ETL pipeline for weather + medical data, grid generation, feature engineering, training, and daily inference - deploy/ — Docker Compose configs for backend, frontend, and MLflow - docs/ — API docs, deployment guide, user guide, and code review Impact: Enables spatial risk visualization, alert monitoring, and ML-driven health risk forecasting for environmental health teams.
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
interface DistributionChartProps {
|
|
distribution: {
|
|
high: number;
|
|
medium_high: number;
|
|
medium: number;
|
|
medium_low: number;
|
|
low: number;
|
|
};
|
|
}
|
|
|
|
const LEVELS = [
|
|
{ key: 'high', label: '高风险 (86-100%)', color: 'bg-danger' },
|
|
{ key: 'medium_high', label: '中高风险 (71-85%)', color: 'bg-[#FB923C]' },
|
|
{ key: 'medium', label: '中风险 (51-70%)', color: 'bg-warning' },
|
|
{ key: 'medium_low', label: '中低风险 (31-50%)', color: 'bg-[#7DD3FC]' },
|
|
{ key: 'low', label: '低风险 (0-30%)', color: 'bg-success' },
|
|
];
|
|
|
|
export function DistributionChart({ distribution }: DistributionChartProps) {
|
|
const total = Object.values(distribution).reduce((sum, val) => sum + val, 0);
|
|
|
|
return (
|
|
<div className="card p-4 h-fit">
|
|
<div className="text-[11px] font-medium text-text-muted uppercase tracking-wide mb-4">
|
|
风险等级分布
|
|
</div>
|
|
|
|
{LEVELS.map((level) => {
|
|
const value = distribution[level.key as keyof typeof distribution];
|
|
const percentage = total > 0 ? (value / total) * 100 : 0;
|
|
|
|
return (
|
|
<div key={level.key} className="mb-3.5 last:mb-0">
|
|
<div className="flex justify-between mb-1.5">
|
|
<span className="text-[12px] text-text-secondary">{level.label}</span>
|
|
<span className="text-[12px] font-semibold">
|
|
{value} ({percentage.toFixed(1)}%)
|
|
</span>
|
|
</div>
|
|
<div className="h-[5px] bg-bg-page rounded overflow-hidden">
|
|
<div
|
|
className={`h-full rounded ${level.color}`}
|
|
style={{ width: `${percentage}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|