Dashboard'u Tek Bir Dalga Grafiği Etrafında Yeniden Tasarlamak

Bazı sürümler bir özellik ekler. GeekBye v1.8.2 ise çoğunlukla bir tanesini kaldırdı — ve asıl hikâye o kaldırma. Şubat 2026'da tek bir öğleden sonrada, on sekiz commit dashboard ana ekranını kayıt için bir uzaktan kumandadan salt-okunur bir analitik görünüme dönüştürdü: dört istatistik ve bir etkinlik grafiği. Yol boyunca yirmi iki dakika yaşayan bir bar grafik, yirmi dakika yaşayan bir istatistik kartı ızgarası ve ikisinin yerini alan, elde yazılmış bir SVG dalgası sevk etti. Bütün arayış commit zaman damgalarında korunuyor, ki bu da var olan en iyi tasarım dokümantasyonu türüdür.

Dashboard artık bir uzaktan kumanda değildi

Bu sürümden önce dashboard ana ekranı bir kontrol paneliydi. Başında bir hero card vardı — LIVE rozetli büyük bir kayıt widget'ı, Pause/Resume/Stop düğmeleri, gradyan lekeleri ve hepsini kaydediciye bağlayan bir useSessionState hook'u. Dashboard aynı anda iki şey olmaya çalışıyordu: toplantılarına baktığın yer ve kaydediciyi sürdüğün yer. İki ürün, bir ekran, sessizce yarışıyor.

v1.8.2 birini seçti. Hero card'ı ve useSessionState bağlantısını sildi — bir oturum biter bitmez seni otomatik olarak bir toplantının detay sayfasına götüren bir efekt de dahil; bu da tam olarak insanları akışın ortasında şaşırtan türden "yardımsever" bir sıçrama. Kaydediciyi başlatmak ve gizlemek düz bir navbar toggle'ına taşındı (oturum kontrolcüsünden açma/kapama anahtarına dönüşürken yaklaşık yüz satır kaybeden, yeniden amaçlandırılmış bir düğme), yeni bir navbar:hide IPC handler'ıyla desteklendi. Geriye tek bir şey yapan bir dashboard kaldı: sana ne kaydettiğini göstermek. Salt-okunur. Sakin.

O geçişte, dikkat çekmeye değer küçük, insani bir bug var; çünkü bu, tam da bir yeniden tasarımın sessizce soktuğu ve keskin bir gözün aynı saat içinde yakaladığı türden bir şey. İki yeni kenar çubuğu düğmesi — Start ve Hide — aynı genel ızgara simgesiyle sevk edildi, yani görsel olarak birbirinin aynıydı. On iki dakika sonra bir takip commit'i Start'a bir oynat simgesi, Hide'a bir kapalı-göz simgesi verdi ve Hide'ı kehribar rengine boyadı; böylece "uygulamayı ortadan kaldır" eylemi, "başlat"ın nötr bir ikizi yerine bilinçli bir eylem olarak okundu. Simgeler birer metindir. Aynı görünen iki düğme aynı şeyi söyler, oysa bunlar aynı şeyi kastetmiyordu.

Yirmi iki dakika yaşayan bar grafik

İşte bayıldığım kısım, ve tamamı git log'dan okunabiliyor. 16:29:34'te yeniden tasarımın ilk taslağı indi: barlar olarak çizilmiş 7 günlük bir etkinlik grafiği — animasyonlu sütunlar, küçük günlerin görünür kalması için bir minimum yükseklik, sıfır olan günler için 2 piksellik soluk bir çubuk. Makul. Alışıldık. Düşünmeden başvurduğun türden bir grafik.

16:51:21'de — yirmi iki dakika sonra — silindi. Yerine gelen commit ne yaptığını tam olarak söylüyor: "7 günlük etkinlik için bar grafiği pürüzsüz dalga alan grafiğiyle değiştir." Ve 16:52:21'de, bir dakika sonra, başka bir commit dalganın etrafındaki yuvarlatılmış kartı ve kenarlığı "daha temiz bir görünüm için" kaldırdı.

