403 lines
23 KiB
TypeScript
403 lines
23 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useMemo } from 'react'
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
LineChart,
|
|
Line,
|
|
Area,
|
|
AreaChart,
|
|
} from 'recharts'
|
|
import { TrendingUp, TrendingDown, Minus, BarChart2, Activity, Percent } from 'lucide-react'
|
|
|
|
interface RawData {
|
|
status_stunting: boolean
|
|
tanggal_upload: string
|
|
nama_posyandu: string
|
|
}
|
|
|
|
interface Props {
|
|
data: RawData[]
|
|
availableYears: number[]
|
|
}
|
|
|
|
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Ags', 'Sep', 'Okt', 'Nov', 'Des']
|
|
|
|
const CustomTooltip = ({ active, payload, label }: any) => {
|
|
if (active && payload && payload.length) {
|
|
const stunting = payload.find((p: any) => p.dataKey === 'stunting')?.value ?? 0
|
|
const normal = payload.find((p: any) => p.dataKey === 'normal')?.value ?? 0
|
|
const total = stunting + normal
|
|
const pct = total > 0 ? ((stunting / total) * 100).toFixed(1) : '0.0'
|
|
|
|
return (
|
|
<div className="bg-white border-2 border-black rounded-xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] px-4 py-3 text-sm">
|
|
<p className="font-bold text-black mb-2">{label}</p>
|
|
<div className="flex flex-col gap-1">
|
|
<div className="flex items-center justify-between gap-6">
|
|
<span className="flex items-center gap-1.5">
|
|
<span className="w-2.5 h-2.5 rounded-full bg-red-500 inline-block" />
|
|
Stunting
|
|
</span>
|
|
<span className="font-bold text-red-600">{stunting}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-6">
|
|
<span className="flex items-center gap-1.5">
|
|
<span className="w-2.5 h-2.5 rounded-full bg-emerald-500 inline-block" />
|
|
Normal
|
|
</span>
|
|
<span className="font-bold text-emerald-600">{normal}</span>
|
|
</div>
|
|
<div className="border-t border-gray-200 mt-1 pt-1 flex items-center justify-between">
|
|
<span className="text-gray-500">Prevalensi</span>
|
|
<span className="font-bold">{pct}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
return null
|
|
}
|
|
|
|
export function StuntingChart({ data, availableYears }: Props) {
|
|
const [selectedYear, setSelectedYear] = useState<number>(availableYears[0] ?? 2026)
|
|
const [chartType, setChartType] = useState<'bar' | 'area'>('bar')
|
|
const [selectedPosyandu, setSelectedPosyandu] = useState<string>('all')
|
|
|
|
// Unique posyandu list
|
|
const posyanduList = useMemo(() => {
|
|
return Array.from(new Set(data.map(d => d.nama_posyandu).filter(Boolean))).sort()
|
|
}, [data])
|
|
|
|
// Active data after posyandu filter
|
|
const filteredData = useMemo(() => {
|
|
if (selectedPosyandu === 'all') return data
|
|
return data.filter(d => d.nama_posyandu === selectedPosyandu)
|
|
}, [data, selectedPosyandu])
|
|
|
|
// Process data for the selected year into 12 months
|
|
const chartData = useMemo(() => {
|
|
return MONTHS.map((month, idx) => {
|
|
const monthNum = idx + 1
|
|
const filtered = filteredData.filter(d => {
|
|
if (!d.tanggal_upload) return false
|
|
const date = new Date(d.tanggal_upload)
|
|
return date.getFullYear() === selectedYear && date.getMonth() + 1 === monthNum
|
|
})
|
|
const stunting = filtered.filter(d => d.status_stunting === true).length
|
|
const normal = filtered.filter(d => d.status_stunting === false).length
|
|
const total = stunting + normal
|
|
const prevalensi = total > 0 ? parseFloat(((stunting / total) * 100).toFixed(1)) : 0
|
|
|
|
return { month, stunting, normal, total, prevalensi }
|
|
})
|
|
}, [filteredData, selectedYear])
|
|
|
|
// Summary stats for selected year
|
|
const totalStunting = chartData.reduce((s, d) => s + d.stunting, 0)
|
|
const totalNormal = chartData.reduce((s, d) => s + d.normal, 0)
|
|
const totalAll = totalStunting + totalNormal
|
|
const prevalensiTotal = totalAll > 0 ? ((totalStunting / totalAll) * 100).toFixed(1) : '0.0'
|
|
|
|
// Trend: compare current year vs previous year prevalensi
|
|
const prevYearTotal = filteredData.filter(d => {
|
|
if (!d.tanggal_upload) return false
|
|
return new Date(d.tanggal_upload).getFullYear() === selectedYear - 1
|
|
})
|
|
const prevStunting = prevYearTotal.filter(d => d.status_stunting === true).length
|
|
const prevAll = prevYearTotal.length
|
|
const hasPrevData = prevAll > 0
|
|
const prevPrevalensi = hasPrevData ? (prevStunting / prevAll) * 100 : null
|
|
const currPrevalensiNum = totalAll > 0 ? (totalStunting / totalAll) * 100 : null
|
|
const trend: 'up' | 'down' | 'stable' | null =
|
|
hasPrevData && currPrevalensiNum !== null
|
|
? currPrevalensiNum > prevPrevalensi! ? 'up'
|
|
: currPrevalensiNum < prevPrevalensi! ? 'down'
|
|
: 'stable'
|
|
: null
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
{/* Dynamic Card Title */}
|
|
<div className="flex items-center gap-4 mb-2 pb-6 border-b border-gray-100">
|
|
<div className="w-14 h-14 rounded-full bg-blue-50 border-2 border-blue-200 flex items-center justify-center text-blue-600 flex-shrink-0">
|
|
<TrendingUp className="w-7 h-7" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-bold">
|
|
{selectedPosyandu === 'all'
|
|
? 'Data Tren Stunting Semua Posyandu'
|
|
: `Data Tren Stunting — ${selectedPosyandu}`}
|
|
</h2>
|
|
<p className="text-sm text-gray-500">
|
|
{selectedPosyandu === 'all'
|
|
? 'Menampilkan data dari semua posyandu · Pilih posyandu untuk melihat per lokasi'
|
|
: `Filter aktif: ${selectedPosyandu} · Pilih "Semua Posyandu" untuk melihat keseluruhan`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Controls Row */}
|
|
<div className="flex flex-wrap items-center gap-4 justify-between">
|
|
{/* Filters */}
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
{/* Year Filter */}
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-bold uppercase tracking-widest text-gray-500">Periode:</span>
|
|
<select
|
|
value={selectedYear}
|
|
onChange={e => setSelectedYear(Number(e.target.value))}
|
|
className="border-2 border-black rounded-lg px-3 py-1.5 text-sm font-bold bg-white focus:outline-none shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] cursor-pointer"
|
|
>
|
|
{availableYears.map(year => (
|
|
<option key={year} value={year}>{year}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Posyandu Filter */}
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-bold uppercase tracking-widest text-gray-500">Posyandu:</span>
|
|
<select
|
|
value={selectedPosyandu}
|
|
onChange={e => setSelectedPosyandu(e.target.value)}
|
|
className="border-2 border-black rounded-lg px-3 py-1.5 text-sm font-bold bg-white focus:outline-none shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] cursor-pointer max-w-[200px] truncate"
|
|
>
|
|
<option value="all">Semua Posyandu</option>
|
|
{posyanduList.map(name => (
|
|
<option key={name} value={name}>{name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Chart Type Toggle */}
|
|
<div className="flex gap-1 bg-gray-100 p-1 rounded-lg border border-gray-200">
|
|
<button
|
|
onClick={() => setChartType('bar')}
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-bold transition-all ${chartType === 'bar' ? 'bg-black text-white' : 'text-gray-600 hover:text-black'}`}
|
|
>
|
|
<BarChart2 className="w-3.5 h-3.5" /> Bar
|
|
</button>
|
|
<button
|
|
onClick={() => setChartType('area')}
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-bold transition-all ${chartType === 'area' ? 'bg-black text-white' : 'text-gray-600 hover:text-black'}`}
|
|
>
|
|
<Activity className="w-3.5 h-3.5" /> Area
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Row */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
{/* Total Data */}
|
|
<div className="border-2 border-gray-200 rounded-xl p-4 bg-gray-50">
|
|
<p className="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-1">Total Data</p>
|
|
<p className="text-3xl font-black">{totalAll}</p>
|
|
<p className="text-xs text-gray-500 mt-1">pemeriksaan</p>
|
|
</div>
|
|
{/* Stunting */}
|
|
<div className="border-2 border-red-200 rounded-xl p-4 bg-red-50">
|
|
<p className="text-[10px] font-bold uppercase tracking-widest text-red-400 mb-1">Stunting</p>
|
|
<p className="text-3xl font-black text-red-600">{totalStunting}</p>
|
|
<p className="text-xs text-red-400 mt-1">kasus</p>
|
|
</div>
|
|
{/* Normal */}
|
|
<div className="border-2 border-emerald-200 rounded-xl p-4 bg-emerald-50">
|
|
<p className="text-[10px] font-bold uppercase tracking-widest text-emerald-400 mb-1">Normal</p>
|
|
<p className="text-3xl font-black text-emerald-600">{totalNormal}</p>
|
|
<p className="text-xs text-emerald-400 mt-1">anak</p>
|
|
</div>
|
|
{/* Prevalensi */}
|
|
<div className="border-2 border-amber-200 rounded-xl p-4 bg-amber-50">
|
|
<p className="text-[10px] font-bold uppercase tracking-widest text-amber-500 mb-1">Prevalensi</p>
|
|
<p className="text-3xl font-black text-amber-600">{prevalensiTotal}%</p>
|
|
{trend !== null && (
|
|
<div className="flex items-center gap-1 mt-1">
|
|
{trend === 'up' && <><TrendingUp className="w-3 h-3 text-red-500" /><span className="text-xs text-red-500">Naik vs {selectedYear - 1}</span></>}
|
|
{trend === 'down' && <><TrendingDown className="w-3 h-3 text-emerald-500" /><span className="text-xs text-emerald-500">Turun vs {selectedYear - 1}</span></>}
|
|
{trend === 'stable' && <><Minus className="w-3 h-3 text-gray-400" /><span className="text-xs text-gray-400">Sama vs {selectedYear - 1}</span></>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Chart */}
|
|
<div className="border-2 border-gray-100 rounded-xl p-4 bg-white">
|
|
<p className="text-sm font-bold mb-1">Tren Stunting Semua Posyandu — {selectedYear}</p>
|
|
<p className="text-xs text-gray-400 mb-4">Berdasarkan tanggal upload data</p>
|
|
|
|
{totalAll === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-64 gap-3 text-gray-300">
|
|
<TrendingUp className="w-16 h-16 opacity-30" />
|
|
<p className="font-semibold text-gray-400">Tidak ada data untuk tahun {selectedYear}</p>
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto pb-2 -mx-2 px-2">
|
|
<div className="min-w-[700px] md:min-w-full">
|
|
<ResponsiveContainer width="100%" height={350}>
|
|
{chartType === 'bar' ? (
|
|
<BarChart data={chartData} margin={{ top: 20, right: 10, left: -20, bottom: 0 }} barCategoryGap="25%">
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
|
|
<XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 700 }} axisLine={false} tickLine={false} />
|
|
<YAxis tick={{ fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: '#f8fafc' }} />
|
|
<Legend
|
|
wrapperStyle={{ fontSize: 12, fontWeight: 700, paddingTop: 20 }}
|
|
formatter={(val) => val === 'stunting' ? 'Stunting' : 'Normal'}
|
|
/>
|
|
<Bar dataKey="stunting" fill="#ef4444" radius={[4, 4, 0, 0]} />
|
|
<Bar dataKey="normal" fill="#10b981" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
) : (
|
|
<AreaChart data={chartData} margin={{ top: 20, right: 10, left: -20, bottom: 0 }}>
|
|
<defs>
|
|
<linearGradient id="stuntingGrad" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#ef4444" stopOpacity={0.25} />
|
|
<stop offset="95%" stopColor="#ef4444" stopOpacity={0} />
|
|
</linearGradient>
|
|
<linearGradient id="normalGrad" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#10b981" stopOpacity={0.25} />
|
|
<stop offset="95%" stopColor="#10b981" stopOpacity={0} />
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
|
|
<XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 700 }} axisLine={false} tickLine={false} />
|
|
<YAxis tick={{ fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} />
|
|
<Tooltip content={<CustomTooltip />} />
|
|
<Legend
|
|
wrapperStyle={{ fontSize: 12, fontWeight: 700, paddingTop: 20 }}
|
|
formatter={(val) => val === 'stunting' ? 'Stunting' : 'Normal'}
|
|
/>
|
|
<Area type="monotone" dataKey="normal" stroke="#10b981" strokeWidth={3} fill="url(#normalGrad)" dot={{ r: 4, fill: '#10b981', strokeWidth: 2, stroke: 'white' }} />
|
|
<Area type="monotone" dataKey="stunting" stroke="#ef4444" strokeWidth={3} fill="url(#stuntingGrad)" dot={{ r: 4, fill: '#ef4444', strokeWidth: 2, stroke: 'white' }} />
|
|
</AreaChart>
|
|
)}
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Prevalensi (%) Line Chart */}
|
|
<div className="border-2 border-amber-100 rounded-xl p-4 bg-amber-50/30">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Percent className="w-4 h-4 text-amber-600" />
|
|
<p className="text-sm font-bold text-amber-800">Prevalensi Stunting Per Bulan (%) — {selectedYear}</p>
|
|
</div>
|
|
<p className="text-xs text-amber-500 mb-4">Persentase kasus stunting dari total pemeriksaan per bulan</p>
|
|
|
|
{totalAll === 0 ? (
|
|
<div className="flex items-center justify-center h-32 text-gray-300">
|
|
<p className="text-sm">Tidak ada data untuk ditampilkan</p>
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto pb-2 -mx-2 px-2">
|
|
<div className="min-w-[700px] md:min-w-full">
|
|
<ResponsiveContainer width="100%" height={260}>
|
|
<LineChart data={chartData} margin={{ top: 10, right: 20, left: -20, bottom: 0 }}>
|
|
<defs>
|
|
<linearGradient id="prevalensiGrad" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#f59e0b" stopOpacity={0.15} />
|
|
<stop offset="95%" stopColor="#f59e0b" stopOpacity={0} />
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#fde68a" />
|
|
<XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 700 }} axisLine={false} tickLine={false} />
|
|
<YAxis
|
|
tick={{ fontSize: 11 }}
|
|
axisLine={false}
|
|
tickLine={false}
|
|
tickFormatter={(v) => `${v}%`}
|
|
domain={[0, 100]}
|
|
/>
|
|
<Tooltip
|
|
content={({ active, payload, label }) => {
|
|
if (active && payload && payload.length) {
|
|
const val = payload[0]?.value as number
|
|
return (
|
|
<div className="bg-white border-2 border-amber-400 rounded-xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] px-4 py-3 text-sm">
|
|
<p className="font-bold text-black mb-1">{label} {selectedYear}</p>
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-2.5 h-2.5 rounded-full bg-amber-400 inline-block" />
|
|
<span>Prevalensi:</span>
|
|
<span className={`font-bold ${val >= 20 ? 'text-red-600' : 'text-emerald-600'}`}>{val}%</span>
|
|
</div>
|
|
<p className="text-[10px] text-gray-400 mt-1 uppercase font-bold tracking-tight">
|
|
{val >= 20 ? '⚠️ Di atas ambang batas (20%)' : '✓ Di bawah ambang batas (20%)'}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
return null
|
|
}}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="prevalensi"
|
|
stroke="#f59e0b"
|
|
strokeWidth={4}
|
|
dot={({ cx, cy, payload }) => (
|
|
<circle
|
|
key={`dot-${payload.month}`}
|
|
cx={cx} cy={cy} r={6}
|
|
fill={payload.prevalensi >= 20 ? '#ef4444' : '#10b981'}
|
|
stroke="white"
|
|
strokeWidth={2}
|
|
/>
|
|
)}
|
|
activeDot={{ r: 8, stroke: '#f59e0b', strokeWidth: 2 }}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<p className="text-[10px] text-amber-500 mt-2 text-center">
|
|
● Merah = prevalensi ≥ 20% (tinggi) | ● Hijau = prevalensi < 20% (aman)
|
|
</p>
|
|
</div>
|
|
|
|
<div className="border-2 border-gray-100 rounded-xl overflow-hidden">
|
|
<div className="grid grid-cols-5 bg-black text-white text-[10px] font-bold uppercase tracking-widest px-5 py-3">
|
|
<span>Bulan</span>
|
|
<span className="text-center">Total</span>
|
|
<span className="text-center text-red-300">Stunting</span>
|
|
<span className="text-center text-emerald-300">Normal</span>
|
|
<span className="text-center">Prevalensi</span>
|
|
</div>
|
|
{chartData.map((row, idx) => (
|
|
<div
|
|
key={row.month}
|
|
className={`grid grid-cols-5 items-center px-5 py-3 text-sm border-b border-gray-100 ${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50/60'}`}
|
|
>
|
|
<span className="font-semibold">{row.month} {selectedYear}</span>
|
|
<span className="text-center font-bold">{row.total}</span>
|
|
<span className="text-center font-bold text-red-600">{row.stunting}</span>
|
|
<span className="text-center font-bold text-emerald-600">{row.normal}</span>
|
|
<span className="text-center">
|
|
{row.total > 0 ? (
|
|
<span className={`inline-block px-2 py-0.5 rounded-full text-xs font-bold border ${row.prevalensi >= 20
|
|
? 'bg-red-50 border-red-200 text-red-700'
|
|
: 'bg-emerald-50 border-emerald-200 text-emerald-700'
|
|
}`}>
|
|
{row.prevalensi}%
|
|
</span>
|
|
) : (
|
|
<span className="text-gray-300 text-xs">—</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|