'use strict';
$(document).ready(function () {

    var colors = {
        primary: $('.colors .bg-primary').css('background-color'),
        secondary: $('.colors .bg-secondary').css('background-color'),
        info: $('.colors .bg-info').css('background-color'),
        success: $('.colors .bg-success').css('background-color'),
        danger: $('.colors .bg-danger').css('background-color'),
        warning: $('.colors .bg-warning').css('background-color'),
    };

    chartjs_one();

    chartjs_two();

    chartjs_three();

    chartjs_four();

    chartjs_five();

    chartjs_six();

    function chartjs_one() {
        var element = document.getElementById("chartjs_one");
        element.height = 100;
        new Chart(element, {
            type: 'bar',
            data: {
                labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
                datasets: [
                    {
                        label: "Population (millions)",
                        backgroundColor: [
                            colors.primary,
                            colors.secondary,
                            colors.success,
                            colors.warning,
                            colors.info
                        ],
                        data: [2478, 3267, 1734, 2084, 3000]
                    }
                ]
            },
            options: {
                legend: {display: false},
                title: {
                    display: true,
                    text: 'Predicted world population (millions) in 2050'
                },
                scales: {
                    xAxes: [
                        {
                            gridLines: {
                                color: $('body').hasClass('dark') ? '#50535a' : '#dbdbdb'
                            }
                        }
                    ],
                    yAxes: [
                        {
                            gridLines: {
                                color: $('body').hasClass('dark') ? '#50535a' : '#dbdbdb'
                            }
                        }
                    ]
                }
            }
        });
    }

    function chartjs_two() {
        var element = document.getElementById("chartjs_two");
        element.height = 100;
        new Chart(element, {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                    data: [65, 0, 80, 81, 56, 85, 40],
                    label: "Africa",
                    borderColor: colors.primary,
                    backgroundColor: colors.primaryLight,
                }, {
                    data: [25, 55, 20, 31, 96, 35, 80],
                    label: "Asia",
                    borderColor: colors.success,
                    backgroundColor: colors.successLight,
                }
                ]
            },
            options: {
                title: {
                    display: true,
                    text: 'World population per region (in millions)'
                },
                scales: {
                    xAxes: [
                        {
                            gridLines: {
                                color: $('body').hasClass('dark') ? '#50535a' : '#dbdbdb'
                            }
                        }
                    ],
                    yAxes: [
                        {
                            gridLines: {
                                color: $('body').hasClass('dark') ? '#50535a' : '#dbdbdb'
                            }
                        }
                    ]
                }
            }
        });
    }

    function chartjs_three() {
        var element = document.getElementById("chartjs_three");
        element.height = 100;
        new Chart(element, {
            type: 'pie',
            data: {
                labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
                datasets: [{
                    label: "Population (millions)",
                    borderWidth: 5,
                    borderColor: $('body').hasClass('dark') ? '#383a3f' : 'white',
                    backgroundColor: [
                        colors.primary,
                        colors.secondary,
                        colors.success,
                        colors.warning,
                        colors.info
                    ],
                    data: [2478, 3267, 734, 1784, 933]
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Predicted world population (millions) in 2050'
                }
            }
        });
    }

    function chartjs_four() {
        var element = document.getElementById("chartjs_four");
        element.height = 100;
        new Chart(element, {
            type: 'radar',
            data: {
                labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
                datasets: [
                    {
                        label: "2000",
                        fill: false,
                        borderColor: colors.primary,
                        pointBorderColor: "#fff",
                        data: [8.77, 55.61, 21.69, 6.62, 6.82]
                    }, {
                        label: "2050",
                        fill: false,
                        borderColor: colors.success,
                        pointBorderColor: "#fff",
                        data: [25.48, 54.16, 7.61, 8.06, 4.45]
                    }
                ]
            },
            options: {
                title: {
                    display: true,
                    text: 'Distribution in % of world population'
                },
                scale: {
                    gridLines: {
                        color: [$('body').hasClass('dark') ? '#50535a' : '#dbdbdb']
                    },
                    angleLines: {color: $('body').hasClass('dark') ? '#50535a' : '#dbdbdb'}
                }
            }
        });
    }

    function chartjs_five() {
        var element = document.getElementById("chartjs_five");
        element.height = 100;
        new Chart(element, {
            type: 'horizontalBar',
            data: {
                labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
                datasets: [
                    {
                        label: "Population (millions)",
                        backgroundColor: [
                            colors.primary,
                            colors.secondary,
                            colors.success,
                            colors.warning,
                            colors.info
                        ],
                        data: [2478, 5267, 734, 784, 433]
                    }
                ]
            },
            options: {
                legend: {display: false},
                title: {
                    display: true,
                    text: 'Predicted world population (millions) in 2050'
                },
                scales: {
                    xAxes: [
                        {
                            gridLines: {
                                color: $('body').hasClass('dark') ? '#50535a' : '#dbdbdb'
                            }
                        }
                    ],
                    yAxes: [
                        {
                            gridLines: {
                                color: $('body').hasClass('dark') ? '#50535a' : '#dbdbdb'
                            }
                        }
                    ]
                }
            }
        });
    }

    function chartjs_six() {
        var element = document.getElementById("chartjs_six");
        element.height = 100;
        new Chart(element, {
            type: 'bar',
            data: {
                labels: ["1900", "1950", "1999", "2050"],
                datasets: [{
                    label: "Europe",
                    type: "line",
                    borderColor: colors.warning,
                    data: [408, 547, 675, 734],
                    fill: false
                }, {
                    label: "Africa",
                    type: "line",
                    borderColor: colors.success,
                    data: [133, 221, 783, 2478],
                    fill: false
                }, {
                    label: "Europe",
                    type: "bar",
                    backgroundColor: colors.secondary,
                    data: [408, 547, 675, 734],
                }, {
                    label: "Africa",
                    type: "bar",
                    backgroundColor: colors.primary,
                    backgroundColorHover: "#3e95cd",
                    data: [133, 221, 783, 2478]
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Population growth (millions): Europe & Africa'
                },
                legend: {display: false},
                scales: {
                    xAxes: [
                        {
                            gridLines: {
                                color: $('body').hasClass('dark') ? '#50535a' : '#dbdbdb'
                            }
                        }
                    ],
                    yAxes: [
                        {
                            gridLines: {
                                color: $('body').hasClass('dark') ? '#50535a' : '#dbdbdb'
                            }
                        }
                    ]
                }
            }
        });
    }


    Chart.defaults.global.defaultFontFamily = 'Inter';

    if ($('body').hasClass('dark')) {
        Chart.defaults.global.defaultFontColor = '#d4d4d4';
    } else {
        Chart.defaults.global.defaultFontColor = 'black';
    }

});
