FabulaVotes/static_files/vote_chart.js

const limit_ratio = 1.3
const colors = ['#b6b8fc', '#b6f4fc', '#fcb6cc', '#e0fcb6', '#fcdcb6', '#b6fcc8', '#f0b6fc']
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)
    for (let i = 0; i < datasets.length; i++) {
        datasets[i].backgroundColor = colors[i % colors.length]
    }

    const chart_canvas = document.getElementById("vote_chart")
    let chart
    let previous_orientation
    function create_chart(keys, data) {
        let main_axis;
        let aspect_ratio;
        let orientation

        if (window.innerWidth / window.innerHeight > limit_ratio) {
            orientation = "landscape"
            main_axis = 'x'
            aspect_ratio = 2
        } else {
            orientation = "portrait"
            main_axis = 'y'
            aspect_ratio = 0.5
        }

        // Don't re-create the chart for no reason.
        if (orientation === previous_orientation) {
            console.log("bijour")
            return;
        } else {
            console.log("badour")
        }

        previous_orientation = orientation

        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
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        position: 'bottom',
                        text: 'Répartition des suppositions'
                    }
                }
            }
        })
    }

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

    const orientation_query = matchMedia(`(aspect-ratio < ${limit_ratio})`);
    orientation_query.onchange = update_chart_ratio

    create_chart(keys, datasets)
}

main().then()