Paneļa pārveidošana ap vienu viļņa grafiku

Daži laidieni pievieno funkciju. GeekBye v1.8.2 galvenokārt noņēma vienu — un noņemšana ir šī stāsta būtība. Vienā 2026. gada februāra pēcpusdienā astoņpadsmit komiti pārvērta paneļa sākumu no ieraksta tālvadības pults par tikai lasāmu analītikas skatu: četri statistikas rādītāji un viens aktivitātes grafiks. Pa ceļam tas piegādāja stabiņu grafiku, kas nodzīvoja divdesmit divas minūtes, statistikas karšu režģi, kas nodzīvoja divdesmit, un pašrocīgi veidotu SVG vilni, kas aizstāja abus. Visa meklēšana ir saglabāta komitu laika zīmogos, kas ir labākā dizaina dokumentācija, kāda vien mēdz būt.

Panelis pārstāja būt tālvadības pults

Pirms šī laidiena paneļa sākums bija vadības pults. Tas sākās ar hero karti — lielu ieraksta logrīku ar LIVE emblēmu, Pause/Resume/Stop pogām, gradienta pleķiem un useSessionState hooku, kas visu sasaistīja ar rekorderi. Panelis mēģināja būt divas lietas vienlaikus: vieta, kur tu skaties uz savām tikšanās, un vieta, kur tu vadi rekorderi. Divi produkti, viens ekrāns, klusi konkurējot.

v1.8.2 izvēlējās vienu. Tas izdzēsa hero karti un useSessionState sasaisti — ieskaitot efektu, kas automātiski aizveda tevi uz tikšanās detaļu lapu brīdī, kad sesija beidzās, kas ir tieši tas "palīdzīgais" lēciens, kurš pārsteidz cilvēkus darbības vidū. Rekordera startēšana un paslēpšana pārcēlās uz vienkāršu navbar pārslēdzēju (pārprofilēta poga, kas zaudēja apmēram simts rindu, pārtopot no sesijas kontroliera par ieslēgšanas/izslēgšanas slēdzi), ko atbalsta jauns navbar:hide IPC apstrādātājs. Palika panelis, kas dara vienu lietu: rāda tev to, ko esi ierakstījis. Tikai lasāms. Mierīgs.

Šajā pārejā ir maza, cilvēcīga kļūda, ko vērts pieminēt, jo tā ir tāda lieta, ko pārveidojums klusi ievieš un laba acs pamana tajā pašā stundā. Abas jaunās sānjoslas pogas — Start un Hide — tika piegādātas ar to pašu vispārīgo režģa ikonu, tāpēc tās bija vizuāli identiskas. Divpadsmit minūtes vēlāk sekojošs komits deva Start atskaņošanas ikonu, deva Hide aizvērtas acs ikonu un iekrāsoja Hide dzintarkrāsā, lai "liec lietotnei pazust" lasītos kā apzināta darbība, nevis kā neitrāls "starta" dvīnis. Ikonas ir teksts. Divas pogas, kas izskatās vienādi, saka vienu un to pašu, un šīs nenozīmēja vienu un to pašu.

Stabiņu grafiks, kas nodzīvoja divdesmit divas minūtes

Lūk, daļa, ko es mīlu, un tā ir pilnībā izlasāma no git žurnāla. Plkst. 16:29:34 nolaidās pārveidojuma pirmais melnraksts: 7 dienu aktivitātes grafiks, uzzīmēts kā stabiņi — animētas kolonnas, minimāls augstums, lai sīkas dienas paliktu redzamas, 2 pikseļu blāvs strupiņš nulles dienām. Saprātīgi. Konvencionāli. Tāda veida grafiks, pēc kura sniedzies bez domāšanas.

Plkst. 16:51:21 — divdesmit divas minūtes vēlāk — tas tika izdzēsts. Aizstāšanas komits pasaka tieši to, ko izdarīja: "replace bar chart with smooth wave area chart for 7-day activity." Un plkst. 16:52:21, vienu minūti pēc tam, cits komits noņēma noapaļoto karti un apmali ap vilni, "for cleaner look."

