Mereka Bentuk Semula Dashboard di Sekitar Satu Graf Gelombang

Sesetengah keluaran menambah sebuah ciri. GeekBye v1.8.2 sebaliknya kebanyakannya membuang satu — dan pembuangan itulah ceritanya. Dalam satu petang pada Februari 2026, lapan belas commit menukar home dashboard daripada sebuah alat kawalan jauh rakaman kepada paparan analitik baca-sahaja: empat statistik dan satu graf aktiviti. Sepanjang perjalanan ia mengeluarkan graf bar yang hidup dua puluh dua minit, grid kad statistik yang hidup dua puluh minit, dan gelombang SVG buatan tangan yang menggantikan kedua-duanya. Seluruh pencarian itu terpelihara dalam cap masa commit, yang merupakan jenis dokumentasi reka bentuk terbaik yang ada.

Dashboard berhenti menjadi alat kawalan jauh

Sebelum keluaran ini, home dashboard ialah sebuah panel kawalan. Ia diterajui oleh sebuah hero card — widget rakaman besar dengan lencana LIVE, butang Pause/Resume/Stop, gumpalan kecerunan, dan hook useSessionState yang menyambungkan kesemuanya kepada perakam. Dashboard cuba menjadi dua perkara serentak: tempat anda melihat mesyuarat anda dan tempat anda mengawal perakam. Dua produk, satu skrin, bersaing secara senyap.

v1.8.2 memilih satu. Ia memadam hero card dan pendawaian useSessionState — termasuk satu kesan yang menavigasikan anda secara automatik ke halaman perincian sesuatu mesyuarat sebaik sahaja sesi berakhir, yang persis jenis lompatan "membantu" yang mengejutkan orang di tengah aliran. Memulakan dan menyembunyikan perakam berpindah ke sebuah toggle navbar biasa (sebuah butang yang diguna semula dan kehilangan kira-kira seratus baris apabila bertukar daripada pengawal sesi kepada suis hidup/mati), disokong oleh handler IPC navbar:hide yang baharu. Yang tinggal ialah sebuah dashboard yang melakukan satu perkara: menunjukkan apa yang telah anda rakam. Baca-sahaja. Tenang.

Ada sebuah bug kecil yang manusiawi dalam peralihan itu yang wajar disebut, kerana inilah jenis perkara yang diperkenalkan secara senyap oleh sesuatu reka bentuk semula dan ditangkap oleh mata yang tajam pada jam yang sama. Dua butang bar sisi baharu — Start dan Hide — dikeluarkan dengan ikon grid generik yang sama, jadi kedua-duanya seiras dari segi visual. Dua belas minit kemudian sebuah commit susulan memberi Start ikon main, memberi Hide ikon mata-tertutup, dan mewarnakan Hide dengan ambar, supaya "buat aplikasi hilang" terbaca sebagai tindakan yang disengajakan dan bukan kembar neutral bagi "start." Ikon ialah teks. Dua butang yang kelihatan sama menyatakan perkara yang sama, sedangkan kedua-dua ini tidak bermaksud sama.

Graf bar yang hidup dua puluh dua minit

Inilah bahagian yang saya suka, dan kesemuanya boleh dibaca daripada git log. Pada 16:29:34 versi pertama reka bentuk semula itu mendarat: sebuah graf aktiviti 7 hari yang dilukis sebagai bar — lajur beranimasi, satu ketinggian minimum supaya hari-hari kecil kekal kelihatan, sebuah batang malap 2 piksel bagi hari bernilai sifar. Munasabah. Konvensional. Jenis graf yang anda capai tanpa berfikir.

Pada 16:51:21 — dua puluh dua minit kemudian — ia dipadam. Commit gantiannya menyatakan dengan tepat apa yang dilakukannya: "ganti graf bar dengan graf kawasan gelombang yang licin untuk aktiviti 7 hari." Dan pada 16:52:21, satu minit selepas itu, sebuah commit lain menanggalkan kad bulat dan sempadan di sekeliling gelombang, "untuk rupa yang lebih kemas."

