INFRAIMPACT — Developer Setup

Prasyarat

• Browser modern (Chrome/Edge/Firefox 2 versi terakhir).
• Git.
• Salah satu: Python 3.x atau Node.js 18+ (untuk local server).

Tidak ada build step. Tidak ada npm install.

Quick start

git clone https://github.com/<you>/<repo>.git
cd <repo>

# Pilih satu:
python -m http.server 5173        # → http://localhost:5173
# atau
npx http-server -p 5173 -c-1      # disable cache during dev

Browser → http://localhost:5173. Membuka index.html lewat file:// tidak akan bekerja: fetch() ke data/*.json di-block oleh CORS.

Struktur kode

assets/js/
  store.js          # state + pub/sub
  data-loader.js    # fetch JSON & GeoJSON
  scoring.js        # normalize, dimension, block, classify
  aggregation.js    # period, group, trajectory
  map.js            # Leaflet wrapper, drill-down
  charts.js         # D3 matrix + Chart.js trend/ranking
  panels.js         # render KPI, hover tooltip, detail panel, asset modal
  story.js          # 7-slide overlay
  about.js          # about modal
  app.js            # bootstrap, event wiring

Setiap modul memasang fungsinya di window.IFI.<namespace>. Tidak ada bundler; urutan script tag di index.html menentukan dependency order.

Pola umum

• Tambah indikator baru:
  1. Append entry ke data/indicators.json (lihat schema di DATA_DICTIONARY.md).
  2. Pastikan observation_field cocok dengan field di yearly_observations.json.
  3. Tambah bobot di weights.json (sub-kunci indicator_weights).
  4. Update versi di data/scoring_versions.json jika mengubah semantik agregasi.
  5. Bump scoring_method_version di metadata.json.
• Tambah aset baru:
  1. Tambahkan entry di data/assets.json.
  2. Tambahkan observasi 2015–2024 di data/yearly_observations.json (skip tahun pre-construction).
  3. Pastikan province_code & district_code valid.
• Ganti GeoJSON provinsi:
  • Primary loader mencoba cdn.jsdelivr.net/gh/superpikar/indonesia-geojson@master/indonesia-en-simple.geojson.
  • Untuk geometri presisi (BPS), unduh TopoJSON resmi, konversi ke GeoJSON, simplifikasi via mapshaper.org (target 5–10% simplification), letakkan di geo/indonesia_provinces.geojson.
  • map.js setProvinceGeoJSON() mendeteksi properti kode, KODE_PROV, id, atau nama via lookupProvinceCode().
• Tambah bahasa Inggris (MVP 2):
  • Tambah assets/js/i18n.js (sederhana: dictionary keyed by string).
  • Wire toggle di header.
  • Pakai key *_en yang sudah disediakan di provinces.json & indicators.json.

Testing manual (smoke)

Buka dashboard, lalu verifikasi:

1. [ ] Peta nasional tampil dalam < 3 detik.
2. [ ] Hover provinsi menampilkan tooltip dengan dispersi.
3. [ ] Klik provinsi → drill ke kab/kota.
4. [ ] Klik kab/kota → cluster marker aset.
5. [ ] Klik aset → modal terbuka, semua 5 tab populated.
6. [ ] Year slider 2015 → 2024 mengubah peta + chart.
7. [ ] Aset dibangun 2022 menjadi hidden / not_yet_constructed saat slider = 2018.
8. [ ] Story mode 7 slide bisa di-navigate.
9. [ ] Filter (jenis aset, kuadran) memperbarui semua view.
10. [ ] Export CSV menghasilkan file dengan header kolom benar.
11. [ ] Esc menutup modal.
12. [ ] Layout responsive di < 1280px (sidebar collapse).

Debugging

• Buka DevTools → Console: setiap error fetch JSON tercetak dengan path.
• window.IFI.store.getState() mengembalikan state penuh — gunakan untuk inspect filter & data.
• Bila peta provinsi tidak muncul: cek tab Network — apakah jsDelivr GeoJSON 200? Jika diblokir, dashboard menggunakan geo/indonesia_provinces.geojson fallback otomatis.

Deploy ke GitHub Pages

Lihat README.md bagian “Quick deploy”. Pastikan:

• File .nojekyll ada di root (mencegah Jekyll mengabaikan folder yang diawali _).
• Repo bernama <username>.github.io untuk user-site, atau enable Pages di Settings → Pages untuk project-site.
• Tidak ada secret/private data di commit.

Roadmap kontribusi