Redesign dashboardu kolem jedné vlnové křivky

Některá vydání přidávají funkci. GeekBye v1.8.2 spíš jednu odebral — a to odebrání je ten příběh. Během jediného odpoledne v únoru 2026 osmnáct commitů proměnilo domovskou stránku dashboardu z dálkového ovladače nahrávání v analytický pohled jen ke čtení: čtyři statistiky a jeden graf aktivity. Cestou dodalo bar chart, který žil dvacet dva minut, mřížku karet se statistikami, která žila dvacet, a ručně dělanou SVG vlnu, která obě nahradila. Celé hledání je zachováno v časových razítkách commitů, což je ten nejlepší druh designové dokumentace, jaký existuje.

Dashboard přestal být dálkovým ovladačem

Před tímto vydáním byla domovská stránka dashboardu ovládacím panelem. Vedla hero kartou — velkým nahrávacím widgetem s odznakem LIVE, tlačítky Pause/Resume/Stop, gradientovými skvrnami a hookem useSessionState, který to všechno drátoval k rekordéru. Dashboard se snažil být dvěma věcmi najednou: místem, kde si prohlížíte své schůzky, a místem, odkud řídíte rekordér. Dva produkty, jedna obrazovka, tiše soupeřící.

v1.8.2 si vybral jednu. Smazal hero kartu a zapojení useSessionState — včetně efektu, který vás automaticky navigoval na stránku s detailem schůzky ve chvíli, kdy session skončila, přesně ten druh „užitečného" skoku, který lidi překvapí uprostřed toku. Spuštění a skrytí rekordéru se přesunulo do prostého přepínače v navbaru (přeúčelované tlačítko, které ztratilo asi sto řádků, když přešlo z ovladače session na vypínač zap/vyp), podepřeného novým navbar:hide IPC handlerem. Zůstal dashboard, který dělá jednu věc: ukazuje vám, co jste nahráli. Jen ke čtení. Klidný.

V tomto přechodu je malý, lidský bug, který stojí za zmínku, protože je to ten druh, který redesign tiše zavede a dobré oko chytí tutéž hodinu. Dvě nová tlačítka v postranním panelu — Start a Hide — vyšla se stejnou obecnou grid ikonou, takže byla vizuálně identická. O dvanáct minut později následný commit dal Startu ikonu play, dal Hide ikonu přeškrtnutého oka a zabarvil Hide jantarově, aby se „ať appka zmizí" četlo jako záměrná akce, ne jako neutrální dvojče „startu". Ikony jsou text. Dvě tlačítka, která vypadají stejně, říkají totéž, a tato neznamenala totéž.

Bar chart, který žil dvacet dva minut

Tady je ta část, kterou miluji, a je zcela čitelná z git logu. V 16:29:34 přistál první návrh redesignu: graf aktivity za 7 dní vykreslený jako sloupce — animované sloupce, minimální výška, aby malé dny zůstaly viditelné, a ztlumený pahýl 2 pixely pro dny s nulou. Rozumné. Konvenční. Ten druh grafu, po kterém sáhnete bez přemýšlení.

V 16:51:21 — o dvacet dva minut později — byl smazán. Nahrazující commit říká přesně, co udělal: „replace bar chart with smooth wave area chart for 7-day activity" (nahraď bar chart hladkým vlnovým area chartem pro sedmidenní aktivitu). A v 16:52:21, minutu po tom, další commit strhl zaoblenou kartu a rámeček kolem vlny, „for cleaner look" (pro čistší vzhled).

Proč? Commity říkají jen co se změnilo, takže proč je výklad — ale tvar dat to dělá zjevným. Tohle je nástroj, kde typický uživatel má v libovolný den nula, jednu nebo dvě schůzky. Sedm sloupců, většina vysoká 2 pixely, vypadá jako skoro prázdná plocha. Stejných sedm čísel vykreslených jako spojitá vyplněná area vypadá jako trend — jemná vlna, která se zvedá tam, kde byl týden nabitý. Nic nebylo zfalšováno; hodnoty na ose y jsou identické. Redesign prostě zvolil kódování, které nechá řídká, ale poctivá data číst se jako tvar místo jako nepřítomnost.

Statistiky dostaly stejné zacházení na stejných hodinách. První návrh (16:29) dal čtyři čísla do mřížky 2×4 karet. V 16:49 se mřížka smrskla do jediného inline proužku se statistikami — jediný orámovaný řádek s vlasovými oddělovači, menším písmem, jeden kontejner místo čtyř. Pět boxů na obrazovce (čtyři karty plus karta s grafem) se stalo dvěma (proužek a vlna). Další PR přidal ještě jeden poctivý dotek: popisek „Total Time" se stal „Time in Meetings" (Čas na schůzkách), protože celkem-čeho byla oprávněná otázka, kterou by nikdo neměl muset klást.

Dvacet minut, od prvního návrhu k finálnímu, vše uvnitř jednoho pull requestu. Kdyby to bylo squashnuto do jediného commitu „redesign dashboard", hledání by bylo neviditelné. Protože nebylo, můžete v reálném čase sledovat, jak designer konverguje.

Vlna, mechanicky