Neden? Commit'ler yalnızca neyin değiştiğini söylüyor, dolayısıyla nedeni bir yorum — ama verinin biçimi bunu apaçık kılıyor. Bu, tipik bir kullanıcının herhangi bir günde sıfır, bir ya da iki toplantısı olan bir araç. Çoğu 2 piksel yüksekliğindeki yedi bar, neredeyse boş bir alan gibi görünüyor. Aynı yedi sayı sürekli dolu bir alan olarak çizildiğinde bir trend gibi görünüyor — haftanın yoğun olduğu yerde yükselen yumuşak bir dalga. Hiçbir şey uydurulmadı; y değerleri birebir aynı. Yeniden tasarım yalnızca, seyrek ama dürüst verinin bir yokluk yerine bir biçim olarak okunmasını sağlayan kodlamayı seçti.

İstatistikler de aynı saatte aynı muameleyi gördü. İlk taslak (16:29) dört sayıyı 2×4'lük bir kart ızgarasına koydu. 16:49'da ızgara tek bir satır içi istatistik şeridine çöktü — kenarlıklı tek bir satır, kıl payı inceliğinde ayırıcılar, daha küçük yazı tipi, dört yerine bir konteyner. Ekrandaki beş kutu (dört kart artı bir grafik kartı) ikiye indi (bir şerit ve bir dalga). Sonraki PR bir dürüst dokunuş daha ekledi: "Toplam Süre" etiketi "Toplantılardaki Süre" oldu, çünkü neyin toplamı olduğu, kimsenin sormak zorunda kalmaması gereken haklı bir soruydu.

Yirmi dakika, ilk taslaktan finale, hepsi tek bir pull request içinde. Bunlar tek bir "dashboard'u yeniden tasarla" commit'ine ezilmiş olsaydı, arayış görünmez olurdu. Öyle olmadığı için, bir tasarımcının gerçek zamanlı olarak yakınsadığını izleyebiliyorsun.

Dalga, mekanik olarak

Burada grafik kütüphanesi yok. Dalga, JSX içinde kurulmuş satır içi bir SVG ve bakmaya değer, çünkü herhangi bir sparkline için çalabileceğin küçük, dürüst bir tarif.

İşin sırrı yumuşatmada. Bitişik her nokta çifti için, yol iki kontrol noktası aralarındaki yatay orta noktada oturan bir cubic-bezier segmenti kullanıyor — cpx = (prev.x + curr.x) / 2 — kontrol noktaları her ucun kendi yüksekliğinde tutuluyor. Bu, klasik düz-teğet yumuşatması: eğri her veri noktasından, en yüksek değerin üstüne ya da en düşük değerin altına asla taşmadan yumuşakça geçiyor; oysa naif bir Catmull-Rom spline'ı bunu yapardı. Toplantı sayıları hakkında bir grafik için "gerçekleşmemiş bir değeri ima eden bir çıkıntı asla çizme" bir incelik değil; doğruluğun ta kendisidir. Dolu alan, alttan kapatılmış ve dikey bir gradyanla (camgöbeği, %30'dan neredeyse hiçliğe soluyor) boyanmış aynı eğri; çizgi ise soldan sağa, bir framer-motion pathLength animasyonuyla kendini çiziyor.

SVG'nin altında veri tesisatı var, ve o da sessiz kahraman. Transkript deposundaki yeni bir getAggregateStats() metodu, yerel SQLite transcript_sessions tablosuna karşı üç prepared statement çalıştırıyor: tüm zamanların toplamları (sayı, toplam süre, ortalama süre), yuvarlanan yedi günlük bir sayı ve GROUP BY date(created_at) ile günlük bir kova. Sonra — ve grafiği sağlam kılan ayrıntı bu — küçük bir JavaScript döngüsü son yedi takvim gününü dolaşıyor ve sorgunun döndürmediği her günü sıfır ekleyerek geri dolduruyor. Grafik böylece her zaman tam olarak yedi noktaya sahip oluyor, kesinlikle.

