Refactor net.html to extract the creation of main div into a separate…

… function and update network speed chart rendering URL and improve axis line style
arloor · Oct 26, 2024 · 33e7014 · 33e7014
1 parent 300037e
commit 33e7014
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 40 deletions.
diff --git a/rust_http_proxy/html/net.html b/rust_http_proxy/html/net.html
@@ -78,8 +78,28 @@ <h1 class="in"></h1>
             return value;
         }
         var baseSeries = {
-            itemStyle: {
-                color: '#ef0000',
+            // itemStyle: {
+            //     color: '#ef0000',
+            // },
+            "markLine": {
+                "data": [{
+                    "type": "average",
+                    "name": "平均值"
+                }],
+                "label": {
+                    formatter: value => formatDataRateIEC(value.value, 4)
+                }
+            },
+            "markPoint": {
+                "data": [{
+                    "type": "max",
+                    "name": "最大值"
+                }],
+                symbol: "roundRect",
+                symbolSize: [70, 30],
+                "label": {
+                    formatter: value => formatDataRateIEC(value.value, 4)
+                }
             },
             "smooth": true,
             "type": "line"
@@ -91,41 +111,14 @@ <h1 class="in"></h1>
                 recreateMainDivAndClearChart().innerHTML = '<h1 class="in">暂无数据，请等待' + intervalInSecond * 2 + '秒</h1>';
                 return;
             }
-            var series = [
-                {
+            let series = []
+            data.series_vec.forEach(ele => {
+                series.push({
                     ...baseSeries,
-                    "data": data.series_up,
-                    "name": "上行网速",
-                    "markLine": {
-                        "data": [{
-                            "type": "average",
-                            "name": "平均值"
-                        }],
-                        "label": {
-                            formatter: value => formatDataRateIEC(value.value, 4)
-                        }
-                    },
-                    "markPoint": {
-                        "data": [{
-                            "type": "max",
-                            "name": "最大值"
-                        }],
-                        symbol: "roundRect",
-                        symbolSize: [70, 30],
-                        "label": {
-                            formatter: value => formatDataRateIEC(value.value, 4)
-                        }
-                    },
-                },
-                {
-                    ...baseSeries,
-                    "data": data.series_down,
-                    "name": "下行网速",
-                    itemStyle: {
-                        color: '#5bf',
-                    },
-                },
-            ];
+                    "data": ele.data,
+                    "name": ele.name,
+                });
+            });
             let max = series.map(s => s.data).flat().reduce((a, b) => Math.max(a, b));
             var c = Math.floor(Math.log(max) / Math.log(1024));
             let interval = Math.pow(1024, c);

diff --git a/rust_http_proxy/src/linux_monitor.rs b/rust_http_proxy/src/linux_monitor.rs
@@ -67,8 +67,16 @@ impl NetMonitor {
         }
         Snapshot {
             scales,
-            series_up,
-            series_down,
+            series_vec: vec![
+                Series {
+                    name: "上行网速".to_string(),
+                    data: series_up,
+                },
+                Series {
+                    name: "下行网速".to_string(),
+                    data: series_down,
+                },
+            ],
         }
     }
 
@@ -168,8 +176,13 @@ impl NetMonitor {
 #[derive(Serialize)]
 pub struct Snapshot {
     scales: Vec<String>,
-    series_up: Vec<u64>,
-    series_down: Vec<u64>,
+    series_vec: Vec<Series>,
+}
+
+#[derive(Serialize)]
+pub struct Series {
+    name: String,
+    data: Vec<u64>,
 }
 
 pub fn count_stream() -> Result<Response<BoxBody<Bytes, io::Error>>, Error> {