From 51ef7fe4ea5a612dc59a0f9ca3ce040edbc49fa4 Mon Sep 17 00:00:00 2001
From: heheer <71265218+newfish-cmyk@users.noreply.github.com>
Date: Fri, 10 Nov 2023 16:57:00 +0800
Subject: [PATCH] fix(web): fix monitor mergeArrays (#1675)

* fix(web): fix padding array with front and end

* delete console
---
 .../SysSetting/AppMonitor/AreaCard/index.tsx  | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/app/setting/SysSetting/AppMonitor/AreaCard/index.tsx b/web/src/pages/app/setting/SysSetting/AppMonitor/AreaCard/index.tsx
index ba36c0029e..9399bd96c9 100644
--- a/web/src/pages/app/setting/SysSetting/AppMonitor/AreaCard/index.tsx
+++ b/web/src/pages/app/setting/SysSetting/AppMonitor/AreaCard/index.tsx
@@ -43,16 +43,28 @@ const strokeColorArray = [
 function mergeArrays(arrays: any) {
   let mergedArray: any = [];
   const maxLength = Math.max(...arrays.map((arr: any) => arr.length));
+  const longestArray = arrays.find((arr: any) => arr.length === maxLength);
   const newArrays = arrays.map((arr: any) => {
-    const padding = maxLength - arr.length;
-    const paddedArray = new Array(padding).fill({ xData: 0 }).concat(arr);
-    return paddedArray;
+    let frontPadding = 0;
+    let endPadding = 0;
+    for (let i = 0; i < longestArray.length; i++) {
+      if (longestArray[i].xData === arr[0].xData) {
+        frontPadding = i;
+      } else if (longestArray[i].xData === arr[arr.length - 1].xData) {
+        endPadding = longestArray.length - i - 1;
+      }
+    }
+    return [
+      ...Array(frontPadding).fill({ xData: 0 }),
+      ...arr,
+      ...Array(endPadding).fill({ xData: 0 }),
+    ];
   });
 
   for (let i = maxLength - 1; i >= 0; i--) {
     let mergedElement = { xData: 0 };
     for (let j = 0; j < newArrays.length; j++) {
-      if (newArrays[j][i].xData > 0) {
+      if (newArrays[j][i]?.xData > 0) {
         mergedElement.xData = newArrays[j][i].xData;
         // @ts-ignore
         mergedElement[`value${j}`] = newArrays[j][i][`value${j}`];