69 lines
1.4 KiB
TypeScript
69 lines
1.4 KiB
TypeScript
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.chart.component.html',
|
|
styleUrl: './login.chart.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 }
|
|
} |