优化配色
This commit is contained in:
@@ -391,12 +391,12 @@ class MetricChart {
|
||||
if (series) {
|
||||
// Draw Stacked Area
|
||||
const modes = [
|
||||
{ name: 'idle', color: 'rgba(100, 116, 139, 0.4)', stroke: '#64748b' }, // Slate
|
||||
{ name: 'other', color: 'rgba(168, 85, 247, 0.5)', stroke: '#a855f7' }, // Purple
|
||||
{ name: 'irq', color: 'rgba(234, 179, 8, 0.5)', stroke: '#eab308' }, // Yellow
|
||||
{ name: 'iowait', color: 'rgba(239, 68, 68, 0.5)', stroke: '#ef4444' }, // Red
|
||||
{ name: 'system', color: 'rgba(6, 182, 212, 0.5)', stroke: '#06b6d4' }, // Cyan
|
||||
{ name: 'user', color: 'rgba(99, 102, 241, 0.5)', stroke: '#6366f1' } // Indigo
|
||||
{ name: 'idle', color: 'rgba(34, 197, 94, 0.4)', stroke: '#22c55e' }, // Green
|
||||
{ name: 'other', color: 'rgba(168, 85, 247, 0.4)', stroke: '#a855f7' }, // Purple
|
||||
{ name: 'irq', color: 'rgba(249, 115, 22, 0.4)', stroke: '#f97316' }, // Orange
|
||||
{ name: 'iowait', color: 'rgba(239, 68, 68, 0.4)', stroke: '#ef4444' }, // Red
|
||||
{ name: 'system', color: 'rgba(234, 179, 8, 0.4)', stroke: '#eab308' }, // Yellow
|
||||
{ name: 'user', color: 'rgba(99, 102, 241, 0.4)', stroke: '#6366f1' } // Indigo
|
||||
];
|
||||
|
||||
let currentBase = new Array(len).fill(0);
|
||||
@@ -434,17 +434,17 @@ class MetricChart {
|
||||
}
|
||||
});
|
||||
|
||||
// Add Legend at bottom right
|
||||
// Add Legend at bottom right (moved up slightly)
|
||||
ctx.font = '9px sans-serif';
|
||||
ctx.textAlign = 'right';
|
||||
let lx = w - 10;
|
||||
let ly = h - 5;
|
||||
let ly = h - 20; // Increased padding from bottom
|
||||
[...modes].reverse().forEach(m => {
|
||||
ctx.fillStyle = m.stroke;
|
||||
ctx.fillRect(lx - 10, ly - 8, 8, 8);
|
||||
ctx.fillStyle = '#5a6380';
|
||||
ctx.fillText(m.name.charAt(0).toUpperCase() + m.name.slice(1), lx - 15, ly - 1);
|
||||
lx -= 60;
|
||||
lx -= 70; // Increased gap for safety
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user