Dashboard.ts

import { Component, ViewChild } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../../material/material.module';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.scss',
})
export class DashboardComponent {
  totalUsers: any;
  userLogins: any;
  userTypes: any;
  apiCalls: any;

  constructor(
    private titleService: Title
  ) {

  }

  createTotalUsersChart(): any {
    return {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'March', 'April'],
        datasets: [
          {
            label: 'Total Users',
            data: [12, 19, 22, 23],
            borderWidth: 1,
          },
        ],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    };
  }

  createUserLoginsChart(): any {
    return {
      type: 'bar',
      data: {
        labels: ['Jan', 'Feb', 'March', 'April'],
        datasets: [
          {
            label: 'User Logins',
            data: [55, 56, 82, 93],
            borderWidth: 1,
          },
        ],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    };
  }

  createUserTypesChart(): any {
    return {
      type: 'doughnut',
      data: {
        labels: ['Owner', 'Admin', 'Member', 'User', 'Guest', 'Anonymous'],
        datasets: [
          {
            label: 'Users by Type',
            data: [15, 20, 30, 25, 5, 5],
            borderWidth: 1,
          },
        ],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    };
  }

  createApiCallsChart(): any {
    return {
      type: 'bar',
      data: {
        labels: ['Jan', 'Feb', 'March', 'April'],
        datasets: [
          {
            label: 'Api Calls - Success',
            data: [150, 200, 300, 250],
            borderWidth: 1,
          },
          {
            label: 'Api Calls - Failed',
            data: [15, 20, 15, 12],
            borderWidth: 1,
          },
        ],
      },
      options: {
        scales: {
          x: {
            stacked: true,
          },
          y: {
            stacked: true,
          },
        },
      },
    };
  }

  ngOnInit() {
    this.totalUsers = new Chart('totalUsers', this.createTotalUsersChart());
    this.userLogins = new Chart('userLogins', this.createUserLoginsChart());
    this.userTypes = new Chart('userTypes', this.createUserTypesChart());
    this.apiCalls = new Chart('apiCalls', this.createApiCallsChart());
  }

  ngOnDestroy() {
    this.totalUsers.destroy();
    this.userLogins.destroy();
  }
}