var forEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
        callback.call(scope, i, array[i]);
    }
};

window.chartColors = {
	red: 'rgb(255, 99, 132)',
	orange: 'rgb(255, 159, 64)',
	yellow: 'rgb(255, 205, 86)',
	green: 'rgb(75, 192, 192)',
	blue: 'rgb(54, 162, 235)',
	purple: 'rgb(153, 102, 255)',
	grey: 'rgb(201, 203, 207)'
};

var ChartLoader = function() {
    var charts = document.querySelectorAll('.chart-container');

    forEach(charts, function(i, chart) {
        var api = chart.getAttribute('data-api');
        var canvas = chart.querySelector('.chart-canvas');
        var height = chart.getAttribute('data-height');
        var data = {};
        var config = {
            type: chart.getAttribute('data-type'),
            data: data,
            options: {}
        };
        var instance = new Chart(canvas, config);

        chart.addEventListener('refresh', function() {
            fetch(api)
                .then(function(response) {
                    if(response.ok) {
                        response.json().then(function(json) {
                            if (json.hasOwnProperty('data')) {
                                instance.data = json.data;
                            }

                            if (json.hasOwnProperty('options')) {
                                instance.options = json.options;
                            }

                            if (json.hasOwnProperty('type')) {
                                instance.type = json.type;
                            }

                            instance.update();
                            instance.resize();
                        });
                    }
                });
        });

        chart.dispatchEvent(new Event('refresh'));
    });
}

window.addEventListener('load', function() {
    ChartLoader();
}, false)