Prepracovanie dashboardu okolo jedného vlnového grafu

Niektoré vydania pridávajú feature. GeekBye v1.8.2 väčšinou jeden odstránil — a to odstránenie je tu príbehom. Za jedno popoludnie vo februári 2026 osemnásť commitov premenilo domovskú stránku dashboardu z diaľkového ovládača nahrávania na analytický pohľad len-na-čítanie: štyri štatistiky a jeden graf aktivity. Cestou vydalo stĺpcový graf, ktorý žil dvadsaťdva minút, mriežku štatistických kariet, ktorá žila dvadsať, a ručne vyrobenú vlnu v SVG, ktorá nahradila obe. Celé toto hľadanie je zachované v časových značkách commitov, a to je najlepší druh dizajnérskej dokumentácie, aký existuje.

Dashboard prestal byť diaľkovým ovládačom

Pred týmto vydaním bola domovská stránka dashboardu ovládacím panelom. Otvárala ju hero karta — veľký widget nahrávania s odznakom LIVE, tlačidlami Pause/Resume/Stop, gradientovými škvrnami a hookom useSessionState, ktorý to všetko spájal s rekordérom. Dashboard sa snažil byť dvomi vecami naraz: miestom, kde si pozeráš svoje stretnutia, a miestom, odkiaľ riadiš rekordér. Dva produkty, jedna obrazovka, ticho súperiace.

v1.8.2 si vybral jedno. Zmazal hero kartu a celé prepojenie useSessionState — vrátane efektu, ktorý ťa automaticky prehodil na stránku s detailom stretnutia vo chvíli, keď sedenie skončilo, čo je presne ten druh „nápomocného" skoku, ktorý ľudí vytrhne uprostred práce. Spúšťanie a skrývanie rekordéra sa presunulo do obyčajného prepínača v navbare (prerobené tlačidlo, ktoré schudlo asi o sto riadkov na ceste od kontroléra sedenia k vypínaču on/off), podopreté novým IPC handlerom navbar:hide. Zostal dashboard, ktorý robí jednu vec: ukazuje ti, čo si nahral. Len na čítanie. Pokojný.

V tom prechode sa skrýva malý, ľudský bug, ktorý stojí za zmienku, lebo je to ten typ vecí, ktoré redizajn ticho zavedie a dobré oko chytí v tú istú hodinu. Dve nové tlačidlá bočného panela — Start a Hide — vyšli s rovnakou generickou ikonou mriežky, takže boli vizuálne identické. O dvanásť minút neskôr doladenie dalo Startu ikonu play, dalo Hide ikonu prečiarknutého oka a zafarbilo Hide na jantárovo, aby sa „nech appka zmizne" čítalo ako zámerná akcia, nie neutrálne dvojča „štartu". Ikony sú tiež text. Dve tlačidlá, ktoré vyzerajú rovnako, hovoria to isté, a tieto neznamenali to isté.

Stĺpcový graf, ktorý žil dvadsaťdva minút

Tu je časť, ktorú milujem, a je úplne čitateľná z git logu. O 16:29:34 pristál prvý návrh redizajnu: 7-dňový graf aktivity nakreslený ako stĺpce — animované stĺpce, minimálna výška, aby drobné dni zostali viditeľné, 2-pixelový matný pahýľ pre nulové dni. Rozumné. Konvenčné. Ten druh grafu, po ktorom siahneš bez rozmýšľania.

O 16:51:21 — o dvadsaťdva minút neskôr — bol zmazaný. Nahrádzajúci commit hovorí presne, čo urobil: „replace bar chart with smooth wave area chart for 7-day activity". A o 16:52:21, o minútu neskôr, ďalší commit stiahol zaoblenú kartu a orámovanie okolo vlny — „for cleaner look".

Prečo? Commity hovoria len, čo sa zmenilo, takže prečo je čítanie — ale tvar dát to robí zjavným. Toto je nástroj, kde typický používateľ má nula, jedno alebo dve stretnutia v ktorýkoľvek deň. Sedem stĺpcov, väčšina vysokých 2 pixely, vyzerá ako takmer prázdne parkovisko. Tých istých sedem čísel nakreslených ako súvislá vyplnená plocha vyzerá ako trend — jemná vlna, ktorá stúpa tam, kde bol týždeň nabitý. Nič sa nesfalšovalo; hodnoty na osi y sú identické. Redizajn len vybral kódovanie, ktoré dovolí riedkym, čestným dátam čítať sa ako tvar namiesto ako neprítomnosť.

Štatistiky dostali to isté zaobchádzanie na tých istých hodinách. Prvý návrh (16:29) dal štyri čísla do mriežky kariet 2×4. O 16:49 sa mriežka zložila do jedného vloženého pruhu štatistík — jediný orámovaný riadok s vlasovými oddeľovačmi, menším písmom, jedným kontajnerom namiesto štyroch. Päť boxov na obrazovke (štyri karty plus karta grafu) sa stalo dvomi (pruh a vlna). Ďalší PR pridal ešte jeden čestný dotyk: popis „Total Time" (Celkový čas) sa stal „Time in Meetings" (Čas na stretnutiach), pretože celkový-čoho bola férová otázka, ktorú by nikto nemal musieť klásť.

Dvadsať minút, od prvého návrhu po finál, všetko vnútri jedného pull requestu. Keby to bolo zosquashené do jedného commitu „redesign dashboard", hľadanie by bolo neviditeľné. Keďže nebolo, môžeš sledovať, ako dizajnér v reálnom čase konverguje k riešeniu.

Vlna, mechanicky

