From fe2872bbb37079932c967732e964e936b5ad166f Mon Sep 17 00:00:00 2001
From: xykt <152045469+xykt@users.noreply.github.com>
Date: Mon, 19 Feb 2024 01:14:26 +0800
Subject: [PATCH 01/14] Update network.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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;

From 4e5cc0b642fbce1510efb55859d6db579feebb4b Mon Sep 17 00:00:00 2001
From: xykt <152045469+xykt@users.noreply.github.com>
Date: Mon, 19 Feb 2024 01:17:42 +0800
Subject: [PATCH 02/14] Update config.go
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

From a7d1bd74872def010bf9fe75ccbc09fda8f03f8e Mon Sep 17 00:00:00 2001
From: xykt <152045469+xykt@users.noreply.github.com>
Date: Sun, 24 Mar 2024 01:04:03 +0800
Subject: [PATCH 03/14] Update network.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

美化了三网延迟界面：
1. 将Marker缩小降低曲线遮挡
2. 设置为曲线对应的颜色使其更加直观
3. 设置Marker透明度降低对画面的影响
4. 将延迟极小值的Marker倒置显示以快速区别极大值
5. 将超过MaxTCPPingValue的点删除
6. 显示丢包分布（细线），以及服务器断流区间（粗线）
---
 resource/template/theme-default/network.html | 44 +++++++++++++++++---
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/resource/template/theme-default/network.html b/resource/template/theme-default/network.html
index b3ecf59..c353a9e 100644
--- a/resource/template/theme-default/network.html
+++ b/resource/template/theme-default/network.html
@@ -185,19 +185,37 @@
             parseMonitorInfo(monitorInfo) {
                 let tSeries = [];
                 let tLegendData = [];
+                var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
+                let maxPing = 0;
                 for (let i = 0; i < monitorInfo.result.length; i++) {
+                	 for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
+                	 	avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
+                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
+                            maxPing = avgDelay;
+                        }
+                	 }
+                }
+                for (let i = 0; i < monitorInfo.result.length; i++) {
+                    var lcolor = lcolors[i % lcolors.length];
+                    var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
+                    var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)';
                     let loss = 0;
                     let data = [];
+                    let datal = [];
                     for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
                         avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                        if (avgDelay > 0.9 * MaxTCPPingValue) {
-                            loss += 1
-                        }
-                        if (avgDelay > 0) {
+                        if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
                             data.push([monitorInfo.result[i].created_at[j], avgDelay]);
                         }
+                        else {
+                            loss += 1;
+                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
+                        }
                     }
                     lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
+                    if (lossRate > 99) {
+                        datal = [];
+                    }
                     legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
                     tLegendData.push(legendName);
                     tSeries.push({
@@ -208,17 +226,31 @@
                             data: data,
                             markPoint: {
                                 data: [
-                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
-                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
+                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
+                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
                                 ]
                             }
                     });
+                    tSeries.push({
+                            name: legendName,
+                            type: 'bar',
+                            smooth: true,
+                            symbol: 'none',
+                            data: datal,
+                            itemStyle: { color: rgbaColorBar }
+                    });
                 }
                 this.option.title.text = monitorInfo.result[0].server_name;
                 this.option.series = tSeries;
                 this.option.legend.data = tLegendData;
                 this.myChart.clear();
                 this.myChart.setOption(this.option);
+            },
+                this.option.title.text = monitorInfo.result[0].server_name;
+                this.option.series = tSeries;
+                this.option.legend.data = tLegendData;
+                this.myChart.clear();
+                this.myChart.setOption(this.option);
             },
             isWindowsPlatform(str) {
                 return str.includes('Windows')

From bad910b686c224907c358c2664b0732ec945d08a Mon Sep 17 00:00:00 2001
From: xykt <152045469+xykt@users.noreply.github.com>
Date: Sun, 24 Mar 2024 09:16:41 +0800
Subject: [PATCH 04/14] Update network.html

---
 resource/template/theme-mdui/network.html | 40 +++++++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/resource/template/theme-mdui/network.html b/resource/template/theme-mdui/network.html
index 9bd54a2..6e9f443 100644
--- a/resource/template/theme-mdui/network.html
+++ b/resource/template/theme-mdui/network.html
@@ -208,19 +208,37 @@
             parseMonitorInfo(monitorInfo) {
                 let tSeries = [];
                 let tLegendData = [];
+                var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
+                let maxPing = 0;
                 for (let i = 0; i < monitorInfo.result.length; i++) {
+                	 for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
+                	 	avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
+                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
+                            maxPing = avgDelay;
+                        }
+                	 }
+                }
+                for (let i = 0; i < monitorInfo.result.length; i++) {
+                    var lcolor = lcolors[i % lcolors.length];
+                    var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
+                    var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)';
                     let loss = 0;
                     let data = [];
+                    let datal = [];
                     for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
                         avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                        if (avgDelay > 0.9 * MaxTCPPingValue) {
-                            loss += 1
-                        }
-                        if (avgDelay > 0) {
+                        if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
                             data.push([monitorInfo.result[i].created_at[j], avgDelay]);
                         }
+                        else {
+                            loss += 1;
+                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
+                        }
                     }
                     lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
+                    if (lossRate > 99) {
+                        datal = [];
+                    }
                     legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
                     tLegendData.push(legendName);
                     tSeries.push({
@@ -230,12 +248,20 @@
                             symbol: 'none',
                             data: data,
                             markPoint: {
-                            data: [
-                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
-                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
+                                data: [
+                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
+                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
                                 ]
                             }
                     });
+                    tSeries.push({
+                            name: legendName,
+                            type: 'bar',
+                            smooth: true,
+                            symbol: 'none',
+                            data: datal,
+                            itemStyle: { color: rgbaColorBar }
+                    });
                 }
                 this.option.title.text = monitorInfo.result[0].server_name;
                 this.option.series = tSeries;

From 78134a0e8b07e0ddec9a634f7a4ec1eb9592879f Mon Sep 17 00:00:00 2001
From: xykt <152045469+xykt@users.noreply.github.com>
Date: Sun, 24 Mar 2024 09:20:53 +0800
Subject: [PATCH 05/14] Update network.html

---
 resource/template/theme-daynight/network.html | 63 ++++++++++++++-----
 1 file changed, 46 insertions(+), 17 deletions(-)

diff --git a/resource/template/theme-daynight/network.html b/resource/template/theme-daynight/network.html
index b413673..2f218ed 100644
--- a/resource/template/theme-daynight/network.html
+++ b/resource/template/theme-daynight/network.html
@@ -212,37 +212,66 @@
                 parseMonitorInfo(monitorInfo) {
                     let tSeries = [];
                     let tLegendData = [];
+                    var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
+                    let maxPing = 0;
                     for (let i = 0; i < monitorInfo.result.length; i++) {
+                        for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
+                	    avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
+                            if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
+                                maxPing = avgDelay;
+                            }
+                        }
+                    }
+                    for (let i = 0; i < monitorInfo.result.length; i++) {
+                        var lcolor = lcolors[i % lcolors.length];
+                        var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
+                        var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)';
                         let loss = 0;
                         let data = [];
+                        let datal = [];
                         for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                            avgDelay = monitorInfo.result[i].avg_delay[j];
-                            if (avgDelay > 0.9 * MaxTCPPingValue) {
-                                loss += 1
+                            avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
+                            if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
+                                data.push([monitorInfo.result[i].created_at[j], avgDelay]);
+                            }
+                            else {
+                                loss += 1;
+                                datal.push([monitorInfo.result[i].created_at[j], maxPing]);
                             }
