90 lines
2.3 KiB
JavaScript
90 lines
2.3 KiB
JavaScript
// CPU chart initialization and update functions
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Background color for charts
|
|
var chartBgColor = '#1e1e2f';
|
|
|
|
// Initialize CPU chart
|
|
var cpuChartDom = document.getElementById('cpu-chart');
|
|
if (!cpuChartDom) return;
|
|
|
|
var cpuChart = echarts.init(cpuChartDom, {renderer: 'canvas', useDirtyRect: false, backgroundColor: chartBgColor});
|
|
var cpuOption = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function(params) {
|
|
// Get the PID from the data
|
|
var pid = params.data.pid || 'N/A';
|
|
return params.seriesName + '<br/>' +
|
|
params.name + ' (PID: ' + pid + ')<br/>' +
|
|
'CPU: ' + Math.round(params.value) + '%';
|
|
}
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 10,
|
|
top: 'center',
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
formatter: function(name) {
|
|
// Display full process name without truncation
|
|
return name;
|
|
},
|
|
itemGap: 8,
|
|
itemWidth: 15,
|
|
padding: 10
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Process CPU Usage',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: true,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 16,
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [{ name: 'Loading...', value: 100 }]
|
|
}
|
|
]
|
|
};
|
|
cpuChart.setOption(cpuOption);
|
|
|
|
// Function to update CPU chart
|
|
window.updateCpuChart = function(processes) {
|
|
// Calculate total CPU usage for top 5 processes
|
|
var topProcesses = processes.slice(0, 5);
|
|
var cpuUsageData = topProcesses.map(p => ({
|
|
name: p.name, // Use full process name
|
|
value: p.cpu_percent,
|
|
pid: p.pid // Store PID for tooltip
|
|
}));
|
|
|
|
// Update chart option
|
|
cpuOption.series[0].data = cpuUsageData;
|
|
|
|
// Apply updated option
|
|
cpuChart.setOption(cpuOption);
|
|
};
|
|
|
|
// Handle window resize
|
|
window.addEventListener('resize', function() {
|
|
cpuChart && cpuChart.resize();
|
|
});
|
|
});
|