🧪 LABORATORIUM DATA • CRUD + RUMUS OTOMATIS + VISUALISASI

Data Lab Interaktif

Grid ala Excel: klik sel lalu ketik, navigasi dengan panah / Enter / Tab / Delete. Kolom Total dihitung otomatis (= Harga × Jumlah), statistik SUM / AVERAGE hidup, dan grafik memperbarui diri secara real-time. Semua tersimpan di localStorage.

● belum ada perubahan ⌨️ panah • enter • tab • delete • F2

KONTROL (CRUD)

EXPORT / IMPORT DATA

📤 Import CSV 📤 Import JSON

RIWAYAT PERUBAHAN

Max 20 langkah

📐 STATISTIK OTOMATIS LENGKAP

=SUM(Total)

=AVERAGE

=MEDIAN

=MAX

=MIN

=STDDEV

=COUNT

=SUM(Qty)

=Rumus

C×D

⌨️ PINTASAN ▼

⬆⬇⬅➡ & Tab — pindah sel

Enter — turun (baris baru di akhir)

Ketik langsung / F2 — edit sel

Delete — bersihkan sel

Esc — selesai edit

🛠️ Stack & Skema Data

Stack: HTML + Vanilla JS + Tailwind (CDN) + Chart.js. Tanpa build-step: satu file .html langsung jalan. localStorage berperan sebagai "backend". Grid custom dipilih karena Handsontable berlisensi non-komersial & Luckysheet berat — untuk prototipe, grid custom lebih ringan dan edukatif. Untuk produksi: React + TanStack/Handsontable + Recharts.

Skema JSON (tersimpan):

[
  {
    "id": 1,
    "kategori": "Makanan",
    "produk": "Nasi Goreng",
    "harga": 15000,
    "jumlah": 3
  }
]
// "total" TIDAK disimpan —
// dihitung runtime: harga * jumlah

—

Klik sel untuk melihat referensi & rumus…

	#	A • KATEGORI	B • PRODUK	C • HARGA	D • JUMLAH	E • TOTAL 🤖

📊 TOTAL PER KATEGORI

🍩 JUMLAH PER KATEGORI

📈 TREN KUMULATIF

💡 Ide latihan: ubah angka di kolom Harga/Jumlah dan perhatikan Total, statistik, serta ketiga grafik berubah seketika — inilah esensi data → informasi → insight dari Modul 1 & 4!