Merge pull request #282 from computas/SP24-787-stats

Sp24 787 stats

package.json

@@ -22,12 +22,17 @@
     "@angular/forms": "^18.0.2",
     "@angular/localize": "^18.0.4",
     "@angular/material": "^18.0.2",
+    "@angular/material-moment-adapter": "^18.2.7",
     "@angular/platform-browser": "^18.0.2",
     "@angular/platform-browser-dynamic": "^18.0.2",
     "@angular/router": "^18.0.2",
     "@angular/service-worker": "^18.0.2",
+    "@canvasjs/angular-charts": "^1.2.0",
+    "@canvasjs/charts": "^3.10.10",
+    "angular-moment": "^1.3.0",
     "canvas-confetti": "^1.9.3",
     "howler": "^2.2.4",
+    "moment": "^2.30.1",
     "rxjs": "~7.8.1",
     "socket.io-client": "^4.7.5",
     "tslib": "^2.6.3",

src/app/admin/error-dialog/error-dialog.component.html

@@ -9,5 +9,5 @@
       </p>
       <p> </p>
     }</div>
-  <button mat-button mat-dialog-close (click)="closeDialog()">Lukk</button></div>
+  </div>
 </div>

src/app/admin/error-dialog/error-dialog.component.ts

@@ -13,8 +13,4 @@ export class ErrorLogDialogComponent {
 
   logs = this.data
 
-  closeDialog(): void {
-    this.dialogRef.close();
-  }
-
 }

src/app/admin/graph/graph.component.html

@@ -0,0 +1,5 @@
+<div class="chart-container">
+    @if (render) {
+        <canvasjs-chart [options]="chartOptions" [ngStyle]="{'width': '100%', 'height': '400px'}"></canvasjs-chart>
+    }
+</div>    

src/app/admin/graph/graph.component.scss

@@ -0,0 +1,22 @@
+.chart-container {
+    justify-content: center; /* Center horizontally */
+    align-items: center; /* Center vertically */
+    margin: 20px 0; /* Add some vertical margin */
+    width: 100%; /* Full width */
+    display: flex;
+    height: 500px;
+}
+
+.canvasjs-chart {
+    width: 90%; /* Default to 60% width */
+    height: 100px; /* Set height */
+    position: relative;
+}
+
+@media (max-width: 768px) {
+    .canvasjs-chart {
+        width: 90%; /* Increase width on smaller screens */
+    }
+}
+
+.canvasjs-chart>canvas:first-of-type { position: relative !important; }

src/app/admin/graph/graph.component.ts

