// Regional Map — sebaran responden di peta Indonesia. // // Pakai Leaflet (CDN-loaded di index.html) dengan OSM tiles. Kecamatan-level // detail tersedia otomatis saat user zoom in karena OSM punya full coverage // Indonesia. Lat/lon di-collect dari mobile-flow saat responden klik // "Auto-detect GPS" di pertanyaan tipe location. // // Filter: // • Date range: 7d / 30d / 90d / all // • Campaign: dropdown semua campaign di workspace // // Side panel kanan: list region (text) + count, ranked. const { useState: useState_rm, useEffect: useEffect_rm, useRef: useRef_rm } = React; const INDONESIA_CENTER = [-2.5, 118]; // around Sulawesi const INDONESIA_ZOOM = 5; const RANGE_OPTIONS = [ { id: '7d', label: '7 hari', ms: 7 * 86400000 }, { id: '30d', label: '30 hari', ms: 30 * 86400000 }, { id: '90d', label: '90 hari', ms: 90 * 86400000 }, { id: 'all', label: 'Semua', ms: null }, ]; function RegionalMap() { const mapEl = useRef_rm(null); const mapRef = useRef_rm(null); const clusterRef = useRef_rm(null); const [campaigns, setCampaigns] = useState_rm([]); const [campaignId, setCampaignId] = useState_rm('all'); const [range, setRange] = useState_rm('30d'); const [provinceFilter, setProvinceFilter] = useState_rm(''); const [kotakabFilter, setKotakabFilter] = useState_rm(''); const [responses, setResponses] = useState_rm([]); const [loading, setLoading] = useState_rm(true); // Daftar kotakab yang muncul di dropdown — narrows kalau provinsi sudah dipilih. const kotakabOptions = provinceFilter ? (window.kotakabsInProvince ? window.kotakabsInProvince(provinceFilter) : []) : []; // Bersihkan kotakab kalau provinsi diganti & kotakab existing tidak ada di provinsi baru. useEffect_rm(() => { if (kotakabFilter && !kotakabOptions.includes(kotakabFilter)) { setKotakabFilter(''); } }, [provinceFilter]); // eslint-disable-line react-hooks/exhaustive-deps // Load campaigns + their responses in parallel. useEffect_rm(() => { window.api.listCampaigns() .then((r) => setCampaigns(r.campaigns || [])) .catch(() => setCampaigns([])); }, []); useEffect_rm(() => { setLoading(true); const target = campaignId === 'all' ? campaigns.map((c) => c.id) : [campaignId].filter(Boolean); if (target.length === 0) { setResponses([]); setLoading(false); return; } Promise.all( target.map((id) => window.api.listResponses(id, 500).catch(() => ({ responses: [] }))), ).then((arrs) => { const merged = arrs.flatMap((r) => r.responses || []); setResponses(merged); setLoading(false); }); }, [campaignId, campaigns]); // Init Leaflet map sekali — clean up saat unmount. useEffect_rm(() => { if (!window.L || !mapEl.current || mapRef.current) return; const map = window.L.map(mapEl.current, { center: INDONESIA_CENTER, zoom: INDONESIA_ZOOM, scrollWheelZoom: true, zoomControl: true, }); window.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors', maxZoom: 19, }).addTo(map); mapRef.current = map; // Group cluster — auto-merge marker dekat saat zoom out clusterRef.current = window.L.markerClusterGroup({ maxClusterRadius: 50, spiderfyOnMaxZoom: true, }); map.addLayer(clusterRef.current); return () => { map.remove(); mapRef.current = null; clusterRef.current = null; }; }, []); // Re-render markers tiap kali responses / range berubah. useEffect_rm(() => { if (!mapRef.current || !clusterRef.current || !window.L) return; clusterRef.current.clearLayers(); const cutoffMs = RANGE_OPTIONS.find((r) => r.id === range)?.ms; const cutoff = cutoffMs ? Date.now() - cutoffMs : null; // Resolve coordinate + region hierarchy untuk tiap respons: // 1. Pakai latitude/longitude kalau ada (GPS asli — paling akurat) // 2. Else, fallback ke region-text centroid lookup (perkiraan kota/provinsi) // 3. Else, skip (gak bisa diplot) // Filter province/kotakab dipakai dari hierarchy resolution. const candidates = []; for (const r of responses) { if (cutoff && new Date(r.submittedAt).getTime() < cutoff) continue; const hier = window.resolveRegionHierarchy ? window.resolveRegionHierarchy(r.region) : null; // Apply province / kotakab filter. if (provinceFilter && (!hier || hier.province !== provinceFilter)) continue; if (kotakabFilter && (!hier || hier.kotakab !== kotakabFilter)) continue; let lat = r.latitude; let lon = r.longitude; let approx = false; if (typeof lat !== 'number' || typeof lon !== 'number') { const ll = window.regionToLatLon ? window.regionToLatLon(r.region) : null; if (!ll) continue; [lat, lon] = ll; approx = true; } candidates.push({ r, lat, lon, approx, hier }); } // Custom icon — solid biru untuk GPS asli, dashed amber untuk approximate. const gpsIcon = window.L.divIcon({ className: 'rinta-gps-marker', html: '
', iconSize: [18, 18], iconAnchor: [9, 9], }); const approxIcon = window.L.divIcon({ className: 'rinta-approx-marker', html: '
', iconSize: [16, 16], iconAnchor: [8, 8], }); const markers = candidates.map(({ r, lat, lon, approx }) => { // Jitter sedikit untuk approx markers — supaya marker di centroid yang // sama (mis. 50 respons "Surabaya") tidak overlap persis di 1 titik. // Cluster akan tetap merge mereka, tapi saat zoom in, marker tersebar. const j = approx ? [lat + (Math.random() - 0.5) * 0.04, lon + (Math.random() - 0.5) * 0.04] : [lat, lon]; const m = window.L.marker(j, { icon: approx ? approxIcon : gpsIcon }); const time = new Date(r.submittedAt).toLocaleString('id-ID', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit', }); const html = `
${r.respondentName || 'Anonim'}
${r.region || '—'} ${approx ? 'approx' : ''}
${time}
`; m.bindPopup(html); return m; }); clusterRef.current.addLayers(markers); // Stash for stats below window.__rintaMapStats = { gps: candidates.filter((c) => !c.approx).length, approx: candidates.filter((c) => c.approx).length, }; // Auto-fit ke markers kalau ada — atau tetap di Indonesia center kalau kosong. if (markers.length > 0) { const group = window.L.featureGroup(markers); mapRef.current.fitBounds(group.getBounds().pad(0.2), { maxZoom: 12, animate: true, }); } else { mapRef.current.setView(INDONESIA_CENTER, INDONESIA_ZOOM); } }, [responses, range, provinceFilter, kotakabFilter]); // Region count (text-based) untuk side panel — terapkan SEMUA filter // (range + province + kotakab) supaya konsisten dengan marker map. const regionStats = (() => { const cutoffMs = RANGE_OPTIONS.find((r) => r.id === range)?.ms; const cutoff = cutoffMs ? Date.now() - cutoffMs : null; const m = new Map(); for (const r of responses) { if (cutoff && new Date(r.submittedAt).getTime() < cutoff) continue; const hier = window.resolveRegionHierarchy ? window.resolveRegionHierarchy(r.region) : null; if (provinceFilter && (!hier || hier.province !== provinceFilter)) continue; if (kotakabFilter && (!hier || hier.kotakab !== kotakabFilter)) continue; const key = (r.region || 'Tidak diketahui').trim() || 'Tidak diketahui'; m.set(key, (m.get(key) ?? 0) + 1); } return [...m.entries()] .map(([region, n]) => ({ region, n })) .sort((a, b) => b.n - a.n); })(); const totalInRange = regionStats.reduce((s, r) => s + r.n, 0); // Re-compute coords stat — terapkan semua filter (range + provinsi + kotakab). const cutoffMs = RANGE_OPTIONS.find((r) => r.id === range)?.ms; const cutoff = cutoffMs ? Date.now() - cutoffMs : null; const filteredForStats = responses.filter((r) => { if (cutoff && new Date(r.submittedAt).getTime() < cutoff) return false; const hier = window.resolveRegionHierarchy ? window.resolveRegionHierarchy(r.region) : null; if (provinceFilter && (!hier || hier.province !== provinceFilter)) return false; if (kotakabFilter && (!hier || hier.kotakab !== kotakabFilter)) return false; return true; }); const gpsCount = filteredForStats.filter((r) => typeof r.latitude === 'number').length; const approxCount = filteredForStats.filter((r) => { if (typeof r.latitude === 'number') return false; return window.regionToLatLon ? !!window.regionToLatLon(r.region) : false; }).length; const unmappable = filteredForStats.length - gpsCount - approxCount; return (
{/* Header + filter bar */}
Sebaran Responden
{loading ? 'Memuat…' : totalInRange > 0 ? `${totalInRange} respons · ${gpsCount} GPS asli · ${approxCount} dari region${unmappable > 0 ? ` · ${unmappable} tanpa lokasi` : ''}` : 'Belum ada respons di rentang waktu ini'}
{(provinceFilter || kotakabFilter) && ( )}
{RANGE_OPTIONS.map((r) => ( ))}
{/* Map + side panel */}
{/* Legend overlay */}
GPS asli
Approx (dari region)
Region teratas
{regionStats.length === 0 && (
Belum ada data.
)} {regionStats.slice(0, 12).map((r, i) => { const pct = totalInRange > 0 ? (r.n / totalInRange) * 100 : 0; return (
{r.region} {r.n}
); })} {regionStats.length > 12 && (
+{regionStats.length - 12} region lainnya
)}
); } Object.assign(window, { RegionalMap });