对历史延迟图表进行了相关修复/美化工作 (#321)

* Update network.html

修复以下问题:
- 延迟默认最高300ms,超过后默认抹平
- 曲线上有很多ping值为0的无效散点,导致毛刺很多,干扰效果
- 图标的y轴比例失调,上方大片留白,大大降低了有效显示区域
- 默认只显示最近不到半小时左右的延迟表现,想看全天需要拖动,影响效果
- 曲线不显示极大极小值,不够直观

* Update config.go

修复了以下问题:
- 延迟默认最高300ms,超过后默认抹平
- 曲线上有很多ping值为0的无效散点,导致毛刺很多,干扰效果
- 图标的y轴比例失调,上方大片留白,大大降低了有效显示区域
- 默认只显示最近不到半小时左右的延迟表现,想看全天需要拖动,影响效果
- 曲线不显示极大极小值,不够直观
This commit is contained in:
xykt 2024-02-19 13:52:43 +08:00 committed by GitHub
parent e8b208edfa
commit dbfea9a00b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 7 deletions

View File

@ -147,7 +147,7 @@ func (c *Config) Read(path string) error {
c.Location = "Asia/Shanghai" c.Location = "Asia/Shanghai"
} }
if c.MaxTCPPingValue == 0 { if c.MaxTCPPingValue == 0 {
c.MaxTCPPingValue = 300 c.MaxTCPPingValue = 1000
} }
if c.AvgPingCount == 0 { if c.AvgPingCount == 0 {
c.AvgPingCount = 2 c.AvgPingCount = 2

View File

@ -30,7 +30,7 @@
const initData = JSON.parse('{{.Servers}}').servers; const initData = JSON.parse('{{.Servers}}').servers;
let MaxTCPPingValue = {{.MaxTCPPingValue}}; let MaxTCPPingValue = {{.MaxTCPPingValue}};
if (MaxTCPPingValue == null) { if (MaxTCPPingValue == null) {
MaxTCPPingValue = 300; MaxTCPPingValue = 1000;
} }
new Vue({ new Vue({
el: '#app', el: '#app',
@ -77,7 +77,7 @@
}, },
dataZoom: [ dataZoom: [
{ {
start: 94, start: 0,
end: 100 end: 100
} }
], ],
@ -87,7 +87,7 @@
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
boundaryGap: [0, '100%'] boundaryGap: false
}, },
series: [], series: [],
}, },
@ -178,11 +178,13 @@
let loss = 0; let loss = 0;
let data = []; let data = [];
for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) { for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
avgDelay = monitorInfo.result[i].avg_delay[j]; avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
if (avgDelay > 0.9 * MaxTCPPingValue) { if (avgDelay > 0.9 * MaxTCPPingValue) {
loss += 1 loss += 1
} }
data.push([monitorInfo.result[i].created_at[j], avgDelay]); if (avgDelay > 0) {
data.push([monitorInfo.result[i].created_at[j], avgDelay]);
}
} }
lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1); lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%"; legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
@ -192,7 +194,13 @@
type: 'line', type: 'line',
smooth: true, smooth: true,
symbol: 'none', symbol: 'none',
data: data data: data,
markPoint: {
data: [
{ type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
{ type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
]
}
}); });
} }
this.option.title.text = monitorInfo.result[0].server_name; this.option.title.text = monitorInfo.result[0].server_name;