FabulaVotes/static_files/vote_chart.js

async function main() {
    const vote_response = await fetch(document.URL+"/votes");
    if (!vote_response.ok) {
        return;
    }

    const keys = ["Vérité 1", "Vérité 2", "Vérité 3", "Vérité 4", "Vérité 5", "Vérité 6", "Vérité 7"]
    let datasets = []

    try {
        const vote_data = (await vote_response.json()).votes;
        for (let player in vote_data) {
            datasets.push({
                parsing: true,
                label: player,
                data: vote_data[player],
            })
        }
    } catch (error) {
        console.error("Failed to parse vote data : \n\t" + error.message);
        return;
    }

    // Sort by label to maintain the same graph order, as it goes through a hash map in the backend.
    datasets.sort((a, b) => a.label > b.label)

    const chart_canvas = document.getElementById("vote_chart")
    let chart
    function create_chart(keys, data) {
        let main_axis;
        let aspect_ratio;
        // TODO: Move to the event, to check and not re-create for no reason.
        if (window.innerWidth > window.innerHeight) {
            main_axis = 'x'
            aspect_ratio = 2
        } else {
            main_axis = 'y'
            aspect_ratio = 0.5
        }

        if ( chart ) {
            chart.destroy()
        }

        chart = new Chart(chart_canvas, {
            type: 'bar',
            data: {
                labels: keys,
                datasets: data,
            },
            options: {
                aspectRatio: aspect_ratio,
                indexAxis: main_axis,
                grouped: true,
                scales: {
                    x: {
                        stacked: true
                    },
                    y: {
                        stacked: true
                    }
                }
            }
        })
    }

    function update_chart_ratio(_) {
        create_chart(keys, datasets)
    }

    const orientation_query = matchMedia("screen and (orientation:portrait)");
    orientation_query.onchange = update_chart_ratio

    create_chart(keys, datasets)
}

main().then()