-                            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 + "%";
+                        if (lossRate > 99) {
+                            datal = [];
+                        }
+                        legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
                         tLegendData.push(legendName);
                         tSeries.push({
-                                name: legendName,
-                                type: 'line',
-                                smooth: true,
-                                symbol: 'none',
-                                data: data
+                            name: legendName,
+                            type: 'line',
+                            smooth: true,
+                            symbol: 'none',
+                            data: data,
+                            markPoint: {
+                                data: [
+                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
+                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
+                                ]
+                            }
+                        });
+                        tSeries.push({
+                            name: legendName,
+                            type: 'bar',
+                            smooth: true,
+                            symbol: 'none',
+                            data: datal,
+                            itemStyle: { color: rgbaColorBar }
                         });
                     }
                     this.option.title.text = monitorInfo.result[0].server_name;
                     this.option.series = tSeries;
                     this.option.legend.data = tLegendData;
-                    const hour = new Date(Date.now()).getHours()
-                    if (hour > 17 || hour < 4) {
-                        this.option.legend.textStyle.color = "#F1F1F2";
-                        this.option.title.textStyle.color = "#ccc";
-                    }
-                    myChart.clear();
-                    myChart.setOption(this.option);
+                    this.myChart.clear();
+                    this.myChart.setOption(this.option);
                 },
 	        resizeHandle () {
                     this.myChart.resize();

From 800af7ce4ef1b055672bc48284b90ad41b0c896e Mon Sep 17 00:00:00 2001
From: xykt <152045469+xykt@users.noreply.github.com>
Date: Sun, 24 Mar 2024 09:22:13 +0800
Subject: [PATCH 06/14] Update network.html

---
 .../template/theme-server-status/network.html | 38 ++++++++++++++++---
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/resource/template/theme-server-status/network.html b/resource/template/theme-server-status/network.html
index 0d4487c..deaa4d7 100644
--- a/resource/template/theme-server-status/network.html
+++ b/resource/template/theme-server-status/network.html
@@ -171,19 +171,37 @@
             parseMonitorInfo(monitorInfo) {
                 let tSeries = [];
                 let tLegendData = [];
+                var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
+                let maxPing = 0;
                 for (let i = 0; i < monitorInfo.result.length; i++) {
+                	 for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
+                	 	avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
+                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
+                            maxPing = avgDelay;
+                        }
+                	 }
+                }
+                for (let i = 0; i < monitorInfo.result.length; i++) {
+                    var lcolor = lcolors[i % lcolors.length];
+                    var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
+                    var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)';
                     let loss = 0;
                     let data = [];
+                    let datal = [];
                     for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
                         avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                        if (avgDelay > 0.9 * MaxTCPPingValue) {
-                            loss += 1
-                        }
-                        if (avgDelay > 0) {
+                        if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
                             data.push([monitorInfo.result[i].created_at[j], avgDelay]);
                         }
+                        else {
+                            loss += 1;
+                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
+                        }
                     }
                     lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
+                    if (lossRate > 99) {
+                        datal = [];
+                    }
                     legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
                     tLegendData.push(legendName);
                     tSeries.push({
@@ -194,11 +212,19 @@
                             data: data,
                             markPoint: {
                                 data: [
-                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } },
-                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } }
+                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
+                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
                                 ]
                             }
                     });
+                    tSeries.push({
+                            name: legendName,
+                            type: 'bar',
+                            smooth: true,
+                            symbol: 'none',
+                            data: datal,
+                            itemStyle: { color: rgbaColorBar }
+                    });
                 }
                 this.option.title.text = monitorInfo.result[0].server_name;
                 this.option.series = tSeries;

From 9a8c0e7118e77cc5a6bde1b50e3645a20db22d8f Mon Sep 17 00:00:00 2001
From: xykt <152045469+xykt@users.noreply.github.com>
Date: Sun, 24 Mar 2024 09:24:23 +0800
Subject: [PATCH 07/14] Update network.html

---
 resource/template/theme-daynight/network.html | 354 +++++++++++-------
 1 file changed, 213 insertions(+), 141 deletions(-)

diff --git a/resource/template/theme-daynight/network.html b/resource/template/theme-daynight/network.html
index 2f218ed..6ac655b 100644
--- a/resource/template/theme-daynight/network.html
+++ b/resource/template/theme-daynight/network.html
@@ -107,145 +107,200 @@
 <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></script>
 
 <script>
