-
Notifications
You must be signed in to change notification settings - Fork 0
Logbook
npm package en readme aangemaakt.
- Documentatie gelezen van Vue.js v3.x - Essentials, Components In-Depth (Component Registration & Props) & Reactivity in Depth.
Geprobeerd om een Vue 3 project op te zetten met alleen webpack, zodat ik het bundelen een beetje kon begrijpen. Ik heb met webpack geprobeerd om een development server te starten met webpack-dev-server, maar dat werkte niet. Ik heb gezocht waarom het niet werkte en het bleek dat je webpack serve moest gebruiken. Toen werkte het bijna, maar de versies van de Vue loaders waren niet gelijk en de vue-loader werkte alleen met vue-template-compiler. Ik heb geprobeerd om @vue/compiler-sfc te gebruiken met vue-loader maar dat werkte niet. Dit heeft volgens mij te maken met Vue 3 die net uitgebracht is en nog niet alle pakketjes zijn geupdate of compatibel zijn.
Verder heb ik nog componenten aangemaakt: Article en ArticleHeader. In het Article component staan de ArticleHeader en ChoroplethMap. In het ArticleHeader component staat een simpele header met titel erin.
Nu heb ik de vue-cli gebruikt en een Vue 3 project gemaakt. Daarna een paar componenten gemaakt. Ik wil na een structuur te hebben gemaakt al beginnen met het toevoegen van de data-visualisatie met d3.
Vandaag begonnen met het maken van de kaart met d3 in Vue in het component ChroplethMap. Ik heb de code overgenomen van de frontend-data repo en in het component ChoroplethMap gezet in de methods() en als het component gemount is, voert het de functie CreateChoroplethaMap uit.
Daarna ben ik begonnen met het opslaan van de data in Local Storage. Ik had daar een paar probleempjes mee, namelijk bij het opslaan van de data in LocalStorage kreeg ik een error: DOMException: The operation is insecure. Dit betekende dat de browser het niet toelaat om data op te slaan in LocalStorage en in cookies. Ik heb daarom een try catch gebruikt om toch de data op te halen als Local Storage niet toegankelijk is. Daarna heb ik een helper gemaakt om makkelijker met Local en Session storage om te gaan. Ik heb die gebruikt om de data op te slaan in Local Storage. Dus nu wordt de data opgeslagen in Local Storage als dat kan en zo niet, dan wordt het bestand elke keer opgehaald.
Vandaag ben ik begonnen met het refactoren van de code, zodat Vue de interactie afhandeld en D3 alleen de visualisatie maakt. Ik heb eerst de mounted() optie gerefactored waarbij nu de kaart wordt gemaakt met D3. Daarna heb ik de updated() optie gebruikt. Als de gebruiker dan een nieuwe selectie kiest dan wordt de kaart geupdate. Dit heb ik gedaan door de data en de drawMap functie in de data() optie te zetten. Hierdoor kan ik de data en de functie hergebruiken in de updated() optie. Gelukkig heb ik de drawMap functie zo geschreven waardoor het maken en updaten van de kaart in dezelfde functie wordt gedaan en ik niet ongeveer dezelfde code hoef te schrijven.
In de template heb ik een lege <svg> gezet en daaronder een formulier gemaakt. Tijdens de mounted() optie heb ik de opties van de data globaal gemaakt, waardoor Vue het kan gebruiken in de template. In de template loop ik met v-for over de array van opties en plaats de attributen en tekst.
Als laatst heb ik een @change event gezet op het <select>-element die de updateMap functie uitvoerd. In die functie haal ik de data van de provincies, de drawMap functie en het element van het event op en voer ik de drawMap functie uit. Uiteindelijk was het niet heel veel werk om het te refactoren en de opties van Vue te gebruiken.
Hierna ben ik begonnen met het opslaan van de optie die de gebruiker heeft geselecteerd. Ik heb hier LocalStorage gebruikt. In de drawMap functie in de mounted() optie heb ik gekeken of de gebruiker een andere optie heeft geselecteerd. Als er een andere optie is geselecteerd, slaat het de waarde op in LocalStorage. In de template geef ik die waarde mee en vergelijk of het overeenkomt met een van de opties. Als dat zo is wordt bij die optie het attribuut selected meegegeven. Als de gebruiker de pagina sluit en terug komt, wordt de optie opgehaald uit LocalStorage, de juiste weergave van de kaart gerenderd en de juiste optie in het formulier weergegeven. Het was eerst een beetje ingewikkeld om dat voor elkaar te krijgen, omdat het niet de correcte optie wilde laten zien maar toen zag ik in de documentatie dat je ook waarden kunt vergelijken in de template, dus was het uiteindelijk wel makkelijk te doen.
Geprobeerd de kaart selectie correct the laten updaten, want dat doet het niet als LocalStorage aan staat. Rare bug waar de selectie van beide hetzelfde wordt. Dit ligt ergens aan het selecteren van de selectie en opslaan in LocalStorage. Ook wordt de kaart niet correct geupdate. De provincie die geselecteerd is wordt wel gefilterd maar niet correct op de kaart weergegeven en ook de kleuren kloppen niet.