小时级预测：小时画像 × 近期水平，含今日全天估算 (v1.9.0)

- new-api 数据看板本身是小时桶，聚合近 14 天小时序列（缺时补 0）
- forecastHourly：每个钟点取近 7 天中位数构成日内画像，按近 48 小时
  水平缩放。真实数据回测（每 6 小时滚动预测未来 24h）：
  24h 总量误差 38%，优于日级方法的 46%（昼夜规律提供结构，
  用户站点峰谷比高达 1700 倍）；持续性 53%、混合法 44% 均更差
- 逐时置信带取该钟点历史 20%~80% 分位 × 水平缩放
- 「未来 24 小时预测」图表：过去 24h 实心柱 + 「现在」分界线 +
  未来 24h 浅色柱，悬停显示预测与区间；副标题展示
  今天已消费 / 全天预计（画像剩余小时累加）/ 未来 24h 合计 / 回测偏差
- 右侧目录新增「小时预测」项

Author: lettimepassby

lib/forecast.js

@@ -118,6 +118,70 @@ const METHOD_LABEL = {
   "ewma-dow": "均线 + 星期因子",
 };
 
+/**
+ * 小时级预测：小时画像（每个钟点的中位消费）× 近期水平缩放。
+ * 回测选型结论：昼夜规律强的数据上，24 小时总量误差比日级方法更低
+ *（真实数据 38% vs 日级 46%）；持续性/混合法都更差。
+ *
+ * @param points [{t: 整点 ms, cost}] 升序、缺时补 0、不含当前未完小时
+ * @param hodOf (ms) => 0-23，调用方提供时区感知的“当地钟点”函数
+ * @param horizon 预测小时数
+ * @returns { points:[{t,cost,lo,hi}], next24Total, backtestWapePct } 或 null
+ */
+export function forecastHourly(points, hodOf, horizon = 24) {
+  const n = points.length;
+  if (n < 72) return null; // 至少 3 天小时数据
+
+  const fit = (vals, ts) => {
+    // 画像：近 7 天每个钟点的中位数与分位（不足 7 天用全部）
+    const cut = ts[ts.length - 1] - 7 * 86400000;
+    const byH = Array(24).fill(0).map(() => []);
+    for (let i = 0; i < vals.length; i++) if (ts[i] >= cut) byH[hodOf(ts[i])].push(vals[i]);
+    const prof = byH.map((a) => median(a));
+    const profSum = prof.reduce((a, b) => a + b, 0);
+    // 水平：近 48 小时均值折算成日总量
+    const lvCut = ts[ts.length - 1] - 48 * 3600000;
+    let recent = 0, hours = 0;
+    for (let i = 0; i < vals.length; i++) if (ts[i] >= lvCut) { recent += vals[i]; hours++; }
+    const dailyLevel = hours > 0 ? (recent / hours) * 24 : profSum;
+    const scale = profSum > 1e-9 ? dailyLevel / profSum : 0;
+    return { prof, byH, scale };
+  };
+
+  const vals = points.map((p) => p.cost);
+  const ts = points.map((p) => p.t);
+  const { prof, byH, scale } = fit(vals, ts);
+
+  const lastT = ts[n - 1];
+  const out = [];
+  for (let k = 1; k <= horizon; k++) {
+    const t = lastT + k * 3600000;
+    const h = hodOf(t);
+    const p = Math.max(0, prof[h] * scale);
+    const qlo = quantile(byH[h].length ? byH[h] : [0], 0.2) * scale;
+    const qhi = quantile(byH[h].length ? byH[h] : [0], 0.8) * scale;
+    out.push({ t, cost: r2(p), lo: r2(Math.min(qlo, p)), hi: r2(Math.max(qhi, p * 1.2)) });
+  }
+
+  // 内部回测：每 6 小时一个测试点，评估未来 24 小时总量误差
+  let esum = 0, asum = 0;
+  for (let i = Math.max(72, n - 7 * 24); i + 24 <= n; i += 6) {
+    const f = fit(vals.slice(0, i), ts.slice(0, i));
+    let ps = 0, as = 0;
+    for (let k = 0; k < 24; k++) {
+      ps += Math.max(0, f.prof[hodOf(ts[i] + (k + 1) * 3600000)] * f.scale);
+      as += vals[i + k];
+    }
+    esum += Math.abs(ps - as); asum += as;
+  }
+
+  return {
+    points: out,
+    next24Total: r2(out.slice(0, 24).reduce((a, p) => a + p.cost, 0)),
+    backtestWapePct: asum > 0 ? Math.round((esum / asum) * 100) : null,
+  };
+}
+
 /**
  * @param daily [{t: 当日零点 ms, cost: 当日消费}] 升序、缺日补 0、不含今天
  * @param horizon 预测天数

package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay-monitor",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "private": true,
   "description": "监控 sub2api / new-api 中转站余额的网页面板",
   "type": "module",

public/app.js

@@ -959,6 +959,15 @@ function renderOwnBody() {
         <div class="chart-wrap" id="ownModelChart"></div>
       </div>
     </div>
+    ${d.hourly ? `
+    <div class="charts-grid" style="grid-template-columns:1fr" data-toc="小时预测">
+      <div class="panel chart-card">
+        <div class="chart-card-head"><div><h3>未来 24 小时预测</h3><div class="chart-sub">今天已消费 ${cny(d.hourly.todaySoFar * rate)} · 全天预计 ≈${cny(d.hourly.todayEst * rate)} · 未来 24h 合计 ≈${cny(d.hourly.next24Total * rate)}${
+          d.hourly.backtestWapePct != null ? ` · 24h 总量回测偏差 ±${d.hourly.backtestWapePct}%` : ""
+        }</div></div></div>
+        <div class="chart-wrap" id="ownHourlyChart"></div>
+      </div>
+    </div>` : ""}
     <div class="charts-grid" data-toc="消费预测">
       <div class="panel chart-card">
         <div class="chart-card-head"><div><h3>消费预测</h3><div class="chart-sub">${esc(fcSub)}</div></div></div>
@@ -1000,11 +1009,62 @@ function renderOwnBody() {
   drawUsageTrend($("#ownTrendChart"), buckets);
   drawUsageModels($("#ownModelChart"), models);
   drawOwnUsers($("#ownUserChart"), users);
+  if (d.hourly) {
+    drawHourlyChart($("#ownHourlyChart"),
+      d.hourly.past.map((p) => ({ ...p, cost: p.cost * rate })),
+      d.hourly.next.map((p) => ({ ...p, cost: p.cost * rate, lo: p.lo * rate, hi: p.hi * rate })));
+  }
   drawForecast($("#ownForecastChart"), d.daily.map((x) => ({ t: x.t, cost: x.cost * rate })),
     fc ? fc.points.map((p) => ({ ...p, cost: p.cost * rate, lo: p.lo * rate, hi: p.hi * rate })) : null);
   buildOwnToc();
 }
 
+// 小时级：过去 24h 实际（实心柱）+ 未来 24h 预测（浅色柱），中间分界线
+function drawHourlyChart(wrap, past, next) {
+  const all = [...past.map((p) => ({ ...p, kind: "h" })), ...next.map((p) => ({ ...p, kind: "f" }))];
+  if (all.length < 4) { wrap.innerHTML = '<div class="chart-empty">小时数据不足</div>'; return; }
+  const W = 900, H = 200, L = 52, R = 12, T = 12, B = 26;
+  const iw = W - L - R, ih = H - T - B;
+  const n = all.length;
+  const slot = iw / n;
+  const bw = Math.max(2, Math.min(16, slot - 2));
+  const maxV = Math.max(...all.map((p) => p.kind === "f" ? Math.max(p.cost, p.hi || 0) : p.cost), 0.01);
+  const step = niceStep(maxV / 3);
+  const yMax = Math.max(step * Math.ceil((maxV * 1.05) / step), step);
+  const y = (v) => T + (1 - v / yMax) * ih;
+
+  let grid = "", labels = "";
+  for (let i = 0; i * step <= yMax + 1e-9; i++) {
+    const v = +(i * step).toFixed(6);
+    grid += `<line class="chart-grid" x1="${L}" y1="${y(v)}" x2="${W - R}" y2="${y(v)}"/>`;
+    labels += `<text class="chart-axis-label" x="${L - 6}" y="${y(v) + 3}" text-anchor="end">¥${v >= 100 ? Math.round(v) : v}</text>`;
+  }
+  const hourLabel = (t) => `${String(new Date(t).getHours()).padStart(2, "0")}:00`;
+  const cols = all.map((p, i) => {
+    const cx = L + slot * i + slot / 2;
+    const x0 = cx - bw / 2;
+    const yTop = y(p.cost);
+    const h = T + ih - yTop;
+    const r = Math.min(3, bw / 2, h);
+    const bar = h <= 0.4 ? "" :
+      `<path class="${p.kind === "f" ? "chart-bar-future" : "chart-bar"}" d="M${x0},${(yTop + r).toFixed(1)} a${r},${r} 0 0 1 ${r},-${r} h${(bw - 2 * r).toFixed(1)} a${r},${r} 0 0 1 ${r},${r} v${(h - r).toFixed(1)} h-${bw} z"/>`;
+    const lb = i % 4 === 0 ? `<text class="chart-axis-label" x="${cx}" y="${H - 8}" text-anchor="middle">${hourLabel(p.t)}</text>` : "";
+    return `<g>${bar}${lb}<rect class="u-hit" data-i="${i}" x="${L + slot * i}" y="${T}" width="${slot}" height="${ih}" fill="transparent"/></g>`;
+  }).join("");
+  // 「现在」分界线
+  const nowX = L + slot * past.length;
+  const divider = `<line class="chart-crosshair" x1="${nowX}" y1="${T}" x2="${nowX}" y2="${T + ih}"/>
+    <text class="chart-axis-label" x="${nowX + 4}" y="${T + 10}">现在</text>`;
+
+  wrap.innerHTML = `<svg viewBox="0 0 ${W} ${H}" role="img" aria-label="未来 24 小时消费预测">${grid}${labels}${cols}${divider}</svg><div class="chart-tip"></div>`;
+  attachUsageTip(wrap, (i) => {
+    const p = all[i];
+    return p.kind === "h"
+      ? `<div class="t">${hourLabel(p.t)}（实际）</div><div class="v">${cny4(p.cost)}</div>`
+      : `<div class="t">${hourLabel(p.t)}（预测）</div><div class="v">${cny4(p.cost)}</div><div class="r"><span>区间</span><b>${cny(p.lo)} ~ ${cny(p.hi)}</b></div>`;
+  });
+}
+
 // 右侧悬浮目录：扫描 [data-toc] 区块生成跳转项，滚动时高亮当前位置
 function buildOwnToc() {
   document.querySelector(".own-toc")?.remove();

public/styles.css

@@ -314,6 +314,7 @@ button { font-family: inherit; cursor: pointer; }
 .seg button:hover { color: var(--text-primary); }
 .seg button.active { background: var(--bg-surface); color: var(--text-primary); font-weight: 500; box-shadow: var(--shadow-card); }
 .chart-bar { fill: var(--primary); }
+.chart-bar-future { fill: var(--primary); opacity: .32; }
 .bar-name { font-size: 11px; fill: var(--text-secondary); font-family: var(--font-ui); }
 .bar-value { font-size: 11px; font-weight: 500; fill: var(--text-primary); font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
 .chart-tip .r { display: flex; justify-content: space-between; gap: 14px; color: var(--text-secondary); }

server.js

@@ -8,7 +8,7 @@ import {
   queryStation, queryStationUsage, queryOwnData, queryOwnChannels, queryOwnUsers,
   dateStrInTz, parseDateLabel, fixedPurchases, STATION_TYPES,
 } from "./lib/providers.js";
-import { forecastDaily } from "./lib/forecast.js";
+import { forecastDaily, forecastHourly } from "./lib/forecast.js";
 import { SessionManager, verifyPassword } from "./lib/auth.js";
 import { History } from "./lib/history.js";
 import { evaluateStation } from "./lib/alerts.js";
@@ -554,6 +554,37 @@ app.get("/api/own/analytics", async (req, res) => {
     } catch { /* 拿不到就退化为不区分管理员 */ }
     const adminSet = new Set((ownUsers || []).filter((u) => u.role >= 10).map((u) => u.username));
 