Kāpēc? Komiti pasaka tikai to, kas mainījās, tāpēc kāpēc ir mans lasījums — bet datu forma to padara acīmredzamu. Šis ir rīks, kurā tipiskam lietotājam jebkurā konkrētā dienā ir nulle, viena vai divas tikšanās. Septiņi stabiņi, no kuriem vairums ir 2 pikseļus augsti, izskatās gandrīz tukši, izklaidus izkaisīti. Tie paši septiņi skaitļi, uzzīmēti kā nepārtraukts aizpildīts laukums, izskatās pēc tendences — maiga viļņa, kas paceļas tur, kur nedēļa bija noslogota. Nekas netika viltots; y vērtības ir identiskas. Pārveidojums vienkārši izvēlējās kodējumu, kas ļauj retiem, godīgiem datiem lasīties kā formai, nevis kā prombūtnei.

Statistika tika apstrādāta tāpat un pēc tā paša pulksteņa. Pirmais melnraksts (16:29) ievietoja četrus skaitļus 2×4 karšu režģī. Plkst. 16:49 režģis sabruka vienā iebūvētā statistikas joslā — vienā ierāmētā rindā ar matiņa plānuma atdalītājiem, mazāku fontu, vienu konteineru četru vietā. Piecas kastes ekrānā (četras kartes plus grafika karte) kļuva par divām (josla un vilnis). Nākamais PR pievienoja vēl vienu godīgu pieskārienu: uzraksts "Total Time" kļuva par "Time in Meetings", jo kopā-no-kā bija taisnīgs jautājums, ko nevienam nevajadzētu būt spiestam uzdot.

Divdesmit minūtes, no pirmā melnraksta līdz galīgajam, viss vienā pull request. Ja tie būtu saspiesti vienā "redesign dashboard" komitā, meklēšana būtu neredzama. Tā kā tie nebija, tu vari vērot dizaineri konverģējam reāllaikā.

Vilnis, mehāniski

Šeit nav nekādas grafiku bibliotēkas. Vilnis ir iebūvēts SVG, kas veidots JSX, un uz to ir vērts paskatīties, jo tā ir maza, godīga recepte, ko vari nozagt jebkurai sparkline.

Izlīdzināšana ir triks. Katram blakus esošo punktu pārim ceļš izmanto kubiskās Bézier segmentu, kura divi vadības punkti atrodas horizontālajā viduspunktā starp tiem — cpx = (prev.x + curr.x) / 2 — ar vadības punktiem, kas tur katra gala savā augstumā. Tā ir klasiskā līdzenās pieskares izlīdzināšana: līkne maigi iziet cauri katram datu punktam, nekad nepārsniedzot augstāko vai nenoslīdot zem zemākās vērtības, ko naiva Catmull-Rom splaina darītu. Grafikam par tikšanos skaitu "nekad nezīmē izciļņu, kas nozīmē vērtību, kas nenotika" nav izsmalcinājums; tas ir korektums. Aizpildītais laukums ir tā pati līkne, aizvērta gar apakšu un nokrāsota ar vertikālu gradientu (cyan, izgaistot no 30% līdz gandrīz nekam), un līnija zīmējas pati no kreisās uz labo ar framer-motion pathLength animāciju.

Zem SVG ir datu cauruļvadi, un tie ir klusais varonis. Jauna getAggregateStats() metode transkriptu repozitorijā palaiž trīs sagatavotus vaicājumus pret lokālo SQLite transcript_sessions tabulu: visu laiku kopsummas (skaits, summētais ilgums, vidējais ilgums), ritošais septiņu dienu skaits un GROUP BY date(created_at) segments par katru dienu. Tad — un šī ir detaļa, kas padara grafiku noturīgu — mazs JavaScript cikls iziet cauri pēdējām septiņām kalendārajām dienām un aizpilda katru dienu, ko vaicājums neatgrieza, iestumjot nulli. Tāpēc grafikam ir garantēti tieši septiņi punkti, vienmēr.