Nie je tu žiadna grafová knižnica. Vlna je vložený SVG postavený v JSX a stojí za pohľad, lebo je to malý, čestný recept, ktorý môžeš ukradnúť pre akýkoľvek sparkline.

Vyhladzovanie je ten trik. Pre každú dvojicu susedných bodov používa cesta segment kubickej Bézierovej krivky, ktorého dva kontrolné body sedia v horizontálnom strede medzi nimi — cpx = (prev.x + curr.x) / 2 — pričom kontrolné body sú držané vo výške vlastného konca. To je klasické vyhladzovanie s plochou dotyčnicou: krivka plynulo prechádza cez každý dátový bod bez toho, aby kedy prestrelila nad najvyššiu alebo pod najnižšiu hodnotu, čo by naivný Catmull-Rom splajn urobil. Pre graf o počte stretnutí je „nikdy nekresli hrb, ktorý naznačuje hodnotu, ktorá sa nestala" nie pekná drobnosť; je to korektnosť. Vyplnená plocha je tá istá krivka uzavretá pozdĺž spodku a natretá vertikálnym gradientom (cyan, blednúci od 30% takmer do ničoho), a čiara sa sama nakreslí animáciou pathLength z framer-motion, zľava doprava.

Pod SVG je dátové inštalatérstvo a je to tichý hrdina. Nová metóda getAggregateStats() na repozitári transkriptov spúšťa tri pripravené dotazy proti lokálnej SQLite tabuľke transcript_sessions: súčty za celý čas (počet, sčítané trvanie, priemerné trvanie), kĺzavý počet za sedem dní a kôš na deň GROUP BY date(created_at). Potom — a toto je detail, ktorý robí graf robustným — malá JavaScriptová slučka prejde posledných sedem kalendárnych dní a doplní každý deň, ktorý dotaz nevrátil, vsunúc nulu. Graf má preto garantovane presne sedem bodov, vždy.

Práve táto garancia spôsobuje, že hraničné prípady zmiznú, namiesto toho, aby potrebovali strážcov roztrúsených po celom pohľade. Prázdny týždeň? Sedem núl a Math.max(count, 1) v menovateli drží čiaru plocho pri spodku namiesto delenia nulou. Jediný dátový bod, ktorý by spôsobil, že vzorec rozostupu na osi x i / (n − 1) vyprodukuje NaN? Nemôže sa stať — repozitár nikdy nevydá menej než sedem. Popisy dní v týždni dokonca parsujú každý kôš na T12:00:00 namiesto holej polnoci, aby sa reťazec YYYY-MM-DD nezošmykol na predchádzajúci deň v časovom pásme so záporným UTC. Oprav tvar dát pri zdroji a renderovací kód môže byť naivný naschvál.

Všetko to zostáva na stroji. Dotaz štatistík číta lokálnu databázu, vracia sa cez typovaný IPC kanál transcript:get-stats a animuje sa do štyroch počítajúcich čísel pri montovaní. Nič z tvojej histórie stretnutí neopustí laptop, aby nakreslilo tento graf — čo je pre nástroj, ktorý nahráva tvoje konverzácie, jediný prijateľný spôsob, ako postaviť analytický pohľad.

Ešte jeden bug, lebo redizajny ich vytiahnu na svetlo

Do toho istého vydania bola pribalená oprava, ktorá nemala nič spoločné s dashboardom a všetko spoločné s tým druhom dlhu, o ktorý redizajn zakopne. Štýlovanie tmavého scrollbaru v aplikácii sa rozišlo do dvoch súperiacich CSS definícií tej istej triedy — staršej fialovej a novšej bielej-na-tmavom — a to, ktorá vyhrala, záviselo od poradia v kaskáde. Horšie, štýlované boli len prvky, ktoré si spomenuli pridať triedu; všetko ostatné padlo späť na predvolený svetlý scrollbar a horizontálne scrollbary neboli štýlované nikdy, lebo staré pravidlá nastavovali len šírku, nikdy výšku. Oprava zmazala obe definície, naštýlovala scrollbar globálne na každom prvku a odstránila teraz-mŕtvu triedu z desiatich komponentov, ktoré ju nosili. Je to dvojriadkový diff zopakovaný desaťkrát — neglamúrna daň za to, že tá istá vec bola naštýlovaná dvakrát a obe verzie prežili.

Tri veci, ktoré nás toto vydanie naučilo

1. Odčítaj, aby si sa sústredil. Dashboard sa zlepšil tým, že robil menej — stratil ovládanie nahrávania, ktoré nikdy nepotreboval, a stal sa jednou jasnou vecou. Obrazovka, ktorá je zároveň prehliadač aj diaľkový ovládač, sú dva pol-produkty; vyber jeden a druhý presuň tam, kam patrí.
2. Vyber kódovanie, aké si tvoje dáta zaslúžia. Riedke počty sa čítajú ako neprítomnosť v stĺpcoch a ako trend na area charte — z identických čísel. To nie je manipulácia; je to výber čestného tvaru, ktorý dá skutočným, chudým dátam niečo povedať.
3. Garantuj tvar dát vyššie v toku. Slučka doplnenia na sedem je dôvod, prečo kód grafu nemá roztrúsené null kontroly: delenie nulou, NaN na jednom bode a chýbajúce dni všetko zmiznú, pretože dotaz sľubuje presne sedem košov. Robustné renderovanie začína o vrstvu nižšie.

Pre predchádzajúcu kapitolu príbehu v1 — štyri vydania za dvadsaťšesť hodín (v1.7.6–v1.8.1); a pre celý oblúk — anatómiu dodávania softvéru do dokonalosti.