-        const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
-        const initData = JSON.parse('{{.Servers}}').servers;
-        let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
-	    if (MaxTCPPingValue == null) {
-	        MaxTCPPingValue = 1000;
-	    }
-        // 基于准备好的dom，初始化echarts实例
-        var myChart = echarts.init(document.getElementById('monitor-info-container'));
-        // 使用刚指定的配置项和数据显示图表。
-        var statusCards = new Vue({
-            el: '#network',
-            delimiters: ['@#', '#@'],
-            data: {
-                servers: initData,
-                cache: [],
-                option: {
-                    tooltip: {
-                        trigger: 'axis',
-                        position: function (pt) {
-                            return [pt[0], '10%'];
-                        },
-                        formatter: function(params){
-                            let result = params[0].axisValueLabel + "<br />";
-                            params.forEach(function(item){
-                                result += item.marker + item.seriesName + ": " + item.value[1].toFixed(2) + " ms<br />";
-                             })
-                            return result;
-                        },
-                        confine: true,
-                        transitionDuration: 0
+    const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
+    const initData = JSON.parse('{{.Servers}}').servers;
+    let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
+    if (MaxTCPPingValue == null) {
+        MaxTCPPingValue = 1000;
+    }
+    new Vue({
+        el: '#app',
+        delimiters: ['@#', '#@'],
+        data: {
+            page: 'network',
+            defaultTemplate: {{.Conf.Site.Theme}},
+            templates: {{.Themes}},
+            servers: initData,
+            option: {
+                tooltip: {
+                    trigger: 'axis',
+                    position: function (pt) {
+                        return [pt[0], '10%'];
                     },
-                    title: {
-                        left: 'center',
-                        text: "",
-                        textStyle: {}
+                    formatter: function(params){
+                        let result = params[0].axisValueLabel + "<br />";
+                        params.forEach(function(item){
+                            result += item.marker + item.seriesName + ": " + item.value[1].toFixed(2) + " ms<br />";
+                         })
+                        return result;
                     },
-                    legend: {
-                        top: '5%',
-                        data: [],
-                        textStyle: {
-                            fontSize: 14
-                        }
-                    },
-                    toolbox: {
-                        feature: {
-                            dataZoom: {
-                                yAxisIndex: 'none'
-                            },
-                            restore: {},
-                            saveAsImage: {}
-                        }
-                    },
-                    dataZoom: [
-                        {
-                            start: 94,
-                            end: 100
-                        }
-                    ],
-                    xAxis: {
-                        type: 'time',
-                        boundaryGap: false
-                    },
-                    yAxis: {
-                        type: 'value',
-                        boundaryGap: [0, '100%']
-                    },
-                    series: [],
-                }
-            },
-            mounted() {
-                this.DarkMode();
-                this.parseMonitorInfo(monitorInfo);
-		window.addEventListener('resize', this.resizeHandle);
-            },
-	    destroyed () {
-                window.removeEventListener('resize', this.resizeHandle)
-            },
-            methods: {
-                DarkMode() {
-                    const hour = new Date(Date.now()).getHours()
-                    if (hour > 17 || hour < 4) {
-                        document.querySelector("input[name=theme]").checked = true;
-                        document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark');
-                        document.getElementById("monitor-info-container").style.backgroundColor = "#1E1E1E";
+                    confine: true,
+                    transitionDuration: 0
+                },
+                title: {
+                    left: 'center',
+                    text: "",
+                    textStyle: {}
+                },
+                legend: {
+                    top: '5%',
+                    data: [],
+                    textStyle: {
+                        fontSize: 14
                     }
                 },
-                redirectNetwork(id) {
+                grid: {
+                    left: '8%',
+                    right: '8%',
+                },
+                backgroundColor: 'rgba(255, 255, 255, 0.8)',
+                toolbox: {
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: 'none'
+                        },
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                },
+                dataZoom: [
+                    {
+                        start: 0,
+                        end: 100
+                    }
+                ],
+                xAxis: {
+                    type: 'time',
+                    boundaryGap: false
+                },
+                yAxis: {
+                    type: 'value',
+                    boundaryGap: false
+                },
+                series: [],
+            },
+            chartOnOff: true,
+        },
+        mixins: [mixinsVue],
+        mounted() {
+            this.renderChart();
+            this.parseMonitorInfo(monitorInfo);
+            window.addEventListener('resize', this.resizeHandle);
+        },
+        destroyed () {
+            window.removeEventListener('resize', this.resizeHandle)
+        },
+        methods: {
+            getFontLogoClass(str) {
+                if (["almalinux",
+                        "alpine",
+                        "aosc",
+                        "apple",
+                        "archlinux",
+                        "archlabs",
+                        "artix",
+                        "budgie",
+                        "centos",
+                        "coreos",
+                        "debian",
+                        "deepin",
+                        "devuan",
+                        "docker",
+                        "elementary",
+                        "fedora",
+                        "ferris",
+                        "flathub",
+                        "freebsd",
+                        "gentoo",
+                        "gnu-guix",
+                        "illumos",
+                        "kali-linux",
+                        "linuxmint",
+                        "mageia",
+                        "mandriva",
+                        "manjaro",
+                        "nixos",
+                        "openbsd",
+                        "opensuse",
+                        "pop-os",
+                        "raspberry-pi",
+                        "redhat",
+                        "rocky-linux",
+                        "sabayon",
+                        "slackware",
+                        "snappy",
+                        "solus",
+                        "tux",
+                        "ubuntu",
+                        "void",
+                        "zorin"].indexOf(str)
+                    > -1) {
+                    return str;
+                }
+                if (['openwrt', 'linux', "immortalwrt"].indexOf(str) > -1) {
+                    return 'tux';
+                }
+                if (str == 'amazon') {
+                    return 'redhat';
+                }
+                if (str == 'arch') {
+                    return 'archlinux';
+                }
+                return '';
+            },
+            redirectNetwork(id) {
                     this.getMonitorHistory(id)
                     .then(function(monitorInfo) {
-                          var vm = network.__vue__;
+                          var vm = app.__vue__;
                           vm.parseMonitorInfo(monitorInfo);
                     })
                     .catch(function(error){
                         window.location.href = "/404";
                     })
                 },
-                getMonitorHistory(id) {
-                      return $.ajax({
-                        url: "/api/v1/monitor/"+id,
-                        method: "GET"
-                      });
-                },
-                parseMonitorInfo(monitorInfo) {
-                    let tSeries = [];
-                    let tLegendData = [];
-                    var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
-                    let maxPing = 0;
-                    for (let i = 0; i < monitorInfo.result.length; i++) {
-                        for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                	    avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                            if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
-                                maxPing = avgDelay;
-                            }
+            getMonitorHistory(id) {
+                  return $.ajax({
+                    url: "/api/v1/monitor/"+id,
+                    method: "GET"
+                  });
+            },
+            parseMonitorInfo(monitorInfo) {
+                let tSeries = [];
+                let tLegendData = [];
+                var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
+                let maxPing = 0;
+                for (let i = 0; i < monitorInfo.result.length; i++) {
+                	 for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
+                	 	avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
+                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
+                            maxPing = avgDelay;
+                        }
+                	 }
+                }
+                for (let i = 0; i < monitorInfo.result.length; i++) {
+                    var lcolor = lcolors[i % lcolors.length];
+                    var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
+                    var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)';
+                    let loss = 0;
+                    let data = [];
+                    let datal = [];
+                    for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
+                        avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
+                        if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
+                            data.push([monitorInfo.result[i].created_at[j], avgDelay]);
+                        }
+                        else {
+                            loss += 1;
+                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
                         }
                     }
-                    for (let i = 0; i < monitorInfo.result.length; i++) {
-                        var lcolor = lcolors[i % lcolors.length];
-                        var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
-                        var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)';
-                        let loss = 0;
-                        let data = [];
-                        let datal = [];
-                        for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                            avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                            if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
-                                data.push([monitorInfo.result[i].created_at[j], avgDelay]);
-                            }
-                            else {
-                                loss += 1;
-                                datal.push([monitorInfo.result[i].created_at[j], maxPing]);
-                            }
-                        }
-                        lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
-                        if (lossRate > 99) {
-                            datal = [];
-                        }
-                        legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
-                        tLegendData.push(legendName);
-                        tSeries.push({
+                    lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
+                    if (lossRate > 99) {
+                        datal = [];
+                    }
+                    legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
+                    tLegendData.push(legendName);
+                    tSeries.push({
                             name: legendName,
                             type: 'line',
                             smooth: true,
@@ -257,28 +312,45 @@
                                     { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
                                 ]
                             }
-                        });
-                        tSeries.push({
+                    });
+                    tSeries.push({
                             name: legendName,
                             type: 'bar',
                             smooth: true,
                             symbol: 'none',
                             data: datal,
                             itemStyle: { color: rgbaColorBar }
-                        });
-                    }
-                    this.option.title.text = monitorInfo.result[0].server_name;
-                    this.option.series = tSeries;
-                    this.option.legend.data = tLegendData;
-                    this.myChart.clear();
-                    this.myChart.setOption(this.option);
-                },
-	        resizeHandle () {
-                    this.myChart.resize();
-                },
-            }
-        });
-    </script>
+                    });
+                }
+                this.option.title.text = monitorInfo.result[0].server_name;
+                this.option.series = tSeries;
+                this.option.legend.data = tLegendData;
+                this.myChart.clear();
+                this.myChart.setOption(this.option);
+            },
+                this.option.title.text = monitorInfo.result[0].server_name;
+                this.option.series = tSeries;
+                this.option.legend.data = tLegendData;
+                this.myChart.clear();
+                this.myChart.setOption(this.option);
+            },
+            isWindowsPlatform(str) {
+                return str.includes('Windows')
+            },
+            renderChart() {
+              this.myChart = echarts.init(this.$refs.chartDom);
+              this.myChart.setOption(this.option);
+            },
+            resizeHandle () {
+              this.myChart.resize();
+            },
+        },
+        beforeDestroy() {
+            this.myChart.dispose();
+            this.myChart = null;
+        },
+    });
+</script>
 </body>
 <style>
 #network {

From 420d1ca8ffd37e14e2d5e7021b18d3776c2043a8 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sun, 24 Mar 2024 08:13:23 +0000
Subject: [PATCH 08/14] update contributors[no ci]

---
 README.md | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 829d50e..ef42750 100644
--- a/README.md
+++ b/README.md
@@ -47,25 +47,27 @@ You can change the dashboard language in the settings page (`/setting`) after th
 <a href="https://github.com/lemoeo" title="Lemoe"><img src="https://avatars.githubusercontent.com/u/18618627?v=4" width="50;" alt="Lemoe"/></a>
 <a href="https://github.com/cantoblanco" title="Kris"><img src="https://avatars.githubusercontent.com/u/116849421?v=4" width="50;" alt="Kris"/></a>
 <a href="https://github.com/nap0o" title="nap0o"><img src="https://avatars.githubusercontent.com/u/144927971?v=4" width="50;" alt="nap0o"/></a>
-<a href="https://github.com/spiritLHLS" title="spiritlhl"><img src="https://avatars.githubusercontent.com/u/103393591?v=4" width="50;" alt="spiritlhl"/></a>
-<a href="https://github.com/liuyanxi975" title="刘颜溪"><img src="https://avatars.githubusercontent.com/u/24417037?v=4" width="50;" alt="刘颜溪"/></a>
 <a href="https://github.com/CosmosZ-code" title="CosmosZ-code"><img src="https://avatars.githubusercontent.com/u/81398224?v=4" width="50;" alt="CosmosZ-code"/></a>
