Charts & canvas & RGBA

Charts & canvas

RGBA color

let stopFlag = 0;

// show Charts
const showCharts = (name = "") => {
    let ctxCPU = document.querySelector(`#cpuChart`).getContext("2d"),
        ctxMemory = document.querySelector(`#memoryChart`).getContext("2d");
    // Global point options
    Chart.defaults.global.elements.point.pointStyle = "circle";
    Chart.defaults.global.elements.point.radius = 0;
    // init data
    // let cpuData = [0.3],
    //     memoryData = [99.5],
    let cpuData = [null],
        memoryData = [null],
        labels = [" "];
    cpuData = repeatArray(cpuData, 60);
    memoryData = repeatArray(memoryData, 60);
    labels = repeatArray(labels, 60);
    let cpuChart = new Chart(ctxCPU, {
        // type: "bar ",
        type: "line",
        data: {
            labels: labels,
            datasets: [
                {
                    label: "CPU 使用记录",
                    data: cpuData,
                    backgroundColor: [
                        "rgba(241, 246, 250, 0.8)",
                    ],
                    borderColor: [
                        "rgba(83, 161, 206, 1)",
                    ],
                    borderWidth: 1,
                    fill: "start",
                }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        // suggestedMax: 1,
                        suggestedMin: 0.1,
                        // beginAtZero: true,
                        callback: function(tick) {
                            return tick.toString() + "%";
                        },
                    }
                }]
            },
            elements: {
                line: {
                    tension: 0,
                    // no smooth
                }
            }
        }
    });
    let memoryChart = new Chart(ctxMemory, {
        // type: "bar ",
        type: "line",
        data: {
            labels: labels,
            datasets: [
                {
                    label: "Memory 使用记录",
                    data: memoryData,
                    backgroundColor: [
                        "rgba(244, 242, 244, 0.8)",
                    ],
                    borderColor: [
                        "rgba(164, 73, 190, 1)",// RGBA
                        // "rgba(0, 127, 53, 1)",// green
                        // "rgba(149, 40, 180, 1)",
                    ],
                    borderWidth: 1,
                    fill: "start",
                }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        // min: 99,
                        // max: 100,
                        // stepSize: 0.000001,
                        // beginAtZero: false,
                        // suggestedMax: 100,
                        callback: function(tick) {
                            return tick.toString() + "%";
                        },
                    }
                }]
            },
            elements: {
                line: {
                    tension: 0,
                    // no smooth
                }
            }
        }
    });
    // update
    let swalFlag = true;
    // console.log(`old stopFlag =`, stopFlag);
    stopFlag = setInterval(() => {
        showDetails(name).then((json) => {
            if (json.success) {
                let {
                    osName,
                    date,
                    // totalMemory,
                    // freeMemory,
                    cpuRatio,
                    memoryRatio
                } = json.data;
                let tds = [...document.querySelectorAll(`[data-info="server"]`)];
                for (let i = 0; i < tds.length; i++) {
                    tds[i].innerHTML = "";
                    let value = "暂无数据";
                    switch (i) {
                        case 0:
                            value = osName;
                            break;
                        case 1:
                            value = date;
                            break;
                        default:
                            break;
                    }
                    tds[i].innerHTML = value;
                }
                let cpu = cpuRatio,
                    memory = memoryRatio;
                if (cpuData.length > 59) {
                    cpuData.push(cpu);
                    let newData = cpu,
                        oldData = [];
                    oldData = cpuData.slice(cpuData.length - 59, cpuData.length);
                    oldData.push(newData);
                    cpuData = oldData;
                    // console.log(`cpuData =\n`, cpuData);
                    cpuChart.data.datasets[0].data = cpuData;
                    // Preventing Animations
                    cpuChart.update(0);
                } else {
                    cpuData.push(cpu);
                    cpuChart.data.datasets[0].data = cpuData;
                    cpuChart.update(0);
                }
                if (memoryData.length > 59) {
                    memoryData.push(memory);
                    let newData = memory,
                        oldData = [];
                    oldData = memoryData.slice(memoryData.length - 59, memoryData.length);
                    oldData.push(newData);
                    memoryData = oldData;
                    memoryChart.data.datasets[0].data = memoryData;
                    memoryChart.update(0);
                } else {
                    memoryData.push(memory);
                    memoryChart.data.datasets[0].data = memoryData;
                    memoryChart.update(0);
                }
            } else {
                if (swalFlag) {
                    swal({
                        title: "查看详情失败!",
                        text: `${json.message !== null ? json.message : "3 秒后自动关闭!"}`,
                        icon: "error",
                        // button: "关闭",
                        buttons: false,
                        timer: 3000,
                    });
                    swalFlag = false;
                }
                // clear
                window.clearInterval(stopFlag);
            }
        });
    }, 1000);
    // console.log(`new stopFlag =`, stopFlag);
};