From d0455fb032198ab3902ded04c51971d346221167 Mon Sep 17 00:00:00 2001
From: CN-JS-HuiBai <huyang@littlediary.cn>
Date: Mon, 6 Apr 2026 16:02:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=97=B6=E9=97=B4=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html  |  2 +-
 public/js/chart.js | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index e5a9790..1bca004 100644
--- a/public/index.html
+++ b/public/index.html
@@ -479,7 +479,7 @@
                   style="background: rgba(255,255,255,0.02); padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border-color);">
                   <div class="form-row">
                     <div class="form-group" style="flex: 1.5;">
-                      <label>数据源 (Blackbox)</label>
+                      <label>探测用服务器</label>
                       <select id="routeSourceSelect"
                         style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary);">
                         <option value="">-- 选择数据源 --</option>
diff --git a/public/js/chart.js b/public/js/chart.js
index 2d8f5af..8d6b34e 100644
--- a/public/js/chart.js
+++ b/public/js/chart.js
@@ -330,7 +330,7 @@ class MetricChart {
     this.data = { timestamps: [], values: [], series: null };
     this.unit = unit; // '%', 'B/s', etc.
     this.dpr = window.devicePixelRatio || 1;
-    this.padding = { top: 10, right: 10, bottom: 20, left: 60 };
+    this.padding = { top: 10, right: 10, bottom: 35, left: 60 };
     this.animProgress = 0;
 
     this.prevMaxVal = 0;
@@ -462,6 +462,20 @@ class MetricChart {
       ctx.fillText(label, p.left - 8, y + 3);
     }
 
+    // X-axis Timeline
+    ctx.fillStyle = '#5a6380';
+    ctx.font = '9px "JetBrains Mono", monospace';
+    ctx.textAlign = 'center';
+    const labelInterval = Math.max(1, Math.floor(len / 5));
+    for (let i = 0; i < len; i += labelInterval) {
+      const x = getX(i);
+      ctx.fillText(formatTime(timestamps[i]), x, h - 8);
+    }
+    // Always show last label if not already shown
+    if ((len - 1) % labelInterval !== 0) {
+      ctx.fillText(formatTime(timestamps[len - 1]), getX(len - 1), h - 8);
+    }
+
     if (series) {
       // Draw Stacked Area
       const modes = [