优化时间范围选择

public/js/chart.js

@@ -273,3 +273,154 @@ class AreaChart {
     if (this.animFrame) cancelAnimationFrame(this.animFrame);
   }
 }
+
+class MetricChart {
+  constructor(canvas, unit = '') {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.data = { timestamps: [], values: [] };
+    this.unit = unit; // '%', 'B/s', etc.
+    this.dpr = window.devicePixelRatio || 1;
+    this.padding = { top: 10, right: 10, bottom: 20, left: 60 };
+    this.animProgress = 0;
+    
+    this._resize = this.resize.bind(this);
+    window.addEventListener('resize', this._resize);
+    this.resize();
+  }
+
+  resize() {
+    const parent = this.canvas.parentElement;
+    if (!parent) return;
+    const rect = parent.getBoundingClientRect();
+    if (rect.width === 0) return;
+    this.width = rect.width;
+    this.height = rect.height;
+    this.canvas.width = this.width * this.dpr;
+    this.canvas.height = this.height * this.dpr;
+    this.canvas.style.width = this.width + 'px';
+    this.canvas.style.height = this.height + 'px';
+    this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+    this.draw();
+  }
+
+  setData(data) {
+    this.data = data || { timestamps: [], values: [] };
+    this.animate();
+  }
+
+  animate() {
+    if (this.animFrame) cancelAnimationFrame(this.animFrame);
+    const start = performance.now();
+    const duration = 500;
+    const step = (now) => {
+      const elapsed = now - start;
+      this.animProgress = Math.min(elapsed / duration, 1);
+      this.animProgress = 1 - Math.pow(1 - this.animProgress, 3);
+      this.draw();
+      if (elapsed < duration) this.animFrame = requestAnimationFrame(step);
+    };
+    this.animFrame = requestAnimationFrame(step);
+  }
+
+  draw() {
+    const ctx = this.ctx;
+    const w = this.width;
+    const h = this.height;
+    const p = this.padding;
+    const chartW = w - p.left - p.right;
+    const chartH = h - p.top - p.bottom;
+
+    ctx.clearRect(0, 0, w, h);
+
+    const { timestamps, values } = this.data;
+    if (!timestamps || timestamps.length < 2) {
+      ctx.fillStyle = '#5a6380';
+      ctx.font = '11px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('正在加载或暂无数据...', w / 2, h / 2);
+      return;
+    }
+
+    // Find max with cushion
+    let maxVal = Math.max(...values, 0.1);
+    if (this.unit === '%' && maxVal <= 100) {
+        if (maxVal > 80) maxVal = 100;
+        else if (maxVal > 40) maxVal = 80;
+        else if (maxVal > 20) maxVal = 50;
+        else maxVal = 25;
+    } else {
+        maxVal = maxVal * 1.25;
+    }
+
+    const len = timestamps.length;
+    const xStep = chartW / (len - 1);
+    const getX = (i) => p.left + i * xStep;
+    const getY = (val) => p.top + chartH - (val / (maxVal || 1)) * chartH * this.animProgress;
+
+    // Grid
+    ctx.strokeStyle = 'rgba(99, 102, 241, 0.05)';
+    ctx.lineWidth = 1;
+    for (let i = 0; i <= 3; i++) {
+      const y = p.top + (chartH / 3) * i;
+      ctx.beginPath();
+      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') {
+          label = window.formatBandwidth ? window.formatBandwidth(v) : v.toFixed(0);
+      } else {
+          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);
+    }
+
+    // Path
+    ctx.beginPath();
+    ctx.moveTo(getX(0), getY(values[0]));
+    for (let i = 1; i < len; i++) {
+        const prevX = getX(i - 1);
+        const currX = getX(i);
+        const prevY = getY(values[i - 1]);
+        const currY = getY(values[i]);
+        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();
+  }
+
+  destroy() {
+    window.removeEventListener('resize', this._resize);
+    if (this.animFrame) cancelAnimationFrame(this.animFrame);
+  }
+}