# DESIGN.md: halaman Top Gainer Harian (screener.arcadev.my.id/topgainer/)

Dokumen arah desain untuk halaman ini. Sumber "jiwa" yang sama dengan halaman pola saham
(`/root/screener/DESIGN.md`), jadi warna, tipografi, dan larangan efeknya diwarisi, bukan
diciptakan ulang. Yang ditulis di sini hanya keputusan yang khusus halaman ini.

## Kalimat arah (Design Read)

> Dibaca sebagai: alat pemindai peringkat harian untuk pemakai teknis di Indonesia,
> dengan bahasa visual "meja kerja analis" yang sama dengan halaman pola,
> dial ENERGY 1 / RHYTHM 2 / MOTION 1.

Kesamaan bahasa visual adalah keputusan, bukan kebetulan: kedua halaman dibuka bergantian dalam
satu sesi analisis, jadi berpindah halaman tidak boleh berarti belajar ulang tata warna dan bentuk.

## Palet (R-29)

Latar, permukaan, garis, teks, dan aksen amber dipakai persis seperti halaman pola
(`#0e1319 / #161c24 / #2b3440 / #e8eef5 / #f0a93c` untuk gelap). Amber tetap hanya dipakai untuk
menandai keadaan aktif dan lencana rentetan, bukan untuk menghias. Hijau dan merah tetap hanya
berarti arah harga dan selalu berpasangan dengan tanda `+` atau `-`.

Kontras diukur, bukan dikira: teks terendah 6,14:1 di mode terang dan 7,03:1 di mode gelap,
keduanya lolos WCAG AA. Angka sekunder (tidak likuid, tanggal muncul) memakai `--dim` yang sudah
diukur, bukan abu transparan.

## Tipografi (R-06)

Sama dengan halaman pola: teks dan judul `system-ui`, semua angka monospace supaya digit
sejajar vertikal. Label kolom membawa satuannya (`Harga (Rp)`, `Nilai (Rp)`, `Vol/Vol20`) supaya
tidak perlu ditebak.

## Keputusan khusus halaman ini dan alasannya (R-31)

- **Pilihan cepat empat tombol, bukan menu.** "Terbaru", "Hari sebelumnya", "7 hari yang lalu",
  dan "Rekap 7 hari terakhir" menutup hampir semua pembukaan halaman; dropdown tanggal tetap ada
  untuk tanggal lain. Alasan satu baris: pekerjaan yang paling sering tidak boleh butuh dua klik.
- **"7 hari yang lalu" berarti 7 hari bursa sebelum data terbaru, dan tombolnya menyebut
  tanggalnya.** Tanpa tanggal di judul tombol, "7 hari" bisa berarti 7 hari kalender, 7 hari bursa,
  atau 7 hari sebelum hari yang sedang dibuka; judulnya menyebut "Buka hari bursa 9 September 2026"
  supaya tidak ada yang perlu ditebak. Ia juga dimatikan kalau hari bursa tersimpan belum sampai 7.
- **"Rekap 7 hari terakhir" dinamai begitu, bukan "7 hari bursa terakhir".** Dua tombol bersebelahan
  yang keduanya berisi "7 hari" dengan arti berbeda adalah jebakan; yang satu membuka satu hari,
  yang satu menggabungkan rentang, dan namanya harus menunjukkan mana yang mana.
- **Shift + panah melompat 7 hari bursa dari hari yang sedang dibuka.** Tombol "7 hari yang lalu"
  sifatnya mutlak (dari data terbaru), sedangkan Shift + panah menelusuri mundur dan maju per
  minggu dari posisi mana pun. Keduanya berguna dan bedanya dijelaskan satu baris di pengantar.
- **Lompatan yang melewati ujung rentang dijepit, bukan diabaikan.** Menekan Shift + panah di dekat
  hari tertua bergerak sejauh yang bisa; diam tanpa penjelasan adalah kontrol yang tampak rusak.
- **Tombol yang menyala selalu menggambarkan keadaan sebenarnya.** Memilih tanggal dari dropdown
  atau memakai tombol mundur/maju memadamkan pilihan cepat, karena posisinya bukan salah satu
  preset. Tombol yang tetap menyala padahal isinya bukan preset itu kontrol yang berbohong.
- **Nama tombol langkah diubah jadi "Mundur 1 hari" dan "Maju 1 hari".** Sebelumnya "Hari
  sebelumnya" dan "Hari berikutnya", yang bertabrakan arti dengan tombol pilihan cepat bernama
  sama; dua kontrol berbeda tidak boleh punya satu nama.
