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



@Component({
    selector: 'app-performance',
    templateUrl: './performance.page.html',
    styleUrls: ['./performance.page.scss'],
})
export class PerformancePage implements OnInit {

    @ViewChild('barChart') barChart;
    @ViewChild('pieChart') pieChart;
    @ViewChild('radarChart') radarChart;
    @ViewChild('radarChart2') radarChart2;
    @ViewChild('lineChart') lineChart;

    bars: any;
    pies: any;
    radar: any;
    radar2: any;
    line: any;

    colorArray: any;

    constructor() { }

    ngOnInit() {
    }
    ionViewDidEnter() {
        //this.createBarChart();
        //this.createPieChart();
        this.createRadarChart();
        this.createRadarChart2();
        this.createLineChart();
    }
    createRadarChart() {

        this.radar = new Chart(this.radarChart.nativeElement, {
            type: 'radar', 
            data: {
                 labels: [
                     'Weight',
                     'Body Composition',
                     'Strength',
                     'Power',
                     'Speed',
                     'Agility',
                     'Stress'
                 ],
                datasets: [{
                    label: 'Last Week',
                    data: [65, 59, 90, 81, 56, 55, 40],
                    fill: true,
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgb(255, 99, 132)',
                    pointBackgroundColor: 'rgb(255, 99, 132)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(255, 99, 132)'
                }, {
                    label: 'This Week',
                    data: [64, 70, 95, 90, 96, 75, 100],
                    fill: true,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgb(54, 162, 235)',
                    pointBackgroundColor: 'rgb(54, 162, 235)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(54, 162, 235)'
                }]
            }, 
            options: {
                elements: {
                    line: {
                        borderWidth: 3
                    }
                }
            },
        });
    }
    createRadarChart2() {

        this.radar2 = new Chart(this.radarChart2.nativeElement, {
            type: 'radar', 
            data: {
                 labels: [
                     'FG%',
                     'FGA',
                     'AST',
                     'TOV',
                     'REB',
                     '3FG%',
                     'FT%'
                 ],
                datasets: [{
                    label: 'Last Week',
                    data: [65, 59, 90, 81, 56, 55, 40],
                    fill: true,
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgb(255, 99, 132)',
                    pointBackgroundColor: 'rgb(255, 99, 132)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(255, 99, 132)'
                }, {
                    label: 'This Week',
                    data: [64, 70, 95, 90, 96, 75, 100],
                    fill: true,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgb(54, 162, 235)',
                    pointBackgroundColor: 'rgb(54, 162, 235)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(54, 162, 235)'
                }]
            }, 
            options: {
                elements: {
                    line: {
                        borderWidth: 3
                    }
                }
            },
        });
    }
    createPieChart() {
        this.pies = new Chart(this.pieChart.nativeElement, {
            type: 'pie', 
            data: {
                labels: [
                    'Red',
                    'Blue',
                    'Yellow'
                ],
                datasets: [{
                    label: 'My First Dataset',
                    data: [300, 50, 100],
                    backgroundColor: [
                        'rgb(255, 99, 132)',
                        'rgb(54, 162, 235)',
                        'rgb(255, 205, 86)'
                    ],
                    hoverOffset: 4
                }]
            }
        });
    }
    createBarChart() {
        this.bars = new Chart(this.barChart.nativeElement, {
            type: 'bar',
            data: {
                labels: ['S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7', 'S8'],
                datasets: [{
                    label: 'Viewers in millions',
                    data: [2.5, 3.8, 5, 6.9, 6.9, 7.5, 10, 17],
                    backgroundColor: 'rgb(38, 194, 129)', // array should have same number of elements as number of dataset
                    borderColor: 'rgb(38, 194, 129)',// array should have same number of elements as number of dataset
                    borderWidth: 1
                }]
            },
        });
    }
    createLineChart() {
        let labels  = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
  "July", "Aug", "Sep", "Oct", "Novr", "Dec"
];

        this.line = new Chart(this.lineChart.nativeElement, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [

                     {
      label: 'Pace',
      data: [7, 6.5, 6.7, 6, 5.5, 5, 5,4, 3.5, 3.7, 3.5, 3.3, 3.3],
      //borderColor: Utils.CHART_COLORS.red,
      //backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
      yAxisID: 'y',
    },
    {
      label: 'HR',
      data: [130, 135, 135, 130, 130, 130, 125, 130,133, 130, 130, 130],
      yAxisID: 'y1',
    }
                ]
            },
            options: {
                responsive: true,
                interaction: {
                    mode: 'index',
                    intersect: false,
                },
                plugins: {
                    title: {
                        display: false,
                        text: 'Chart.js Line Chart - Multi Axis'
                    }
                },
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',

                        // grid line settings
                        grid: {
                            drawOnChartArea: false, // only want the grid lines for one axis to show up
                        },
                    },
                }
            },

        });
    }
}
