dunno

front/src/components/AttendanceGraph.vue

@@ -4,6 +4,7 @@ import {onMounted, ref} from "vue";
 import {Event} from "@/models/Event.ts";
 import {AttendanceGraph} from "@/models/AttendanceGraph.ts";
 import type {Attendee} from "@/models/Attendee.ts";
+import {DateHelper} from "@/helpers/DateHelper.ts";
 
 const props = defineProps<{
   event: Event;
@@ -16,12 +17,14 @@ onMounted(() => {
 })
 
 function render() : void{
-  let container = queryContainer();
-  for (let date of graph.getDates()) {
+  let container = queryContainer()
+  let dates = graph.getDates();
+  for (let date of dates) {
+    console.log(date);
     let attendees: Attendee[] = graph.getAttendees(date);
     let bar = addBar(container);
     setBarSize(bar, graph.getRatio(date));
-    setBarTooltip(bar, graph.getAttendees(date).length);
+    setBarTooltip(bar, `${DateHelper.formatDate(date)} \n Attendees : ${graph.getAttendees(date).length}`);
   }
 }
 
@@ -37,10 +40,9 @@ function setBarSize(bar : HTMLElement, ratio : number) : void{
   bar.style.width = `${ratio*100}%`;
 }
 
-function setBarTooltip(bar : HTMLElement, attendeesCount : number) : void{
+function setBarTooltip(bar : HTMLElement, info : string) : void{
   let tooltip = document.createElement('div');
-  tooltip.classList.add('tooltip');
-  tooltip.innerText = attendeesCount.toString();
+  tooltip.innerText = info;
 
   tooltip.style.position = 'absolute';
   tooltip.style.visibility = 'hidden';
@@ -99,18 +101,7 @@ function queryContainer() : HTMLElement {
 }
 
 .tooltip {
-  position: absolute;
-  background-color: black;
-  padding: 5px;
-  border-radius: 5px;
-  visibility: hidden;
-  opacity: 0;
   transition: opacity 0.3s;
 }
 
-.tooltip.visible {
-  visibility: visible;
-  opacity: 1;
-}
-
 </style>

front/src/models/AttendanceGraph.ts

@@ -4,15 +4,13 @@ import type {Attendee} from "@/models/Attendee.ts";
 export class AttendanceGraph {
 
   private event: Event;
-  private maxAttendees: number;
+  private readonly maxAttendees: number;
 
   public constructor(event : Event) {
     this.event = event;
     this.maxAttendees = event.getMaxAttendees();
-    console.log(this.maxAttendees);
   }
 
-
   public getDates() : number[] {
     return Array.from(this.event.getDates());
   }

front/src/models/Event.ts

@@ -1,5 +1,4 @@
 import type {Attendee, AttendeeState} from "@/models/Attendee.ts";
-import {DateHelper} from "@/helpers/DateHelper.ts";
 
 export class Event {
 

front/src/views/EventView.vue

@@ -51,7 +51,7 @@ function extractToken() : string {
   .attendance-graph, .calendar
   {
     width: 50%;
-    height: 50%;
+    height: fit-content;
   }
 
 }
@@ -59,7 +59,11 @@ function extractToken() : string {
 @media screen and (max-width: 1000px) {
   .attendance-graph, .calendar
   {
-    width: 80%;
+    width: 100%;
+  }
+
+  .attendance-graph, .calendar
+  {
     height: fit-content;
   }