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.
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
interface StatCardProps {
|
|
label: string;
|
|
value: string | number;
|
|
change?: string;
|
|
changeType?: 'up' | 'down' | 'neutral';
|
|
progress?: number;
|
|
progressColor?: string;
|
|
}
|
|
|
|
export function StatCard({
|
|
label,
|
|
value,
|
|
change,
|
|
changeType = 'neutral',
|
|
progress,
|
|
progressColor = 'bg-warning',
|
|
}: StatCardProps) {
|
|
return (
|
|
<div className="card p-4">
|
|
<div className="text-[11px] font-medium text-text-muted uppercase tracking-wide mb-1.5">
|
|
{label}
|
|
</div>
|
|
<div className="font-display text-[26px] font-bold text-text-primary mb-1">
|
|
{value}
|
|
</div>
|
|
{change && (
|
|
<div className={`text-[11px] ${
|
|
changeType === 'up' ? 'text-danger' :
|
|
changeType === 'down' ? 'text-success' : 'text-text-muted'
|
|
}`}>
|
|
{change}
|
|
</div>
|
|
)}
|
|
{progress !== undefined && (
|
|
<div className="h-[3px] bg-bg-page rounded mt-2.5 overflow-hidden">
|
|
<div
|
|
className={`h-full rounded ${progressColor}`}
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|