-<a href="https://github.com/uubulb" title="UUBulb"><img src="https://avatars.githubusercontent.com/u/35923940?v=4" width="50;" alt="UUBulb"/></a>
-<a href="https://github.com/lvgj-stack" title="Ko no dio"><img src="https://avatars.githubusercontent.com/u/38449861?v=4" width="50;" alt="Ko no dio"/></a>
-<a href="https://github.com/hhhkkk520" title="Kris"><img src="https://avatars.githubusercontent.com/u/52115472?v=4" width="50;" alt="Kris"/></a>
+<a href="https://github.com/liuyanxi975" title="刘颜溪"><img src="https://avatars.githubusercontent.com/u/24417037?v=4" width="50;" alt="刘颜溪"/></a>
+<a href="https://github.com/spiritLHLS" title="spiritlhl"><img src="https://avatars.githubusercontent.com/u/103393591?v=4" width="50;" alt="spiritlhl"/></a>
 <a href="https://github.com/1ridic" title="1ridic"><img src="https://avatars.githubusercontent.com/u/88495501?v=4" width="50;" alt="1ridic"/></a>
+<a href="https://github.com/hhhkkk520" title="Kris"><img src="https://avatars.githubusercontent.com/u/52115472?v=4" width="50;" alt="Kris"/></a>
+<a href="https://github.com/lvgj-stack" title="Ko no dio"><img src="https://avatars.githubusercontent.com/u/38449861?v=4" width="50;" alt="Ko no dio"/></a>
+<a href="https://github.com/uubulb" title="UUBulb"><img src="https://avatars.githubusercontent.com/u/35923940?v=4" width="50;" alt="UUBulb"/></a>
 <a href="https://github.com/Mmx233" title="Mmx"><img src="https://avatars.githubusercontent.com/u/36563672?v=4" width="50;" alt="Mmx"/></a>
 <a href="https://github.com/rootmelo92118" title="rootmelo92118"><img src="https://avatars.githubusercontent.com/u/32770959?v=4" width="50;" alt="rootmelo92118"/></a>
+<a href="https://github.com/xykt" title="xykt"><img src="https://avatars.githubusercontent.com/u/152045469?v=4" width="50;" alt="xykt"/></a>
 <a href="https://github.com/iilemon" title="Sean"><img src="https://avatars.githubusercontent.com/u/33201711?v=4" width="50;" alt="Sean"/></a>
 <a href="https://github.com/fscarmen" title="fscarmen"><img src="https://avatars.githubusercontent.com/u/62703343?v=4" width="50;" alt="fscarmen"/></a>
 <a href="https://github.com/ch8o" title="no-name-now"><img src="https://avatars.githubusercontent.com/u/9103372?v=4" width="50;" alt="no-name-now"/></a>
+<a href="https://github.com/HsukqiLee" title="HsukqiLee"><img src="https://avatars.githubusercontent.com/u/79034142?v=4" width="50;" alt="HsukqiLee"/></a>
 <a href="https://github.com/DarcJC" title="Darc Z."><img src="https://avatars.githubusercontent.com/u/53445798?v=4" width="50;" alt="Darc Z."/></a>
 <a href="https://github.com/Creling" title="Creling"><img src="https://avatars.githubusercontent.com/u/43109504?v=4" width="50;" alt="Creling"/></a>
 <a href="https://github.com/coreff" title="Core F"><img src="https://avatars.githubusercontent.com/u/38347122?v=4" width="50;" alt="Core F"/></a>
 <a href="https://github.com/colour93" title="玖叁"><img src="https://avatars.githubusercontent.com/u/64313711?v=4" width="50;" alt="玖叁"/></a>
 <a href="https://github.com/arkylin" title="凌"><img src="https://avatars.githubusercontent.com/u/35104502?v=4" width="50;" alt="凌"/></a>
 <a href="https://github.com/ysicing" title="缘生"><img src="https://avatars.githubusercontent.com/u/8605565?v=4" width="50;" alt="缘生"/></a>
-<a href="https://github.com/xykt" title="xykt"><img src="https://avatars.githubusercontent.com/u/152045469?v=4" width="50;" alt="xykt"/></a>
+<a href="https://github.com/sunnywangzi" title="wang"><img src="https://avatars.githubusercontent.com/u/88769439?v=4" width="50;" alt="wang"/></a>
 <a href="https://github.com/unclezs" title="unclezs"><img src="https://avatars.githubusercontent.com/u/42318775?v=4" width="50;" alt="unclezs"/></a>
 <a href="https://github.com/yuanweize" title="I"><img src="https://avatars.githubusercontent.com/u/30067203?v=4" width="50;" alt="I"/></a>
 <a href="https://github.com/guoyongchang" title="guoyongchang"><img src="https://avatars.githubusercontent.com/u/10484506?v=4" width="50;" alt="guoyongchang"/></a>
@@ -76,7 +78,6 @@ You can change the dashboard language in the settings page (`/setting`) after th
 <a href="https://github.com/MartijnLindeman" title="Martijn Lindeman"><img src="https://avatars.githubusercontent.com/u/78365708?v=4" width="50;" alt="Martijn Lindeman"/></a>
 <a href="https://github.com/KorenKrita" title="KorenKrita"><img src="https://avatars.githubusercontent.com/u/22239339?v=4" width="50;" alt="KorenKrita"/></a>
 <a href="https://github.com/techotaku" title="Ian Li"><img src="https://avatars.githubusercontent.com/u/1948179?v=4" width="50;" alt="Ian Li"/></a>
-<a href="https://github.com/HsukqiLee" title="HsukqiLee"><img src="https://avatars.githubusercontent.com/u/79034142?v=4" width="50;" alt="HsukqiLee"/></a>
 <a href="https://github.com/GreenTeodoro839" title="GreenTeodoro839"><img src="https://avatars.githubusercontent.com/u/77104800?v=4" width="50;" alt="GreenTeodoro839"/></a>
 <a href="https://github.com/Es-dese" title="Esdese"><img src="https://avatars.githubusercontent.com/u/71542548?v=4" width="50;" alt="Esdese"/></a>
 <a href="https://github.com/wwng2333" title="Crazy"><img src="https://avatars.githubusercontent.com/u/17147265?v=4" width="50;" alt="Crazy"/></a><!--GAMFC_DELIMITER_END-->

From bb48e0912d8ee85d2c05d9c3306dd0847c3a4a85 Mon Sep 17 00:00:00 2001
From: xykt <152045469+xykt@users.noreply.github.com>
Date: Sun, 24 Mar 2024 19:20:01 +0800
Subject: [PATCH 09/14] Update network.html

---
 resource/template/theme-mdui/network.html | 32 ++++++++++-------------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/resource/template/theme-mdui/network.html b/resource/template/theme-mdui/network.html
index 6e9f443..b9e19b5 100644
--- a/resource/template/theme-mdui/network.html
+++ b/resource/template/theme-mdui/network.html
@@ -209,15 +209,6 @@
                 let tSeries = [];
                 let tLegendData = [];
                 var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
-                let maxPing = 0;
-                for (let i = 0; i < monitorInfo.result.length; i++) {
-                	 for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                	 	avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
-                            maxPing = avgDelay;
-                        }
-                	 }
-                }
                 for (let i = 0; i < monitorInfo.result.length; i++) {
                     var lcolor = lcolors[i % lcolors.length];
                     var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
@@ -232,7 +223,15 @@
                         }
                         else {
                             loss += 1;
-                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
+                            datal.push({
+                                xAxis: monitorInfo.result[i].created_at[j],
+                                label: { show: false },
+                                emphasis: { disabled: true },
+                                lineStyle: {
+                                    type: "solid",
+                                    color: rgbaColorBar
+                                }
+                            });
                         }
                     }
                     lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
@@ -247,6 +246,11 @@
                             smooth: true,
                             symbol: 'none',
                             data: data,
+                            markLine: {
+                                symbol: "none",
+                                symbolSize :0,
+                                data: datal
+                            },
                             markPoint: {
                                 data: [
                                     { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
@@ -254,14 +258,6 @@
                                 ]
                             }
                     });
-                    tSeries.push({
-                            name: legendName,
-                            type: 'bar',
-                            smooth: true,
-                            symbol: 'none',
-                            data: datal,
-                            itemStyle: { color: rgbaColorBar }
-                    });
                 }
                 this.option.title.text = monitorInfo.result[0].server_name;
                 this.option.series = tSeries;

