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 18:13:37 +08:00
parent aed9147074
commit 464c3193d1
6 changed files with 111 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
public/js/chart.js
View File

@@ -10,6 +10,9 @@ class AreaChart {
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 };
@@ -49,8 +52,15 @@ class AreaChart {
}
// Calculate P95 (95th percentile)
// Updated: Only count Upstream (TX) as requested
const combined = data.tx.map(t => t || 0);
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 {
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);
@@ -103,9 +113,10 @@ class AreaChart {
}
// Find max raw value
let maxDataVal = 0;
let maxDataVal = 1024; // Minimum 1KB/s scale
for (let i = 0; i < rx.length; i++) {
maxDataVal = Math.max(maxDataVal, rx[i] || 0, tx[i] || 0);
if (this.showRx) maxDataVal = Math.max(maxDataVal, rx[i] || 0);
if (this.showTx) maxDataVal = Math.max(maxDataVal, tx[i] || 0);
}
// Determine consistent unit based on max data value
@@ -177,14 +188,18 @@ class AreaChart {
ctx.fillText(formatTime(timestamps[len - 1]), getX(len - 1), h - 8);
// Draw TX area
this.drawArea(ctx, tx, getX, getY, chartH, p,
'rgba(99, 102, 241, 0.25)', 'rgba(99, 102, 241, 0.02)',
'#6366f1', len);
if (this.showTx) {
this.drawArea(ctx, tx, getX, getY, chartH, p,
'rgba(99, 102, 241, 0.25)', 'rgba(99, 102, 241, 0.02)',
'#6366f1', len);
}
// Draw RX area (on top)
this.drawArea(ctx, rx, getX, getY, chartH, p,
'rgba(6, 182, 212, 0.25)', 'rgba(6, 182, 212, 0.02)',
'#06b6d4', len);
if (this.showRx) {
this.drawArea(ctx, rx, getX, getY, chartH, p,
'rgba(6, 182, 212, 0.25)', 'rgba(6, 182, 212, 0.02)',
'#06b6d4', len);
}
// Draw P95 line
if (this.showP95 && this.p95 && this.animProgress === 1) {