Kojelaudan uudelleensuunnittelu yhden aaltokaavion ympärille

Jotkut julkaisut lisäävät ominaisuuden. GeekBye v1.8.2 enimmäkseen poisti yhden — ja poistaminen on se tarina. Yhtenä helmikuun 2026 iltapäivänä kahdeksantoista commitia muutti kojelaudan etusivun tallennuksen kaukosäätimestä vain luettavaksi analytiikkanäkymäksi: neljä tilastolukua ja yksi aktiivisuuskaavio. Matkan varrella se toimitti pylväskaavion joka eli kaksikymmentäkaksi minuuttia, tilastokorttien ruudukon joka eli kaksikymmentä, ja käsin tehdyn SVG-aallon joka korvasi molemmat. Koko etsintä on säilötty commitien aikaleimoihin, mikä on parasta suunnitteludokumentaatiota mitä on olemassa.

Kojelauta lakkasi olemasta kaukosäädin

Ennen tätä julkaisua kojelaudan etusivu oli ohjauspaneeli. Se johdatti hero-kortilla — iso tallennusvimpain LIVE-merkillä, Pause/Resume/Stop-painikkeilla, gradienttiläiskillä ja useSessionState-hookilla joka johdotti kaiken tallentimeen. Kojelauta yritti olla kaksi asiaa yhtä aikaa: paikka jossa katsot palavereitasi ja paikka jossa ohjaat tallenninta. Kaksi tuotetta, yksi ruutu, hiljaa kilpaillen.

v1.8.2 valitsi yhden. Se poisti hero-kortin ja useSessionState-johdotuksen — mukaan lukien efektin joka navigoi sinut automaattisesti palaverin yksityiskohtasivulle sillä hetkellä kun sessio päättyi, mikä on juuri sellainen "avulias" hyppy joka yllättää ihmiset kesken työn. Tallentimen käynnistäminen ja piilottaminen siirtyivät ulos tavalliseksi navbarin kytkimeksi (uudelleenkäytetty painike joka menetti noin sata riviä muuttuessaan session ohjaimesta on/off-kytkimeksi), jota tukee uusi navbar:hide-IPC-käsittelijä. Jäljelle jäi kojelauta joka tekee yhden asian: näyttää sinulle mitä olet tallentanut. Vain luettava. Rauhallinen.

Tässä siirtymässä on pieni, inhimillinen bugi jota kannattaa nostaa esiin, koska se on juuri sitä lajia jonka uudelleensuunnittelu hiljaa tuo mukanaan ja hyvä silmä nappaa samalla tunnilla. Kaksi uutta sivupalkin painiketta — Start ja Hide — toimitettiin samalla geneerisellä ruudukkokuvakkeella, joten ne olivat visuaalisesti identtiset. Kaksitoista minuuttia myöhemmin jatkocommit antoi Startille toistokuvakkeen, antoi Hidelle silmä-pois-kuvakkeen ja sävytti Hiden meripihkankeltaiseksi, niin että "saa sovellus katoamaan" lukeutuu tarkoitukselliseksi toiminnoksi eikä "startin" neutraaliksi kaksoseksi. Kuvakkeet ovat tekstiä. Kaksi painiketta jotka näyttävät samalta sanovat saman asian, eivätkä nämä tarkoittaneet samaa asiaa.

Pylväskaavio joka eli kaksikymmentäkaksi minuuttia

Tässä on osa jota rakastan, ja se on täysin luettavissa git-lokista. Kello 16:29:34 laskeutui uudelleensuunnittelun ensimmäinen luonnos: 7 päivän aktiivisuuskaavio piirrettynä pylväinä — animoituja pylväitä, minimikorkeus jotta pienet päivät pysyivät näkyvissä, 2 pikselin himmeä tynkä nollapäiville. Järkevää. Tavanomaista. Sellainen kaavio jota kohti kurotat ajattelematta.

Kello 16:51:21 — kaksikymmentäkaksi minuuttia myöhemmin — se poistettiin. Korvaava commit sanoo tarkalleen mitä se teki: "replace bar chart with smooth wave area chart for 7-day activity." Ja kello 16:52:21, minuutti sen jälkeen, toinen commit riisui pyöristetyn kortin ja reunan aallon ympäriltä, "for cleaner look."

