55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
// Chart configuration and initialization
|
|
const chartConfig = {
|
|
cutout: "60%",
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return `${context.label}: ${context.parsed} vCPU`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
animation: {
|
|
animateScale: true,
|
|
animateRotate: true
|
|
}
|
|
};
|
|
|
|
function initializeUtilizationCharts(cpuMean, ramMean) {
|
|
const cpuCtx = document.getElementById("cpuChart").getContext('2d');
|
|
const ramCtx = document.getElementById("ramChart").getContext('2d');
|
|
|
|
new Chart(cpuCtx, {
|
|
type: "doughnut",
|
|
data: {
|
|
labels: ["Used", "Free"],
|
|
datasets: [{
|
|
data: [{{ cpu_used }}, {{ cpu_free }}],
|
|
backgroundColor: ["#3b82f6", "#e5e7eb"],
|
|
borderWidth: 2,
|
|
borderColor: "#ffffff"
|
|
}]
|
|
},
|
|
options: chartConfig
|
|
});
|
|
|
|
new Chart(ramCtx, {
|
|
type: "doughnut",
|
|
data: {
|
|
labels: ["Used", "Free"],
|
|
datasets: [{
|
|
data: [{{ ram_used }}, {{ ram_free }}],
|
|
backgroundColor: ["#f97316", "#e5e7eb"],
|
|
borderWidth: 2,
|
|
borderColor: "#ffffff"
|
|
}]
|
|
},
|
|
options: chartConfig
|
|
});
|
|
}
|
|
|
|
// Export other chart-related functions...
|