// 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...