Add attendance graph

front/package-lock.json

@@ -8,6 +8,7 @@
       "name": "letsmeet",
       "version": "0.0.0",
       "dependencies": {
+        "chart.js": "^4.4.8",
         "express-requests-logger": "^4.0.2",
         "pinia": "^3.0.1",
         "vite-plugin-svgr": "^4.3.0",
@@ -1367,6 +1368,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3173,6 +3180,18 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.8",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.8.tgz",
+      "integrity": "sha512-IkGZlVpXP+83QpMm4uxEiGqSI7jFizwVtF3+n5Pc3k7sMO+tkd0qxh2OzLhenM0K80xtmAONWGBn082EiBQSDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",

front/package.json

@@ -13,6 +13,7 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
+    "chart.js": "^4.4.8",
     "express-requests-logger": "^4.0.2",
     "pinia": "^3.0.1",
     "vite-plugin-svgr": "^4.3.0",

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>