// runs when the DOM content has been fully loaded and fetches
// the exported json data via an ajax (jQuery.getJSON) call.
document.addEventListener('DOMContentLoaded', function () {
    $.getJSON("/api/currencyrates", function(data){
        let jsonData = JSON.parse(data);
        let config = {
            type: 'line',
            data: getChartJsData(0, [1, 2, 3, 4], jsonData.range),
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: 'Historial currency rates in USD'
                    }
                }
            }
        };
        document.getElementById("currency-chart-loader").style.display = 'none';
        let myChart = new Chart(document.getElementById("myChart"), config);
    }, false);
});

// Reads data from exported range and creates input for a Chart.js line chart.
// The argument xCol should be the 0-based index of the range column that contains the labels of the x-axis.
// The argument indexes should be an array containing the 0 - based indexes of the ranges columns
// columns to use in the datasets.
function getChartJsData(labelColumn, dataColumns, jsonRange) {
    var xDataType;
    var dataTypes = [];
    var colors = ['black', 'blue', 'red', 'orange', 'green']
    var data = {
        labels: [],
        datasets: []
    };

    // Read data from the column section
    for (var i = 0; i < jsonRange.columns.length; i++) {
        if (dataColumns.indexOf(i) > -1) {
            data.datasets.push({
                label: jsonRange.columns[i].name,
                data: [],
                borderColor: colors[i],
                backgroundColor: colors[i],
                borderWidth: 1,
                pointRadius: 0.5,
                fill: false
            });
        }
    }

    // Read data in reverse order from the range's rows
    let labelDataType = jsonRange.columns[labelColumn].dt;
    for (var row = jsonRange.rows.length - 1; row >= 0 ; row--) {
        let labelValue = getValue(jsonRange.rows[row].cells[labelColumn].v, labelDataType);
        data.labels.push(jsonRange.rows[row].cells[labelColumn].t);
        for (var i = 0; i < dataColumns.length; i++) {
            let columnIndex = dataColumns[i];
            let val = getValue(jsonRange.rows[row].cells[columnIndex].v, jsonRange.columns[columnIndex].dt);
            data.datasets[i].data.push({ x: labelValue, y: val });
        }
    }
    return data;
}

function getValue(val, datatype) {
    if (datatype == "string") {
        return val;
    }
    else if (datatype == "number") {
        return parseFloat(val);
    }
    else if (datatype == "datetime") {
        return new Date(parseInt(val));
    }
}