Šī garantija ir tas, kas liek robežgadījumiem pazust, nevis prasa aizsargus, izkaisītus pa skatu. Tukša nedēļa? Septiņas nulles, un Math.max(count, 1) uz saucēja tur līniju līdzenu apakšā, nevis dala ar nulli. Viens datu punkts, kas liktu i / (n − 1) x atstatuma formulai radīt NaN? Nevar notikt — repozitorijs nekad neizdod mazāk par septiņiem. Nedēļas dienu uzraksti pat parsē katru segmentu pie T12:00:00, nevis pliekas pusnakts, tāpēc YYYY-MM-DD virkne nepaslīd uz iepriekšējo dienu negatīvā UTC laika joslā. Izlabo datu formu avotā, un renderēšanas kods var būt naivs ar nolūku.

Viss tas paliek uz mašīnas. Statistikas vaicājums nolasa lokālo datubāzi, atgriežas caur tipizētu transcript:get-stats IPC kanālu un animējas četros skaitīšanas skaitļos ielādes brīdī. Nekas no tavas tikšanos vēstures nepamet klēpjdatoru, lai uzzīmētu šo grafiku — kas rīkam, kurš ieraksta tavas sarunas, ir vienīgais pieņemamais veids, kā veidot analītikas skatu.

Vēl viena kļūda, jo pārveidojumi tās izvelk gaismā

Tajā pašā laidienā bija iepakots labojums, kuram nebija nekāda sakara ar paneli un viss sakars ar tāda veida parādu, uz kuru pārveidojums uzduras. Lietotnes tumšās ritjoslas stils bija aizdreifējis divās konkurējošās CSS definīcijās vienai un tai pašai klasei — vecākā violetā un jaunākā baltā-uz-tumša — un tas, kura uzvarēja, bija atkarīgs no kaskādes secības. Vēl ļaunāk, tikai elementi, kas atcerējās pievienot klasi, tika stilizēti vispār; viss pārējais atgriezās pie noklusējuma gaišās ritjoslas, un horizontālās ritjoslas nekad netika stilizētas, jo vecie noteikumi iestatīja tikai platumu, nekad augstumu. Labojums izdzēsa abas definīcijas, stilizēja ritjoslu globāli uz katra elementa un noņēma tagad mirušo klasi no desmit komponentiem, kas to bija nesuši. Tas ir divu rindu diffs, atkārtots desmit reižu — neglamūrais nodoklis par to, ka viena un tā pati lieta tika stilizēta divreiz un abas tika ļautas izdzīvot.

Trīs lietas, ko šis laidiens mums iemācīja

1. Atņem, lai fokusētu. Panelis kļuva labāks, darot mazāk — zaudējot ieraksta vadīklas, kas tam nekad nebija vajadzīgas, un kļūstot par vienu skaidru lietu. Ekrāns, kas ir gan skatītājs, gan tālvadības pults, ir divi pusprodukti; izvēlies vienu un pārcel otru tur, kur tas pieder.
2. Izvēlies kodējumu, ko tavi dati ir pelnījuši. Reti skaitļi lasās kā prombūtne stabiņos un kā tendence laukuma grafikā, no identiskiem skaitļiem. Tā nav manipulācija — tā ir godīgas formas izvēle, kas ļauj īstiem, plāniem datiem komunicēt.
3. Garantē datu formu augšpus straumes. Aizpildīšanas-līdz-septiņiem cikls ir iemesls, kāpēc grafika kodā nav izkaisītu null pārbaužu: dalīšana ar nulli, viena punkta NaN un trūkstošās dienas visas pazūd, jo vaicājums sola tieši septiņus segmentus. Noturīga renderēšana sākas vienu slāni zemāk.

Iepriekšējai nodaļai v1 stāstā — četri laidieni divdesmit sešās stundās (v1.7.6–v1.8.1); un visai lokai — programmatūras piegādes līdz pilnībai anatomiju.