A dashboard újratervezése egyetlen hullámdiagram köré

Néhány kiadás hozzáad egy funkciót. A GeekBye v1.8.2 többnyire eltávolított egyet — és az eltávolítás maga a történet. Egyetlen 2026 februári délutánon tizennyolc commit alakította át a dashboard kezdőoldalát felvételi távirányítóból csak-olvasható analitikai nézetté: négy statisztika és egy aktivitásdiagram. Útközben szállított egy bar chartot, amely huszonkét percig élt, egy statisztikakártya-rácsot, amely húszig, és egy kézzel készített SVG hullámot, amely mindkettőt leváltotta. Az egész keresés megőrződik a commitok időbélyegeiben, ami a létező legjobb fajta design-dokumentáció.

A dashboard megszűnt távirányító lenni

E kiadás előtt a dashboard kezdőoldala egy vezérlőpult volt. Egy hero kártyával nyitott — egy nagy felvételi widget LIVE jelvénnyel, Pause/Resume/Stop gombokkal, gradiens foltokkal, és egy useSessionState hookkal, amely az egészet a rögzítőhöz drótozta. A dashboard egyszerre próbált két dolog lenni: az a hely, ahol megnézed a megbeszéléseidet, és az a hely, ahonnan vezérled a rögzítőt. Két termék, egy képernyő, csendben versengve.

A v1.8.2 egyet választott. Törölte a hero kártyát és a useSessionState bekötést — beleértve egy effektet, amely automatikusan egy megbeszélés részletező oldalára navigált abban a pillanatban, amikor egy session véget ért, épp az a fajta „segítőkész" ugrás, amely folyamat közben meglepi az embereket. A rögzítő indítása és elrejtése egy egyszerű navbar-kapcsolóba került (egy újrahasznosított gomb, amely mintegy száz sort veszített, ahogy session-vezérlőből be/ki kapcsolóvá vált), amelyet egy új navbar:hide IPC handler támogat. Ami maradt, az egy dashboard, amely egyetlen dolgot csinál: megmutatja, mit vettél fel. Csak-olvasható. Nyugodt.

Van egy apró, emberi bug ebben az átmenetben, amelyet érdemes megemlíteni, mert ez az a fajta, amelyet egy újratervezés csendben bevezet, és egy jó szem ugyanabban az órában elkap. A két új oldalsáv-gomb — Start és Hide — ugyanazzal az általános rács-ikonnal jelent meg, így vizuálisan azonosak voltak. Tizenkét perccel később egy követő commit a Startnak play-ikont adott, a Hide-nak áthúzott-szem ikont, és a Hide-ot borostyánszínűre színezte, hogy a „tüntesd el az appot" szándékos cselekvésként olvasódjon, ne a „start" semleges ikertestvéreként. Az ikonok szövegek. Két gomb, amely egyformán néz ki, ugyanazt mondja, ezek pedig nem ugyanazt jelentették.

A bar chart, amely huszonkét percig élt

Itt az a rész, amit imádok, és teljesen olvasható a git logból. 16:29:34-kor landolt az újratervezés első vázlata: egy 7 napos aktivitásdiagram sávokként rajzolva — animált oszlopok, egy minimális magasság, hogy a kicsi napok láthatók maradjanak, és egy 2 pixeles halvány csonk a nulla napokra. Ésszerű. Konvencionális. Az a fajta diagram, amiért gondolkodás nélkül nyúlsz.

16:51:21-kor — huszonkét perccel később — törölték. A helyettesítő commit pontosan megmondja, mit tett: „replace bar chart with smooth wave area chart for 7-day activity" (cseréld le a bar chartot sima hullám area chartra a 7 napos aktivitáshoz). És 16:52:21-kor, egy perccel azután, egy másik commit lefejtette a lekerekített kártyát és a szegélyt a hullám körül, „for cleaner look" (tisztább megjelenésért).

Miért? A commitok csak azt mondják, mi változott, így a miért egy olvasat — de az adatok formája nyilvánvalóvá teszi. Ez egy olyan eszköz, ahol egy tipikus felhasználónak egy adott napon nulla, egy vagy két megbeszélése van. Hét sáv, a legtöbb 2 pixel magas, egy szinte üres területnek látszik. Ugyanaz a hét szám folyamatos kitöltött area-ként rajzolva trendnek látszik — egy szelíd hullám, amely ott emelkedik, ahol a hét zsúfolt volt. Semmit sem hamisítottak; az y-értékek azonosak. Az újratervezés egyszerűen azt a kódolást választotta, amely engedi, hogy a ritka, de őszinte adatok formaként olvasódjanak, ne hiányként.

A statisztikák ugyanazt a bánásmódot kapták ugyanazon az órán. Az első vázlat (16:29) négy számot tett egy 2×4 kártyarácsba. 16:49-kor a rács egyetlen inline statisztikasávvá omlott össze — egyetlen szegélyezett sor, hajszálvékony elválasztókkal, kisebb betűtípussal, egy konténer négy helyett. Öt doboz a képernyőn (négy kártya plusz egy diagramkártya) kettővé vált (egy sáv és egy hullám). A következő PR egy további őszinte gesztust adott hozzá: a „Total Time" felirat „Time in Meetings" (Idő megbeszéléseken) lett, mert az összesen-mije jogos kérdés volt, amelyet senkinek sem kellene feltennie.

Húsz perc, az első vázlattól a véglegesig, mind egyetlen pull requesten belül. Ha ezeket egyetlen „redesign dashboard" commitba squasholták volna, a keresés láthatatlan lenne. Mivel nem így történt, valós időben figyelheted, ahogy egy designer konvergál.

A hullám, mechanikusan