@@ -0,0 +1,109 @@
+import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, Renderer2 } from '@angular/core';
+import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { endpoints } from '@/app/shared/models/endpoints';
+import { RouterOutlet } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
+interface DataPoint {
+  x: Date;
+  y: number;
+}
+
+type ScoresPerMonthResponse = Record<string, number>;
+
+@Component({
+  selector: 'app-graph-component',
+  standalone: true,
+  imports: [RouterOutlet, CommonModule, CanvasJSAngularChartsModule],
+  templateUrl: './graph.component.html',
+  styleUrls: ['./graph.component.scss'],
+})
+export class GraphComponent implements OnChanges, OnDestroy, AfterViewInit {
+  @Input() year = ''; 
+  dataList: Record<string, number> = {};
+  render = false;
+  chartOptions = {
+    animationEnabled: true,
+    theme: "light2",
+    title: {
+      text: "Statistikk for året "
+    },
+    axisX: {
+      valueFormatString: "MMM",
+      intervalType: "month",
+      interval: 1
+    },
+    axisY: {
+      title: "Antall spilte spill",
+      suffix: ""
+    },
+    toolTip: {
+      shared: true
+    },
+    legend: {
+      cursor: "pointer",
+      itemclick: function (e: { dataSeries: { visible: boolean; }; }) {
+        e.dataSeries.visible = typeof e.dataSeries.visible === "undefined" || e.dataSeries.visible ? false : true;
+      }
+    },
+    data: [{
+      type: "line",
+      name: "Antall spill",
+      showInLegend: true,
+      dataPoints: [] as DataPoint[]
+    }]
+  };
+
+  constructor(private http: HttpClient, private el: ElementRef, private renderer: Renderer2) {}
+
+  ngOnChanges() {
+    if (this.year) {
+      this.getDataList().subscribe({
+        next: (res) => {
+          this.dataList = res;
+          this.updateChartData();
+		  this.render = true;
+        },
+        error: (err) => {
+          console.error('Failed to get data from backend', err);
+        }
+      });
+    }
+  }
+
+  updateChartData() {
+    const dataPoints: DataPoint[] = Object.entries(this.dataList).map(([month, scoreCount]) => ({
+      x: new Date(+this.year, Number(month) - 1, 1),
+      y: Number(scoreCount)
+    }));
+
+	this.chartOptions.data[0].dataPoints = dataPoints;
+  this.chartOptions.title.text += this.year;
+
+
+  }
+
+  getDataList(): Observable<ScoresPerMonthResponse> {
+    return this.http.get<ScoresPerMonthResponse>(
+      `${endpoints.TEKNISKBACKEND}/${endpoints.ADMIN}/${endpoints.GETSCORESPERMONTH}?year=${this.year}`,
+      {
+        withCredentials: true,
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+	  this.render = false;
+  }
+
+  ngAfterViewInit(): void {
+    const canvasChart = this.el.nativeElement.querySelector('canvasjs-chart');
+    if (canvasChart) {
+      this.renderer.setStyle(canvasChart, 'width', '100%');
+      this.renderer.setStyle(canvasChart, 'height', '400px');
+    }
+  }
+
+}

src/app/admin/info-dialog/info-dialog.component.ts

@@ -3,6 +3,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { DialogComponent } from '../dialog/dialog.component';
 import { ErrorLogDialogComponent } from '../error-dialog/error-dialog.component';
 import { LogData } from '@/app/shared/models/backend-interfaces';
+import { StatisticsComponent } from '../statistics/statistics.component';
 
 @Component({
   selector: 'app-info-dialog',
@@ -23,12 +24,13 @@ export class InfoDialogComponent {
     });
   }
 
-openErrorLog(logDataArray: LogData[]) {
-
-  this.dialog.open(ErrorLogDialogComponent, {
-    data: logDataArray,
-  });
-}
-
-}
+  openErrorLog(logDataArray: LogData[]) {
+    this.dialog.open(ErrorLogDialogComponent, {
+      data: logDataArray,
+    });
+  }
 
+  openStatistics() {
+    this.dialog.open(StatisticsComponent);
+  }
+}

src/app/admin/info-page/info-page.component.html

@@ -3,6 +3,8 @@ <h1 align="center" class="info-title">Administrative handlinger</h1>
 <div class="btn-group" align="center">
   <button class="btn btn-lg btn-outline-primary" (click)="getInformation()">Vis informasjon</button>
   <p></p>
+  <button (click)="getStatistics()">Vis statistikk</button>
+  <p></p>
   <button (click)="clearHighScore()">{{ this.highScoreString }}</button>
   <p></p>
   <button (click)="getLogger()">Hent feilmeldingsloggen (backend)</button>

src/app/admin/info-page/info-page.component.scss

