Add attendance graph

front/src/components/AttendanceGraph.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+
+import {onMounted} from "vue";
+import {Chart} from "chart.js/auto";
+import {Event} from "@/models/Event.ts";
+
+
+const props = defineProps<{
+  event: Event;
+}>();
+
+let data = props.event.getDates();
+
+onMounted(() => {
+  draw()
+  console.log(props.event);
+})
+
+function draw() {
+  const ctx = document.getElementById('myChart');
+
+  new Chart(ctx, {
+    type: 'doughnut',
+    data : {
+      labels: data.dates,
+      datasets: [{
+        label: 'Attendances',
+        data: data.attendances,
+
+        hoverOffset: 4
+      }]
+    }
+  });
+}
+
+
+
+</script>
+
+<template>
+  <div class="attendance-graph">
+    <canvas id="myChart"></canvas>
+  </div>
+</template>
+
+<style scoped>
+canvas {
+  width: 100%;
+  height: 100%;
+}
+</style>

front/src/helpers/DateHelper.ts

@@ -4,4 +4,9 @@ export abstract class DateHelper {
     return new Date(timestamp);
   }
 
+  public static formatDate(timestamp : number) : string{
+    let date = DateHelper.toDate(timestamp);
+    return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
+  }
+
 }

front/src/models/Event.ts

@@ -1,15 +1,16 @@
 import type {Attendee, AttendeeState} from "@/models/Attendee.ts";
+import {DateHelper} from "@/helpers/DateHelper.ts";
 
 export class Event {
 
   private name: string;
   private token: string;
-  private dates: Map<number, Attendee[]>;
+  private attendances: Map<number, Attendee[]>;
 
   public constructor(name: string, token: string, dates : Map<number, Attendee[]>) {
     this.name = name;
     this.token = token;
-    this.dates = dates;
+    this.attendances = dates;
   }
 
   public getName() : string {
@@ -20,8 +21,18 @@ export class Event {
     return this.token;
   }
 
-  public getDates() : Map<number, Attendee[]> {
-    return this.dates;
+  public getAttendances() : Map<number, Attendee[]> {
+    return this.attendances;
+  }
+
+  public getDates() : {dates :  string[], attendances : number[]}{
+    let dates = [];
+    let attendances = [];
+    for (let [date, attendees] of this.attendances.entries()) {
+      dates.push(DateHelper.formatDate(date))
+      attendances.push(attendees.length)
+    }
+    return {dates : dates, attendances : attendances};
   }
 }
 

front/src/views/EventView.vue

@@ -5,6 +5,7 @@ import {useRoute} from "vue-router";
 import {DateHelper} from "@/helpers/DateHelper.ts";
 import {Event} from "@/models/Event.ts";
 import ErrorBlock from "@/components/ErrorBlock.vue";
+import AttendanceGraph from "@/components/AttendanceGraph.vue";
 
 const route = useRoute();
 const store = eventCreationStore();
@@ -25,38 +26,37 @@ function extractToken() : string {
   return Array.isArray(route.params.token) ? route.params.token[0] : route.params.token;
 }
 
-function formatDate(timestamp : number) : String{
-  let date = DateHelper.toDate(timestamp);
-  return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
-}
 
 </script>
 
 <template>
   <div class="container">
 
+
+
     <div v-if="!event" class="error-block">
       <ErrorBlock>
         <h1>This event does not exist</h1>
       </ErrorBlock>
     </div>
-
     <div v-else>
-      Name : {{ event.getName() }} <br>
-      <div v-for="(date) in event.getDates().keys()">
-        {{formatDate(date)}}
-        <div v-for="(attendee) in event.getDates().get(date)">
-          {{attendee.getName()}}
-        </div>
-      </div>
+      <AttendanceGraph :event="event" />
+
     </div>
 
   </div>
 
+
+
 </template>
 
 <style scoped>
 .error-block{
   width: 100%;
 }
+.attendance-graph
+{
+
+}
+
 </style>