Initial draft of enrollment report by game tab.

cmu-sei · Nov 28, 2023 · 6b5dce4 · 6b5dce4
1 parent 707bdde
commit 6b5dce4
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 12 deletions.
diff --git a/...ollment-report-by-game/enrollment-report-by-game/enrollment-report-by-game.component.html b/...ollment-report-by-game/enrollment-report-by-game/enrollment-report-by-game.component.html
@@ -0,0 +1,59 @@
+<ng-container *ngIf="results; else loading">
+    <div *ngIf="results && results.records.length; else noRecords" class="results">
+        <table class="report-table table-hover gameboard-report">
+            <col>
+            <colgroup span="3"></colgroup>
+
+            <thead class="thead-light">
+                <tr class="headers super-headers-row">
+                    <th scope="col" class="group-header game-column">Game</th>
+                    <th scope="col" colSpan="3" class="group-header">Enrollment</th>
+                </tr>
+            </thead>
+
+            <tbody>
+                <tr class="headers headers-row">
+                    <td>Game</td>
+                    <td>Total Players</td>
+                    <td>Total Sponsors</td>
+                    <td>Top Sponsor</td>
+                </tr>
+
+                <tr class="data-row" *ngFor="let record of results.records">
+                    <td>
+                        <app-challenge-or-game-field [game]="record.game"></app-challenge-or-game-field>
+                    </td>
+
+                    <!--ENROLLMENT-->
+                    <td class="report-field numerical">
+                        {{record.playerCount}}
+                    </td>
+                    <td class="report-field numerical">
+                        <p>{{record.sponsors.length}}</p>
+                    </td>
+                    <td class="report-field numerical">
+                        <app-parameter-change-link *ngIf="record.topSponsor"
+                            [config]="{ parameterChange: { sponsors: record.topSponsor.id} }">
+                            <app-player-avatar-legacy class="d-block mr-2"
+                                [avatarUri]="record.topSponsor.logoFileName | relativeImage"
+                                [tooltip]="record.topSponsor.name" size="small"></app-player-avatar-legacy>
+                        </app-parameter-change-link>
+                        <small class="subtle-info">{{record.topSponsorPlayerCount}} {{ "player" |
+                            pluralizer:record.topSponsorPlayerCount
+                            }}</small>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</ng-container>
+
+<ng-template #loading>
+    <div class="page-height d-flex flex-column align-items-center justify-content-center">
+        <app-spinner>Loading the report...</app-spinner>
+    </div>
+</ng-template>
+
+<ng-template #noRecords>
+    <app-no-report-records></app-no-report-records>
+</ng-template>
diff --git a/...ollment-report-by-game/enrollment-report-by-game/enrollment-report-by-game.component.scss b/...ollment-report-by-game/enrollment-report-by-game/enrollment-report-by-game.component.scss
@@ -0,0 +1,3 @@
+.game-column {
+    width: 35%;
+}
diff --git a/...nrollment-report-by-game/enrollment-report-by-game/enrollment-report-by-game.component.ts b/...nrollment-report-by-game/enrollment-report-by-game/enrollment-report-by-game.component.ts
@@ -0,0 +1,30 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { EnrollmentReportByGameRecord, EnrollmentReportFlatParameters } from '@/reports/components/reports/enrollment-report/enrollment-report.models';
+import { ReportResults } from '@/reports/reports-models';
+import { EnrollmentReportService } from '../../enrollment-report.service';
+import { firstValueFrom } from 'rxjs';
+import { PagingArgs } from '@/api/models';
+import { RouterService } from '@/services/router.service';
+
+@Component({
+  selector: 'app-enrollment-report-by-game',
+  templateUrl: './enrollment-report-by-game.component.html',
+  styleUrls: ['./enrollment-report-by-game.component.scss']
+})
+export class EnrollmentReportByGameComponent implements OnChanges {
+  @Input() parameters!: EnrollmentReportFlatParameters | null;
+
+  protected results: ReportResults<EnrollmentReportByGameRecord> | null = null;
+
+  constructor(
+    private enrollmentReportService: EnrollmentReportService,
+    private routerService: RouterService) { }
+
+  async ngOnChanges(changes: SimpleChanges): Promise<void> {
+    await this.loadData(this.parameters);
+  }
+
+  private async loadData(parameters: EnrollmentReportFlatParameters | null) {
+    this.results = await firstValueFrom(this.enrollmentReportService.getByGameData(this.parameters));
+  }
+}
diff --git a/...-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.html b/...-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.html
@@ -131,6 +131,12 @@
                     <app-line-chart id="enrollmentTrend" [config]="ctx.chartConfig"></app-line-chart>
                 </div>
             </tab>