From a4636ed7742c65821251cc1a25a128c2eadbb620 Mon Sep 17 00:00:00 2001
From: xykt <152045469+xykt@users.noreply.github.com>
Date: Sun, 24 Mar 2024 19:20:34 +0800
Subject: [PATCH 10/14] Update network.html

---
 resource/template/theme-default/network.html | 38 ++++++++------------
 1 file changed, 14 insertions(+), 24 deletions(-)

diff --git a/resource/template/theme-default/network.html b/resource/template/theme-default/network.html
index c353a9e..56a30f9 100644
--- a/resource/template/theme-default/network.html
+++ b/resource/template/theme-default/network.html
@@ -186,15 +186,6 @@
                 let tSeries = [];
                 let tLegendData = [];
                 var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
-                let maxPing = 0;
-                for (let i = 0; i < monitorInfo.result.length; i++) {
-                	 for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                	 	avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
-                            maxPing = avgDelay;
-                        }
-                	 }
-                }
                 for (let i = 0; i < monitorInfo.result.length; i++) {
                     var lcolor = lcolors[i % lcolors.length];
                     var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
@@ -209,7 +200,15 @@
                         }
                         else {
                             loss += 1;
-                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
+                            datal.push({
+                                xAxis: monitorInfo.result[i].created_at[j],
+                                label: { show: false },
+                                emphasis: { disabled: true },
+                                lineStyle: {
+                                    type: "solid",
+                                    color: rgbaColorBar
+                                }
+                            });
                         }
                     }
                     lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
@@ -224,6 +223,11 @@
                             smooth: true,
                             symbol: 'none',
                             data: data,
+                            markLine: {
+                                symbol: "none",
+                                symbolSize :0,
+                                data: datal
+                            },
                             markPoint: {
                                 data: [
                                     { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
@@ -231,26 +235,12 @@
                                 ]
                             }
                     });
-                    tSeries.push({
-                            name: legendName,
-                            type: 'bar',
-                            smooth: true,
-                            symbol: 'none',
-                            data: datal,
-                            itemStyle: { color: rgbaColorBar }
-                    });
                 }
                 this.option.title.text = monitorInfo.result[0].server_name;
                 this.option.series = tSeries;
                 this.option.legend.data = tLegendData;
                 this.myChart.clear();
                 this.myChart.setOption(this.option);
-            },
-                this.option.title.text = monitorInfo.result[0].server_name;
-                this.option.series = tSeries;
-                this.option.legend.data = tLegendData;
-                this.myChart.clear();
-                this.myChart.setOption(this.option);
             },
             isWindowsPlatform(str) {
                 return str.includes('Windows')

From 7d4d8c46b827538c872cd6ffecfd81b510cc2091 Mon Sep 17 00:00:00 2001
From: xykt <152045469+xykt@users.noreply.github.com>
Date: Sun, 24 Mar 2024 19:21:07 +0800
Subject: [PATCH 11/14] Update network.html

---
 resource/template/theme-daynight/network.html | 38 +++++++------------
 1 file changed, 14 insertions(+), 24 deletions(-)

diff --git a/resource/template/theme-daynight/network.html b/resource/template/theme-daynight/network.html
index 6ac655b..353b1a6 100644
--- a/resource/template/theme-daynight/network.html
+++ b/resource/template/theme-daynight/network.html
@@ -268,15 +268,6 @@
                 let tSeries = [];
                 let tLegendData = [];
                 var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
-                let maxPing = 0;
-                for (let i = 0; i < monitorInfo.result.length; i++) {
-                	 for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                	 	avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
-                            maxPing = avgDelay;
-                        }
-                	 }
-                }
                 for (let i = 0; i < monitorInfo.result.length; i++) {
                     var lcolor = lcolors[i % lcolors.length];
                     var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
@@ -291,7 +282,15 @@
                         }
                         else {
                             loss += 1;
-                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
+                            datal.push({
+                                xAxis: monitorInfo.result[i].created_at[j],
+                                label: { show: false },
+                                emphasis: { disabled: true },
+                                lineStyle: {
+                                    type: "solid",
+                                    color: rgbaColorBar
+                                }
+                            });
                         }
                     }
                     lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
@@ -306,6 +305,11 @@
                             smooth: true,
                             symbol: 'none',
                             data: data,
+                            markLine: {
+                                symbol: "none",
+                                symbolSize :0,
+                                data: datal
+                            },
                             markPoint: {
                                 data: [
                                     { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
@@ -313,26 +317,12 @@
                                 ]
                             }
                     });
-                    tSeries.push({
-                            name: legendName,
-                            type: 'bar',
-                            smooth: true,
-                            symbol: 'none',
-                            data: datal,
-                            itemStyle: { color: rgbaColorBar }
-                    });
                 }
                 this.option.title.text = monitorInfo.result[0].server_name;
                 this.option.series = tSeries;
                 this.option.legend.data = tLegendData;
                 this.myChart.clear();
                 this.myChart.setOption(this.option);
-            },
-                this.option.title.text = monitorInfo.result[0].server_name;
-                this.option.series = tSeries;
-                this.option.legend.data = tLegendData;
-                this.myChart.clear();
-                this.myChart.setOption(this.option);
             },
             isWindowsPlatform(str) {
                 return str.includes('Windows')

From 0ea0c9ad8c8436622aded68847838e905beeb8b1 Mon Sep 17 00:00:00 2001
From: xykt <152045469+xykt@users.noreply.github.com>
Date: Sun, 24 Mar 2024 19:21:32 +0800
Subject: [PATCH 12/14] Update network.html

---
 .../template/theme-server-status/network.html | 32 ++++++++-----------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/resource/template/theme-server-status/network.html b/resource/template/theme-server-status/network.html
index deaa4d7..b9bd38f 100644
--- a/resource/template/theme-server-status/network.html
+++ b/resource/template/theme-server-status/network.html
@@ -172,15 +172,6 @@
                 let tSeries = [];
                 let tLegendData = [];
                 var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
-                let maxPing = 0;
-                for (let i = 0; i < monitorInfo.result.length; i++) {
-                	 for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                	 	avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                        if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
-                            maxPing = avgDelay;
-                        }
-                	 }
-                }
                 for (let i = 0; i < monitorInfo.result.length; i++) {
                     var lcolor = lcolors[i % lcolors.length];
                     var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
@@ -195,7 +186,15 @@
                         }
                         else {
                             loss += 1;
-                            datal.push([monitorInfo.result[i].created_at[j], maxPing]);
+                            datal.push({
+                                xAxis: monitorInfo.result[i].created_at[j],
+                                label: { show: false },
+                                emphasis: { disabled: true },
+                                lineStyle: {
+                                    type: "solid",
+                                    color: rgbaColorBar
+                                }
+                            });
                         }
                     }
                     lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
@@ -210,6 +209,11 @@
                             smooth: true,
                             symbol: 'none',
                             data: data,
+                            markLine: {
+                                symbol: "none",
+                                symbolSize :0,
+                                data: datal
+                            },
                             markPoint: {
                                 data: [
                                     { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
@@ -217,14 +221,6 @@
                                 ]
                             }
                     });
-                    tSeries.push({
-                            name: legendName,
-                            type: 'bar',
-                            smooth: true,
-                            symbol: 'none',
-                            data: datal,
-                            itemStyle: { color: rgbaColorBar }
-                    });
                 }
                 this.option.title.text = monitorInfo.result[0].server_name;
                 this.option.series = tSeries;

From 5a2ab8a7ee8182daf01c4a2c68a74afe15c4b828 Mon Sep 17 00:00:00 2001
From: xykt <152045469+xykt@users.noreply.github.com>
Date: Sun, 24 Mar 2024 19:26:51 +0800
Subject: [PATCH 13/14] Update network.html

---
 resource/template/theme-daynight/network.html | 345 +++++++-----------
 1 file changed, 139 insertions(+), 206 deletions(-)

