diff --git a/public/index.html b/public/index.html
index 426d335..00f67ae 100644
--- a/public/index.html
+++ b/public/index.html
@@ -206,12 +206,13 @@
网络流量趋势 (24h)
-
接收 (RX)
发送 (TX)
- 95计费 (P95)
+
+ 95计费 (P95)
+
diff --git a/public/js/app.js b/public/js/app.js
index b75087c..4576c51 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -59,8 +59,8 @@
closeLoginModal: document.getElementById('closeLoginModal'),
loginForm: document.getElementById('loginForm'),
loginError: document.getElementById('loginError'),
- gaugesTime: document.getElementById('gaugesTime'),
- footerTime: document.getElementById('footerTime')
+ footerTime: document.getElementById('footerTime'),
+ legendP95: document.getElementById('legendP95')
};
// ---- State ----
@@ -116,6 +116,15 @@
}
});
+ // P95 Toggle
+ if (dom.legendP95) {
+ dom.legendP95.addEventListener('click', () => {
+ networkChart.showP95 = !networkChart.showP95;
+ dom.legendP95.classList.toggle('disabled', !networkChart.showP95);
+ networkChart.draw();
+ });
+ }
+
// Check auth status
checkAuthStatus();
@@ -262,9 +271,6 @@
function updateGaugesTime() {
const clockStr = formatClock();
- if (dom.gaugesTime) {
- dom.gaugesTime.textContent = clockStr;
- }
if (dom.footerTime) {
dom.footerTime.textContent = clockStr;
}
diff --git a/public/js/chart.js b/public/js/chart.js
index 01f21de..bed1c19 100644
--- a/public/js/chart.js
+++ b/public/js/chart.js
@@ -9,6 +9,7 @@ class AreaChart {
this.data = { timestamps: [], rx: [], tx: [] };
this.animProgress = 0;
this.animFrame = null;
+ this.showP95 = true;
this.dpr = window.devicePixelRatio || 1;
this.padding = { top: 20, right: 16, bottom: 32, left: 56 };
@@ -187,7 +188,7 @@ class AreaChart {
'#06b6d4', len);
// Draw P95 line
- if (this.p95 && this.animProgress === 1) {
+ if (this.showP95 && this.p95 && this.animProgress === 1) {
const p95Y = getY(this.p95);
// Only draw if within visible range
if (p95Y >= p.top && p95Y <= p.top + chartH) {