import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import {Chart} from 'chart.js';

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css']
})
export class PieChartComponent implements AfterViewInit {

  @Input()width?: number;
  @Input()height?: number;
  @Input()uniqueValues?: string[] = [];
  @Input()uniqueValuesPercent?: number[] = [];

  updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){
    console.log(this.uniqueValues, this.uniqueValuesPercent);
    const newPieChartData = {
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
        data: [2478,5267,734,784,433],
      }]
        
    }
  };
  
  @ViewChild('piechart') chartRef!: ElementRef;
  constructor() { }

  pieChartData = {
    datasets: [{
      label: "Population (millions)",
      backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
      data: [2478,5267,734,784,433]
    }]
}

  ngAfterViewInit(): void {
  const myChart = new Chart(this.chartRef.nativeElement, {
    type: 'pie',
    data: this.pieChartData,
    options: {
      /*title: {
        display: true,
        text: 'Predicted world population (millions) in 2050'
      }*/
      plugins:{   
        legend: {
          display: false
                },
             },
             layout: {
              padding: 15
            }
    }
  });}

}