From eff4b0149d3518aebbe5a3ef0ff95264104f0bb9 Mon Sep 17 00:00:00 2001
From: kaireewu <kaireewu@gmail.com>
Date: Sun, 1 Nov 2026 01:37:55 +0800
Subject: [PATCH] fix(web): show exact trend values and integer axis ticks

---
 reaction_board/web/static/charts.js      | 8 +++++---
 reaction_board/web/static/format.js      | 6 ++----
 reaction_board/web/static/views/video.js | 7 ++++---
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/reaction_board/web/static/charts.js b/reaction_board/web/static/charts.js
index 63bd33b..6f5b313 100644
--- a/reaction_board/web/static/charts.js
+++ b/reaction_board/web/static/charts.js
@@ -1,4 +1,4 @@
-import { formatAxis, formatCount, formatDay } from "./format.js";
+import { formatAxis, formatDay, formatNumber } from "./format.js";
 
 const charts = new Map();
 let resizeObserver = null;
@@ -78,7 +78,7 @@ export function lineChart(element, { dates, values, name = "数值", color, scal
         if (!point) return "";
         const value = point.value;
         return `<strong>${point.axisValue}</strong><br>${name}：${
-          value === null || value === undefined ? "缺失" : formatCount(value)
+          value === null || value === undefined ? "缺失" : formatNumber(value)
         }`;
       },
     },
@@ -98,6 +98,7 @@ export function lineChart(element, { dates, values, name = "数值", color, scal
     yAxis: {
       type: "value",
       scale,
+      minInterval: 1,
       splitLine: { lineStyle: { color: theme.grid, type: "dashed" } },
       axisLabel: {
         color: theme.muted,
@@ -147,7 +148,7 @@ export function barChart(element, { labels, values, name = "数值", color }) {
       formatter(params) {
         const point = params[0];
         if (!point) return "";
-        return `<strong>${point.name}</strong><br>${name}：${formatCount(point.value)}`;
+        return `<strong>${point.name}</strong><br>${name}：${formatNumber(point.value)}`;
       },
     },
     xAxis: {
@@ -165,6 +166,7 @@ export function barChart(element, { labels, values, name = "数值", color }) {
     },
     yAxis: {
       type: "value",
+      minInterval: 1,
       splitLine: { lineStyle: { color: theme.grid, type: "dashed" } },
       axisLabel: {
         color: theme.muted,
diff --git a/reaction_board/web/static/format.js b/reaction_board/web/static/format.js
index 47bc999..b931a60 100644
--- a/reaction_board/web/static/format.js
+++ b/reaction_board/web/static/format.js
@@ -19,10 +19,8 @@ export function formatAxis(value) {
   if (value === null || value === undefined || Number.isNaN(Number(value))) return "";
   const number = Number(value);
   if (Math.abs(number) >= 1e8) return `${trimZero((number / 1e8).toFixed(2))}亿`;
-  if (Math.abs(number) >= 1e4) {
-    const scaled = number / 1e4;
-    return `${trimZero(scaled.toFixed(Math.abs(scaled) >= 100 ? 1 : 2))}万`;
-  }
+  if (Math.abs(number) >= 1e6) return `${trimZero((number / 1e4).toFixed(2))}万`;
+  // 小于一百万时直接显示精确值，避免 59,798 与 59,800 都被写成“6万”。
   return Math.round(number).toLocaleString("zh-CN");
 }
 
diff --git a/reaction_board/web/static/views/video.js b/reaction_board/web/static/views/video.js
index e444b7d..78343cd 100644
--- a/reaction_board/web/static/views/video.js
+++ b/reaction_board/web/static/views/video.js
@@ -6,7 +6,8 @@ import {
 import { lineChart, themeColor } from "../charts.js";
 import {
   escapeAttr, escapeHtml, formatCount, formatDate, formatDelta,
-  formatDuration, formatPercent, formatScore, metricLabel, statusLabel,
+  formatDuration, formatNumber, formatPercent, formatScore,
+  metricLabel, statusLabel,
 } from "../format.js";
 import { replaceQuery } from "../router.js";
 
@@ -22,7 +23,7 @@ function snapshotTable(points) {
         ${points.slice().reverse().map((point) => `
           <tr class="${point.ok ? "" : "failed-row"}">
             <td>${escapeHtml(point.stat_date)}</td>
-            ${METRICS.map((metric) => `<td>${point.ok ? formatCount(point[metric]) : "—"}</td>`).join("")}
+            ${METRICS.map((metric) => `<td>${point.ok ? formatNumber(point[metric]) : "—"}</td>`).join("")}
             <td>${point.ok ? "成功" : `<span class="danger">失败</span>`}</td>
           </tr>`).join("")}
       </tbody>
@@ -86,7 +87,7 @@ export async function renderVideo(root, { params, query }) {
           class="chip${range === value ? " active" : ""}" data-range="${value}">${label}</button>`).join("")}
       </div>
       ${trend.available ? `<div class="chart" id="video-trend"></div>` : emptyState("暂无趋势数据", "该视频还没有成功快照。")}
-      ${!trend.available ? "" : `<p class="section-note">缺失日期会断开，不插值；失败快照按缺失处理。</p>`}
+      ${!trend.available ? "" : `<p class="section-note">缺失日期会断开，不插值；失败快照按缺失处理。纵轴按数据范围缩放，精确值见下方快照记录。</p>`}
     </section>
 
     <section class="panel">