Dashboard

Alustasin Dashboardiga COVIDi alguses. Mulle meeldis ehitada interaktiivseid asju ning pandeemia andmed andsid selleks konkreetse lähtepunkti. Esimeses versioonis olid COVIDi töölaud ning mõned krüpto- ja aktsiaandmeid kuvavad visuaalsed vidinad.

Sellest sai projekt, millele pühendasin sadu tunde, et Reacti korralikult õppida. Iga uus vaade tõi kaasa järgmise praktilise küsimuse: kuidas jagada olekut komponentide vahel, laadida andmeid, siduda kasutaja valik graafikuga ja hoida eri osad koos töötamas. COVIDi osa arenes neist kõige terviklikumaks.

COVIDi vaate keskmes on riigi valimine. Sama valik seob statistika kokkuvõtte, kaardi ja ajajoone. Kaarti saab vaadata tasapinnal või gloobusena, vahetada kuvatavat näitajat ning riike tabelist otsida. Ülevaatest saab edasi liikuda riigi detailvaatesse.

Eesti detailvaates lähevad andmed sügavamaks: haiglaravil olnud patsientide vanuse- ja sooline jaotus, hospitaliseerimise ajajoon ning piirkondlikud näitajad. Erinevad diagrammid täidavad eri ülesandeid — kaart aitab asukohta mõista, ajajoon muutust jälgida ja jaotusdiagramm koosseisu uurida.

Reacti õppimise seisukohalt oli oluline just osade ühendamine. Rakendus kasutab jagatud olekut, komponente ja elutsükleid ning seob Reacti selliste visualiseerimisteekidega nagu amCharts ja Chart.js. Graafiku loomise kõrval tuleb seda õigel ajal uuendada ja vaate sulgemisel vabastada.

Andmed vajavad enne kuvamist ühist kuju: kuupäevad tuleb järjestada, ajajooned kuupäeva järgi joondada ja puuduvat väärtust nullist eristada. Riigi vahetamisel katkestatakse eelmine päring, et hilinenud vastus ei kirjutaks uut valikut üle. Eraldi Node.js / Expressi API koondab osa andmeallikaid; teenusepakkujate adapterid kasutavad vahemälu ja aegunud vastuse olekut.

Need on detailid, mille vajadus tuleb välja alles töötavat rakendust ehitades. Projekt andis mulle võimaluse õppida Reacti nii kasutaja interaktsioonide kui ka andmevoo kaudu.

Aktsia- ja krüptovaated laiendasid esialgset ideed teistsugustele andmetele ja ajavahemikele. Praeguses versioonis on nende kõrval ka igapäevased tööriistad: ülesanded, fookustaimer, märkmed, kalender, loendurid ja kiirlingid. Kohalikku infot lisavad Tallinna väljumised, elektri börsihinnad ja ilm.

Töölaua vidinaid saab peita, taastada ja oma rühmas ümber järjestada. Ülesanded, märkmed ja seadistus säilivad samas brauseris. See hoiab alustamise lihtsana, kuid tähendab ka, et isiklik sisu ei sünkrooni automaatselt seadmete vahel.

Praegune veebirakendus kasutab Next.js-i lehemarsruute, samal ajal kui interaktiivsed vidinad töötavad brauseris. Nii on riikide detailvaadetel oma aadress ning jagatud navigeerimine ja seadistus saavad eri vaadetes säilida. Mahukad vaated laaditakse eraldi.

Service worker salvestab rakenduse faile ja lehti võrguühenduseta avamiseks. Värsked välised andmed vajavad endiselt ühendust. See eristus on oluline: kasutajaliidese kättesaadavus ja andmete ajakohasus on kaks eri ülesannet.

Ka COVIDi andmeallikad pärinevad eri perioodidest. Tänast COVIDi osa tasub vaadata ajaloolise andmeuurijana. Selle pika eluea üks õppetund on, et näitaja tähendus, allikas ja vaatluskuupäev vajavad sama palju tähelepanu kui graafiku välimus.

Dashboardi väärtus minu jaoks on selles, kui palju ma selle kaudu õppisin. Ühest isiklikust ideest sai toimiv rakendus, kus sain pikalt katsetada, vigu läbi töötada ja Reactist järjest paremini aru saada.

Projekt koondab minu huvi interaktiivsete kasutajaliideste, andmevisualiseerimise ja päris andmetega töötamise vastu. See on isiklik arendusprojekt, mille avalikku rakendust saab proovida.