Fix to ticket list formatting

cmu-sei · Dec 13, 2024 · 22dba98 · 22dba98
1 parent bc5ae34
commit 22dba98
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 22 deletions.
diff --git a/projects/gameboard-ui/src/app/core/components/ticket-list/ticket-list.component.html b/projects/gameboard-ui/src/app/core/components/ticket-list/ticket-list.component.html
@@ -140,11 +140,13 @@ <h3 *ngIf="!gameId" class="m-0 p-0 flex-grow-1">{{ctx.canManage ? 'Tickets' : 'M
           </div>
           <div class="text-muted">
             <span class="font-weight-bold-">{{ticket.requester?.name}}</span>
-            &nbsp;&middot;&nbsp;
-            <span *ngIf="ticket.challenge" class="btn-link" [appCopyOnClick]="ticket.challenge | toSupportCode"
-              tooltip="Copy this support code">
-              {{ ticket.challenge | toSupportCode }}
-            </span>
+            <ng-container *ngIf="ticket.challenge">
+              &nbsp;&middot;&nbsp;
+              <span *ngIf="ticket.challenge" class="btn-link" [appCopyOnClick]="ticket.challenge | toSupportCode"
+                tooltip="Copy this support code">
+                {{ ticket.challenge | toSupportCode }}
+              </span>
+            </ng-container>
           </div>
         </div>
       </div>

diff --git a/.../reports/enrollment-report/enrollment-report-trend/enrollment-report-trend.component.html b/.../reports/enrollment-report/enrollment-report-trend/enrollment-report-trend.component.html
@@ -1,3 +1,8 @@
 <div class="trend-line-container mt-4" *ngIf="chartConfig">
+    <div class="ml-3 my-3 d-flex">
+        <label class="form-label">
+            <input type="checkbox" class="d-inline form-check" [(ngModel)]="groupByGame"> Show breakdown by game
+        </label>
+    </div>
     <app-line-chart id="enrollmentTrend" [config]="chartConfig"></app-line-chart>
 </div>
diff --git a/...ts/reports/enrollment-report/enrollment-report-trend/enrollment-report-trend.component.ts b/...ts/reports/enrollment-report/enrollment-report-trend/enrollment-report-trend.component.ts
@@ -1,17 +1,19 @@
-import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
-import { EnrollmentReportFlatParameters } from '../enrollment-report.models';
+import { Component, Input, SimpleChanges } from '@angular/core';
+import { EnrollmentReportFlatParameters, EnrollmentReportLineChartGroup } from '../enrollment-report.models';
 import { EnrollmentReportService } from '../enrollment-report.service';
 import { LineChartConfig } from '@/core/components/line-chart/line-chart.component';
+import { DateTime } from 'luxon';
 
 @Component({
   selector: 'app-enrollment-report-trend',
   templateUrl: './enrollment-report-trend.component.html',
   styleUrls: ['./enrollment-report-trend.component.scss']
 })
-export class EnrollmentReportTrendComponent implements OnInit {
+export class EnrollmentReportTrendComponent {
   @Input() parameters: EnrollmentReportFlatParameters | null = null;
 
   protected chartConfig?: LineChartConfig;
+  protected groupByGame = false;
 
   constructor(private enrollmentReportService: EnrollmentReportService) { }
 
@@ -20,17 +22,34 @@ export class EnrollmentReportTrendComponent implements OnInit {
       return;
 
     const lineChartResults = await this.enrollmentReportService.getTrendData(this.parameters);
+    const datasets: { label: any; data: any[]; backgroundColor: string }[] = [];
+    const labels: any[] = [];
+
+    if (this.groupByGame) {
+      console.log("by game");
+    }
+    else {
+      const playerGroups = new Map<DateTime, EnrollmentReportLineChartGroup>();
+      for (const entry of Object.entries(lineChartResults.playerGroups)) {
+        playerGroups.set(DateTime.fromISO(entry[0]), entry[1]);
+      }
+
+      labels.push(Array.from(playerGroups.keys()).map(k => k as any));
+      datasets.push({
+        label: "Enrolled players",
+        data: Array.from(playerGroups.values()).map(g => g.totalCount),
+        backgroundColor: "blue"
+      });
+    }
+
+    console.log("labels", labels);
+    console.log("datasets", datasets);
+
     this.chartConfig = {
       type: 'line',
       data: {
-        labels: Array.from(lineChartResults.keys()).map(k => k as any),
-        datasets: [
-          {
-            label: "Enrolled players",
-            data: Array.from(lineChartResults.values()).map(g => g.totalCount),
-            backgroundColor: 'blue',
-          },
-        ]
+        labels: labels,
+        datasets: datasets,
       },
       options: {
         scales: {
@@ -51,15 +70,11 @@ export class EnrollmentReportTrendComponent implements OnInit {
           y: {
             title: {
               display: true,
-              text: "Players Enrolled"
+              text: "Players Enrolled" + (this.groupByGame ? " By Game" : "")
             }
           }
         }
       }
     };
   }
-
-  async ngOnInit(): Promise<void> {
-
-  }
 }
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
@@ -88,7 +88,10 @@ export interface EnrollmentReportStatSummary {
 }
 
 export interface EnrollmentReportLineChartResponse {
+    games: SimpleEntity[];
     playerGroups: { [dateString: string]: EnrollmentReportLineChartGroup };
+    playerGroupsByGame: { [gameId: string]: { [dateString: string]: EnrollmentReportLineChartGroup } }
+    // public required IDictionary < string, Dictionary < DateTimeOffset, EnrollmentReportLineChartGroup >> PlayerGroupsByGame { get; set; }
     periodType: string;
     periodStart: DateTime;
     periodEnd: DateTime;

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
@@ -38,7 +38,7 @@ export class EnrollmentReportService {
     return this.http.get<EnrollmentReportStatSummary>(this.apiUrl.build("reports/enrollment/stats", parameters));
   }
 
-  async getTrendData(parameters: EnrollmentReportFlatParameters | null): Promise<Map<DateTime, EnrollmentReportLineChartGroup>> {
+  async getTrendDataOld(parameters: EnrollmentReportFlatParameters | null): Promise<Map<DateTime, EnrollmentReportLineChartGroup>> {
     // ignore paging/tab parameters for the line chart
     const trendParams = { ...(parameters || {}) };
     delete trendParams.tab;
@@ -61,4 +61,17 @@ export class EnrollmentReportService {
       )
     );
   }
+
+  async getTrendData(parameters: EnrollmentReportFlatParameters | null): Promise<EnrollmentReportLineChartResponse> {
+    // ignore paging/tab parameters for the line chart
+    const trendParams = { ...(parameters || {}) };
+    delete trendParams.tab;
+    delete trendParams.pageNumber;
+    delete trendParams.pageSize;
+
+    return await firstValueFrom(this
+      .http
+      .get<EnrollmentReportLineChartResponse>(this.apiUrl.build("reports/enrollment/trend", trendParams))
+    );
+  }
 }