+
+            <tab heading="By Game" id="tab-by-game">
+                <div class="by-game-container mt-4">
+                    <app-enrollment-report-by-game [parameters]="selectedParameters"></app-enrollment-report-by-game>
+                </div>
+            </tab>
         </tabset>
     </ng-container>
 </div>
@@ -158,7 +164,3 @@
 <ng-template #multiSelectGame let-context>
     <span class="game-name">{{ context.name }}</span>
 </ng-template>
-
-<ng-template #multiSelectSponsor let-context>
-    <span class="sponsor-name">{{ context.name }}</span>
-</ng-template>
diff --git a/...rd-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.ts b/...rd-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.ts
@@ -4,7 +4,6 @@ import { ReportResultsWithOverallStats, ReportSponsor, ReportViewUpdate } from '
 import { EnrollmentReportService } from '@/reports/components/reports/enrollment-report/enrollment-report.service';
 import { Observable, firstValueFrom, of } from 'rxjs';
 import { SimpleEntity } from '@/api/models';
-import { ChallengeResult } from '@/api/board-models';
 import { ModalConfirmService } from '@/services/modal-confirm.service';
 import { MarkdownHelpersService } from '@/services/markdown-helpers.service';
 import { LineChartConfig } from '@/core/components/line-chart/line-chart.component';
@@ -38,6 +37,7 @@ export class EnrollmentReportComponent extends ReportComponentBase<EnrollmentRep
 
   protected results?: ReportResultsWithOverallStats<EnrollmentReportStatSummary, EnrollmentReportRecord>;
   protected leadingSponsorStat?: ReportSummaryStat;
+  protected selectedParameters: EnrollmentReportFlatParameters | null = null;
   protected stats: ReportSummaryStat[] = [];
 
   // parameter query models
@@ -93,6 +93,7 @@ export class EnrollmentReportComponent extends ReportComponentBase<EnrollmentRep
     }
 
     this.isLoading = true;
+    this.selectedParameters = parameters;
     this.results = await firstValueFrom(this.reportService.getReportData(parameters));
     const lineChartResults = await this.reportService.getTrendData(parameters);
 
@@ -103,6 +104,7 @@ export class EnrollmentReportComponent extends ReportComponentBase<EnrollmentRep
         additionalInfo: `(${this.results.overallStats.sponsorWithMostPlayers.distinctPlayerCount} players)`
       } :
       undefined;
