import { Component, OnInit } from '@angular/core';
import { Chart } from 'chart.js/auto';
import { TabDoencaService } from 'src/app/services/tabDoenca/tab-doenca.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-grafico',
  templateUrl: './grafico-sp.component.html',
  styleUrls: ['./grafico-sp.component.css']
})
export class GraficoSPComponent implements OnInit {
  doencas: any[] = [];

  constructor(private tabDoencaService: TabDoencaService, private router: Router) { }

  ngOnInit() {
    this.carregarDoencas();

    const ctx = document.getElementById('myChart') as HTMLCanvasElement;
    const myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Influenza (Gripe)', 'Dengue', 'COVID-19', 'Hepatite A', 'Chikungunya', 'Hepatite C'],
        datasets: [{
          label: 'Doenças em alta',
          data: [12000, 19000, 3000, 5000, 2000, 3000],
          borderWidth: 1,
          borderColor: '#174b47',
          backgroundColor: '#34817B',
        }]
      },
      options: {
        animation: {
          duration: 3000, // Ajuste este valor para controlar a velocidade da animação (em milissegundos)
        },
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }
  carregarDoencas() {
    this.tabDoencaService.buscarDoencas().subscribe(
      response => {
        this.doencas = response;
      },
      error => {
        console.error(error);
      }
    );
  }

  abrirDoenca(id: any) {
    this.router.navigateByUrl(`/tela-doencas/${id}`);
  }
}
