From dbfea9a00bae57c63f55ed52a970e466a3e16b8e Mon Sep 17 00:00:00 2001
From: xykt <152045469+xykt@users.noreply.github.com>
Date: Mon, 19 Feb 2024 13:52:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E5=8E=86=E5=8F=B2=E5=BB=B6=E8=BF=9F?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E8=BF=9B=E8=A1=8C=E4=BA=86=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D/=E7=BE=8E=E5=8C=96=E5=B7=A5=E4=BD=9C=20(#321?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update network.html

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

* Update config.go

修复了以下问题：
- 延迟默认最高300ms，超过后默认抹平
- 曲线上有很多ping值为0的无效散点，导致毛刺很多，干扰效果
- 图标的y轴比例失调，上方大片留白，大大降低了有效显示区域
- 默认只显示最近不到半小时左右的延迟表现，想看全天需要拖动，影响效果
- 曲线不显示极大极小值，不够直观
---
 model/config.go                              |  2 +-
 resource/template/theme-default/network.html | 20 ++++++++++++++------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/model/config.go b/model/config.go
index fb4ad91..c18bb3f 100644
--- a/model/config.go
+++ b/model/config.go
@@ -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
diff --git a/resource/template/theme-default/network.html b/resource/template/theme-default/network.html
index b321eee..77d4f4f 100644
--- a/resource/template/theme-default/network.html
+++ b/resource/template/theme-default/network.html
@@ -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;