317 lines
19 KiB
TypeScript
317 lines
19 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[availableYears.length - 1] ?? 2026)
|
|
const [chartType, setChartType] = useState<'bar' | 'area'>('bar')
|
|
const [selectedPosyandu, setSelectedPosyandu] = useState<string>('all')
|
|
|
|
const posyanduList = useMemo(() => {
|
|
return Array.from(new Set(data.map(d => d.nama_posyandu).filter(Boolean))).sort()
|
|
}, [data])
|
|
|
|
const filteredData = useMemo(() => {
|
|
if (selectedPosyandu === 'all') return data
|
|
return data.filter(d => d.nama_posyandu === selectedPosyandu)
|
|
}, [data, selectedPosyandu])
|
|
|
|
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])
|
|
|
|
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'
|
|
|
|
const prevYearData = filteredData.filter(d => {
|
|
if (!d.tanggal_upload) return false
|
|
return new Date(d.tanggal_upload).getFullYear() === selectedYear - 1
|
|
})
|
|
const prevStunting = prevYearData.filter(d => d.status_stunting === true).length
|
|
const prevAll = prevYearData.length
|
|
const hasPrevData = prevAll > 0
|
|
const prevPrevalensi = hasPrevData ? (prevStunting / prevAll) * 100 : null
|
|
const currPrevalensiNum = totalAll > 0 ? (totalStunting / totalAll) * 100 : null
|
|
const trend = hasPrevData && currPrevalensiNum !== null
|
|
? currPrevalensiNum > prevPrevalensi! ? 'up' : currPrevalensiNum < prevPrevalensi! ? 'down' : 'stable'
|
|
: null
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<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 Wilayah' : `Tren Stunting — ${selectedPosyandu}`}
|
|
</h2>
|
|
<p className="text-sm text-gray-500">
|
|
Pantau statistik prevalensi stunting untuk memahami kondisi kesehatan anak di daerah Anda.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-4 justify-between">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<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 Pemeriksaan</p>
|
|
<p className="text-3xl font-black">{totalAll}</p>
|
|
<p className="text-xs text-gray-500 mt-1">data balita</p>
|
|
</div>
|
|
<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>
|
|
<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>
|
|
<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">Stabil</span></>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-2 border-gray-100 rounded-xl p-6 bg-white overflow-hidden">
|
|
<p className="text-sm font-black mb-1">Statistik Pertumbuhan Anak — {selectedYear}</p>
|
|
<p className="text-xs text-gray-400 mb-6 uppercase tracking-wider">Perbandingan Balita Stunting & Normal</p>
|
|
|
|
{totalAll === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-64 gap-3 text-gray-200">
|
|
<TrendingUp className="w-16 h-16 opacity-20" />
|
|
<p className="font-bold">Data belum tersedia 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 }}>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
|
|
<XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} />
|
|
<YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: '#f8fafc' }} />
|
|
<Legend wrapperStyle={{ paddingTop: 20, fontSize: 12, fontWeight: 800 }} iconType="circle" />
|
|
<Bar dataKey="stunting" name="Stunting" fill="#ef4444" radius={[4, 4, 0, 0]} />
|
|
<Bar dataKey="normal" name="Normal" fill="#10b981" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
) : (
|
|
<AreaChart data={chartData} margin={{ top: 20, right: 10, left: -20, bottom: 0 }}>
|
|
<defs>
|
|
<linearGradient id="colorStunting" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#ef4444" stopOpacity={0.1} />
|
|
<stop offset="95%" stopColor="#ef4444" stopOpacity={0} />
|
|
</linearGradient>
|
|
<linearGradient id="colorNormal" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#10b981" stopOpacity={0.1} />
|
|
<stop offset="95%" stopColor="#10b981" stopOpacity={0} />
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
|
|
<XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} />
|
|
<YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} />
|
|
<Tooltip content={<CustomTooltip />} />
|
|
<Legend wrapperStyle={{ paddingTop: 20, fontSize: 12, fontWeight: 800 }} iconType="circle" />
|
|
<Area type="monotone" dataKey="stunting" name="Stunting" stroke="#ef4444" strokeWidth={3} fillOpacity={1} fill="url(#colorStunting)" dot={{ r: 4, fill: '#ef4444', strokeWidth: 2, stroke: 'white' }} />
|
|
<Area type="monotone" dataKey="normal" name="Normal" stroke="#10b981" strokeWidth={3} fillOpacity={1} fill="url(#colorNormal)" dot={{ r: 4, fill: '#10b981', strokeWidth: 2, stroke: 'white' }} />
|
|
</AreaChart>
|
|
)}
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="border-2 border-amber-100 rounded-xl p-6 bg-amber-50/20">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Percent className="w-5 h-5 text-amber-600" />
|
|
<p className="text-sm font-black text-amber-900 uppercase">Prevalensi Bulanan (%)</p>
|
|
</div>
|
|
<p className="text-[10px] text-amber-600 mb-6 font-bold uppercase tracking-widest italic">Ambang Batas Keamanan WHO: 20%</p>
|
|
|
|
{totalAll === 0 ? (
|
|
<div className="h-32 flex items-center justify-center text-amber-200">
|
|
<p className="text-sm font-bold opacity-30">Belum ada data prevalensi</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 }}>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#fef3c7" />
|
|
<XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} />
|
|
<YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} 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-500 rounded-xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] px-4 py-3 text-sm">
|
|
<p className="font-black text-black mb-1">{label} {selectedYear}</p>
|
|
<div className="flex items-center gap-2">
|
|
<span className={`w-3 h-3 rounded-full ${val >= 20 ? 'bg-red-500' : 'bg-emerald-500'}`} />
|
|
<span className="font-black text-lg">{val}%</span>
|
|
</div>
|
|
<p className="text-[10px] font-bold mt-1 uppercase tracking-tight">
|
|
{val >= 20 ? '🛑 Tinggi' : '✅ Aman'}
|
|
</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>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|