Merge branch 'dev' of https://github.com/COS301-SE-2023/Event-Partici…

…pation-Trends into dev
COS301-SE-2023 · Sep 19, 2023 · 94354cb · 94354cb
2 parents 7f83131 + 8070a96
commit 94354cb
Show file tree

Hide file tree

Showing 6 changed files with 492 additions and 59 deletions.
diff --git a/libs/api/event/feature/src/queries/get-event-statistics.handler.ts b/libs/api/event/feature/src/queries/get-event-statistics.handler.ts
@@ -27,6 +27,8 @@ export class GetEventStatisticsHandler
     let turnover_rate = 0;
     let average_attendance_time = 0;
     let max_attendance_time = 0;
+    const attendance_over_time_data: number[] = [];
+    const attendance_over_time_labels: Date[] = [];
 
     if (events.length == 0) {
       return <IGetEventStatisticsResponse>{
@@ -36,6 +38,8 @@ export class GetEventStatisticsHandler
         turnover_rate: turnover_rate,
         average_attendance_time: average_attendance_time,
         max_attendance_time: max_attendance_time,
+        attendance_over_time_data: attendance_over_time_data,
+        attendance_over_time_labels: attendance_over_time_labels,
       };
     }
 
@@ -104,6 +108,13 @@ export class GetEventStatisticsHandler
     average_attendance = total_unique_devices / devicesOverTime.size ? total_unique_devices / devicesOverTime.size : 0;
     average_attendance_time = total_attendance_time / deviceTimeRange.size ? total_attendance_time / deviceTimeRange.size : 0;
 
+    // set attendance over time from devicesOverTime
+
+    for (const [key, value] of devicesOverTime.entries()) {
+      attendance_over_time_data.push(value.size);
+      attendance_over_time_labels.push(key);
+    }
+
     //compute statistics end
 
     return <IGetEventStatisticsResponse>{
@@ -113,6 +124,8 @@ export class GetEventStatisticsHandler
       turnover_rate: turnover_rate,
       average_attendance_time: average_attendance_time,
       max_attendance_time: max_attendance_time,
+      attendance_over_time_data: attendance_over_time_data,
+      attendance_over_time_labels: attendance_over_time_labels,
     };
   }
 }
diff --git a/libs/api/event/util/src/responses/get-event-statistics.response.ts b/libs/api/event/util/src/responses/get-event-statistics.response.ts
@@ -6,4 +6,6 @@ export interface IGetEventStatisticsResponse {
     turnover_rate: number | undefined |null,
     average_attendance_time: number | undefined |null,
     max_attendance_time: number | undefined |null,
+    attendance_over_time_data: number[] | undefined |null,
+    attendance_over_time_labels: Date[] | undefined |null,
 }
diff --git a/libs/app/components/src/lib/compare-page/compare-page.component.html b/libs/app/components/src/lib/compare-page/compare-page.component.html
@@ -55,8 +55,8 @@
             <span *ngIf="show && eventsSelected > 0" class="mt-1 ml-2 flex justify-between">
                 <label class="text-4xl p-2">Heatmaps<br><p *ngIf="showSidePanel" class="text-sm opacity-50">Hold the Shift-Key down to zoom in/out with mousewheel</p></label>
             </span>
-            <div *ngIf="show" class="grid grid-rows-2 w-full h-full gap-2 p-3 z-40">
-                <event-participation-trends-heatmap-container [parentContainer]="parentContainer" *ngFor="let event of selectedEvents" [containerEvent]="event"></event-participation-trends-heatmap-container>
+            <div *ngIf="show" class="w-full min-h-[400px] gap-2 p-3 z-40">
+                <event-participation-trends-heatmap-container class="h-[400px]" [parentContainer]="parentContainer" *ngFor="let event of selectedEvents" [containerEvent]="event"></event-participation-trends-heatmap-container>
                 <div
                     class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center transition-opacity duration-200 z-40"
                     *ngIf="eventsSelected < 1"
@@ -68,10 +68,12 @@
                     </div>
                 </div>
             </div>
-            <div *ngIf="show && eventStats.length >= 2" class="w-full p-3 z-40"> 
+            <div *ngIf="show && selectedEvents.length >= 1" class="w-full p-3 z-40"> 
                 <div class="mx-24 rounded-2xl bg-ept-navy-blue p-3 text-lg font-poppins font-semibold">
-                    <div class="text-4xl font-poppins font-semibold flex justify-center">
-                        <div>Event Statistics</div>
+                    <div class="font-poppins font-semibold grid grid-cols-12">
+                        <div class="col-span-3 text-lg text-left">{{getFirstEventStats().name}}</div>
+                        <div class="col-span-6 text-4xl text-center">Event Statistics</div>
+                        <div class="col-span-3 text-lg text-right">{{getSecondEventStats().name}}</div>
                     </div>
                     <div class="w-full bg-ept-blue-grey rounded-2xl h-1 opacity-20 my-3"></div>
                     <div class="flex justify-center mx-12">
@@ -158,6 +160,17 @@
                             </div>
                         </div>
                     </div>
+                    <div class="my-12">
+                        <div class="flex justify-center text-2xl">Attendance Over Time</div>
+                        <div class="grid grid-rows-2">
+                            <div class="rounded-md h-full">
+                                <canvas id="firstAttendanceOverTime" #firstAttendanceOverTime class="w-full h-full"></canvas>
+                            </div>
+                            <div class="rounded-md h-full">
+                                <canvas id="secondAttendanceOverTime" #secondAttendanceOverTime class="w-full h-full"></canvas>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>