nolan-casey-website/html/js/monitor.js

var threads;
var cpu;
var ram;
var swap;
const api = "https://api.nolancasey.click/server"
const colors = ["red", "green", "blue", "chartreuse", "darkmagenta", "darkkhaki", "purple", "salmon", "yellow", "blueviolet", "chocolate", "crimson", "cyan", "darkslategrey", "khaki", "hotpink"];
const resolution = 32;

window.addEventListener("load", async function () {
    var json;
    try{
        var response = await fetch(api);
        if (!response.ok){
            throw new Error(response.status);
        }
        json = await response.json();
        console.log(json);
    }catch (error){
        console.log(error.message);
    }

    var labels = [];
    for (var i = 0; i < resolution; i++){
        labels.push("");
    }

    var datasets = [];
    {
        var data = []
        for (var j = 0; j < resolution; j++) data.push(0);
        data[resolution - 1] = json["cpu0"]
        datasets.push(
            {
                label: "Total Utilization",
                data: data,
                borderColor: colors[0],
                fill: false,
                pointRadius: 0
            }
        )
    }

    cpu = new Chart("cpu",{
        type: "line",
        data:{
            labels: labels,
            datasets: datasets
        },
        options:{
            responsive: true,
            title:{
                display: true,
                text: "Total Utilization",
                position: "top"
            },
            animation:{
                duration: 0
            },
            legend:{
                display: false
            }
        }
    });

    datasets = [];
    for (var i = 1; i < json["cpuCount"] + 1; i++){
        var data = []
        for (var j = 0; j < resolution; j++) data.push(0);
        data[resolution - 1] = json["cpu" + i]
        datasets.push(
            {
                label: "cpu" + i,
                data: data,
                borderColor: colors[i - 1],
                fill: false,
                pointRadius: 0,
                borderWidth: 2.
            }
        );
    }

    threads = new Chart("threads", {
        type: "line",
        data:{
            labels: labels,
            datasets: datasets
        },
        options:{
            responsive: true,
            title:{
                display: true,
                text: "Thread Utilization",
                position: "top"
            },
            legend:{
                position: "bottom"
            },
            animation:{
                duration: 0
            }
        }
    });

    var x = ["Used", "Free"]
    ram = new Chart("ram",{
        type: "doughnut",
        data:{
            labels: x,
            datasets:[
                {
                    data: [json["usedRam"], json["totalRam"] - json["usedRam"]],
                    backgroundColor: ["darkred", "lightcoral"]
                }
            ]
        },
        options:{
            responsive: false,
            title:{
                display: true,
                text: "RAM Usage",
                position: "top"
            },
            animation:{
                duration: 0
            }
        }
    });

    swap = new Chart("swap",{
        type: "doughnut",
        labels: x,
        data:{
            labels: x,
            datasets:[
                {
                    data: [json["usedSwap"], json["totalSwap"] - json["usedSwap"]],
                    backgroundColor: ["darkgreen", "lawngreen"]
                }
            ]
        },
        options:{
            responsive: false,
            title:{
                display: true,
                text: "Swap Usage",
                position: "top"
            },
            animation:{
                duration: 0
            }
        }
    });

    this.setInterval(increment, 1000);
});

async function increment() {
    try{
        var response = await fetch(api);
        if (!response.ok){
            throw new Error(response.status);
        }
        var json = await response.json();
        for (var i = 1; i < resolution; i++){
            cpu.data.datasets[0].data[i - 1] = cpu.data.datasets[0].data[i];
        }
        cpu.data.datasets[0].data[resolution - 1] = json["cpu0"];
        cpu.update();
        for (var i = 0; i < json["cpuCount"]; i++){
            for (var j = 1; j < resolution; j++){
                threads.data.datasets[i].data[j - 1] = threads.data.datasets[i].data[j];
            }
            threads.data.datasets[i].data[resolution - 1] = json["cpu" + (i + 1)];
            threads.update();
        }
        threads.update();
        ram.data.datasets[0].data[0] = json["usedRam"];
        ram.data.datasets[0].data[1] = json["totalRam"] - json["usedRam"];
        swap.data.datasets[0].data[0] = json["usedSwap"];
        swap.data.datasets[0].data[1] = json["totalSwap"] - json["usedSwap"];
        ram.update();
        swap.update();
    }catch (error){
        console.log(error.message);
    }
}