+
     this.stats = [
       { label: "Game", value: this.results.overallStats.distinctGameCount },
       { label: "Player", value: this.results.overallStats.distinctPlayerCount },

diff --git a/...board-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts b/...board-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts
@@ -64,6 +64,14 @@ export interface EnrollmentReportRecord {
     score?: number;
 }
 
+export interface EnrollmentReportByGameRecord {
+    game: ReportGame;
+    playerCount: number;
+    sponsors: ReportSponsor[];
+    topSponsor: ReportSponsor;
+    topSponsorPlayerCount: number;
+}
+
 export interface EnrollmentReportStatSummary {
     distinctGameCount: number;
     distinctPlayerCount: number;

diff --git a/...oard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.service.ts b/...oard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.service.ts
@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
-import { EnrollmentReportFlatParameters, EnrollmentReportLineChartGroup, EnrollmentReportParameters, EnrollmentReportRecord, EnrollmentReportStatSummary } from './enrollment-report.models';
-import { Observable, firstValueFrom, map, tap } from 'rxjs';
-import { ReportResults, ReportResultsWithOverallStats } from '../../../reports-models';
-import { ReportsService } from '../../../reports.service';
+import { EnrollmentReportByGameRecord, EnrollmentReportFlatParameters, EnrollmentReportLineChartGroup, EnrollmentReportRecord, EnrollmentReportStatSummary } from './enrollment-report.models';
+import { Observable, firstValueFrom, map, } from 'rxjs';
+import { ReportResults, ReportResultsWithOverallStats } from '@/reports/reports-models';
+import { ReportsService } from '@/reports/reports.service';
 import { HttpClient } from '@angular/common/http';
 import { ApiUrlService } from '@/services/api-url.service';
 import { DateTime } from 'luxon';
@@ -14,6 +14,12 @@ export class EnrollmentReportService {
     private http: HttpClient,
     private reportsService: ReportsService) { }
 
+  getByGameData(parameters: EnrollmentReportFlatParameters | null): Observable<ReportResults<EnrollmentReportByGameRecord>> {
+    parameters = parameters || {};
+    const pagedParameters = this.reportsService.applyDefaultPaging(parameters);
+    return this.http.get<ReportResults<EnrollmentReportByGameRecord>>(this.apiUrl.build("reports/enrollment/by-game", pagedParameters));
+  }
+
   getReportData(parameters: EnrollmentReportFlatParameters): Observable<ReportResultsWithOverallStats<EnrollmentReportStatSummary, EnrollmentReportRecord>> {
     const pagedParameters = this.reportsService.applyDefaultPaging(parameters);
     return this.http.get<ReportResultsWithOverallStats<EnrollmentReportStatSummary, EnrollmentReportRecord>>(this.apiUrl.build("reports/enrollment", pagedParameters));

diff --git a/...tice-mode-report/practice-mode-report-by-user/practice-mode-report-by-user.component.html b/...tice-mode-report/practice-mode-report-by-user/practice-mode-report-by-user.component.html
@@ -3,7 +3,6 @@
         <table class="report-table table-hover gameboard-report">
             <col span="2">
             <colgroup span="6"></colgroup>
-            <!-- <colgroup span="3"></colgroup> -->
 
             <thead class="thead-light">
                 <tr class="headers super-headers-row">

diff --git a/...actice-mode-report/practice-mode-report-by-user/practice-mode-report-by-user.component.ts b/...actice-mode-report/practice-mode-report-by-user/practice-mode-report-by-user.component.ts
@@ -6,7 +6,6 @@ import { ReportResultsWithOverallStats } from '@/reports/reports-models';
 import { ModalConfirmService } from '@/services/modal-confirm.service';
 import { RouterService } from '@/services/router.service';
 import { PagingArgs } from '@/api/models';
-import { LogService } from '@/services/log.service';
 import { PlayerChallengeAttempts, PlayerChallengeAttemptsModalComponent } from '@/reports/components/player-challenge-attempts-modal/player-challenge-attempts-modal.component';
 
 @Component({
@@ -22,7 +21,6 @@ export class PracticeModeReportByUserComponent implements OnChanges {
 
 
   constructor(
-    private log: LogService,
     private modalService: ModalConfirmService,
     private reportService: PracticeModeReportService,
     private routerService: RouterService) {

diff --git a/projects/gameboard-ui/src/app/reports/reports.module.ts b/projects/gameboard-ui/src/app/reports/reports.module.ts
@@ -34,6 +34,7 @@ import { ArrayFieldToClassPipe } from './pipes/array-field-to-class.pipe';
 import { ArrayToCountPipe } from './pipes/array-to-count.pipe';
 import { CountToTooltipClassPipe } from './pipes/count-to-tooltip-class.pipe';
 import { PlayerChallengeAttemptsModalComponent } from './components/player-challenge-attempts-modal/player-challenge-attempts-modal.component';
+import { EnrollmentReportByGameComponent } from './components/reports/enrollment-report/enrollment-report-by-game/enrollment-report-by-game/enrollment-report-by-game.component';
 
 @NgModule({
   declarations: [
@@ -68,6 +69,7 @@ import { PlayerChallengeAttemptsModalComponent } from './components/player-chall
     ReportStatSummaryComponent,
     PlayerChallengeAttemptsModalComponent,
     ParameterSponsorComponent,
+    EnrollmentReportByGameComponent,
   ],
   imports: [
     CommonModule,