@@ -112,3 +112,4 @@ br {
 p + p {
   margin-top: 0.5rem;
 }
+

src/app/admin/info-page/info-page.component.ts

@@ -2,18 +2,21 @@ import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { LoginService } from '../login.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { InfoDialogComponent } from '../info-dialog/info-dialog.component';
-import { PairingService } from '../../game/services/pairing.service';
 import { MatButton } from '@angular/material/button';
 import { LogData, StatusData } from '@/app/shared/models/backend-interfaces';
 import { LoggingService } from '../../game/services/logging.service';
+import { GraphComponent } from '../graph/graph.component';
+import { StatisticsComponent } from '../statistics/statistics.component';
+import { MatDialog } from '@angular/material/dialog';
+import { DialogComponent } from '../dialog/dialog.component';
+import { ErrorLogDialogComponent } from '../error-dialog/error-dialog.component';
 
 @Component({
   selector: 'app-info',
   templateUrl: './info-page.component.html',
   styleUrls: ['./info-page.component.scss'],
   standalone: true,
-  imports: [MatButton],
+  imports: [MatButton, GraphComponent],
 })
 export class InfoPageComponent {
   datasetString = 'Nullstill treningssett til originalen';
@@ -30,10 +33,10 @@ export class InfoPageComponent {
     private router: Router,
     private loginService: LoginService,
     private _snackBar: MatSnackBar,
-    private _dialog: InfoDialogComponent,
-    private pairing: PairingService,
-    private loggingService: LoggingService
+    private dialog: MatDialog, 
+    private loggingService: LoggingService,
   ) {}
+
 
   clearHighScore() {
     let msg = '';
@@ -89,18 +92,24 @@ export class InfoPageComponent {
         const name = res.CV_iteration_name;
         const time = res.CV_time_created;
         const count = res.BLOB_image_count;
-        this._dialog.openDialog(name, time, count.toString());
+        this.dialog.open(DialogComponent, {
+          data: { iterationName: name, timeCreated: time, imageCount: count.toString() },
+        });
       },
       () => {
         this.openSnackBar(this.errorMsg);
       }
     );
   }
 
+  getStatistics() {
+    this.dialog.open(StatisticsComponent);
+  }
+
   getLogger() {
     this.loginService.getLogger().subscribe(
       (res: LogData[]) => { 
-        this._dialog.openErrorLog(res)
+        this.dialog.open(ErrorLogDialogComponent, {data: res});
       },
       (error) => {
         this.openSnackBar(error);
@@ -118,7 +127,7 @@ export class InfoPageComponent {
       message: str.slice(80,115),
     }))
 
-    this._dialog.openErrorLog(formatted_logs)
+    this.dialog.open(ErrorLogDialogComponent, {data: formatted_logs});
 
   } 
 

src/app/admin/login.service.ts

@@ -102,4 +102,22 @@ export class LoginService {
       }
     );
   }
+
+  getStatisticsPerMonth(month: string, year: string): Observable<number> {
+    return this.http.get<number>(
+      `${endpoints.TEKNISKBACKEND}/${endpoints.ADMIN}/${endpoints.GETSTATISTICSMONTH}?month=${month}&year=${year}`,
+      {
+        withCredentials: true,
+      }
+    );
+    }
+
+  getStatisticsPerYear(year: string): Observable<number> {
+    return this.http.get<number>(
+      `${endpoints.TEKNISKBACKEND}/${endpoints.ADMIN}/${endpoints.GETSTATISTICSYEAR}?year=${year}`,
+      {
+        withCredentials: true,
+      }
+    );
+    }
 }

src/app/admin/select-month/select-month.component.html

@@ -0,0 +1,13 @@
+<!-- Month/Year Selection Section -->
+<div class="year-selection-container">
+    <h2>Velg måned og år</h2>
+    <mat-form-field>
+        <mat-label>Måned og år</mat-label>
+        <input matInput [matDatepicker]="dp" [formControl]="date">
+        <mat-hint>MM/YYYY</mat-hint>
+        <mat-datepicker-toggle matIconSuffix [for]="dp"></mat-datepicker-toggle>
+        <mat-datepicker #dp startView="multi-year" (monthSelected)="setMonthAndYear($event, dp)"
+            panelClass="month-picker">
+        </mat-datepicker>
+    </mat-form-field>
+</div>

src/app/admin/select-month/select-month.component.scss

@@ -0,0 +1,21 @@
+.example-picker .mat-calendar-period-button {
+    pointer-events: none;
+}
+
+.example-picker .mat-calendar-arrow {
+    display: none;
+}
+
+mat-form-field {
+    width: 100%;
+    max-width: 300px;
+    margin: 0 auto;
+}
+
+.form-section {
+    width: 100%;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}