697 lines
24 KiB
JavaScript
697 lines
24 KiB
JavaScript
/**
|
||
* Custom Canvas Chart Renderer
|
||
* Lightweight, no-dependency chart for the network traffic area chart
|
||
*/
|
||
class AreaChart {
|
||
constructor(canvas) {
|
||
this.canvas = canvas;
|
||
this.ctx = canvas.getContext('2d');
|
||
this.data = { timestamps: [], rx: [], tx: [] };
|
||
this.animProgress = 0;
|
||
this.animFrame = null;
|
||
this.showP95 = false;
|
||
this.showRx = true;
|
||
this.showTx = true;
|
||
this.p95Type = 'tx'; // 'tx', 'rx', 'both'
|
||
this.dpr = window.devicePixelRatio || 1;
|
||
this.padding = { top: 20, right: 16, bottom: 32, left: 56 };
|
||
|
||
this.prevMaxVal = 0;
|
||
this.currentMaxVal = 0;
|
||
this.lastDataHash = ''; // Fingerprint for optimization
|
||
|
||
// Use debounced resize for performance and safety
|
||
this._resize = typeof debounce === 'function' ? debounce(this.resize.bind(this), 100) : this.resize.bind(this);
|
||
window.addEventListener('resize', this._resize);
|
||
|
||
// Drag zoom support
|
||
this.isDraggingP95 = false;
|
||
this.customMaxVal = null;
|
||
|
||
this.onPointerDown = this.onPointerDown.bind(this);
|
||
this.onPointerMove = this.onPointerMove.bind(this);
|
||
this.onPointerUp = this.onPointerUp.bind(this);
|
||
|
||
this.canvas.addEventListener('pointerdown', this.onPointerDown);
|
||
window.addEventListener('pointermove', this.onPointerMove);
|
||
window.addEventListener('pointerup', this.onPointerUp);
|
||
|
||
this.resize();
|
||
}
|
||
|
||
onPointerDown(e) {
|
||
if (!this.showP95 || !this.p95) return;
|
||
const rect = this.canvas.getBoundingClientRect();
|
||
const scaleY = this.height / rect.height;
|
||
const y = (e.clientY - rect.top) * scaleY;
|
||
|
||
const p = this.padding;
|
||
const chartH = this.height - p.top - p.bottom;
|
||
|
||
// Calculate current P95 Y position
|
||
const k = 1024;
|
||
const currentMaxVal = (this.customMaxVal !== null ? this.customMaxVal : (this.currentMaxVal || 1024));
|
||
let unitIdx = Math.floor(Math.log(Math.max(1, currentMaxVal)) / Math.log(k));
|
||
unitIdx = Math.max(0, Math.min(unitIdx, 4));
|
||
const unitFactor = Math.pow(k, unitIdx);
|
||
const rawValInUnit = (currentMaxVal * 1.15) / unitFactor;
|
||
let niceMaxInUnit;
|
||
if (rawValInUnit <= 1) niceMaxInUnit = 1;
|
||
else if (rawValInUnit <= 2) niceMaxInUnit = 2;
|
||
else if (rawValInUnit <= 5) niceMaxInUnit = 5;
|
||
else if (rawValInUnit <= 10) niceMaxInUnit = 10;
|
||
else if (rawValInUnit <= 20) niceMaxInUnit = 20;
|
||
else if (rawValInUnit <= 50) niceMaxInUnit = 50;
|
||
else if (rawValInUnit <= 100) niceMaxInUnit = 100;
|
||
else if (rawValInUnit <= 200) niceMaxInUnit = 200;
|
||
else if (rawValInUnit <= 500) niceMaxInUnit = 500;
|
||
else if (rawValInUnit <= 1000) niceMaxInUnit = 1000;
|
||
else niceMaxInUnit = Math.ceil(rawValInUnit / 100) * 100;
|
||
|
||
const displayMaxVal = this.customMaxVal !== null ? this.customMaxVal : (niceMaxInUnit * unitFactor);
|
||
const p95Y = p.top + chartH - (this.p95 / (displayMaxVal || 1)) * chartH;
|
||
|
||
if (Math.abs(y - p95Y) < 25) {
|
||
this.isDraggingP95 = true;
|
||
this.canvas.style.cursor = 'ns-resize';
|
||
this.canvas.setPointerCapture(e.pointerId);
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
}
|
||
|
||
onPointerMove(e) {
|
||
if (!this.isDraggingP95) return;
|
||
const rect = this.canvas.getBoundingClientRect();
|
||
const scaleY = this.height / rect.height;
|
||
const y = (e.clientY - rect.top) * scaleY;
|
||
const p = this.padding;
|
||
const chartH = this.height - p.top - p.bottom;
|
||
|
||
const dy = p.top + chartH - y;
|
||
if (dy > 10) {
|
||
this.customMaxVal = (this.p95 * chartH) / dy;
|
||
this.draw();
|
||
}
|
||
}
|
||
|
||
onPointerUp(e) {
|
||
if (this.isDraggingP95) {
|
||
this.isDraggingP95 = false;
|
||
this.canvas.style.cursor = '';
|
||
this.canvas.releasePointerCapture(e.pointerId);
|
||
}
|
||
}
|
||
|
||
resize() {
|
||
const rect = this.canvas.parentElement.getBoundingClientRect();
|
||
this.width = rect.width;
|
||
this.height = rect.height;
|
||
this.canvas.width = this.width * this.dpr;
|
||
this.canvas.height = this.height * this.dpr;
|
||
this.canvas.style.width = this.width + 'px';
|
||
this.canvas.style.height = this.height + 'px';
|
||
this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
|
||
this.draw();
|
||
}
|
||
|
||
setData(data) {
|
||
if (!data || !data.timestamps) return;
|
||
|
||
// 1. Data Fingerprinting: Skip redundant updates to save GPU/CPU
|
||
const fingerprint = data.timestamps.length + '_' +
|
||
(data.rx.length > 0 ? data.rx[data.rx.length - 1] : 0) + '_' +
|
||
(data.tx.length > 0 ? data.tx[data.tx.length - 1] : 0);
|
||
|
||
if (fingerprint === this.lastDataHash) return;
|
||
this.lastDataHash = fingerprint;
|
||
|
||
// Store old data for smooth transition before updating this.data
|
||
// Only clone if there is data to clone; otherwise use empty set
|
||
if (this.data && this.data.timestamps && this.data.timestamps.length > 0) {
|
||
this.prevData = {
|
||
timestamps: [...this.data.timestamps],
|
||
rx: [...this.data.rx],
|
||
tx: [...this.data.tx]
|
||
};
|
||
} else {
|
||
this.prevData = { timestamps: [], rx: [], tx: [] };
|
||
}
|
||
|
||
// Smoothly transition max value context too
|
||
this.prevMaxVal = this.currentMaxVal || 0;
|
||
|
||
// Downsample if data is too dense (target ~500 points for GPU performance)
|
||
const MAX_POINTS = 500;
|
||
if (data.timestamps.length > MAX_POINTS) {
|
||
const skip = Math.ceil(data.timestamps.length / MAX_POINTS);
|
||
const downsampled = { timestamps: [], rx: [], tx: [] };
|
||
for (let i = 0; i < data.timestamps.length; i += skip) {
|
||
downsampled.timestamps.push(data.timestamps[i]);
|
||
downsampled.rx.push(data.rx[i]);
|
||
downsampled.tx.push(data.tx[i]);
|
||
}
|
||
this.data = downsampled;
|
||
} else {
|
||
this.data = data;
|
||
}
|
||
|
||
// Refresh currentMaxVal target for interpolation in draw()
|
||
let rawMax = 1024;
|
||
for (let i = 0; i < this.data.rx.length; i++) {
|
||
if (this.showRx) rawMax = Math.max(rawMax, this.data.rx[i] || 0);
|
||
if (this.showTx) rawMax = Math.max(rawMax, this.data.tx[i] || 0);
|
||
}
|
||
this.currentMaxVal = rawMax;
|
||
|
||
// Calculate P95 (95th percentile)
|
||
let combined = [];
|
||
if (this.p95Type === 'tx') {
|
||
combined = data.tx.map(t => t || 0);
|
||
} else if (this.p95Type === 'rx') {
|
||
combined = data.rx.map(r => r || 0);
|
||
} else if (this.p95Type === 'max') {
|
||
combined = data.tx.map((t, i) => Math.max(t || 0, data.rx[i] || 0));
|
||
} else {
|
||
combined = data.tx.map((t, i) => (t || 0) + (data.rx[i] || 0));
|
||
}
|
||
|
||
if (combined.length > 0) {
|
||
const sorted = [...combined].sort((a, b) => a - b);
|
||
const p95Idx = Math.floor(sorted.length * 0.95);
|
||
this.p95 = sorted[p95Idx];
|
||
} else {
|
||
this.p95 = null;
|
||
}
|
||
|
||
this.animProgress = 0;
|
||
this.animate();
|
||
}
|
||
|
||
animate() {
|
||
if (this.animFrame) cancelAnimationFrame(this.animFrame);
|
||
const start = performance.now();
|
||
const duration = 400; // Shorter animation = less GPU time
|
||
|
||
const step = (now) => {
|
||
const elapsed = now - start;
|
||
this.animProgress = Math.min(elapsed / duration, 1);
|
||
// Ease out cubic
|
||
this.animProgress = 1 - Math.pow(1 - this.animProgress, 3);
|
||
this.draw();
|
||
if (this.animProgress < 1) {
|
||
this.animFrame = requestAnimationFrame(step);
|
||
}
|
||
};
|
||
|
||
this.animFrame = requestAnimationFrame(step);
|
||
}
|
||
|
||
draw() {
|
||
const ctx = this.ctx;
|
||
const w = this.width;
|
||
const h = this.height;
|
||
this.padding = { top: 20, right: 16, bottom: 32, left: 64 };
|
||
const p = this.padding;
|
||
const chartW = w - p.left - p.right;
|
||
const chartH = h - p.top - p.bottom;
|
||
|
||
ctx.clearRect(0, 0, w, h);
|
||
|
||
const { timestamps, rx, tx } = this.data;
|
||
if (!timestamps || timestamps.length < 2) {
|
||
ctx.fillStyle = '#5a6380';
|
||
ctx.font = '13px Inter, sans-serif';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText('等待数据...', w / 2, h / 2);
|
||
return;
|
||
}
|
||
|
||
// Determine consistent unit based on max data value
|
||
let maxDataVal = 1024;
|
||
if (this.prevMaxVal && this.animProgress < 1) {
|
||
// Interpolate the max value context to keep vertical scale smooth
|
||
maxDataVal = this.prevMaxVal + (this.currentMaxVal - this.prevMaxVal) * (this.animProgress || 0);
|
||
} else {
|
||
maxDataVal = this.currentMaxVal;
|
||
}
|
||
|
||
const k = 1024;
|
||
const sizes = ['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s'];
|
||
let unitIdx = Math.floor(Math.log(Math.max(1, maxDataVal)) / Math.log(k));
|
||
unitIdx = Math.max(0, Math.min(unitIdx, sizes.length - 1));
|
||
const unitFactor = Math.pow(k, unitIdx);
|
||
|
||
// Get value in current units and find a "nice" round max
|
||
const rawValInUnit = (maxDataVal * 1.15) / unitFactor;
|
||
let niceMaxInUnit;
|
||
if (rawValInUnit <= 1) niceMaxInUnit = 1;
|
||
else if (rawValInUnit <= 2) niceMaxInUnit = 2;
|
||
else if (rawValInUnit <= 5) niceMaxInUnit = 5;
|
||
else if (rawValInUnit <= 10) niceMaxInUnit = 10;
|
||
else if (rawValInUnit <= 20) niceMaxInUnit = 20;
|
||
else if (rawValInUnit <= 50) niceMaxInUnit = 50;
|
||
else if (rawValInUnit <= 100) niceMaxInUnit = 100;
|
||
else if (rawValInUnit <= 200) niceMaxInUnit = 200;
|
||
else if (rawValInUnit <= 500) niceMaxInUnit = 500;
|
||
else if (rawValInUnit <= 1000) niceMaxInUnit = 1000;
|
||
else niceMaxInUnit = Math.ceil(rawValInUnit / 100) * 100;
|
||
|
||
let maxVal = niceMaxInUnit * unitFactor;
|
||
if (this.customMaxVal !== null) {
|
||
maxVal = this.customMaxVal;
|
||
}
|
||
|
||
// Recalculate units based on final maxVal (could be zoomed)
|
||
let finalUnitIdx = Math.floor(Math.log(Math.max(1, maxVal)) / Math.log(k));
|
||
finalUnitIdx = Math.max(0, Math.min(finalUnitIdx, sizes.length - 1));
|
||
const finalFactor = Math.pow(k, finalUnitIdx);
|
||
const finalUnitLabel = sizes[finalUnitIdx];
|
||
|
||
const len = timestamps.length;
|
||
const xStep = chartW / (len - 1);
|
||
|
||
// Helper to get point with smooth value transition
|
||
const getX = (i) => p.left + i * xStep;
|
||
const getY = (val, prevVal = 0) => {
|
||
// Interpolate value from previous state to new state
|
||
const actualVal = prevVal + (val - prevVal) * this.animProgress;
|
||
return p.top + chartH - (actualVal / (maxVal || 1)) * chartH;
|
||
};
|
||
|
||
// Draw grid lines
|
||
ctx.strokeStyle = 'rgba(99, 102, 241, 0.08)';
|
||
ctx.lineWidth = 1;
|
||
const gridLines = 4;
|
||
for (let i = 0; i <= gridLines; i++) {
|
||
const y = p.top + (chartH / gridLines) * i;
|
||
ctx.beginPath();
|
||
ctx.moveTo(p.left, y);
|
||
ctx.lineTo(p.left + chartW, y);
|
||
ctx.stroke();
|
||
|
||
// Y-axis labels
|
||
const v = maxVal * (1 - i / gridLines);
|
||
const valInUnit = v / finalFactor;
|
||
ctx.fillStyle = '#5a6380';
|
||
ctx.font = '10px "JetBrains Mono", monospace';
|
||
ctx.textAlign = 'right';
|
||
|
||
const label = (valInUnit % 1 === 0 ? valInUnit : valInUnit.toFixed(1)) + ' ' + finalUnitLabel;
|
||
ctx.fillText(label, p.left - 10, y + 3);
|
||
}
|
||
|
||
// X-axis labels (every ~4 hours)
|
||
ctx.fillStyle = '#5a6380';
|
||
ctx.font = '10px "JetBrains Mono", monospace';
|
||
ctx.textAlign = 'center';
|
||
const labelInterval = Math.max(1, Math.floor(len / 6));
|
||
for (let i = 0; i < len; i += labelInterval) {
|
||
const x = getX(i);
|
||
ctx.fillText(formatTime(timestamps[i]), x, h - 8);
|
||
}
|
||
ctx.fillText(formatTime(timestamps[len - 1]), getX(len - 1), h - 8);
|
||
|
||
// Draw data areas with clipping
|
||
ctx.save();
|
||
ctx.beginPath();
|
||
ctx.rect(p.left, p.top, chartW, chartH);
|
||
ctx.clip();
|
||
|
||
if (this.showTx) {
|
||
this.drawArea(ctx, tx, this.prevData ? this.prevData.tx : null, getX, getY, chartH, p,
|
||
'rgba(99, 102, 241, 0.25)', 'rgba(99, 102, 241, 0.02)', '#6366f1', len);
|
||
}
|
||
if (this.showRx) {
|
||
this.drawArea(ctx, rx, this.prevData ? this.prevData.rx : null, getX, getY, chartH, p,
|
||
'rgba(6, 182, 212, 0.25)', 'rgba(6, 182, 212, 0.02)', '#06b6d4', len);
|
||
}
|
||
ctx.restore();
|
||
|
||
// Draw P95 line
|
||
if (this.showP95 && this.p95 && (this.animProgress === 1 || this.isDraggingP95)) {
|
||
const p95Y = getY(this.p95);
|
||
if (p95Y >= p.top && p95Y <= p.top + chartH) {
|
||
ctx.save();
|
||
ctx.beginPath();
|
||
ctx.setLineDash([6, 4]);
|
||
ctx.strokeStyle = 'rgba(244, 63, 94, 0.85)';
|
||
ctx.lineWidth = 1.5;
|
||
ctx.moveTo(p.left, p95Y);
|
||
ctx.lineTo(p.left + chartW, p95Y);
|
||
ctx.stroke();
|
||
|
||
const label = '95计费: ' + (window.formatBandwidth ? window.formatBandwidth(this.p95) : this.p95.toFixed(2));
|
||
ctx.font = 'bold 11px "JetBrains Mono", monospace';
|
||
const metrics = ctx.measureText(label);
|
||
ctx.fillStyle = 'rgba(244, 63, 94, 0.15)';
|
||
ctx.fillRect(p.left + 8, p95Y - 20, metrics.width + 12, 18);
|
||
ctx.fillStyle = '#f43f5e';
|
||
ctx.textAlign = 'left';
|
||
ctx.fillText(label, p.left + 14, p95Y - 7);
|
||
ctx.restore();
|
||
}
|
||
}
|
||
}
|
||
|
||
drawArea(ctx, values, prevValues, getX, getY, chartH, p, fillColorTop, fillColorBottom, strokeColor, len) {
|
||
if (!values || values.length === 0) return;
|
||
|
||
const useSimple = len > 80;
|
||
const getPVal = (i) => (prevValues && i < prevValues.length) ? prevValues[i] : 0;
|
||
|
||
// Fill
|
||
ctx.beginPath();
|
||
ctx.moveTo(getX(0), getY(values[0] || 0, getPVal(0)));
|
||
for (let i = 1; i < len; i++) {
|
||
const currY = getY(values[i] || 0, getPVal(i));
|
||
if (useSimple) {
|
||
ctx.lineTo(getX(i), currY);
|
||
} else {
|
||
const prevX = getX(i - 1);
|
||
const currX = getX(i);
|
||
const prevY = getY(values[i - 1] || 0, getPVal(i - 1));
|
||
const midX = (prevX + currX) / 2;
|
||
ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
|
||
}
|
||
}
|
||
ctx.lineTo(getX(len - 1), p.top + chartH);
|
||
ctx.lineTo(getX(0), p.top + chartH);
|
||
ctx.closePath();
|
||
|
||
const gradient = ctx.createLinearGradient(0, p.top, 0, p.top + chartH);
|
||
gradient.addColorStop(0, fillColorTop);
|
||
gradient.addColorStop(1, fillColorBottom);
|
||
ctx.fillStyle = gradient;
|
||
ctx.fill();
|
||
|
||
// Stroke
|
||
ctx.beginPath();
|
||
ctx.moveTo(getX(0), getY(values[0] || 0, getPVal(0)));
|
||
for (let i = 1; i < len; i++) {
|
||
const currY = getY(values[i] || 0, getPVal(i));
|
||
if (useSimple) {
|
||
ctx.lineTo(getX(i), currY);
|
||
} else {
|
||
const prevX = getX(i - 1);
|
||
const currX = getX(i);
|
||
const prevY = getY(values[i - 1] || 0, getPVal(i - 1));
|
||
const midX = (prevX + currX) / 2;
|
||
ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
|
||
}
|
||
}
|
||
ctx.strokeStyle = strokeColor;
|
||
ctx.lineWidth = 2;
|
||
ctx.lineJoin = 'round';
|
||
ctx.stroke();
|
||
}
|
||
|
||
destroy() {
|
||
window.removeEventListener('resize', this._resize);
|
||
if (this.animFrame) cancelAnimationFrame(this.animFrame);
|
||
}
|
||
}
|
||
|
||
class MetricChart {
|
||
constructor(canvas, unit = '') {
|
||
this.canvas = canvas;
|
||
this.ctx = canvas.getContext('2d');
|
||
this.data = { timestamps: [], values: [], series: null };
|
||
this.unit = unit; // '%', 'B/s', etc.
|
||
this.dpr = window.devicePixelRatio || 1;
|
||
this.padding = { top: 10, right: 10, bottom: 35, left: 60 };
|
||
this.animProgress = 0;
|
||
|
||
this.prevMaxVal = 0;
|
||
this.currentMaxVal = 0;
|
||
this.lastDataHash = ''; // Fingerprint for optimization
|
||
|
||
// Use debounced resize for performance and safety
|
||
this._resize = typeof debounce === 'function' ? debounce(this.resize.bind(this), 100) : this.resize.bind(this);
|
||
window.addEventListener('resize', this._resize);
|
||
this.resize();
|
||
}
|
||
|
||
resize() {
|
||
const parent = this.canvas.parentElement;
|
||
if (!parent) return;
|
||
const rect = parent.getBoundingClientRect();
|
||
if (rect.width === 0) return;
|
||
this.width = rect.width;
|
||
this.height = rect.height;
|
||
this.canvas.width = this.width * this.dpr;
|
||
this.canvas.height = this.height * this.dpr;
|
||
this.canvas.style.width = this.width + 'px';
|
||
this.canvas.style.height = this.height + 'px';
|
||
this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
|
||
this.draw();
|
||
}
|
||
|
||
setData(data) {
|
||
if (!data || !data.timestamps) return;
|
||
|
||
// 1. Simple fingerprinting to avoid constant re-animation of same data
|
||
const lastVal = data.values && data.values.length > 0 ? data.values[data.values.length - 1] : 0;
|
||
const fingerprint = data.timestamps.length + '_' + lastVal + '_' + (data.series ? 's' : 'v');
|
||
|
||
if (fingerprint === this.lastDataHash) return;
|
||
this.lastDataHash = fingerprint;
|
||
|
||
if (this.data && this.data.values && this.data.values.length > 0) {
|
||
this.prevData = JSON.parse(JSON.stringify(this.data));
|
||
} else {
|
||
this.prevData = { timestamps: [], values: [], series: null };
|
||
}
|
||
|
||
this.prevMaxVal = this.currentMaxVal || 0;
|
||
this.data = data || { timestamps: [], values: [], series: null };
|
||
|
||
// Target max
|
||
if (this.data.series) {
|
||
this.currentMaxVal = 100;
|
||
} else {
|
||
const raw = Math.max(...(this.data.values || []), 0.1);
|
||
if (this.unit === '%' && raw <= 100) {
|
||
if (raw > 80) this.currentMaxVal = 100;
|
||
else if (raw > 40) this.currentMaxVal = 80;
|
||
else if (raw > 20) this.currentMaxVal = 50;
|
||
else this.currentMaxVal = 25;
|
||
} else {
|
||
this.currentMaxVal = raw * 1.25;
|
||
}
|
||
}
|
||
|
||
this.animate();
|
||
}
|
||
|
||
animate() {
|
||
if (this.animFrame) cancelAnimationFrame(this.animFrame);
|
||
const start = performance.now();
|
||
const duration = 300; // Snappier and lighter on GPU
|
||
const step = (now) => {
|
||
const elapsed = now - start;
|
||
this.animProgress = Math.min(elapsed / duration, 1);
|
||
this.animProgress = 1 - Math.pow(1 - this.animProgress, 3);
|
||
this.draw();
|
||
if (elapsed < duration) this.animFrame = requestAnimationFrame(step);
|
||
};
|
||
this.animFrame = requestAnimationFrame(step);
|
||
}
|
||
|
||
draw() {
|
||
const ctx = this.ctx;
|
||
const w = this.width;
|
||
const h = this.height;
|
||
const p = this.padding;
|
||
const chartW = w - p.left - p.right;
|
||
const chartH = h - p.top - p.bottom;
|
||
|
||
ctx.clearRect(0, 0, w, h);
|
||
|
||
const { timestamps, values, series } = this.data;
|
||
if (!timestamps || timestamps.length < 2) {
|
||
ctx.fillStyle = '#5a6380';
|
||
ctx.font = '11px sans-serif';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText('正在加载或暂无数据...', w / 2, h / 2);
|
||
return;
|
||
}
|
||
|
||
// Determine Y max (interpolated)
|
||
const targetMax = this.currentMaxVal || 0.1;
|
||
const startMax = this.prevMaxVal || targetMax;
|
||
const maxVal = startMax + (targetMax - startMax) * this.animProgress;
|
||
|
||
const len = timestamps.length;
|
||
const xStep = chartW / (len - 1);
|
||
const getX = (i) => p.left + i * xStep;
|
||
const getY = (val, prevVal = 0) => {
|
||
const actualVal = prevVal + (val - prevVal) * this.animProgress;
|
||
return p.top + chartH - (actualVal / (maxVal || 1)) * chartH;
|
||
};
|
||
|
||
// Grid
|
||
ctx.strokeStyle = 'rgba(99, 102, 241, 0.05)';
|
||
ctx.lineWidth = 1;
|
||
for (let i = 0; i <= 3; i++) {
|
||
const y = p.top + (chartH / 3) * i;
|
||
ctx.beginPath();
|
||
ctx.moveTo(p.left, y);
|
||
ctx.lineTo(p.left + chartW, y);
|
||
ctx.stroke();
|
||
|
||
const v = (maxVal * (1 - i / 3));
|
||
ctx.fillStyle = '#5a6380';
|
||
ctx.font = '9px "JetBrains Mono", monospace';
|
||
ctx.textAlign = 'right';
|
||
|
||
let label = '';
|
||
if (this.unit === 'B/s' || this.unit === 'B') {
|
||
const isRate = this.unit === 'B/s';
|
||
if (window.formatBandwidth && isRate) {
|
||
label = window.formatBandwidth(v);
|
||
} else if (window.formatBytes) {
|
||
label = window.formatBytes(v) + (isRate ? '/s' : '');
|
||
} else {
|
||
label = v.toFixed(0) + this.unit;
|
||
}
|
||
} else if (this.unit === '%' && this.totalValue) {
|
||
// 当提供了总量时，将百分比转换为实际数值显示（例如内存显示 2GB 而非 25%）
|
||
const absVal = v * (this.totalValue / 100);
|
||
label = window.formatBytes ? window.formatBytes(absVal) : absVal.toFixed(0);
|
||
} else {
|
||
label = (v >= 1000 ? (v / 1000).toFixed(1) + 'k' : v.toFixed(v < 10 && v > 0 ? 1 : 0)) + this.unit;
|
||
}
|
||
ctx.fillText(label, p.left - 8, y + 3);
|
||
}
|
||
|
||
// X-axis Timeline
|
||
ctx.fillStyle = '#5a6380';
|
||
ctx.font = '9px "JetBrains Mono", monospace';
|
||
ctx.textAlign = 'center';
|
||
const labelInterval = Math.max(1, Math.floor(len / 5));
|
||
for (let i = 0; i < len; i += labelInterval) {
|
||
const x = getX(i);
|
||
ctx.fillText(formatTime(timestamps[i]), x, h - 8);
|
||
}
|
||
// Always show last label if not already shown
|
||
if ((len - 1) % labelInterval !== 0) {
|
||
ctx.fillText(formatTime(timestamps[len - 1]), getX(len - 1), h - 8);
|
||
}
|
||
|
||
if (series) {
|
||
// Draw Stacked Area
|
||
const modes = [
|
||
{ 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);
|
||
let prevBase = new Array(len).fill(0);
|
||
|
||
modes.forEach(mode => {
|
||
const vals = series[mode.name];
|
||
if (!vals) return;
|
||
|
||
const prevVals = (this.prevData && this.prevData.series) ? this.prevData.series[mode.name] : null;
|
||
const getPVal = (arr, idx) => (arr && idx < arr.length) ? arr[idx] : 0;
|
||
|
||
ctx.beginPath();
|
||
ctx.moveTo(getX(0), getY(currentBase[0] + vals[0], getPVal(prevBase, 0) + getPVal(prevVals, 0)));
|
||
for (let i = 1; i < len; i++) {
|
||
ctx.lineTo(getX(i), getY(currentBase[i] + vals[i], getPVal(prevBase, i) + getPVal(prevVals, i)));
|
||
}
|
||
ctx.lineTo(getX(len - 1), getY(currentBase[len - 1], getPVal(prevBase, len - 1)));
|
||
for (let i = len - 1; i >= 0; i--) {
|
||
ctx.lineTo(getX(i), getY(currentBase[i], getPVal(prevBase, i)));
|
||
}
|
||
ctx.closePath();
|
||
ctx.fillStyle = mode.color;
|
||
ctx.fill();
|
||
|
||
// Stroke
|
||
ctx.beginPath();
|
||
ctx.moveTo(getX(0), getY(currentBase[0] + vals[0], getPVal(prevBase, 0) + getPVal(prevVals, 0)));
|
||
for (let i = 1; i < len; i++) {
|
||
ctx.lineTo(getX(i), getY(currentBase[i] + vals[i], getPVal(prevBase, i) + getPVal(prevVals, i)));
|
||
}
|
||
ctx.strokeStyle = mode.stroke;
|
||
ctx.lineWidth = 1;
|
||
ctx.stroke();
|
||
|
||
// Update boxes for next series
|
||
for (let i = 0; i < len; i++) {
|
||
currentBase[i] += vals[i];
|
||
if (prevBase) prevBase[i] = (prevBase[i] || 0) + getPVal(prevVals, i);
|
||
}
|
||
});
|
||
|
||
// Add Legend at bottom right (moved up slightly)
|
||
ctx.font = '9px sans-serif';
|
||
ctx.textAlign = 'right';
|
||
let lx = w - 10;
|
||
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 -= 70; // Increased gap for safety
|
||
});
|
||
|
||
} else {
|
||
const useSimple = len > 100;
|
||
const prevVals = this.prevData ? this.prevData.values : null;
|
||
const getPVal = (i) => (prevVals && i < prevVals.length) ? prevVals[i] : 0;
|
||
|
||
ctx.beginPath();
|
||
ctx.moveTo(getX(0), getY(values[0], getPVal(0)));
|
||
for (let i = 1; i < len; i++) {
|
||
const currY = getY(values[i], getPVal(i));
|
||
if (useSimple) {
|
||
ctx.lineTo(getX(i), currY);
|
||
} else {
|
||
const prevX = getX(i - 1);
|
||
const currX = getX(i);
|
||
const prevY = getY(values[i - 1], getPVal(i - 1));
|
||
const midX = (prevX + currX) / 2;
|
||
ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
|
||
}
|
||
}
|
||
|
||
// Stroke
|
||
ctx.strokeStyle = '#6366f1';
|
||
ctx.lineWidth = 2;
|
||
ctx.lineJoin = 'round';
|
||
ctx.stroke();
|
||
|
||
// Fill
|
||
ctx.lineTo(getX(len - 1), p.top + chartH);
|
||
ctx.lineTo(getX(0), p.top + chartH);
|
||
ctx.closePath();
|
||
const grad = ctx.createLinearGradient(0, p.top, 0, p.top + chartH);
|
||
grad.addColorStop(0, 'rgba(99, 102, 241, 0.15)');
|
||
grad.addColorStop(1, 'rgba(99, 102, 241, 0)');
|
||
ctx.fillStyle = grad;
|
||
ctx.fill();
|
||
|
||
// Last point pulse
|
||
const lastX = getX(len - 1);
|
||
const lastY = getY(values[len - 1]);
|
||
ctx.beginPath();
|
||
ctx.arc(lastX, lastY, 3, 0, Math.PI * 2);
|
||
ctx.fillStyle = '#6366f1';
|
||
ctx.fill();
|
||
}
|
||
}
|
||
|
||
destroy() {
|
||
window.removeEventListener('resize', this._resize);
|
||
if (this.animFrame) cancelAnimationFrame(this.animFrame);
|
||
}
|
||
}
|