修改95带宽
This commit is contained in:
@@ -206,12 +206,13 @@
|
|||||||
</svg>
|
</svg>
|
||||||
网络流量趋势 (24h)
|
网络流量趋势 (24h)
|
||||||
</h2>
|
</h2>
|
||||||
<span class="title-time" id="gaugesTime"></span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-legend">
|
<div class="chart-legend">
|
||||||
<span class="legend-item"><span class="legend-dot legend-rx"></span>接收 (RX)</span>
|
<span class="legend-item"><span class="legend-dot legend-rx"></span>接收 (RX)</span>
|
||||||
<span class="legend-item"><span class="legend-dot legend-tx"></span>发送 (TX)</span>
|
<span class="legend-item"><span class="legend-dot legend-tx"></span>发送 (TX)</span>
|
||||||
<span class="legend-item"><span class="legend-dot legend-p95"></span>95计费 (P95)</span>
|
<span class="legend-item" id="legendP95" style="cursor: pointer;" title="点击切换 P95 线显示/隐藏">
|
||||||
|
<span class="legend-dot legend-p95"></span>95计费 (P95)
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-body">
|
<div class="chart-body">
|
||||||
|
|||||||
@@ -59,8 +59,8 @@
|
|||||||
closeLoginModal: document.getElementById('closeLoginModal'),
|
closeLoginModal: document.getElementById('closeLoginModal'),
|
||||||
loginForm: document.getElementById('loginForm'),
|
loginForm: document.getElementById('loginForm'),
|
||||||
loginError: document.getElementById('loginError'),
|
loginError: document.getElementById('loginError'),
|
||||||
gaugesTime: document.getElementById('gaugesTime'),
|
footerTime: document.getElementById('footerTime'),
|
||||||
footerTime: document.getElementById('footerTime')
|
legendP95: document.getElementById('legendP95')
|
||||||
};
|
};
|
||||||
|
|
||||||
// ---- State ----
|
// ---- 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
|
// Check auth status
|
||||||
checkAuthStatus();
|
checkAuthStatus();
|
||||||
|
|
||||||
@@ -262,9 +271,6 @@
|
|||||||
|
|
||||||
function updateGaugesTime() {
|
function updateGaugesTime() {
|
||||||
const clockStr = formatClock();
|
const clockStr = formatClock();
|
||||||
if (dom.gaugesTime) {
|
|
||||||
dom.gaugesTime.textContent = clockStr;
|
|
||||||
}
|
|
||||||
if (dom.footerTime) {
|
if (dom.footerTime) {
|
||||||
dom.footerTime.textContent = clockStr;
|
dom.footerTime.textContent = clockStr;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ class AreaChart {
|
|||||||
this.data = { timestamps: [], rx: [], tx: [] };
|
this.data = { timestamps: [], rx: [], tx: [] };
|
||||||
this.animProgress = 0;
|
this.animProgress = 0;
|
||||||
this.animFrame = null;
|
this.animFrame = null;
|
||||||
|
this.showP95 = true;
|
||||||
this.dpr = window.devicePixelRatio || 1;
|
this.dpr = window.devicePixelRatio || 1;
|
||||||
this.padding = { top: 20, right: 16, bottom: 32, left: 56 };
|
this.padding = { top: 20, right: 16, bottom: 32, left: 56 };
|
||||||
|
|
||||||
@@ -187,7 +188,7 @@ class AreaChart {
|
|||||||
'#06b6d4', len);
|
'#06b6d4', len);
|
||||||
|
|
||||||
// Draw P95 line
|
// Draw P95 line
|
||||||
if (this.p95 && this.animProgress === 1) {
|
if (this.showP95 && this.p95 && this.animProgress === 1) {
|
||||||
const p95Y = getY(this.p95);
|
const p95Y = getY(this.p95);
|
||||||
// Only draw if within visible range
|
// Only draw if within visible range
|
||||||
if (p95Y >= p.top && p95Y <= p.top + chartH) {
|
if (p95Y >= p.top && p95Y <= p.top + chartH) {
|
||||||
|
|||||||
Reference in New Issue
Block a user