对历史延迟图表进行了相关修复/美化工作 (#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"
}
if c.MaxTCPPingValue == 0 {
c.MaxTCPPingValue = 300
c.MaxTCPPingValue = 1000
}
if c.AvgPingCount == 0 {
c.AvgPingCount = 2

View File

@ -30,7 +30,7 @@
const initData = JSON.parse('{{.Servers}}').servers;
let MaxTCPPingValue = {{.MaxTCPPingValue}};
if (MaxTCPPingValue == null) {
MaxTCPPingValue = 300;
MaxTCPPingValue = 1000;
}
new Vue({
el: '#app',
@ -77,7 +77,7 @@
},
dataZoom: [
{
start: 94,
start: 0,
end: 100
}
],
@ -87,7 +87,7 @@
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
boundaryGap: false
},
series: [],
},
@ -178,11 +178,13 @@
let loss = 0;
let data = [];
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) {
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);
legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
@ -192,7 +194,13 @@
type: 'line',
smooth: true,
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;