Itt nincs charting library. A hullám egy JSX-ben épített inline SVG, és megér egy pillantást, mert egy kicsi, őszinte recept, amelyet bármelyik sparkline-hoz ellophatsz.

A simítás a trükk. Minden szomszédos pontpárhoz a path egy cubic-bezier szegmenst használ, amelynek két kontrollpontja a köztük lévő vízszintes középpontban ül — cpx = (prev.x + curr.x) / 2 —, a kontrollpontokat mindkét végpont saját magasságán tartva. Ez a klasszikus lapos-érintős simítás: a görbe simán halad át minden adatponton anélkül, hogy valaha a legmagasabb fölé vagy a legalacsonyabb alá lőne túl, amit egy naiv Catmull-Rom spline megtenne. Egy megbeszélésszámokról szóló diagramnál a „soha ne rajzolj olyan púpot, amely egy meg nem történt értéket sugall" nem finomkodás; ez helyesség. A kitöltött area ugyanaz a görbe, alul lezárva és függőleges gradienssel festve (cyan, 30%-ról szinte a semmibe halványulva), a vonal pedig magától rajzolódik ki egy framer-motion pathLength animációval, balról jobbra.

Az SVG alatt van az adatvízvezeték, és ez a csendes hős. A transcript repository egy új getAggregateStats() metódusa három prepared statementet futtat a helyi SQLite transcript_sessions táblán: mindenkori összegek (darabszám, összegzett időtartam, átlagos időtartam), egy gördülő hétnapos darabszám, és egy naponkénti GROUP BY date(created_at) bucket. Aztán — és ez az a részlet, amely robusztussá teszi a diagramot — egy kis JavaScript ciklus végigjárja az utolsó hét naptári napot, és feltölti (back-fill) minden napot, amelyet a lekérdezés nem adott vissza, betolva egy nullát. A diagram így garantáltan pontosan hét pont, mindig.

Ez a garancia az, ami eltünteti a szélső eseteket ahelyett, hogy a nézeten szétszórt őrökre lenne szükség. Üres hét? Hét nulla, és egy Math.max(count, 1) a nevezőn laposan tartja a vonalat alul ahelyett, hogy nullával osztana. Egyetlen adatpont, amely az i / (n − 1) x-térköz képletet NaN-ná tenné? Nem történhet meg — a repository sosem bocsát ki hétnél kevesebbet. A hétköznap-címkék még minden bucketet T12:00:00-nál parse-olnak, nem a puszta éjfélnél, így egy YYYY-MM-DD string nem csúszik át az előző napra egy negatív-UTC időzónában. Javítsd az adatok formáját a forrásnál, és a renderelő kód szándékosan lehet naiv.

Mindez a gépen marad. A statisztika-lekérdezés a helyi adatbázist olvassa, egy típusos transcript:get-stats IPC csatornán tér vissza, és mountoláskor négy felfelé számláló (count-up) számmá animálódik. A megbeszélés-előzményedből semmi sem hagyja el a laptopot, hogy megrajzolja ezt a diagramot — ami egy olyan eszköznél, amely a beszélgetéseidet rögzíti, az egyetlen elfogadható módja egy analitikai nézet felépítésének.

Még egy bug, mert az újratervezések a fényre rángatják őket

Ugyanabba a kiadásba csomagolva volt egy fix, amelynek semmi köze nem volt a dashboardhoz, és minden köze ahhoz a fajta adóssághoz, amelybe egy újratervezés belebotlik. Az app sötét scrollbar-stílusa két versengő CSS definícióvá sodródott ugyanabból az osztályból — egy régebbi lila és egy újabb fehér-sötéten —, és hogy melyik győz, a cascade sorrendjétől függött. Ami rosszabb, egyáltalán csak azok az elemek kaptak stílust, amelyek nem feledkeztek meg az osztály hozzáadásáról; minden más visszaesett az alapértelmezett világos scrollbarra, a vízszintes scrollbarok pedig sosem kaptak stílust, mert a régi szabályok csak szélességet állítottak be, magasságot soha. A fix törölte mindkét definíciót, globálisan stílust adott a scrollbarnak minden elemen, és eltávolította a mostanra halott osztályt abból a tíz komponensből, amely cipelte. Ez egy kétsoros diff tízszer megismételve — a fényűzés nélküli adó azért, mert ugyanazt kétszer stílusoztad, és hagytad, hogy mindkettő túléljen.

Három dolog, amit ez a kiadás tanított nekünk

1. Vonj ki, hogy fókuszálj. A dashboard attól lett jobb, hogy kevesebbet csinált — elveszítve a felvételi vezérlőket, amelyekre sosem volt szüksége, és egyetlen világos dologgá válva. Egy képernyő, amely egyszerre nézegető és távirányító, két féltermék; válassz egyet, a másikat pedig helyezd oda, ahová tartozik.
2. Válaszd azt a kódolást, amelyet az adataid megérdemelnek. A ritka darabszámok sávokban hiányként, area chartban trendként olvasódnak, azonos számokból. Ez nem ferdítés — ez az őszinte forma kiválasztása, amely engedi a valós, sovány adatokat kommunikálni.
3. Garantáld az adatok formáját fentről. A feltöltés-hétig ciklus az oka annak, hogy a diagram kódjában nincsenek szétszórt null-ellenőrzések: a nullával osztás, az egypontos NaN és a hiányzó napok mind eltűnnek, mert a lekérdezés pontosan hét bucketet ígér. A robusztus renderelés egy réteggel lejjebb kezdődik.

A v1-történet előző fejezetéért lásd négy kiadás huszonhat óra alatt (v1.7.6–v1.8.1); a teljes ívért pedig a szoftver tökéletesre szállításának anatómiája.