diff --git a/resource/template/theme-daynight/network.html b/resource/template/theme-daynight/network.html
index 353b1a6..ed0be4e 100644
--- a/resource/template/theme-daynight/network.html
+++ b/resource/template/theme-daynight/network.html
@@ -107,199 +107,144 @@
 <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></script>
 
 <script>
-    const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
-    const initData = JSON.parse('{{.Servers}}').servers;
-    let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
-    if (MaxTCPPingValue == null) {
-        MaxTCPPingValue = 1000;
-    }
-    new Vue({
-        el: '#app',
-        delimiters: ['@#', '#@'],
-        data: {
-            page: 'network',
-            defaultTemplate: {{.Conf.Site.Theme}},
-            templates: {{.Themes}},
-            servers: initData,
-            option: {
-                tooltip: {
-                    trigger: 'axis',
-                    position: function (pt) {
-                        return [pt[0], '10%'];
-                    },
-                    formatter: function(params){
-                        let result = params[0].axisValueLabel + "<br />";
-                        params.forEach(function(item){
-                            result += item.marker + item.seriesName + ": " + item.value[1].toFixed(2) + " ms<br />";
-                         })
-                        return result;
-                    },
-                    confine: true,
-                    transitionDuration: 0
-                },
-                title: {
-                    left: 'center',
-                    text: "",
-                    textStyle: {}
-                },
-                legend: {
-                    top: '5%',
-                    data: [],
-                    textStyle: {
-                        fontSize: 14
-                    }
-                },
-                grid: {
-                    left: '8%',
-                    right: '8%',
-                },
-                backgroundColor: 'rgba(255, 255, 255, 0.8)',
-                toolbox: {
-                    feature: {
-                        dataZoom: {
-                            yAxisIndex: 'none'
+        const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
+        const initData = JSON.parse('{{.Servers}}').servers;
+        let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
+	    if (MaxTCPPingValue == null) {
+	        MaxTCPPingValue = 1000;
+	    }
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('monitor-info-container'));
+        // 使用刚指定的配置项和数据显示图表。
+        var statusCards = new Vue({
+            el: '#network',
+            delimiters: ['@#', '#@'],
+            data: {
+                servers: initData,
+                cache: [],
+                option: {
+                    tooltip: {
+                        trigger: 'axis',
+                        position: function (pt) {
+                            return [pt[0], '10%'];
                         },
-                        restore: {},
-                        saveAsImage: {}
+                        formatter: function(params){
+                            let result = params[0].axisValueLabel + "<br />";
+                            params.forEach(function(item){
+                                result += item.marker + item.seriesName + ": " + item.value[1].toFixed(2) + " ms<br />";
+                             })
+                            return result;
+                        },
+                        confine: true,
+                        transitionDuration: 0
+                    },
+                    title: {
+                        left: 'center',
+                        text: "",
+                        textStyle: {}
+                    },
+                    legend: {
+                        top: '5%',
+                        data: [],
+                        textStyle: {
+                            fontSize: 14
+                        }
+                    },
+                    toolbox: {
+                        feature: {
+                            dataZoom: {
+                                yAxisIndex: 'none'
+                            },
+                            restore: {},
+                            saveAsImage: {}
+                        }
+                    },
+                    dataZoom: [
+                        {
+                            start: 94,
+                            end: 100
+                        }
+                    ],
+                    xAxis: {
+                        type: 'time',
+                        boundaryGap: false
+                    },
+                    yAxis: {
+                        type: 'value',
+                        boundaryGap: [0, '100%']
+                    },
+                    series: [],
+                }
+            },
+            mounted() {
+                this.DarkMode();
+                this.parseMonitorInfo(monitorInfo);
+		window.addEventListener('resize', this.resizeHandle);
+            },
+	    destroyed () {
+                window.removeEventListener('resize', this.resizeHandle)
+            },
+            methods: {
+                DarkMode() {
+                    const hour = new Date(Date.now()).getHours()
+                    if (hour > 17 || hour < 4) {
+                        document.querySelector("input[name=theme]").checked = true;
+                        document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark');
+                        document.getElementById("monitor-info-container").style.backgroundColor = "#1E1E1E";
                     }
                 },
-                dataZoom: [
-                    {
-                        start: 0,
-                        end: 100
-                    }
-                ],
-                xAxis: {
-                    type: 'time',
-                    boundaryGap: false
-                },
-                yAxis: {
-                    type: 'value',
-                    boundaryGap: false
-                },
-                series: [],
-            },
-            chartOnOff: true,
-        },
-        mixins: [mixinsVue],
-        mounted() {
-            this.renderChart();
-            this.parseMonitorInfo(monitorInfo);
-            window.addEventListener('resize', this.resizeHandle);
-        },
-        destroyed () {
-            window.removeEventListener('resize', this.resizeHandle)
-        },
-        methods: {
-            getFontLogoClass(str) {
-                if (["almalinux",
-                        "alpine",
-                        "aosc",
-                        "apple",
-                        "archlinux",
-                        "archlabs",
-                        "artix",
-                        "budgie",
-                        "centos",
-                        "coreos",
-                        "debian",
-                        "deepin",
-                        "devuan",
-                        "docker",
-                        "elementary",
-                        "fedora",
-                        "ferris",
-                        "flathub",
-                        "freebsd",
-                        "gentoo",
-                        "gnu-guix",
-                        "illumos",
-                        "kali-linux",
-                        "linuxmint",
-                        "mageia",
-                        "mandriva",
-                        "manjaro",
-                        "nixos",
-                        "openbsd",
-                        "opensuse",
-                        "pop-os",
-                        "raspberry-pi",
-                        "redhat",
-                        "rocky-linux",
-                        "sabayon",
-                        "slackware",
-                        "snappy",
-                        "solus",
-                        "tux",
-                        "ubuntu",
-                        "void",
-                        "zorin"].indexOf(str)
-                    > -1) {
-                    return str;
-                }
-                if (['openwrt', 'linux', "immortalwrt"].indexOf(str) > -1) {
-                    return 'tux';
-                }
-                if (str == 'amazon') {
-                    return 'redhat';
-                }
-                if (str == 'arch') {
-                    return 'archlinux';
-                }
-                return '';
-            },
-            redirectNetwork(id) {
+                redirectNetwork(id) {
                     this.getMonitorHistory(id)
                     .then(function(monitorInfo) {
-                          var vm = app.__vue__;
+                          var vm = network.__vue__;
                           vm.parseMonitorInfo(monitorInfo);
                     })
                     .catch(function(error){
                         window.location.href = "/404";
                     })
                 },
-            getMonitorHistory(id) {
-                  return $.ajax({
-                    url: "/api/v1/monitor/"+id,
-                    method: "GET"
-                  });
-            },
-            parseMonitorInfo(monitorInfo) {
-                let tSeries = [];
-                let tLegendData = [];
-                var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
-                for (let i = 0; i < monitorInfo.result.length; i++) {
-                    var lcolor = lcolors[i % lcolors.length];
-                    var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
-                    var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)';
-                    let loss = 0;
-                    let data = [];
-                    let datal = [];
-                    for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                        avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                        if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
-                            data.push([monitorInfo.result[i].created_at[j], avgDelay]);
+                getMonitorHistory(id) {
+                      return $.ajax({
+                        url: "/api/v1/monitor/"+id,
+                        method: "GET"
+                      });
+                },
+                parseMonitorInfo(monitorInfo) {
+                    let tSeries = [];
+                    let tLegendData = [];
+                    var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
+                    for (let i = 0; i < monitorInfo.result.length; i++) {
+                        var lcolor = lcolors[i % lcolors.length];
+                        var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
+                        var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)';
+                        let loss = 0;
+                        let data = [];
+                        let datal = [];
+                        for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
+                            avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
+                            if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
+                                data.push([monitorInfo.result[i].created_at[j], avgDelay]);
+                            }
+                            else {
+                                loss += 1;
+                                datal.push({
+                                    xAxis: monitorInfo.result[i].created_at[j],
+                                    label: { show: false },
+                                    emphasis: { disabled: true },
+                                    lineStyle: {
+                                        type: "solid",
+                                        color: rgbaColorBar
+                                    }
+                                });
+                            }
                         }
-                        else {
-                            loss += 1;
-                            datal.push({
-                                xAxis: monitorInfo.result[i].created_at[j],
-                                label: { show: false },
-                                emphasis: { disabled: true },
-                                lineStyle: {
-                                    type: "solid",
-                                    color: rgbaColorBar
-                                }
-                            });
+                        lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
+                        if (lossRate > 99) {
+                            datal = [];
                         }
-                    }
-                    lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
-                    if (lossRate > 99) {
-                        datal = [];
-                    }
-                    legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
-                    tLegendData.push(legendName);
-                    tSeries.push({
+                        legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
+                        tLegendData.push(legendName);
+                        tSeries.push({
                             name: legendName,
                             type: 'line',
                             smooth: true,
@@ -316,31 +261,20 @@
                                     { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
                                 ]
                             }
-                    });
-                }
-                this.option.title.text = monitorInfo.result[0].server_name;
-                this.option.series = tSeries;
-                this.option.legend.data = tLegendData;
-                this.myChart.clear();
-                this.myChart.setOption(this.option);
-            },
-            isWindowsPlatform(str) {
-                return str.includes('Windows')
-            },
-            renderChart() {
-              this.myChart = echarts.init(this.$refs.chartDom);
-              this.myChart.setOption(this.option);
-            },
-            resizeHandle () {
-              this.myChart.resize();
-            },
-        },
-        beforeDestroy() {
-            this.myChart.dispose();
-            this.myChart = null;
-        },
-    });
-</script>
+                        });
+                    }
+                    this.option.title.text = monitorInfo.result[0].server_name;
+                    this.option.series = tSeries;
+                    this.option.legend.data = tLegendData;
+                    this.myChart.clear();
+                    this.myChart.setOption(this.option);
+                },
+	            resizeHandle () {
+                    this.myChart.resize();
+                },
+            }
+        });
+    </script>
 </body>
 <style>
 #network {