- **Ubah 1 hari dan tombol pilihan cepat hidup berdampingan, tidak saling menggantikan.**
  Pilihan cepat untuk lompat jauh, tombol langkah untuk menelusuri hari berurutan.
- **Rekap 7 hari mengurutkan dari yang paling sering muncul**, bukan dari kenaikan terbesar.
  Alasan satu baris: yang ditambahkan rentang waktu adalah bukti kenaikan berulang, dan itu yang
  tidak terlihat di tampilan satu hari.
- **Kolom "Naik selama rentang" diberi batasnya di legenda.** Halaman ini hanya menyimpan 50 baris
  teratas tiap hari, jadi saham yang baru masuk daftar di tengah rentang tidak punya harga awal
  rentangnya; yang dihitung adalah kemunculan pertama sampai kemunculan terakhir, dan itu tertulis.
  Angka yang benar tetapi tidak dijelaskan batasnya lebih buruk daripada tidak ada angka (R-17).
- **Snap yang bukan data penutupan diberi peringatan, bukan disembunyikan.** Cron pertama hari itu
  (sekitar 13:00 WIB) menghasilkan snapshot sesi berjalan; halamannya memberi tahu jam snapshot dan
  mengatakan angkanya bisa berubah, bukan menyajikan angka sesi seolah harga penutupan.
- **Hari tanpa data ditulis apa adanya.** 17 sampai 29 Juli 2026 tidak muncul karena snapshotnya
  tersimpan nol baris di server. Lubang itu ditulis di catatan sumber, bukan diisi angka karangan.
- **Saringan "muncul 2 hari berturut" dimatikan di mode rekap, dengan alasannya tertulis.** Di mode
  rekap informasi itu sudah ada di kolom "N dari 7 hari", jadi kontrolnya tidak punya tugas lagi
  dan tidak dibiarkan menyala tanpa akibat.
- **Lencana rentetan hari di mode harian.** Kenaikan yang berlanjut bukti yang berbeda dari
  kenaikan sekali lompat, dan itu satu-satunya kolom di halaman ini yang butuh data hari lain.
- **Grafik TradingView dalam panel yang bisa ditutup `Esc`.** Alasan dan tata caranya sama dengan
  halaman pola: angka dan grafik dibaca bergantian, jadi pindah tab berarti kehilangan konteks.
  Kalau widget tidak lahir dalam 8 detik, halaman memberi tahu dan mengarahkan ke TradingView.
- **Penyaring ditulis sebagai pilihan tertutup ("1 miliar", "5 miliar", bukan kolom bebas).**
  Pertanyaannya selalu "seberapa likuid minimum", bukan "angka berapa pun".
- **Nilai transaksi = volume dikali harga penutupan, dan disebut perkiraan.** Angka sebenarnya
  memakai harga rata-rata transaksi yang tidak ada di snapshot; menyebutnya "nilai transaksi" tanpa
  keterangan akan melebihkan ketepatan data.
- **Berkas data berbentuk kolumnar dengan kolam teks.** 170 hari kali 50 baris = 8.500 baris;
  mengulang nama kolom dan nama emiten di setiap baris membuat berkasnya 2,2 MB, sedangkan bentuk
  kolumnar 850 KB (286 KB terkompresi). Halaman ini sering dibuka dari ponsel dan itu alasan yang
  cukup.
- **Di layar sempit setiap baris jadi kartu dengan label kolom di kiri.** Sepuluh kolom tidak muat
  di 320 piksel, dan gulir mendatar adalah kegagalan (R-03). Nama emiten dibiarkan membungkus, bukan
  dipotong, karena di ponsel tidak ada tooltip untuk membacanya lagi.
- **Caption tabel dipaksa satu baris penuh di layar sempit.** Sebagai `table-caption` dengan tabel
  yang jadi `display:block`, caption menyempit jadi satu kata per baris; itu bug tata letak yang
  sempat lolos dan ditemukan saat memeriksa di 375 piksel.

## Yang sengaja tidak dipakai

Tidak ada gradien, glassmorphism, glow, bayangan, emoji hiasan, atau animasi masuk. Satu-satunya
gerak adalah denyut halus pada tulang-tulang pemuatan, dan itu pun dimatikan saat perangkat meminta
gerak yang dikurangi.