statistics

idp_client/src/app/dashboard/components/card/card.component.html

@@ -1,5 +1,5 @@
 <div class="header flex-row">
-    <span>{{ client.clientName }}x</span>
+    <span>{{ client.clientName }}</span>
     <div class="flex-row">
         <div class="flex-row" style=" gap: 0;"><mat-icon>shield_person</mat-icon><div style="line-height: 8px;">{{ client.admins.length }}</div></div>
         <div class="flex-row" style=" gap: 0;"><mat-icon>link</mat-icon><div style="line-height: 8px;">{{ client.redirectUris.length }}</div></div>

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 }
+}

idp_client/src/app/dashboard/components/charts/login/login.component.html

@@ -0,0 +1,3 @@
+<div>
+    <canvas id="canvas">{{chart}}</canvas>
+  </div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

idp_client/src/app/dashboard/dashboard.component.html

@@ -29,4 +29,6 @@
             <app-card [client]="client" (onDelete)="openDeleteDialog($event)" ></app-card>
         } -->
     </div>
-</div>
+</div>
+
+<app-chart-login></app-chart-login>

idp_client/src/app/dashboard/dashboard.component.ts

@@ -10,12 +10,12 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { CreateClientComponent } from './components/create-client/create-client.component';
 import { CreateHotToastRef, HotToastService } from '@ngxpert/hot-toast';
 import {MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef} from '@angular/material/bottom-sheet';
-import { ClientAdminsComponent } from './components/client-admins/client-admins.component';
+import { LoginChartComponent } from './components/charts/login/login.chart.component';
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
-  imports: [ClientCardComponent, MatButtonModule, MatIconModule, MatDialogModule, MatBottomSheetModule],
+  imports: [ClientCardComponent, MatButtonModule, MatIconModule, MatDialogModule, MatBottomSheetModule, LoginChartComponent],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss'
 })