Miksi? Commitit kertovat vain mikä muuttui, joten miksi on tulkintaa — mutta datan muoto tekee siitä ilmeisen. Tämä on työkalu jossa tyypillisellä käyttäjällä on minä tahansa päivänä nolla, yksi tai kaksi palaveria. Seitsemän pylvästä, useimmat niistä 2 pikseliä korkeita, näyttävät lähes tyhjiltä ja hajanaisesti siroteltuilta. Samat seitsemän lukua piirrettyinä jatkuvana täytettynä alueena näyttävät trendiltä — lempeältä aallolta joka nousee siellä missä viikko oli kiireinen. Mitään ei väärennetty; y-arvot ovat identtiset. Uudelleensuunnittelu vain valitsi koodauksen joka antaa harvan, rehellisen datan lukeutua muotona eikä poissaolona.

Tilastot saivat saman kohtelun samalla kellolla. Ensimmäinen luonnos (16:29) laittoi neljä lukua 2×4-korttiruudukkoon. Kello 16:49 ruudukko romahti yhdeksi rivinsisäiseksi tilastopalkiksi — yksi kehystetty rivi hiusviivaerottimin, pienempi kirjasin, yksi säiliö neljän sijaan. Viisi laatikkoa ruudulla (neljä korttia plus kaaviokortti) muuttui kahdeksi (palkki ja aalto). Seuraava PR lisäsi vielä yhden rehellisen kosketuksen: nimike "Total Time" muuttui muotoon "Time in Meetings", koska yhteensä-mitä oli reilu kysymys jota kenenkään ei pitäisi joutua kysymään.

Kaksikymmentä minuuttia, ensimmäisestä luonnoksesta lopulliseen, kaikki yhden pull requestin sisällä. Jos ne olisi litistetty yhdeksi "redesign dashboard" -commitiksi, etsintä olisi näkymätön. Koska niitä ei litistetty, voit katsoa suunnittelijan konvergoituvan reaaliajassa.

Aalto, mekaanisesti

Täällä ei ole mitään kaaviokirjastoa. Aalto on rivinsisäinen SVG rakennettuna JSX:ssä, ja siihen kannattaa vilkaista koska se on pieni, rehellinen resepti jonka voit varastaa mihin tahansa sparklineen.

Pehmennys on se temppu. Jokaiselle vierekkäisten pisteiden parille polku käyttää kuutiollista Bézier-segmenttiä, jonka kaksi kontrollipistettä sijaitsevat niiden välisessä vaakasuorassa keskipisteessä — cpx = (prev.x + curr.x) / 2 — kontrollipisteet pidettyinä kummankin pään omassa korkeudessa. Se on klassinen tasaisen tangentin pehmennys: käyrä kulkee pehmeästi jokaisen datapisteen läpi ylittämättä koskaan korkeinta tai laskematta alle matalimman arvon, minkä naiivi Catmull-Rom-splini tekisi. Palaverimääriä koskevalle kaaviolle "älä koskaan piirrä kumpua joka vihjaa arvoon jota ei tapahtunut" ei ole hienous; se on oikeellisuutta. Täytetty alue on sama käyrä suljettuna pohjaa pitkin ja maalattuna pystysuoralla liukuvärillä (cyan, häipyen 30 %:sta lähes olemattomiin), ja viiva piirtää itsensä vasemmalta oikealle framer-motionin pathLength-animaatiolla.

SVG:n alla on datan putkitus, ja se on hiljainen sankari. Uusi getAggregateStats()-metodi transkriptirepositoriossa ajaa kolme valmisteltua kyselyä paikallista SQLite transcript_sessions -taulua vastaan: kaikkien aikojen summat (lukumäärä, summattu kesto, keskimääräinen kesto), liukuva seitsemän päivän lukumäärä ja GROUP BY date(created_at) -lokero per päivä. Sitten — ja tämä on se yksityiskohta joka tekee kaaviosta kestävän — pieni JavaScript-silmukka kävelee läpi viimeiset seitsemän kalenteripäivää ja täydentää jokaisen päivän jota kysely ei palauttanut, työntäen nollan. Kaaviolla on siksi taatusti tasan seitsemän pistettä, aina.

