$(document).ready(function() {
    (async () => await updateGraph())()
});

async function updateGraph() {
    deck_info = $('ul a').map(function(idx, a) {
        return {
            "name": $(a).html(),
            "id": parseInt($(a).attr('href').split('/')[2])
        }
    })

    deck_info_and_scores = deck_info.map(function(idx, info) {
        return fetch('/api/score/' + info['id'] + '/by_date').then(result => result.json()).then(result => {return {
            "label": info['name'],
            "data": result
        }})
    })

    resolved_data = Promise.all(deck_info_and_scores)
    window.chart = new Chart(
        document.getElementById('graph_canvas'),
        {
            type: 'line',
            data: {
                datasets: await resolved_data
            },
            options: {
                scales: {
                    x: {
                        type: 'time'
                    }
                },
                parsing: {
                    xAxisKey: 'date',
                    yAxisKey: 'score'
                }
            }
        }
    )
}