Töölaua ümberkujundamine ühe lainegraafiku ümber

Mõni väljalase lisab funktsiooni. GeekBye v1.8.2 pigem eemaldas ühe — ja eemaldamine ongi lugu. Ühel 2026. aasta veebruari pärastlõunal muutis kaheksateist commitit töölaua avalehe salvestamise kaugjuhtimispuldist ainult loetavaks analüütikavaateks: neli statistikanäitajat ja üks aktiivsusgraafik. Teel sinna tarnis see tulpdiagrammi, mis elas kakskümmend kaks minutit, statistikakaartide ruudustiku, mis elas kakskümmend, ja käsitsi tehtud SVG-laine, mis asendas mõlemad. Kogu otsing on säilinud commit'ide ajatemplites, mis on parim disainidokumentatsioon, mis üldse olemas on.

Töölaud lakkas olemast kaugjuhtimispult

Enne seda väljalaset oli töölaua avaleht juhtpaneel. See algas hero-kaardiga — suur salvestusvidin LIVE-märgisega, Pause/Resume/Stop nuppudega, gradiendiplekkidega ja useSessionState hookiga, mis sidus selle kõik salvestiga. Töölaud üritas olla kaks asja korraga: koht, kus sa oma kohtumisi vaatad, ja koht, kus sa salvestit juhid. Kaks toodet, üks ekraan, vaikselt konkureerides.

v1.8.2 valis ühe. See kustutas hero-kaardi ja useSessionState juhtmestiku — kaasa arvatud efekti, mis navigeeris sind automaatselt kohtumise detaililehele hetkel, mil sessioon lõppes, mis on täpselt see "abivalmis" hüpe, mis inimesi keset tegevust üllatab. Salvesti käivitamine ja peitmine kolisid välja tavaliseks navbari lülitiks (ümber otstarbestatud nupp, mis kaotas umbes sada rida, muutudes sessioonikontrollerist sisse-välja-lülitiks), mida toetab uus navbar:hide IPC-käsitleja. Alles jäi töölaud, mis teeb üht asja: näitab sulle, mida oled salvestanud. Ainult loetav. Rahulik.

Selles üleminekus on üks väike, inimlik viga, mida tasub esile tõsta, sest see on täpselt selline asi, mille ümberkujundus vaikselt sisse toob ja hea silm samas tunnis püüab. Kaks uut külgriba nuppu — Start ja Hide — tarniti sama üldise ruudustikuikooniga, nii et need olid visuaalselt identsed. Kaksteist minutit hiljem andis järgnev commit Start'ile esitusikooni, andis Hide'ile suletud-silma ikooni ja toonis Hide'i merevaigukollaseks, nii et "pane rakendus kaduma" loeks tahtliku tegevusena, mitte "start'i" neutraalse kaksikuna. Ikoonid on tekst. Kaks nuppu, mis näevad ühesugused välja, ütlevad sama asja, ja need ei tähendanud sama asja.

Tulpdiagramm, mis elas kakskümmend kaks minutit

Siin on osa, mida ma armastan, ja see on täielikult loetav git-logist. Kell 16:29:34 maandus ümberkujunduse esimene mustand: 7 päeva aktiivsusgraafik, joonistatud tulpadena — animeeritud sambad, minimaalne kõrgus, et pisikesed päevad jääksid nähtavaks, 2-piksline tuhm tüügas nullpäevade jaoks. Mõistlik. Tavapärane. Selline graafik, mille poole sirutad ilma mõtlemata.

Kell 16:51:21 — kakskümmend kaks minutit hiljem — see kustutati. Asenduscommit ütleb täpselt, mida see tegi: "replace bar chart with smooth wave area chart for 7-day activity." Ja kell 16:52:21, üks minut hiljem, koorib teine commit laine ümbert ümara kaardi ja ääre maha, "for cleaner look."

Miks? Commit'id ütlevad ainult, mis muutus, seega miks on minu tõlgendus — aga andmete kuju teeb selle ilmseks. See on tööriist, kus tüüpilisel kasutajal on mis tahes päeval null, üks või kaks kohtumist. Seitse tulpa, enamik neist 2 pikslit kõrged, näevad välja peaaegu tühjad ja hajusalt laiali. Samad seitse numbrit, joonistatud pideva täidetud alana, näevad välja nagu trend — õrn laine, mis tõuseb seal, kus nädal oli kiire. Midagi ei võltsitud; y-väärtused on identsed. Ümberkujundus lihtsalt valis kodeeringu, mis laseb hõredatel, ausatel andmetel lugeda kujuna, mitte puudumisena.

Statistika sai sama kohtlemise sama kella järgi. Esimene mustand (16:29) pani neli numbrit 2×4 kaardiruudustikku. Kell 16:49 varises ruudustik kokku üheks reasiseseks statistikaribaks — üks raamitud rida juuspeente eraldajatega, väiksem kiri, üks konteiner nelja asemel. Viis kasti ekraanil (neli kaarti pluss graafikukaart) said kaheks (riba ja laine). Järgmine PR lisas veel ühe ausa puudutuse: silt "Total Time" sai sildiks "Time in Meetings", sest kokku-millest oli õiglane küsimus, mida kellelegi ei peaks jääma esitada.

Kakskümmend minutit, esimesest mustandist lõplikuni, kõik ühe pull request'i sees. Kui need oleks surutud üheks "redesign dashboard" commitiks, oleks otsing nähtamatu. Kuna nad ei olnud, saad vaadata disainerit reaalajas koonduma.

Laine, mehaaniliselt

