From 61127b3435228e2814ae605c9550cc392ac0962f Mon Sep 17 00:00:00 2001
From: nap0o <144927971+nap0o@users.noreply.github.com>
Date: Tue, 25 Jun 2024 10:16:32 -0400
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96server-status=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E9=A6=96=E9=A1=B5=E7=BD=91=E7=BB=9C=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=20(#378)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../template/theme-server-status/home.html    | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/resource/template/theme-server-status/home.html b/resource/template/theme-server-status/home.html
index df34b0b..3c015cd 100644
--- a/resource/template/theme-server-status/home.html
+++ b/resource/template/theme-server-status/home.html
@@ -533,6 +533,21 @@
                         connectNulls: true
                     };
                 });
+
+                const legendData = chartData.map(item => item.monitor_name);
+                const maxLegendsPerRowMobile = localStorage.getItem("maxLegendsPerRowMobile") ? localStorage.getItem("maxLegendsPerRowMobile") : 3;
+                const maxLegendsPerRowPc = localStorage.getItem("maxLegendsPerRowPc") ? localStorage.getItem("maxLegendsPerRowPc") : 6;
+                const autoIncrement = Math.floor((legendData.length - 1) / (isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (isMobile ? 20 : 28)
+                const height = 300 + autoIncrement;
+                const gridTop = 40 + autoIncrement;
+                const legendIcon = isMobile ? 'rect' : ""; 
+                const itemWidth = isMobile ? 10 : 25;
+                const itemHeight = isMobile ? 10 : 14;
+                chart.resize({
+                    width: 'auto',
+                    height: height
+                });
+
                 const option = {
                     backgroundColor: backgroundColor,
                     title: {
@@ -548,8 +563,9 @@
                         }
                     },
                     legend: {
-                        data: chartData.map(item => item.monitor_name),
+                        data: legendData,
                         show: true,
+                        icon: legendIcon,
                         textStyle: {
                             fontSize: fontSize,
                             color: fontColor
@@ -557,7 +573,9 @@
                         top: legendTop,
                         bottom: 0,
                         left: legendLeft,
-                        padding: legendPadding
+                        padding: legendPadding,
+                        itemWidth: itemWidth,
+                        itemHeight: itemHeight,
                     },
                     xAxis: {
                         type: 'time',
@@ -589,7 +607,7 @@
                         color: fontColor
                     },
                     grid: {
-                        top: '40',
+                        top: gridTop,
                         left: gridLeft,
                         right: gridRight
                     }