Skip to content

feat: 网络速率图改用对数纵轴,平时的流量不再被突发压成贴底的直线 - #20

Merged
stqfdyr merged 3 commits into
mainfrom
feat/log-rate-axis
Oct 2, 2026
Merged

stqfdyr merged 3 commits into
mainfrom
feat/log-rate-axis

Conversation

@stqfdyr

@stqfdyr stqfdyr commented Oct 1, 2026 •

Copy link
Copy Markdown
Collaborator

网络速率面板的纵轴改为对数,突发与平时的流量在同一张图里都看得清。

  • 刻度取 1、10、100 KB/MB/GB,最多标 6 个,从顶往下数:1 KB/s 到 100 MB/s 之间每档都标,更宽时隔一档
  • 轴底取窗口里最慢速率所在的档,不低于 1 KB/s。agent 自己上报每个方向约 0.2–0.7 KB/s,所以没有其它流量的节点落在底上
  • 低于 1 KB/s 的值画在底上,提示框仍显示 hub 返回的原值
  • axisTop 的 1024 进制分支只有网速在用,一并删掉,CPU 的轴不变
  • 四个资源图的纵轴不再由 recharts 按重叠隐藏刻度:它把顶端标签往里推 5 px 后会藏掉下面那个刻度,网格线另算一遍还会多丢,CPU、内存、硬盘都缺顶端下面那条网格线
  • 五个图表的提示框不再滑动:鼠标从右边移入时,提示框先出现在光标右侧,再用 400 ms 滑回图表内,滑动期间超出页面最多 140 px,闪出横向滚动条
  • 历史请求被拒的注释不再描述 hub 为什么限并发

测试

  • npm run lint、npm test、npm run build 通过;rateAxis 加 8 组用例,改成最多 5 个、每档都标、从底往上数时测试各自变红
  • 预览环境浏览器实测,1280 与 390 宽、浅色与深色:
    • 峰值 70 MB/s 时 6 个标签间距 24 px,各有网格线,空闲的线落在标着 1 KB/s 的底线上;峰值 5 MB/s、400 MB/s 时分别标 5 个、4 个
    • CPU、内存、硬盘的刻度值与改动前相同,5 个刻度各有网格线,顶端标签与网格线对齐
    • 鼠标从视口最右边每 16 ms 左移 1 px 移入图表,绘图区每个高度都扫一遍,逐帧检查横向溢出:四个资源图与延迟图共约 4.5 万帧,溢出为 0;打开过渡时网速图最多溢出 140 px,延迟图 103 px
  • 用真实的 9 节点数据,实测 3 个节点 × 1 小时 / 24 小时 / 7 天,桌面浅色、深色与 390 宽:
    • 一台节点 24 小时窗口原来整天贴底、只剩几个尖峰;现在空闲落在底上,十几 KB/s 的活动与 70 MB/s 的突发同屏可读
    • 提示框是原值(如 720 B/s);上下行顺序与改动前相同

- 纵轴改为对数,刻度取 1、10、100 KB/MB/GB,最多标 5 个,从顶往下数
- 轴底取窗口里最慢速率所在的档,不低于 1 KB/s:agent 自己上报每个方向约 0.2–0.7 KB/s,空闲的节点落在底上
- 低于 1 KB/s 的值画在底上,提示框仍显示 hub 返回的原值
- `axisTop` 的 1024 进制分支只有网速在用,一并删掉
- 历史请求被拒的注释不再描述 hub 为什么限并发
- 峰值 10–100 MB/s 时轴是 1 KB–100 MB,原来只标 10 KB、1 MB、100 MB,空闲的线落在没有标签的底上;现在六档都标,间距 24 px
- 四个资源图的纵轴设 interval 0:recharts 把顶端标签往里推 5 px 后会隐藏下面那个刻度,网格线另算一遍还会多丢,CPU、内存、硬盘原来都缺顶端下面那条网格线
- 注释里的反事实改用 would
提示框先出现在光标右侧,再用 400 ms 的过渡滑回图表内,滑动期间超出页面最多 140 px。五个提示框都关掉过渡
@stqfdyr
stqfdyr force-pushed the feat/log-rate-axis branch from 6c173c0 to c85bfa5 Compare October 2, 2026 05:03
@stqfdyr
stqfdyr merged commit 74480d0 into main Oct 2, 2026
1 check passed
@stqfdyr
stqfdyr deleted the feat/log-rate-axis branch October 2, 2026 05:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant