Å redesigne dashbordet rundt ett enkelt bølgediagram

Noen releaser legger til en feature. GeekBye v1.8.2 fjernet stort sett én — og fjerningen er historien. På en enkelt ettermiddag i februar 2026 forvandlet atten commits dashbordets forside fra en fjernkontroll for opptak til en kun lesbar analysevisning: fire statistikktall og ett aktivitetsdiagram. Underveis shippet den et stolpediagram som levde tjueto minutter, et rutenett av statistikkort som levde tjue, og en håndlaget SVG-bølge som erstattet begge. Hele søket er bevart i commit-tidsstemplene, som er den beste sorten designdokumentasjon som finnes.

Dashbordet sluttet å være en fjernkontroll

Før denne releasen var dashbordets forside et kontrollpanel. Den innledet med et hero-kort — en stor opptakswidget med et LIVE-merke, Pause/Resume/Stop-knapper, gradientklatter og en useSessionState-hook som koblet alt sammen med opptakeren. Dashbordet prøvde å være to ting på én gang: stedet der du ser på møtene dine, og stedet der du styrer opptakeren. To produkter, én skjerm, i stille konkurranse.

v1.8.2 valgte én. Den slettet hero-kortet og useSessionState-koblingen — inkludert en effekt som automatisk navigerte deg til et møtes detaljside i det øyeblikket en sesjon tok slutt, som er nøyaktig den typen "hjelpsomme" hopp som overrasker folk midt i flyten. Å starte og skjule opptakeren flyttet ut til en enkel bryter i navbaren (en ombygd knapp som mistet omtrent hundre linjer da den gikk fra sesjonskontroller til av/på-bryter), støttet av en ny navbar:hide-IPC-handler. Igjen sto et dashbord som gjør én ting: viser deg hva du har tatt opp. Kun lesbar. Rolig.

Det finnes en liten, menneskelig bug i den overgangen verdt å trekke fram, for det er akkurat den typen et redesign stille innfører og et godt øye fanger samme time. De to nye sidepanelknappene — Start og Hide — ble shippet med det samme generiske rutenettikonet, så de var visuelt identiske. Tolv minutter senere ga en oppfølgingscommit Start et play-ikon, ga Hide et øye-av-ikon og tonet Hide ravgul, slik at "få appen til å forsvinne" leses som en bevisst handling snarere enn en nøytral tvilling til "start". Ikoner er tekst. To knapper som ser like ut sier det samme, og disse betydde ikke det samme.

Stolpediagrammet som levde tjueto minutter

Her er delen jeg elsker, og den er fullt lesbar fra git-loggen. Klokken 16:29:34 landet redesignets første utkast: et aktivitetsdiagram over 7 dager tegnet som stolper — animerte kolonner, en minimumshøyde slik at bitte små dager forble synlige, en 2-piksels dempet stubb for null-dager. Fornuftig. Konvensjonelt. Den typen diagram man strekker seg etter uten å tenke.

Klokken 16:51:21 — tjueto minutter senere — ble det slettet. Erstatningscommiten sier nøyaktig hva den gjorde: "replace bar chart with smooth wave area chart for 7-day activity." Og klokken 16:52:21, ett minutt etter, skrelte en annen commit bort det avrundede kortet og kanten rundt bølgen, "for cleaner look."

Hvorfor? Commitene sier bare hva som endret seg, så hvorfor er en tolkning — men dataenes form gjør det åpenbart. Dette er et verktøy der en typisk bruker har null, én eller to møter på en gitt dag. Sju stolper, de fleste 2 piksler høye, ser nesten tomme og spredte ut. De samme sju tallene tegnet som et sammenhengende fylt areal ser ut som en trend — en mild bølge som stiger der uken var travel. Ingenting ble forfalsket; y-verdiene er identiske. Redesignet valgte rett og slett kodingen som lar tynne, ærlige data leses som en form i stedet for som fravær.

Statistikken fikk samme behandling på samme klokke. Det første utkastet (16:29) satte fire tall i et 2×4-rutenett av kort. Klokken 16:49 kollapset rutenettet til én inline statistikkrad — én innrammet rad med hårfine skilletegn, mindre skrift, én container i stedet for fire. Fem bokser på skjermen (fire kort pluss et diagramkort) ble til to (en rad og en bølge). Neste PR la til enda et ærlig strøk: etiketten "Total Time" ble til "Time in Meetings", fordi totalt-av-hva var et rimelig spørsmål ingen burde måtte stille.

Tjue minutter, fra første utkast til endelig, alt innenfor én pull request. Hvis de hadde blitt klemt sammen til én "redesign dashboard"-commit, ville søket vært usynlig. Fordi de ikke var det, kan du se en designer konvergere i sanntid.

Bølgen, mekanisk

Det finnes ingen diagrambibliotek her. Bølgen er en inline-SVG bygd i JSX, og den er verdt et blikk fordi den er en liten, ærlig oppskrift du kan snappe til hvilken som helst sparkline.