Bu garanti, uç durumların görünümün her yerine dağılmış korumalara ihtiyaç duymak yerine ortadan kaybolmasını sağlayan şey. Boş bir hafta mı? Yedi sıfır, ve paydadaki bir Math.max(count, 1) sıfıra bölmek yerine çizgiyi altta düz tutuyor. i / (n − 1) x-aralık formülünün NaN üretmesine yol açacak tek bir veri noktası mı? Olamaz — depo asla yediden az üretmiyor. Hafta günü etiketleri her kovayı çıplak gece yarısı yerine T12:00:00'te ayrıştırıyor bile, böylece bir YYYY-MM-DD dizesi negatif-UTC bir saat diliminde bir önceki güne kaymıyor. Verinin biçimini kaynağında düzelt, render kodu da bilerek naif olmaya hak kazansın.

Bütün bunlar makinede kalıyor. İstatistik sorgusu yerel veritabanını okuyor, tipli bir transcript:get-stats IPC kanalı üzerinden dönüyor ve monte olurken yukarı sayan dört sayıya animasyonlanıyor. Bu grafiği çizmek için toplantı geçmişine dair hiçbir şey dizüstünden ayrılmıyor — ki konuşmalarını kaydeden bir araç için, bir analitik görünüm inşa etmenin tek kabul edilebilir yolu bu.

Bir bug daha, çünkü yeniden tasarımlar onları aydınlığa sürükler

Aynı sürüme dahil edilmiş, dashboard'la hiçbir ilgisi olmayan ama bir yeniden tasarımın takıldığı türden borçla her ilgisi olan bir düzeltme vardı. Uygulamanın koyu kaydırma çubuğu stili, aynı sınıfın birbiriyle yarışan iki CSS tanımına kaymıştı — daha eski mor bir tanım ve daha yeni beyaz-üstüne-koyu bir tanım — ve hangisinin kazandığı kademe sırasına bağlıydı. Daha kötüsü, yalnızca sınıfı eklemeyi hatırlayan öğeler stil alıyordu; geri kalan her şey varsayılan açık kaydırma çubuğuna geri dönüyordu ve yatay kaydırma çubukları hiç stillenmiyordu çünkü eski kurallar yalnızca bir genişlik belirliyor, asla bir yükseklik belirlemiyordu. Düzeltme her iki tanımı da sildi, kaydırma çubuğunu her öğede global olarak stilledi ve artık ölü olan sınıfı, onu taşıyan on bileşenden kaldırdı. İki satırlık, on kez tekrarlanan bir diff — aynı şeyi iki kez stilleyip ikisini de yaşatmanın gösterişsiz vergisi.

Bu sürümün bize öğrettiği üç şey

1. Odaklanmak için çıkar. Dashboard daha az yaparak daha iyi oldu — hiç ihtiyaç duymadığı kayıt kontrollerini kaybederek ve tek bir net şey hâline gelerek. Hem bir görüntüleyici hem de bir kumanda olan bir ekran, iki yarım üründür; birini seç ve diğerini ait olduğu yere taşı.
2. Verinin hak ettiği kodlamayı seç. Seyrek sayımlar aynı sayılardan barlarda yokluk, alan grafiğinde ise trend olarak okunur. Bu bir çarpıtma değil — gerçek, ince verinin iletişim kurmasını sağlayan dürüst biçimi seçmektir.
3. Verinin biçimini yukarı akışta garanti et. Yediye-geri-doldurma döngüsü, grafik kodunun neden dağınık null kontrolleri olmadığının nedeni: sıfıra bölme, tek-nokta NaN ve eksik günlerin hepsi kaybolur çünkü sorgu tam olarak yedi kova söz verir. Sağlam render bir kat aşağıda başlar.

v1 hikâyesinin bir önceki bölümü için, yirmi altı saatte dört sürüm (v1.7.6–v1.8.1); tüm yay için de yazılımı kusursuzluğa kadar sevk etmenin anatomisi.