CN-JS-HuiBai/PromdataPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

添加延迟显示支持

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-05 23:38:53 +08:00
parent 84972cdaeb
commit 058a6c73a1
7 changed files with 450 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
public/js/chart.js
View File

@@ -9,13 +9,13 @@ class AreaChart {
this.data = { timestamps: [], rx: [], tx: [] };
this.animProgress = 0;
this.animFrame = null;
this.showP95 = false;
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.currentMaxVal = 0;
this.prevMaxVal = 0;
@@ -38,7 +38,7 @@ class AreaChart {
setData(data) {
if (!data || !data.timestamps) return;
// 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) {
@@ -50,7 +50,7 @@ class AreaChart {
} else {
this.prevData = { timestamps: [], rx: [], tx: [] };
}
// Smoothly transition max value context too
this.prevMaxVal = this.currentMaxVal || 0;
@@ -72,19 +72,19 @@ class AreaChart {
// 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);
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);
combined = data.tx.map(t => t || 0);
} else if (this.p95Type === 'rx') {
combined = data.rx.map(r => r || 0);
combined = data.rx.map(r => r || 0);
} else {
combined = data.tx.map((t, i) => (t || 0) + (data.rx[i] || 0));
combined = data.tx.map((t, i) => (t || 0) + (data.rx[i] || 0));
}
if (combined.length > 0) {
@@ -141,12 +141,12 @@ class AreaChart {
// 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);
// Interpolate the max value context to keep vertical scale smooth
maxDataVal = this.prevMaxVal + (this.currentMaxVal - this.prevMaxVal) * (this.animProgress || 0);
} else {
maxDataVal = this.currentMaxVal;
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));
@@ -158,7 +158,7 @@ class AreaChart {
// Use 1.15 cushion
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;
@@ -200,7 +200,7 @@ class AreaChart {
ctx.fillStyle = '#5a6380';
ctx.font = '10px "JetBrains Mono", monospace';
ctx.textAlign = 'right';
// Format: "X.X MB/s" or "X MB/s"
const label = (valInUnit % 1 === 0 ? valInUnit : valInUnit.toFixed(1)) + ' ' + unitLabel;
ctx.fillText(label, p.left - 10, y + 3);
@@ -247,14 +247,14 @@ class AreaChart {
ctx.moveTo(p.left, p95Y);
ctx.lineTo(p.left + chartW, p95Y);
ctx.stroke();
// P95 label background
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);
// P95 label text
ctx.fillStyle = '#f43f5e';
ctx.textAlign = 'left';
@@ -274,7 +274,7 @@ class AreaChart {
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));
const currY = getY(values[i] || 0, getPVal(i));
if (useSimple) {
ctx.lineTo(getX(i), currY);
} else {
@@ -299,7 +299,7 @@ class AreaChart {
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));
const currY = getY(values[i] || 0, getPVal(i));
if (useSimple) {
ctx.lineTo(getX(i), currY);
} else {
@@ -331,7 +331,7 @@ class MetricChart {
this.dpr = window.devicePixelRatio || 1;
this.padding = { top: 10, right: 10, bottom: 20, left: 60 };
this.animProgress = 0;
this.prevMaxVal = 0;
this.currentMaxVal = 0;
@@ -357,27 +357,27 @@ class MetricChart {
setData(data) {
if (this.data && this.data.values && this.data.values.length > 0) {
this.prevData = JSON.parse(JSON.stringify(this.data));
this.prevData = JSON.parse(JSON.stringify(this.data));
} else {
this.prevData = { timestamps: [], values: [], series: null };
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;
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;
}
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();
@@ -425,8 +425,8 @@ class MetricChart {
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;
const actualVal = prevVal + (val - prevVal) * this.animProgress;
return p.top + chartH - (actualVal / (maxVal || 1)) * chartH;
};
// Grid
@@ -438,135 +438,135 @@ class MetricChart {
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;
}
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 {
label = (v >= 1000 ? (v / 1000).toFixed(1) + 'k' : v.toFixed(v < 10 && v > 0 ? 1 : 0)) + this.unit;
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);
}
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
];
// 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;
let currentBase = new Array(len).fill(0);
let prevBase = new Array(len).fill(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();
modes.forEach(mode => {
const vals = series[mode.name];
if (!vals) return;
// 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 > 250;
const prevVals = this.prevData ? this.prevData.values : null;
const getPVal = (i) => (prevVals && i < prevVals.length) ? prevVals[i] : 0;
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(values[0], getPVal(0)));
ctx.moveTo(getX(0), getY(currentBase[0] + vals[0], getPVal(prevBase, 0) + getPVal(prevVals, 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);
}
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.strokeStyle = '#6366f1';
ctx.lineWidth = 2;
ctx.lineJoin = 'round';
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();
// 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();
// 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 > 250;
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();
}
}