Tady žádná knihovna na grafy není. Vlna je inline SVG postavené v JSX a stojí za pohled, protože je to malý, poctivý recept, který můžete ukrást pro jakýkoli sparkline.

Vyhlazení je ten trik. Pro každou dvojici sousedních bodů používá cesta cubic-bezier segment, jehož dva kontrolní body sedí ve vodorovném středu mezi nimi — cpx = (prev.x + curr.x) / 2 — s kontrolními body drženými ve vlastní výšce každého konce. To je klasické vyhlazení s plochou tečnou: křivka plynule prochází každým datovým bodem, aniž by kdy přestřelila nad nejvyšší nebo pod nejnižší hodnotu, což by naivní Catmull-Rom spline udělal. Pro graf o počtu schůzek není „nikdy nekresli hrb, který naznačuje hodnotu, jež se nestala" jemnůstka; je to správnost. Vyplněná area je stejná křivka uzavřená podél spodku a natřená svislým gradientem (cyan, blednoucí z 30 % téměř do ničeho), a čára se vykresluje sama animací framer-motion pathLength, zleva doprava.

Pod SVG je datové potrubí, a to je tichý hrdina. Nová metoda getAggregateStats() na transcript repository spouští tři prepared statements proti lokální SQLite tabulce transcript_sessions: celkové součty za celou dobu (počet, sečtená doba trvání, průměrná doba trvání), klouzavý sedmidenní počet a bucket na den s GROUP BY date(created_at). Pak — a tohle je ten detail, který dělá graf robustním — malá JavaScriptová smyčka projde posledních sedm kalendářních dní a doplní (back-fill) každý den, který dotaz nevrátil, přidáním nuly. Graf má proto garantovaně přesně sedm bodů, vždy.

Tahle garance je to, co nechá mezní případy zmizet místo toho, aby potřebovaly hlídače roztroušené po celém view. Prázdný týden? Sedm nul, a Math.max(count, 1) na jmenovateli drží čáru plochou u dna místo dělení nulou. Jediný datový bod, který by způsobil, že vzorec x-rozestupu i / (n − 1) vyprodukuje NaN? Nemůže nastat — repository nikdy nevydá méně než sedm. Popisky dnů dokonce parsují každý bucket na T12:00:00 místo holé půlnoci, takže YYYY-MM-DD řetězec nesklouzne na předchozí den v časovém pásmu s negativním UTC. Opravte tvar dat u zdroje a vykreslovací kód smí být naivní schválně.

Všechno zůstává na stroji. Dotaz na statistiky čte lokální databázi, vrací se přes typovaný IPC kanál transcript:get-stats a při mountu se animuje do čtyř dopočítávaných (count-up) čísel. Nic z historie vašich schůzek neopouští laptop, aby se nakreslil tento graf — což je pro nástroj, který nahrává vaše konverzace, jediný přijatelný způsob, jak postavit analytický pohled.

Ještě jeden bug, protože redesigny je vytáhnou na světlo

Zabalený do stejného vydání byl fix, který neměl nic společného s dashboardem a všechno společné s druhem dluhu, o který redesign zakopne. Stylování tmavého scrollbaru aplikace se rozjelo do dvou konkurenčních CSS definic téže třídy — starší fialové a novější bílé-na-tmavém — a která vyhrála, záviselo na pořadí kaskády. Hůř, nastylované byly vůbec jen prvky, které si pamatovaly třídu přidat; všechno ostatní spadlo zpět na výchozí světlý scrollbar a horizontální scrollbary nebyly nikdy nastylované, protože stará pravidla nastavovala jen šířku, nikdy výšku. Fix smazal obě definice, nastyloval scrollbar globálně na každém prvku a odstranil nyní mrtvou třídu z deseti komponent, které ji nesly. Je to dvouřádkový diff zopakovaný desetkrát — neefektní daň za to, že jste nastylovali tutéž věc dvakrát a nechali obě přežít.

Tři věci, které nás toto vydání naučilo

1. Odečítejte, abyste zaostřili. Dashboard se zlepšil tím, že dělal méně — přišel o nahrávací ovládání, které nikdy nepotřeboval, a stal se jednou jasnou věcí. Obrazovka, která je zároveň prohlížeč i dálkový ovladač, jsou dva poloviční produkty; vyberte jeden a druhý přesuňte tam, kam patří.
2. Zvolte kódování, které si vaše data zaslouží. Řídké počty se ve sloupcích čtou jako nepřítomnost a v area chartu jako trend, ze stejných čísel. To není přikrášlování — je to volba poctivého tvaru, který nechá skutečná, tenká data promluvit.
3. Garantujte tvar dat proti proudu. Smyčka doplnění-na-sedm je důvod, proč kód grafu nemá roztroušené null kontroly: dělení nulou, NaN z jednoho bodu a chybějící dny zmizí, protože dotaz slibuje přesně sedm bucketů. Robustní vykreslování začíná o vrstvu níž.

Předchozí kapitolu příběhu v1 najdete v čtyři vydání za dvacet šest hodin (v1.7.6–v1.8.1); a celý oblouk v anatomii dodávání softwaru k dokonalosti.