animal shelter incomings

Themenfindung

Für die Themenfindung habe ich im Internet nach eher größeren Datensätzen gesucht, wobei ich auf Kaggle fündig wurde. Letztendlich habe ich mich für den animal shelter incoming Datensatz entschieden, weil dieser einige visuelle Parameter beinhaltet und auch sehr ausführlich und vollständig zur Verfügung steht.

VueJS

Vue macht es einfach, gekapselte Web Komponenten zu erstellen, die jeweils auch gekapselten Javascript, CSS Code enthalten.
Dadurch kommt man nicht in die Versuchung, Alles in eine große Datei zu schreiben und der Code bleibt übersichtlicher.
Außerdem bietet Vue eine HTML templating engine, mit der es einfach ist, HTML Elemente zu generieren, was nützlich für komplexe Komponenten wie Diagramme ist,
bei denen es z.B. nötig ist, dynamisch viele Datenpunkte zu generieren.

Beispiel:
Im JS Teil einer Komponente wird ein String Array definiert ( ['String1', 'String2', 'String3'] ).


Der HTML Teil der Vue Komponente kann nun so darauf zugreifen:

Nach dem Rendering resultiert das im Browser in den folgenden HTML Elementen:

Abgesehen davon gibt es in Vue sogenante Reactive Properties.
Die Idee ist, dass sich die verschiedenen HTML Elemente automatisch neu rendern, sobald eine Variable, die dort genutzt wird, verändert wird.
Beispiel:

Beim Klick auf einen Button, wird exampleArray.push('String 4') ausgeführt.
Dies updated das referenzierte reactive Array und würde dazu führen, dass das Beispiel HTML Template neu gerendert wird.
Nach dem ersten Klick auf den Button, würde die generierte HTML Struktur sich also ins Folgende verändern:

Dies ist ein wichtiges Kernkonzept von Vue und nimmt dem Entwickler komplett die Arbeit ab, seine HTML Elemente zu updaten, wenn sich irgendwo Daten verändern, was schnell kompliziert werden kann.


Diese Reactive Properties sind auch mit zugewiesenen CSS Klassen kombinierbar. So wurde die Animation zwischen den verschiedenen Tabs realisiert.

Projektstruktur:

Beide Diagramtypen haben Ihre eigene Komponente. BarGraph (kann Säulen - oder Balkendiagramme darstellen), sowie CirclesDiagram und werden in den verschiedenen Views mehrfach mit unterschiedlichen Daten verwendet.
Die Daten stammen aus einer CSV Datei(src/assets/data.csv), werden in src/store/data.ts geparsed und in src/store/index.ts für die verschiedenen Charts aufbereitet.
Diesen Vorgang hätte man noch optimieren können und in einem vorgefertigtem Format als Datei speichern können.
So wäre die Ladezeit beim Aufruf der Seite wesentlich geringer, das wäre allerdings auch mehr Aufwand gewesen.

Die einzelnen Chart Views (src/views/*.vue) erzeugen verschiedene Instanzen der Diagram Komponenten und speisen diese mit den dazugehörigen reactive Werten aus src/store/index.ts.