+    // 小时级序列（近 14 天，缺时补 0，不含当前未完小时）→ 未来 24 小时预测
+    const hourFmt = new Intl.DateTimeFormat("en-US", { timeZone: tz, hour12: false, hour: "2-digit" });
+    const hodOf = (ms) => Number(hourFmt.format(new Date(ms))) % 24;
+    const hmap = new Map();
+    for (const r of modelRows) {
+      const hk = Math.floor(r.t / 3600000) * 3600000;
+      hmap.set(hk, (hmap.get(hk) || 0) + r.cost);
+    }
+    const lastFullHour = Math.floor(now / 3600000) * 3600000 - 3600000;
+    const hourlyStart = Math.max(lastFullHour - 14 * 86400000, hmap.size ? Math.min(...hmap.keys()) : lastFullHour);
+    const hourlySeries = [];
+    for (let t = hourlyStart; t <= lastFullHour; t += 3600000) {
+      hourlySeries.push({ t, cost: Math.round((hmap.get(t) || 0) * 10000) / 10000 });
+    }
+    const hf = forecastHourly(hourlySeries, hodOf, 24);
+    let hourlyForecast = null;
+    if (hf) {
+      const todaySoFar = modelRows.filter((r) => r.t >= midnight).reduce((a, r) => a + r.cost, 0);
+      // 今天预计全天 = 已发生 + 预测里落在今天的剩余小时
+      const dayEndMs = midnight + 86400000;
+      const restToday = hf.points.filter((p) => p.t < dayEndMs).reduce((a, p) => a + p.cost, 0);
+      hourlyForecast = {
+        past: hourlySeries.slice(-24),
+        next: hf.points,
+        next24Total: hf.next24Total,
+        backtestWapePct: hf.backtestWapePct,
+        todaySoFar: Math.round(todaySoFar * 100) / 100,
+        todayEst: Math.round((todaySoFar + restToday) * 100) / 100,
+      };
+    }
+
     const byUser = aggBy(userRows, "user").map((u) => ({ ...u, isAdmin: adminSet.has(u.user) }));
     // 收入 = 普通用户的期内消费；管理员/root 自己用不产生收入，但上游成本照付
     const incomeUsd = byUser.filter((u) => !u.isAdmin).reduce((a, u) => a + u.cost, 0);
@@ -573,6 +604,7 @@ app.get("/api/own/analytics", async (req, res) => {
       trend: [...tmap.values()].sort((a, b) => a.t - b.t),
       daily: daily.slice(-14),
       forecast: forecastDaily(daily, 7),
+      hourly: hourlyForecast,
       profit: await computeProfit(own, incomeUsd, adminUsageUsd, { startMs, now, tz, range }),
       generatedAt: new Date().toISOString(),
     };