chore(): initialite with simple chart

Author: inpercima

package.json

@@ -17,6 +17,7 @@
     "@angular/platform-browser": "19.2.1",
     "@angular/platform-browser-dynamic": "19.2.1",
     "@angular/router": "19.2.1",
+    "chart.js": "4.5.0",
     "material-icons": "1.13.14",
     "rxjs": "7.8.2",
     "tslib": "2.8.1",
@@ -28,8 +29,8 @@
     "@angular/cli": "19.2.1",
     "@angular/compiler-cli": "19.2.1",
     "@cypress/schematic": "3.0.0",
-    "@types/jasmine": "5.1.7",
     "@tailwindcss/postcss": "4.0.10",
+    "@types/jasmine": "5.1.7",
     "angular-eslint": "19.2.0",
     "cypress": "14.1.0",
     "eslint": "9.21.0",

pnpm-lock.yaml

@@ -5,8 +5,8 @@
   <mat-card-content>
     <p>
       Enter your first and last name to receive data from the result pages from <em>davengo.com</em> for <em>Firmenlauf Leipzig</em>. In the
-      background, the result pages of the years 2011-2025 are queried and displayed here in summary.
-      With the exception of 2020 due to the coronavirus pandemic.
+      background, the result pages of the years 2011-2025 are queried and displayed here in summary. With the exception of 2020 due to the
+      coronavirus pandemic.
     </p>
     <form [formGroup]="form" novalidate (ngSubmit)="onSubmit()">
       <div class="flex gap-5">
@@ -29,7 +29,7 @@
     </form>
     <div class="h-1 mb-3">
       @if(loading) {
-        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
       }
     </div>
     @if(dataSource) {
@@ -93,3 +93,12 @@
     }
   </mat-card-content>
 </mat-card>
+
+<mat-card class="w-4/5 mx-auto mb-5">
+  <mat-card-header>
+    <mat-card-title>Chart data</mat-card-title>
+  </mat-card-header>
+  <mat-card-content style="max-height: 400px;">
+    <canvas id="lineChart" style="width: 100%; height: 400px;"></canvas>
+  </mat-card-content>
+</mat-card>

src/app/features/dashboard/dashboard.component.html

@@ -1,21 +1,24 @@
-import { Component, type OnInit, inject } from '@angular/core';
+import { type AfterViewInit, Component, type OnInit, inject } from '@angular/core';
 import { FormBuilder, type FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { Chart, type ChartConfiguration, registerables } from 'chart.js';
 import type { AppResult } from '../../core/app-result';
 import { DavengoService } from '../../core/davengo.service';
 
+Chart.register(...registerables);
+
 @Component({
   imports: [MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatProgressBarModule, MatTableModule, ReactiveFormsModule],
   selector: 'dr-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.css'],
 })
-export class DashboardComponent implements OnInit {
+export class DashboardComponent implements OnInit, AfterViewInit {
   private formBuilder = inject(FormBuilder);
   private davengoService = inject(DavengoService);
 
@@ -26,6 +29,34 @@ export class DashboardComponent implements OnInit {
   dataSource = new MatTableDataSource<AppResult>();
   displayedColumns: string[] = ['year', 'name', 'teamName', 'rank', 'nettoTime'];
 
+  lineChart: any;
+
+  lineChartConfig: ChartConfiguration = {
+    type: 'line',
+    data: {
+      datasets: [
+        {
+          data: [],
+          label: 'Davengo data',
+          tension: 0.5
+        },
+      ],
+      labels: [],
+    },
+    options: {
+      scales: {
+        y: {
+          ticks: {
+            callback: function (val, index) {
+              // Hide every 2nd tick label
+              return `${(Number(val) / 60).toFixed(2)} min`;
+            },
+          },
+        },
+      },
+    },
+  };
+
   ngOnInit(): void {
     this.form = this.formBuilder.group({
       firstName: ['', Validators.required],
@@ -34,6 +65,10 @@ export class DashboardComponent implements OnInit {
     });
   }
 
+  ngAfterViewInit(): void {
+    this.lineChart = new Chart('lineChart', this.lineChartConfig);
+  }
+
   onSubmit(): void {
     this.initialSearch = true;
     this.loading = true;
@@ -44,6 +79,14 @@ export class DashboardComponent implements OnInit {
       .subscribe((appResult) => {
         this.dataSource = new MatTableDataSource(appResult);
         this.loading = false;
+        this.lineChartConfig.data.labels = appResult.map((result) => result.year);
+        this.lineChartConfig.data.datasets[0].data = appResult.map((result) => this.#convertTimeToTimestamp(result.nettoTime));
+        this.lineChart.update();
       });
   }
+
+  #convertTimeToTimestamp(timeString: string): number {
+    const [hours, minutes, seconds] = timeString.split(':').map(Number);
+    return hours * 3600 + minutes * 60 + seconds;
+  }
 }