@@ -363,4 +297,3 @@
 
 </html>
 {{end}}
-

From 6c718c4f38c01a8fc192c217daa4458f46961870 Mon Sep 17 00:00:00 2001
From: naiba <hi@nai.ba>
Date: Sun, 24 Mar 2024 22:45:56 +0800
Subject: [PATCH 14/14] Remove redundant code for MaxTCPPingValue
 initialization

---
 resource/template/theme-daynight/network.html | 233 +++++++++---------
 resource/template/theme-default/network.html  |   3 -
 resource/template/theme-mdui/network.html     |   3 -
 .../template/theme-server-status/network.html |   3 -
 4 files changed, 117 insertions(+), 125 deletions(-)

diff --git a/resource/template/theme-daynight/network.html b/resource/template/theme-daynight/network.html
index ed0be4e..5976f85 100644
--- a/resource/template/theme-daynight/network.html
+++ b/resource/template/theme-daynight/network.html
@@ -20,101 +20,101 @@
 </head>
 
 <body data-theme="light" data-gridlist="grid">
-<header>
-    <section class="nav-bar clearfix">
-        <figure class="logo">
-            <a href="/">
-                <img src="/static/logo.svg?v20210804" alt='{{tr "NezhaMonitoring"}}' width="50" height="50">
-            </a>
-            <a href="/">{{.Conf.Site.Brand}}</a>
-        </figure>
-        <div class="icon-container">
-            <div class="row cf">
-                <div class="three col">
-                    <div class="hamburger" id="hamburger-icon"><span class="line"></span><span
-                            class="line"></span><span class="line"></span></div>
+    <header>
+        <section class="nav-bar clearfix">
+            <figure class="logo">
+                <a href="/">
+                    <img src="/static/logo.svg?v20210804" alt='{{tr "NezhaMonitoring"}}' width="50" height="50">
+                </a>
+                <a href="/">{{.Conf.Site.Brand}}</a>
+            </figure>
+            <div class="icon-container">
+                <div class="row cf">
+                    <div class="three col">
+                        <div class="hamburger" id="hamburger-icon"><span class="line"></span><span
+                                class="line"></span><span class="line"></span></div>
+                    </div>
+                </div>
+            </div>
+            <nav class="nav-menu">
+                <ul>
+                    <li><a href="/">{{tr "Home"}}</a></li>
+                    <li><a href="/service">{{tr "Services"}}</a></li>
+                    <li><a href="/network">{{tr "NetworkSpiter"}}</a></li>
+                    {{if .Admin}}
+                    <li><a href="/server">{{tr "AdminPanel"}}</a></li>
+                    {{else}}
+                    <li><a href="/login">{{tr "Login"}}</a></li>
+                    {{end}}
+                </ul>
+            </nav>
+        </section>
+    </header>
+
+    <main>
+        <div id="network">
+            <div class="server-info-container" v-for='server in servers' :id="server.ID">
+                <div class="info-body" @click="redirectNetwork(server.ID)">
+                    <ul class="server-info-body-container">
+                        <li>
+                            <h3>@#server.Name#@</h3>
+                        </li>
+                        <li><img :src="'/static/theme-daynight/img/flag/'+(server.Host&&server.Host.CountryCode?server.Host.CountryCode.toUpperCase():'CN')+'.png'"
+                                :title="server.Host.CountryCode.toUpperCase()" /></li>
+                    </ul>
                 </div>
             </div>
         </div>
-        <nav class="nav-menu">
-            <ul>
-                <li><a href="/">{{tr "Home"}}</a></li>
-                <li><a href="/service">{{tr "Services"}}</a></li>
-                <li><a href="/network">{{tr "NetworkSpiter"}}</a></li>
-                {{if .Admin}}
-                <li><a href="/server">{{tr "AdminPanel"}}</a></li>
-                {{else}}
-                <li><a href="/login">{{tr "Login"}}</a></li>
-                {{end}}
-            </ul>
-        </nav>
-    </section>
-</header>
-
-<main>
-    <div id="network">
-        <div class="server-info-container" v-for='server in servers' :id="server.ID" style="font-size: .6em">
-            <div class="info-body" @click="redirectNetwork(server.ID)">
-                <ul class="server-info-body-container">
-                    <li>
-                        <h3>@#server.Name#@</h3>
-                    </li>
-                    <li><img :src="'/static/theme-daynight/img/flag/'+(server.Host&&server.Host.CountryCode?server.Host.CountryCode.toUpperCase():'CN')+'.png'"
-                             :title="server.Host.CountryCode.toUpperCase()" /></li>
-                </ul>
+        <div class="network-chart" style="height: 800px;overflow: hidden">
+            <div id="monitor-info-container" style="height: 520px;max-width: 1400px">
             </div>
         </div>
-    </div>
-    <div class="network-chart" style="height: 800px;overflow: hidden">
-        <div id="monitor-info-container" style="height: 520px;max-width: 1400px">
+        <div class="sidebar-container">
+            <ul>
+                <li><i class="fas fa-sun" title='{{tr "LightMode"}}'></i><span>{{tr "LightMode"}}</span></li>
+                <li><i class="fas fa-moon" title='{{tr "DarkMode"}}'></i><span>{{tr "DarkMode"}}</span></li>
+                <li><i class="fas fa-th" title='{{tr "GridLayout"}}'></i><span>{{tr "GridLayout"}}</span></li>
+                <li><i class="fas fa-list-ul" title='{{tr "ListLayout"}}'></i><span>{{tr "ListLayout"}}</span></li>
+            </ul>
         </div>
-    </div>
-    <div class="sidebar-container">
-        <ul>
-            <li><i class="fas fa-sun" title='{{tr "LightMode"}}'></i><span>{{tr "LightMode"}}</span></li>
-            <li><i class="fas fa-moon" title='{{tr "DarkMode"}}'></i><span>{{tr "DarkMode"}}</span></li>
-            <li><i class="fas fa-th" title='{{tr "GridLayout"}}'></i><span>{{tr "GridLayout"}}</span></li>
-            <li><i class="fas fa-list-ul" title='{{tr "ListLayout"}}'></i><span>{{tr "ListLayout"}}</span></li>
-        </ul>
-    </div>
-</main>
+    </main>
 
