添加95带宽计算

public/js/chart.js

@@ -47,6 +47,18 @@ class AreaChart {
       this.data = data;
     }
 
+    // Calculate P95 (95th percentile)
+    // Common standard: 95th percentile of the peak (max of rx/tx or sum)
+    // We'll use max(rx, tx) at each point which is common for billing
+    const combined = data.rx.map((r, i) => Math.max(r || 0, data.tx[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();
   }
@@ -173,6 +185,35 @@ class AreaChart {
     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.p95 && this.animProgress === 1) {
+      const p95Y = getY(this.p95);
+      // Only draw if within visible range
+      if (p95Y >= p.top && p95Y <= p.top + chartH) {
+        ctx.save();
+        ctx.beginPath();
+        ctx.setLineDash([6, 4]);
+        ctx.strokeStyle = 'rgba(244, 63, 94, 0.85)'; // --accent-rose
+        ctx.lineWidth = 1.5;
+        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';
+        ctx.fillText(label, p.left + 14, p95Y - 7);
+        ctx.restore();
+      }
+    }
   }
 
   drawArea(ctx, values, getX, getY, chartH, p, fillColorTop, fillColorBottom, strokeColor, len) {