Utjevningen er trikset. For hvert par av nabopunkter bruker banen et kubisk Bézier-segment hvis to kontrollpunkter sitter i det horisontale midtpunktet mellom dem — cpx = (prev.x + curr.x) / 2 — med kontrollpunktene holdt i hver endes egen høyde. Det er den klassiske flat-tangent-utjevningen: kurven glir mykt gjennom hvert datapunkt uten noen gang å skyte over den høyeste eller under den laveste verdien, som en naiv Catmull-Rom-spline ville gjort. For et diagram om antall møter er "tegn aldri en kul som antyder en verdi som ikke skjedde" ingen finesse; det er korrekthet. Det fylte arealet er den samme kurven lukket langs bunnen og malt med en vertikal gradient (cyan, som toner fra 30 % til nesten ingenting), og linjen tegner seg selv inn fra venstre mot høyre med en framer-motion pathLength-animasjon.

Under SVG-en ligger data-rørleggingen, og den er den stille helten. En ny getAggregateStats()-metode på transkript-repositoryet kjører tre forberedte statements mot den lokale SQLite-tabellen transcript_sessions: totaler for all tid (antall, summert varighet, gjennomsnittlig varighet), en rullende sjudagers-telling og en GROUP BY date(created_at)-bøtte per dag. Så — og det er detaljen som gjør diagrammet robust — går en liten JavaScript-løkke gjennom de siste sju kalenderdagene og gjenoppfyller hver dag spørringen ikke returnerte, ved å dytte inn en null. Diagrammet får derfor garantert nøyaktig sju punkter, alltid.

Den garantien er det som får kanttilfellene til å forsvinne i stedet for å trenge vakter spredt gjennom visningen. En tom uke? Sju nuller, og en Math.max(count, 1) på nevneren holder linjen flat i bunnen i stedet for å dele på null. Et enkelt datapunkt som ville fått x-avstandsformelen i / (n − 1) til å gi NaN? Kan ikke skje — repositoryet sender aldri ut færre enn sju. Ukedagsetikettene parser til og med hver bøtte ved T12:00:00 snarere enn naken midnatt, slik at en YYYY-MM-DD-streng ikke glir til forrige dag i en negativ UTC-tidssone. Fiks dataenes form ved kilden, og renderingskoden får være naiv med vilje.

Alt blir på maskinen. Statistikkspørringen leser den lokale databasen, returnerer gjennom en typet transcript:get-stats-IPC-kanal og animeres inn i fire opptellende tall ved montering. Ingenting om møtehistorikken din forlater laptopen for å tegne dette diagrammet — som, for et verktøy som tar opp samtalene dine, er den eneste akseptable måten å bygge en analysevisning på.

Enda en bug, for redesign drar dem fram i lyset

Pakket inn i samme release var en fiks som ikke hadde noe med dashbordet å gjøre og alt å gjøre med den typen gjeld et redesign snubler over. Appens mørke scrollbar-styling hadde drevet ut i to konkurrerende CSS-definisjoner av samme klasse — en eldre lilla og en nyere hvit-på-mørk — og hvilken som vant, avhang av kaskaderekkefølgen. Verre, bare elementer som husket å legge til klassen ble stylet i det hele tatt; alt annet falt tilbake på den lyse standard-scrollbaren, og horisontale scrollbars ble aldri stylet fordi de gamle reglene bare satte en bredde, aldri en høyde. Fiksen slettet begge definisjonene, stylet scrollbaren globalt på hvert element og fjernet den nå døde klassen fra de ti komponentene som hadde båret den. Det er en tolinjers diff gjentatt ti ganger — den uglamorøse skatten for å ha stylet den samme tingen to ganger og latt begge overleve.

Tre ting denne releasen lærte oss

1. Trekk fra for å fokusere. Dashbordet ble bedre av å gjøre mindre — ved å miste opptakskontrollene det aldri trengte og bli én klar ting. En skjerm som er både en viewer og en fjernkontroll er to halve produkter; velg én og flytt den andre dit den hører hjemme.
2. Velg kodingen dataene dine fortjener. Tynne tall leses som fravær i stolper og som en trend i et area chart, fra identiske tall. Det er ikke spinn — det er å velge den ærlige formen som lar ekte, tynne data kommunisere.
3. Garanter dataenes form oppstrøms. Gjenoppfyll-til-sju-løkken er grunnen til at diagramkoden ikke har spredte null-sjekker: divisjon med null, NaN ved ett enkelt punkt og manglende dager forsvinner alle fordi spørringen lover nøyaktig sju bøtter. Robust rendering starter ett lag lenger ned.

For det forrige kapittelet i v1-historien, fire releaser på tjueseks timer (v1.7.6–v1.8.1); og for hele buen, anatomien i å shippe programvare til perfeksjon.