statistics

idp_client/src/app/dashboard/components/charts/login/login.chart.component.ts

@@ -0,0 +1,69 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, inject } from '@angular/core';
+import Chart from 'chart.js/auto';
+
+@Component({
+  selector: 'app-chart-login',
+  standalone: true,
+  imports: [],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.scss'
+})
+export class LoginChartComponent {
+  chart: any = [];
+  private http: HttpClient = inject(HttpClient);
+
+  constructor() {}
+
+  ngOnInit() {
+    
+
+
+    this.getData();
+    
+  }
+
+  private getData() {
+    this.http.get<Login[]>('api/app/user/logins').subscribe(res => {
+      console.log(res)
+      this.createChart(res);
+    })
+  }
+
+  private createChart(data: Login[] ) {
+
+    
+    this.chart = new Chart('canvas', {
+      type: 'bar',
+      data: {
+        labels: data.map(d => new Date(d.date).toLocaleDateString('de-DE', {dateStyle: 'short'})),
+        datasets: [
+          {
+            label: 'Logins',
+            data: data.map(d => d.count.logins),
+            borderWidth: 1,
+          },{
+            label: 'Applogins',
+            data: data.map(d => d.count.systemLogins),
+            borderWidth: 1,
+          },
+        ],
+      },
+      options: {
+        scales: {
+          y: {
+            beginAtZero: true,
+          },
+          x: {
+            stacked: true,
+          }
+        },
+      },
+    });
+  }
+}
+
+interface Login {
+  date: string;
+  count: { logins: number, systemLogins: number }
+}