Juuri tuo takuu saa reunatapaukset katoamaan sen sijaan että tarvittaisiin vartijoita siroteltuina läpi näkymän. Tyhjä viikko? Seitsemän nollaa, ja Math.max(count, 1) nimittäjässä pitää viivan tasaisena pohjalla eikä jaa nollalla. Yksittäinen datapiste joka saisi i / (n − 1) x-välistysformulan tuottamaan NaN:in? Ei voi tapahtua — repositorio ei koskaan tuota vähempää kuin seitsemän. Viikonpäivien nimikkeet jopa jäsentävät jokaisen lokeron kohdassa T12:00:00 eikä paljaassa keskiyössä, joten YYYY-MM-DD -merkkijono ei liukene edelliseen päivään negatiivisen UTC:n aikavyöhykkeellä. Korjaa datan muoto lähteellä ja renderöintikoodi saa olla tarkoituksella naiivi.

Kaikki tämä pysyy koneella. Tilastokysely lukee paikallista tietokantaa, palaa tyypitetyn transcript:get-stats -IPC-kanavan kautta ja animoituu neljäksi ylöspäin laskevaksi luvuksi latauksessa. Mikään palaverihistoriastasi ei poistu läppäriltä tämän kaavion piirtämiseksi — mikä on työkalulle joka tallentaa keskustelujasi ainoa hyväksyttävä tapa rakentaa analytiikkanäkymä.

Vielä yksi bugi, koska uudelleensuunnittelut raahaavat ne valoon

Samaan julkaisuun oli niputettu korjaus jolla ei ollut mitään tekemistä kojelaudan kanssa ja kaikki tekemistä sellaisen velan kanssa johon uudelleensuunnittelu kompastuu. Sovelluksen tumman vierityspalkin tyylitys oli ajautunut kahdeksi kilpailevaksi CSS-määrittelyksi samasta luokasta — vanhempi violetti ja uudempi valkoinen-tummalla — ja se kumpi voitti riippui kaskadin järjestyksestä. Pahempaa, vain elementit jotka muistivat lisätä luokan tyylitettiin ollenkaan; kaikki muu putosi takaisin oletusarvoiseen vaaleaan vierityspalkkiin, eikä vaakasuoria vierityspalkkeja tyylitetty koskaan, koska vanhat säännöt asettivat vain leveyden, ei koskaan korkeutta. Korjaus poisti molemmat määrittelyt, tyylitti vierityspalkin globaalisti jokaisella elementillä ja poisti nyt kuolleen luokan niistä kymmenestä komponentista jotka olivat kantaneet sitä. Se on kahden rivin diff toistettuna kymmenen kertaa — se glamouriton vero siitä että sama asia oli tyylitetty kahdesti ja molempien annettiin selvitä.

Kolme asiaa jotka tämä julkaisu opetti meille

1. Vähennä keskittyäksesi. Kojelaudasta tuli parempi tekemällä vähemmän — menettämällä tallennuksen ohjaimet joita se ei koskaan tarvinnut ja tulemalla yhdeksi selkeäksi asiaksi. Ruutu joka on sekä katselin että kaukosäädin on kaksi puolikasta tuotetta; valitse yksi ja siirrä toinen sinne minne se kuuluu.
2. Valitse koodaus jonka datasi ansaitsee. Harvat luvut lukeutuvat poissaolona pylväinä ja trendinä area chartina, identtisistä luvuista. Se ei ole kaunistelua — se on rehellisen muodon valitsemista joka antaa oikean, ohuen datan viestiä.
3. Takaa datan muoto ylävirrassa. Täydennä-seitsemään-silmukka on syy siihen ettei kaaviokoodissa ole siroteltuja null-tarkistuksia: nollalla jako, yksittäisen pisteen NaN ja puuttuvat päivät katoavat kaikki koska kysely lupaa tasan seitsemän lokeroa. Kestävä renderöinti alkaa yhden kerroksen alempaa.

Edellinen luku v1-tarinassa: neljä julkaisua kahdessakymmenessäkuudessa tunnissa (v1.7.6–v1.8.1); ja koko kaarelle, ohjelmiston toimittamisen anatomia täydellisyyteen asti.