-
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.
Vandaag de bugs gefixt. Nu worden de selecties correct opgeslagen in LocalStorage. Ook de rare bug dat ze beide hetzelfde zijn is opgelost. Daarnaast wordt nu ook de kaart correct geupdate. Wel is het zo dat bij het selecteren van een andere provincie de kaart opnieuw wordt gerenderd. Daarbij wordt de oude vormen verwijderd. Als ik dat niet doe denkt het dat alleen de data geupdate wordt, terwijl de hele gemeente en provincie anders is. Ook wordt nu de correcte kleur getoond die correspondeert met de data.
Nu ik dit gedaan heb, is het enige dat nog moet worden toegevoegd het inzoomen als er een provincie wordt gekozen. Nu kun je bijna niet de gemeenten zien per provincie. Dit ga ik later nog toevoegen.
Vandaag de zoom functie gemaakt. Als je nu een provincie kiest, zoomt het automatisch naar de provincie. Ook heb ik de kleuren verandert van de gemeentegrenzen en de gemeenten waar geen data van beschikbaar is, waardoor het nu makkelijker te onderscheiden is.
Vandaag heb ik de MunicipalityMap component afgemaakt en comments erbij toegevoegd. Hierna heb ik ook comments toegevoegd voor de ProvinceMap component. Nu zijn de visualisatie-componenten compleet qua functionaliteit. Later wil ik de stijl nog aan toevoegen.
Toen ben ik gaan denken over hoe ik de data-story wil gaan schrijven. Uiteindelijk heb ik bedacht dat ik niet met de hand de content in HTML wil gaan schrijven maar het met markdown te doen. Ik heb daarom een component Markdown gemaakt waar ik de markdown converteer naar HTML. Eerst heb ik gekeken hoe ik de content in het component kan krijgen. Uiteindelijk begreep ik dat je met props de data kan meegeven aan het component, dus heb ik twee props gemaakt waar de markdown zelf of een url die refereert naar een markdown-bestand kan worden meegegeven.
Vervolgens ben ik gaan kijken naar een pakketje die Markdown kan converteren naar HTML. Ik kwam uit op Showdown.js. Die heb ik geinstalleerd en heb een functie gemaakt die een string van markdown converteert naar HTML. Ik heb dit eerst getest door met Axios een gist markdown-bestand op te halen en te renderen. Dit bleek te werken, maar wel als het ruwe markdown data is. Dat was top.
Daarna ben ik begonnen om zelf markdown bestanden te laten verwerken. Ik ben gaan proberen om een markdown-bestand te importeren, maar ik kreeg een error dat het niet door Webpack kon worden getranspiled. Na een tijd research heb ik gevonden dat je met Vue3 een vue.config.js-bestand kan maken en met chainWebpack andere loaders te gebruiken. Eerst heb ik het geprobeerd met markdown-loader en html-loader maar toen kreeg ik gewoon de HTML als ik de markdown importeerde, terwijl ik gewoon de ruwe markdown als string wilde hebben. Toen heb ik de raw-loader gebruikt en toen werkte het. Nu kan ik de markdown importeren en meegeven aan het Markdown-component. Die converteert het naar HTML en met v-html wordt het in een <div> gezet. Als ik nu het markdown-bestand verander, wordt de pagina automatisch geupdate.
Nu kan ik de content in Markdown schrijven, zonder dat ik de HTML zelf hoef te schrijven. Nu hoef ik alleen nog de content te schrijven en de stijl toe te passen.