Siin ei ole ühtki graafikuteeki. Laine on reasisene SVG, ehitatud JSX-is, ja seda tasub vaadata, sest see on väike, aus retsept, mille võid varastada mis tahes sparkline'i jaoks.

Silumine on trikk. Iga kõrvutiasetseva punktipaari jaoks kasutab tee kuup-Bézier' segmenti, mille kaks kontrollpunkti asuvad nende vahelises horisontaalses keskpunktis — cpx = (prev.x + curr.x) / 2 — kusjuures kontrollpunktid hoitakse kummagi otsa enda kõrgusel. See on klassikaline lameda puutuja silumine: kõver liigub sujuvalt läbi iga andmepunkti, ületamata kunagi kõrgeimat või langemata alla madalaima väärtuse, mida naiivne Catmull-Rom splain teeks. Kohtumiste arvu graafiku jaoks pole "ära kunagi joonista küüru, mis vihjab väärtusele, mida ei juhtunud" mitte peensus; see on korrektsus. Täidetud ala on sama kõver, suletud mööda alumist serva ja värvitud vertikaalse gradiendiga (cyan, hääbudes 30%-lt peaaegu eimillekski), ja joon joonistab end ise vasakult paremale framer-motioni pathLength animatsiooniga.

SVG all on andmetorustik ja see on vaikne kangelane. Uus getAggregateStats() meetod transkriptirepositooriumis käivitab kolm ettevalmistatud päringut kohaliku SQLite transcript_sessions tabeli vastu: kõigi aegade kogusummad (arv, summeeritud kestus, keskmine kestus), libisev seitsme päeva arv ja GROUP BY date(created_at) lahter iga päeva kohta. Seejärel — ja see on detail, mis teeb graafiku vastupidavaks — väike JavaScripti tsükkel käib läbi viimased seitse kalendripäeva ja täidab tagasi iga päeva, mida päring ei tagastanud, lükates sisse nulli. Seega on graafikul garanteeritud täpselt seitse punkti, alati.

See garantii ongi see, mis paneb servajuhtumid kaduma, selle asemel et vajada üle vaate laiali pillutatud valveid. Tühi nädal? Seitse nulli, ja Math.max(count, 1) nimetajal hoiab joone all lamedana, mitte ei jaga nulliga. Üksik andmepunkt, mis paneks i / (n − 1) x-vahekauguse valemi tootma NaN-i? Ei saa juhtuda — repositoorium ei väljasta kunagi vähem kui seitse. Nädalapäevade sildid isegi parsivad iga lahtri kell T12:00:00, mitte paljakeskööl, nii et YYYY-MM-DD string ei libise negatiivse UTC ajavööndi eelmisse päeva. Paranda andmete kuju allikas ja renderdamiskood saab olla meelega naiivne.

Kõik see jääb masinasse. Statistikapäring loeb kohalikku andmebaasi, tagastab läbi tüübitud transcript:get-stats IPC-kanali ja animeerub laadimisel neljaks üleslugevaks numbriks. Miski su kohtumiste ajaloost ei lahku sülearvutist selle graafiku joonistamiseks — mis tööriista jaoks, mis su vestlusi salvestab, on ainus vastuvõetav viis analüütikavaadet ehitada.

Veel üks viga, sest ümberkujundused tirivad need valguse kätte

Sama väljalaskega oli komplekti pandud parandus, millel polnud töölauaga mingit pistmist ja kõik pistmine sellise võlaga, mille otsa ümberkujundus komistab. Rakenduse tumeda kerimisriba stiil oli triivinud kahte konkureerivasse CSS-definitsiooni samast klassist — vanem lilla ja uuem valge-tumedal — ja see, kumb võitis, sõltus kaskaadi järjekorrast. Veel hullem, ainult elemendid, mis mäletasid klassi lisada, said üldse stiili; kõik muu langes tagasi vaikimisi heleda kerimisriba peale, ja horisontaalseid kerimisribasid ei stiilitud kunagi, sest vanad reeglid seadsid ainult laiuse, mitte kunagi kõrguse. Parandus kustutas mõlemad definitsioonid, stiilis kerimisriba globaalselt igal elemendil ja eemaldas nüüd surnud klassi kümnest komponendist, mis olid seda kandnud. See on kaherealine diff, korratud kümme korda — see glamuurita maks selle eest, et sama asi sai kaks korda stiilitud ja mõlemad lasti ellu jääda.

Kolm asja, mida see väljalase meile õpetas

1. Lahuta, et fokuseerida. Töölaud sai paremaks, tehes vähem — kaotades salvestamise juhtnupud, mida sel kunagi vaja polnud, ja saades üheks selgeks asjaks. Ekraan, mis on ühtaegu vaataja ja kaugjuhtimispult, on kaks pooltoodet; vali üks ja koli teine sinna, kuhu see kuulub.
2. Vali kodeering, mille su andmed on ära teeninud. Hõredad numbrid loevad puudumisena tulpades ja trendina area chart'is, identsetest numbritest. See pole keerutamine — see on ausa kuju valimine, mis laseb päris, õhukestel andmetel suhelda.
3. Garanteeri andmete kuju ülesvoolu. Tagasi-seitsmeni-täitmise tsükkel on põhjus, miks graafiku koodis pole laiali pillutatud null-kontrolle: nulliga jagamine, üksiku punkti NaN ja puuduvad päevad kaovad kõik, sest päring lubab täpselt seitse lahtrit. Vastupidav renderdamine algab ühe kihi võrra allpool.

Eelmise peatüki jaoks v1 loos — neli väljalaset kahekümne kuue tunniga (v1.7.6–v1.8.1); ja kogu kaare jaoks tarkvara täiuslikkuseni tarnimise anatoomia.