diff --git a/web/display/src/pages/Line.tsx b/web/display/src/pages/Line.tsx
index afb43cb..05fa62d 100644
--- a/web/display/src/pages/Line.tsx
+++ b/web/display/src/pages/Line.tsx
@@ -55,6 +55,8 @@ interface ChartDef {
group: MetricGroup
/** 占满一行。 */
wide?: boolean
+ /** 没有才是好的指标:整段为 0 时图上显示的说明 */
+ quiet?: string
}
const GROUPS = [
@@ -66,10 +68,10 @@ const GROUPS = [
const CHARTS: ChartDef[] = [
{ id: 'rtt', title: '延迟', group: 'quic', unit: 'ms', series: [{ key: 'rtt.p50', label: 'p50', color: '--chart-1' }, { key: 'rtt.p95', label: 'p95', color: '--chart-2' }, { key: 'rtt.p99', label: 'p99', color: '--chart-3' }] },
{ id: 'jitter', title: '抖动(p95)', group: 'quic', unit: 'ms', series: [{ key: 'jitter.up.p95', label: '去程', color: '--chart-2' }, { key: 'jitter.down.p95', label: '回程', color: '--chart-1' }] },
- { id: 'loss', title: '丢包', group: 'quic', unit: '%', series: [{ key: 'loss.up', label: '去程', color: '--chart-2' }, { key: 'loss.down', label: '回程', color: '--chart-3' }, { key: 'loss.total', label: '合计', color: '--chart-1', dash: [4, 3] }] },
- { id: 'loss-runs', title: '最长连续丢包', group: 'quic', unit: '包', series: [{ key: 'loss.run.up_max', label: '去程', color: '--chart-2' }, { key: 'loss.run.down_max', label: '回程', color: '--chart-3' }] },
+ { id: 'loss', title: '丢包', group: 'quic', unit: '%', fill: true, quiet: '✓ 这段时间没有丢包', series: [{ key: 'loss.up', label: '去程', color: '--chart-2' }, { key: 'loss.down', label: '回程', color: '--chart-3' }, { key: 'loss.total', label: '合计', color: '--chart-1', dash: [4, 3] }] },
+ { id: 'loss-runs', title: '最长连续丢包', group: 'quic', unit: '包', fill: true, quiet: '✓ 这段时间没有连续丢包', series: [{ key: 'loss.run.up_max', label: '去程', color: '--chart-2' }, { key: 'loss.run.down_max', label: '回程', color: '--chart-3' }] },
{ id: 'tcp', title: '往返时延(RTT)', group: 'tcp-connect', unit: 'ms', series: [{ key: 'tcp.rtt.p50', label: 'p50', color: '--chart-1' }, { key: 'tcp.rtt.p95', label: 'p95', color: '--chart-2' }, { key: 'tcp.rtt.max', label: '最大', color: '--chart-3' }] },
- { id: 'retrans', title: '重传率', group: 'tcp-connect', unit: '%', series: [{ key: 'tcp.retrans.up', label: '去程', color: '--chart-2' }, { key: 'tcp.retrans.down', label: '回程', color: '--chart-3' }, { key: 'tcp.retrans', label: '合计', color: '--chart-1', dash: [4, 3] }] },
+ { id: 'retrans', title: '重传率', group: 'tcp-connect', unit: '%', fill: true, quiet: '✓ 这段时间没有重传', series: [{ key: 'tcp.retrans.up', label: '去程', color: '--chart-2' }, { key: 'tcp.retrans.down', label: '回程', color: '--chart-3' }, { key: 'tcp.retrans', label: '合计', color: '--chart-1', dash: [4, 3] }] },
{ id: 'connect-time', title: '建连耗时(p95)', group: 'tcp-connect', unit: 'ms', series: [{ key: 'connect.tcp_ms.p95', label: 'TCP 建连', color: '--chart-1' }, { key: 'connect.tls_ms.p95', label: 'TLS 握手', color: '--chart-2' }] },
{ id: 'connect-ok', title: '建连成功率', group: 'tcp-connect', unit: '%', zero: false, series: [{ key: 'connect.success', label: '成功率', color: '--chart-3' }] },
{ id: 'score', title: '综合评分', group: 'score', wide: true, unit: '', series: [{ key: 'score.reality', label: 'REALITY', color: '--chart-1' }, { key: 'score.hy2', label: 'Hy2', color: '--chart-2' }, { key: 'score.mc', label: 'MC', color: '--chart-4' }, { key: 'score.base', label: '综合', color: '--chart-5', dash: [4, 3] }] },
@@ -177,7 +179,7 @@ export function Line() {
]
: raw.map(({ x, values }) => ({ label: x.label, values, color: x.color, dash: x.dash, fill: def.fill }))
if (!list.some((x) => x.values.some((v) => v !== null))) return null
- return { def, node: }
+ return { def, node: }
})
return { group, cards: cards.filter((c): c is NonNullable => c !== null) }
}).filter((g) => g.cards.length > 0)
diff --git a/web/shared/charts/TimeChart.tsx b/web/shared/charts/TimeChart.tsx
index 0779646..7c84c9e 100644
--- a/web/shared/charts/TimeChart.tsx
+++ b/web/shared/charts/TimeChart.tsx
@@ -26,6 +26,8 @@ interface Props {
gaps?: { from: number; to: number }[]
/** 为真时 `t` 是「从起点算起的毫秒数」而不是 Unix 毫秒:横轴显示 0:00、0:15…,用来把两段时间叠在一起比。 */
offset?: boolean
+ /** 丢包、重传这类「没有才是好」的图:整段都是 0(或没有值)时,在图上盖一句说明,而不是留一条贴着底边的平线。 */
+ quiet?: string
}
/** 偏移量(毫秒)→ h:mm:ss / m:ss。 */
@@ -38,6 +40,24 @@ export function fmtOffset(ms: number): string {
return h > 0 ? `${h}:${two(m)}${sec ? ':' + two(sec) : ''}` : `${m}:${two(sec)}`
}
+/** 有值的格子不到三分之一(而且至少有一个)算稀疏。 */
+function isSparse(values: (number | null)[]): boolean {
+ const filled = values.filter((v) => v !== null).length
+ return filled > 0 && filled < values.length / 3
+}
+
+/**
+ * Y 轴范围:默认从 0 开始,上面留 8%。百分比的轴不会超过 100%(成功率贴着 100% 时不再出现 100.75% 这种刻度),
+ * 一条平线(最大等于最小)也给出可读的范围。
+ */
+function yRange(min: number, max: number, zero: boolean, unit: string): [number, number] {
+ const percent = unit === '%'
+ const lo = zero ? Math.min(0, min) : percent ? Math.max(0, min - Math.max(1, (max - min) * 0.2)) : min
+ let hi = max <= min ? min + (percent ? Math.max(1, Math.abs(min) * 0.01) : 1) : max + (max - min) * 0.08
+ if (percent && max <= 100) hi = Math.min(100, hi)
+ return [lo, hi > lo ? hi : lo + 1]
+}
+
function cssVar(name: string): string {
return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
}
@@ -61,7 +81,7 @@ function formatValue(v: number | null | undefined, unit: string): string {
* - 在图上拖动选一段放大预览,双击或点「还原」恢复;数据刷新时保持放大的区间;
* - 鼠标悬停显示这个时刻每条线的值。
*/
-export function TimeChart({ t, series, height = 220, unit = '', zero = true, gaps = [], offset = false }: Props) {
+export function TimeChart({ t, series, height = 220, unit = '', zero = true, gaps = [], offset = false, quiet }: Props) {
const host = useRef(null)
const tip = useRef(null)
const plot = useRef(null)
@@ -70,7 +90,10 @@ export function TimeChart({ t, series, height = 220, unit = '', zero = true, gap
// 数据变了(轮询、实时)只更新数据,不重建图:重建会闪一下,还会丢掉鼠标位置
const latest = useRef({ t, series, gaps })
latest.current = { t, series, gaps }
- const structure = JSON.stringify([series.map((x) => [x.label, x.color, x.dash, x.fill, x.faint]), unit, zero, offset, height])
+ // 稀疏的序列(例如每分钟只有几次的建连):大部分格子是空的,单独的一个点画成线就看不见,所以画出点并把点连起来
+ const sparse = series.map((x) => isSparse(x.values))
+ const allQuiet = quiet !== undefined && series.filter((x) => !x.faint).every((x) => x.values.every((v) => v === null || v <= 0))
+ const structure = JSON.stringify([series.map((x, i) => [x.label, x.color, x.dash, x.fill, x.faint, sparse[i]]), unit, zero, offset, height])
const dataOf = (): AlignedData => [latest.current.t.map((v) => v / 1000), ...latest.current.series.map((x) => x.values.map((v) => (v === null ? null : v)))]
const reset = useCallback(() => {
@@ -97,7 +120,7 @@ export function TimeChart({ t, series, height = 220, unit = '', zero = true, gap
select: { show: true, left: 0, top: 0, width: 0, height: 0 },
scales: {
x: { time: !offset, range: (_u, min, max) => (zoom.current ? [zoom.current.min, zoom.current.max] : [min, max]) },
- y: { range: (_u, min, max) => [zero ? Math.min(0, min) : min, max <= min ? min + 1 : max + (max - min) * 0.08] },
+ y: { range: (_u, min, max) => yRange(min, max, zero, unit) },
},
axes: [
{ stroke: axis, grid: { stroke: grid, width: 1 }, ticks: { stroke: grid }, font, ...(offset ? { values: (_u: uPlot, ticks: number[]) => ticks.map((v) => fmtOffset(v * 1000)) } : {}) },
@@ -113,8 +136,8 @@ export function TimeChart({ t, series, height = 220, unit = '', zero = true, gap
width: s.faint ? 1 : 1.8,
dash: s.dash,
fill: s.fill ? color + '22' : undefined,
- spanGaps: false,
- points: { show: false },
+ spanGaps: sparse[series.indexOf(s)],
+ points: { show: sparse[series.indexOf(s)], size: 5 },
}
}),
],
@@ -218,7 +241,10 @@ export function TimeChart({ t, series, height = 220, unit = '', zero = true, gap
)}
-
+
+
+ {allQuiet ?
{quiet}
: null}
+
)
diff --git a/web/shared/theme/base.css b/web/shared/theme/base.css
index 3b69c20..051bf05 100644
--- a/web/shared/theme/base.css
+++ b/web/shared/theme/base.css
@@ -1088,3 +1088,20 @@ pre.code {
align-items: center;
gap: 4px;
}
+
+/* 「没有才是好」的图整段为 0 时:盖一句说明,图的坐标轴留着,说明在绘图区中间 */
+.chart-body {
+ position: relative;
+}
+
+.chart-quiet {
+ position: absolute;
+ inset: 0 0 28px 56px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--app-ok);
+ font-size: 14px;
+ font-weight: 600;
+ pointer-events: none;
+}