Mengapa? Commit hanya menyatakan apa yang berubah, jadi mengapanya ialah satu tafsiran — tetapi bentuk data menjadikannya jelas. Ini ialah sebuah alat di mana pengguna biasa mempunyai sifar, satu, atau dua mesyuarat pada mana-mana hari. Tujuh bar, kebanyakannya setinggi 2 piksel, kelihatan seperti ruang yang hampir kosong. Tujuh nombor yang sama dilukis sebagai kawasan terisi yang berterusan kelihatan seperti sebuah trend — gelombang lembut yang naik di tempat minggu itu sibuk. Tiada apa-apa yang dipalsukan; nilai paksi y-nya seiras. Reka bentuk semula itu sekadar memilih pengekodan yang membolehkan data yang jarang lagi jujur terbaca sebagai satu bentuk dan bukannya sebagai ketiadaan.

Statistik pula menerima layanan yang sama pada jam yang sama. Versi pertama (16:29) meletakkan empat nombor dalam grid 2×4 kad. Pada 16:49 grid itu mengecut menjadi satu jalur statistik sebaris — satu baris bersempadan dengan pembahagi sehalus rambut, saiz taip lebih kecil, satu bekas dan bukannya empat. Lima kotak pada skrin (empat kad tambah satu kad graf) menjadi dua (satu jalur dan satu gelombang). PR seterusnya menambah satu sentuhan jujur lagi: label "Jumlah Masa" menjadi "Masa dalam Mesyuarat", kerana jumlah-apa ialah soalan yang wajar dan tiada siapa sepatutnya terpaksa bertanya.

Dua puluh minit, daripada versi pertama hingga akhir, kesemuanya dalam satu pull request. Seandainya itu dihimpit menjadi satu commit "reka bentuk semula dashboard", pencarian itu tidak akan kelihatan. Oleh sebab ia tidak dihimpit, anda boleh menyaksikan seorang pereka menumpu dalam masa nyata.

Gelombang itu, secara mekanikal

Di sini tiada library graf. Gelombang itu ialah sebuah SVG sebaris yang dibina dalam JSX, dan ia berbaloi ditinjau kerana ia sebuah resipi kecil lagi jujur yang boleh anda curi untuk mana-mana sparkline.

Pelicinan ialah helahnya. Bagi setiap pasangan titik bersebelahan, laluan menggunakan satu segmen cubic-bezier yang dua titik kawalannya terletak pada titik tengah mendatar antara keduanya — cpx = (prev.x + curr.x) / 2 — dengan titik kawalan dikekalkan pada ketinggian setiap hujungnya sendiri. Itulah pelicinan tangen-rata klasik: lengkung meluncur menerusi setiap titik data tanpa sekali pun melepasi di atas nilai tertinggi atau di bawah nilai terendah, sesuatu yang spline Catmull-Rom naif memang akan lakukan. Bagi sebuah graf tentang kiraan mesyuarat, "jangan sekali-kali melukis tonjolan yang membayangkan nilai yang tidak berlaku" bukanlah kemanisan; ia ketepatan. Kawasan terisi ialah lengkung yang sama yang ditutup di sepanjang bahagian bawah dan dicat dengan kecerunan menegak (sian, pudar daripada 30% hingga hampir tiada), dan garisan melukis dirinya sendiri dengan satu animasi pathLength framer-motion, dari kiri ke kanan.

Di bawah SVG ada saluran paip data, dan itulah wira yang senyap. Sebuah kaedah getAggregateStats() baharu pada repositori transkrip menjalankan tiga prepared statement terhadap jadual SQLite tempatan transcript_sessions: jumlah sepanjang masa (kiraan, tempoh terkumpul, tempoh purata), satu kiraan tujuh hari bergolek, dan satu baldi setiap hari melalui GROUP BY date(created_at). Kemudian — dan inilah perincian yang menjadikan graf itu kukuh — sebuah gelung JavaScript kecil menyusuri tujuh hari kalendar terakhir dan mengisi-semula setiap hari yang tidak dikembalikan oleh pertanyaan, dengan menolak masuk sifar. Oleh itu graf itu dijamin tepat tujuh titik, sentiasa.

Jaminan itulah yang menjadikan kes-kes tepi lenyap dan bukannya memerlukan pengawal yang bertaburan di seluruh view. Minggu kosong? Tujuh sifar, dan satu Math.max(count, 1) pada penyebut mengekalkan garisan rata di bawah dan bukannya membahagi dengan sifar. Satu titik data tunggal yang akan menyebabkan formula jarak-x i / (n − 1) menghasilkan NaN? Tidak mungkin — repositori tidak pernah mengeluarkan kurang daripada tujuh. Label hari minggu malah menghurai setiap baldi pada T12:00:00 dan bukannya tengah malam kosong, supaya sebuah rentetan YYYY-MM-DD tidak tergelincir ke hari sebelumnya dalam zon waktu UTC-negatif. Betulkan bentuk data di sumbernya dan kod pemaparan pun boleh menjadi naif dengan sengaja.

Kesemuanya kekal pada mesin. Pertanyaan statistik membaca pangkalan data tempatan, kembali melalui saluran IPC bertaip transcript:get-stats, dan beranimasi menjadi empat nombor yang mengira ke atas semasa dilekapkan. Tiada apa-apa tentang sejarah mesyuarat anda yang meninggalkan komputer riba untuk melukis graf ini — yang mana, bagi sebuah alat yang merakam perbualan anda, ialah satu-satunya cara yang boleh diterima untuk membina paparan analitik.

Satu lagi bug, kerana reka bentuk semula menyeret mereka ke cahaya

Terhimpun dalam keluaran yang sama ialah satu pembetulan yang tiada kaitan langsung dengan dashboard dan berkaitan sepenuhnya dengan jenis hutang yang tersadung oleh sesuatu reka bentuk semula. Gaya bar tatal gelap aplikasi telah hanyut menjadi dua takrifan CSS yang bersaing bagi kelas yang sama — satu ungu yang lebih lama dan satu putih-atas-gelap yang lebih baharu — dan yang mana menang bergantung pada susunan lata. Lebih teruk lagi, hanya elemen yang ingat menambah kelas itu yang mendapat sebarang gaya; selebihnya berbalik kepada bar tatal cerah lalai, dan bar tatal mendatar tidak pernah digayakan kerana peraturan lama hanya menetapkan lebar, tidak pernah tinggi. Pembetulan itu memadam kedua-dua takrifan, menggayakan bar tatal secara global pada setiap elemen, dan membuang kelas yang kini mati daripada sepuluh komponen yang selama ini membawanya. Ia sebuah diff dua baris yang diulang sepuluh kali — cukai tak berseri kerana menggayakan perkara yang sama dua kali dan membiarkan kedua-duanya terus hidup.

Tiga perkara yang diajarkan oleh keluaran ini

1. Tolak untuk menumpu. Dashboard menjadi lebih baik dengan melakukan lebih sedikit — kehilangan kawalan rakaman yang tidak pernah diperlukannya dan menjadi satu perkara yang jelas. Sebuah skrin yang sekali gus pemapar dan alat kawalan ialah dua produk separuh jadi; pilih satu dan alihkan yang lain ke tempat yang sepatutnya.
2. Pilih pengekodan yang layak untuk data anda. Kiraan yang jarang terbaca sebagai ketiadaan pada bar dan sebagai trend pada graf kawasan, daripada nombor yang seiras. Itu bukan putar belit — ia memilih bentuk jujur yang membolehkan data yang nyata lagi nipis berkomunikasi.
3. Jamin bentuk data di hulu. Gelung isi-semula-hingga-tujuh ialah sebab kod graf tidak mempunyai pemeriksaan null yang bertaburan: bahagi-dengan-sifar, NaN satu-titik, dan hari yang hilang semuanya lenyap kerana pertanyaan menjanjikan tepat tujuh baldi. Pemaparan yang kukuh bermula satu lapisan di bawah.

Untuk bab sebelumnya dalam kisah v1, empat keluaran dalam dua puluh enam jam (v1.7.6–v1.8.1); dan untuk keseluruhan lengkungnya, anatomi mengeluarkan perisian hingga ke kesempurnaan.