async function load() {
    const usersData = await GetDatas("/users");
    AddUserChart(usersData);

    const phonesData = await GetDatas("/phones");
    AddPhoneChart(phonesData);

    const didsData = await GetDatas("/dids");
    AddDidChart(didsData);

    const convData = await GetDatas("/conversations");
    AddConvChart(convData);
}

async function GetDatas(path) {
    const BASEPATH = "https://api.rapdata.fr";
    const response = await fetch(BASEPATH + path, {
        method: "GET",
    });
    return response.json();
}

function AddUserChart(usersData) {
    const data = {
    labels: Object.keys(usersData),
        datasets: [
            {
                data: Object.values(usersData),
                backgroundColor: [
                    "rgba(217, 102, 99, 0.5)", //red
                    "rgba(125, 232, 93, 0.5)", //green
                    "rgba(224, 136, 58, 0.5)", //orange
                    "rgba(66, 135, 245, 0.5)", //blue
                    "rgba(232, 198, 63, 0.5)", //yellow
                ],
                borderColor: [
                    "rgba(217, 102, 99)", //red
                    "rgba(125, 232, 93)", //green
                    "rgba(224, 136, 58)", //orange
                    "rgba(66, 135, 245)", //blue
                    "rgba(232, 198, 63)", //yellow
                ]
            }
        ]
    };

    const config = {
        type: 'polarArea',
        data: data,
        options: {
            responsive: true,
            scales: {
                r: {
                    pointLabels: {
                        display: true,
                        centerPointLabels: true,
                        font: {
                            size: 10
                        }
                    }
                }
            },
            plugins: {
                legend: {
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: 'Users',
                }
            }
        },
    };

    new Chart(document.getElementById("usercanvas"), config);
}

function AddPhoneChart(phonesData) {
    const data = {
        labels: Object.keys(phonesData),
        datasets: [{
            label: "phones",
            data: Object.values(phonesData),
            backgroundColor: [
                "rgba(224, 136, 58, 0.5)", //orange
                "rgba(232, 198, 63, 0.5)", //yellow
            ],
            borderColor: [
                "rgba(232, 198, 63)", //yellow
                "rgba(224, 136, 58)", //orange
            ],
            borderWidth: 1
        }]
    }

    const config = {
        type: "bar",
        data: data,
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                legend: {
                    display: false,
                },
                title: {
                    display: true,
                    text: 'Phones',
                }
            }
        }
    }

    new Chart(document.getElementById("phonecanvas"), config);
}

function AddDidChart(didsData) {
    const data = {
        labels: Object.keys(didsData),
        datasets: [{
            label: "did numbers",
            data: Object.values(didsData),
            backgroundColor: [
                "rgba(125, 232, 93, 0.5)", //green
                "rgba(66, 135, 245, 0.5)" //blue
            ],
            borderColor: [
                "rgba(125, 232, 93)", //green
                "rgba(66, 135, 245)" //blue
            ],
            borderWidth: 1
        }]
    }

    const config = {
        type: "bar",
        data: data,
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                legend: {
                    display: false,
                },
                title: {
                    display: true,
                    text: 'Did Numbers',
                }
            }
        }
    }

    new Chart(document.getElementById("didcanvas"), config);
}

function AddConvChart(convsData) {
    const convLabels = convsData.map(c => c.day);
    const data = {
        labels: convLabels,
        datasets: [{
            label: "total",
            data: convsData.map(c => c.total),
            borderColor: "rgba(66, 135, 245)", //blue
            backgroundColor: "rgba(66, 135, 245, 0.5)", //blue
            order: 1
        },{
            label: "inbound",
            data: convsData.map(c => c.inbound),
            borderColor: "rgba(217, 102, 99, 0.5)", //red
            backgroundColor: "rgba(217, 102, 99)", //red
            type: "line"
        },{
            label: "outbound",
            data: convsData.map(c => c.outbound),
            borderColor: "rgba(125, 232, 93, 0.5)", //green
            backgroundColor: "rgba(125, 232, 93)", //green
            type: "line"
        }]
    }

    const config = {
        type: "bar",
        data: data,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: "bottom",
                },
                title: {
                    display: true,
                    text: 'Conversations',
                }
            }
        }
    }

    new Chart(document.getElementById("convcanvas"), config);
}