-<section class="dark-light-toggle">
-    <label class="switcher">
-        <input type="checkbox" name="theme" id="dark-light" />
-        <div>
-            <i class="fas fa-adjust"></i>
-        </div>
-    </label>
-</section>
+    <section class="dark-light-toggle">
+        <label class="switcher">
+            <input type="checkbox" name="theme" id="dark-light" />
+            <div>
+                <i class="fas fa-adjust"></i>
+            </div>
+        </label>
+    </section>
 
-<!-- Back to top button -->
-<a id="back-to-top"></a>
+    <!-- Back to top button -->
+    <a id="back-to-top"></a>
 
-<footer>
-    <div class="footer-container">
-        <div><a href="https://github.com/naiba/nezha" target="_blank">Powered by {{tr "NezhaMonitoring"}} · {{.Version}}</a>
-            <p>&copy; <span id="copyright-date">
+    <footer>
+        <div class="footer-container">
+            <div><a href="https://github.com/naiba/nezha" target="_blank">Powered by {{tr "NezhaMonitoring"}} ·
+                    {{.Version}}</a>
+                <p>&copy; <span id="copyright-date">
                         <script>document.getElementById('copyright-date').appendChild(document.createTextNode(new Date().getFullYear()))</script>
                     </span> · <a href="https://blog.jackiesung.com" target="_blank">Theme designed by Jackie Sung</a>
-            </p>
+                </p>
+            </div>
         </div>
-    </div>
-</footer>
+    </footer>
 
-<script src="/static/theme-daynight/js/main.js?v202102012266"></script>
-<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script>
-<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></script>
+    <script src="/static/theme-daynight/js/main.js?v202102012266"></script>
+    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script>
+    <script
+        src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></script>
 
-<script>
-        const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
+    <script>
+        const monitorInfo = JSON.parse('{{.MonitorInfos}}');
         const initData = JSON.parse('{{.Servers}}').servers;
         let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
-	    if (MaxTCPPingValue == null) {
-	        MaxTCPPingValue = 1000;
-	    }
         // 基于准备好的dom，初始化echarts实例
-        var myChart = echarts.init(document.getElementById('monitor-info-container'));
+        const myChart = echarts.init(document.getElementById('monitor-info-container'));
+
         // 使用刚指定的配置项和数据显示图表。
         var statusCards = new Vue({
             el: '#network',
@@ -128,11 +128,11 @@
                         position: function (pt) {
                             return [pt[0], '10%'];
                         },
-                        formatter: function(params){
+                        formatter: function (params) {
                             let result = params[0].axisValueLabel + "<br />";
-                            params.forEach(function(item){
+                            params.forEach(function (item) {
                                 result += item.marker + item.seriesName + ": " + item.value[1].toFixed(2) + " ms<br />";
-                             })
+                            })
                             return result;
                         },
                         confine: true,
@@ -179,9 +179,9 @@
             mounted() {
                 this.DarkMode();
                 this.parseMonitorInfo(monitorInfo);
-		window.addEventListener('resize', this.resizeHandle);
+                window.addEventListener('resize', this.resizeHandle);
             },
-	    destroyed () {
+            destroyed() {
                 window.removeEventListener('resize', this.resizeHandle)
             },
             methods: {
@@ -195,19 +195,19 @@
                 },
                 redirectNetwork(id) {
                     this.getMonitorHistory(id)
-                    .then(function(monitorInfo) {
-                          var vm = network.__vue__;
-                          vm.parseMonitorInfo(monitorInfo);
-                    })
-                    .catch(function(error){
-                        window.location.href = "/404";
-                    })
+                        .then(function (monitorInfo) {
+                            var vm = network.__vue__;
+                            vm.parseMonitorInfo(monitorInfo);
+                        })
+                        .catch(function (error) {
+                            window.location.href = "/404";
+                        })
                 },
                 getMonitorHistory(id) {
-                      return $.ajax({
-                        url: "/api/v1/monitor/"+id,
+                    return $.ajax({
+                        url: "/api/v1/monitor/" + id,
                         method: "GET"
-                      });
+                    });
                 },
                 parseMonitorInfo(monitorInfo) {
                     let tSeries = [];
@@ -242,7 +242,7 @@
                         if (lossRate > 99) {
                             datal = [];
                         }
-                        legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
+                        legendName = monitorInfo.result[i].monitor_name + " " + lossRate + "%";
                         tLegendData.push(legendName);
                         tSeries.push({
                             name: legendName,
@@ -252,7 +252,7 @@
                             data: data,
                             markLine: {
                                 symbol: "none",
-                                symbolSize :0,
+                                symbolSize: 0,
                                 data: datal
                             },
                             markPoint: {
@@ -266,34 +266,35 @@
                     this.option.title.text = monitorInfo.result[0].server_name;
                     this.option.series = tSeries;
                     this.option.legend.data = tLegendData;
-                    this.myChart.clear();
-                    this.myChart.setOption(this.option);
+                    myChart.clear();
+                    myChart.setOption(this.option);
                 },
-	            resizeHandle () {
-                    this.myChart.resize();
+                resizeHandle() {
+                    myChart.resize();
                 },
             }
         });
     </script>
 </body>
 <style>
-#network {
-    display: grid;
-    /*grid-template-columns: repeat(5, 1fr);*/
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-    grid-gap: 1em;
-    width: 100%;
-    width: calc(100vw - 6em);
-    max-width: 1400px;
-    margin: 1em auto;
-    align-content: start;
-}
-#monitor-info-container{
-    margin: 0em auto;
-    align-content: start;
-    background-color: #F1F1F2;
-}
+    #network {
+        width: calc(100vw - 6em);
+        max-width: 1400px;
+        margin: 1em auto;
+    }
+
+    #monitor-info-container {
+        margin: 0em auto;
+        align-content: start;
+        background-color: #F1F1F2;
+    }
+
+    .server-info-container {
+        font-size: .6em;
+        width: fit-content;
+        display: inline-block;
+    }
 </style>
 
 </html>
-{{end}}
+{{end}}
\ No newline at end of file
diff --git a/resource/template/theme-default/network.html b/resource/template/theme-default/network.html
index 56a30f9..d7490b6 100644
--- a/resource/template/theme-default/network.html
+++ b/resource/template/theme-default/network.html
@@ -28,9 +28,6 @@
     const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
     const initData = JSON.parse('{{.Servers}}').servers;
     let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
-    if (MaxTCPPingValue == null) {
-        MaxTCPPingValue = 1000;
-    }
     new Vue({
         el: '#app',
         delimiters: ['@#', '#@'],
diff --git a/resource/template/theme-mdui/network.html b/resource/template/theme-mdui/network.html
index b9e19b5..5e9a6e3 100644
--- a/resource/template/theme-mdui/network.html
+++ b/resource/template/theme-mdui/network.html
@@ -55,9 +55,6 @@
     const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
     const initData = JSON.parse('{{.Servers}}').servers;
     let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
-    if (MaxTCPPingValue == null) {
-        MaxTCPPingValue = 1000;
-    }
     new Vue({
         el: '#app',
         delimiters: ['@#', '#@'],
diff --git a/resource/template/theme-server-status/network.html b/resource/template/theme-server-status/network.html
index b9bd38f..1c2dea5 100644
--- a/resource/template/theme-server-status/network.html
+++ b/resource/template/theme-server-status/network.html
@@ -22,9 +22,6 @@
     const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
     const initData = JSON.parse('{{.Servers}}').servers;
     let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
-    if (MaxTCPPingValue == null) {
-        MaxTCPPingValue = 1000;
-    }
     new Vue({
         el: '#app',
         delimiters: ['@#', '#@'],