there are two lines

technically i have completed the objective

Author: Hqllow

client/src/pages/Strategy.tsx

@@ -38,20 +38,22 @@ function Strategy() {
   } catch {}
 
   let [searchParams, setSearchParams] = useSearchParams();
-  const [data, setData] = useState([]);
+  const [data, setData] = useState<
+    { createdAt: string; dateStamp: number; dataKey: number }[]
+  >([]);
   const [telemetryType, setTelemetryType] = useState(localGraph["type"] ?? []);
   const [messageNumber, setMessageNumber] = useState(
-    localGraph["number"] ?? [],
+    localGraph["number"] ?? []
   );
   const [dataKey, setDataKey] = useState(localGraph["key"] ?? []);
   const [startTime, setStartTime] = useState(
-    localGraph["start"] ?? "2023-04-16 12:00",
+    localGraph["start"] ?? "2023-04-16 12:00"
   );
   const [endTime, setEndTime] = useState(
-    localGraph["end"] ?? "2023-04-16 12:10",
+    localGraph["end"] ?? "2023-04-16 12:10"
   );
   const autoUpdate = JSON.parse(
-    localStorage.getItem("toggleAutoUpdate") ?? "true",
+    localStorage.getItem("toggleAutoUpdate") ?? "true"
   );
   const [regStartTime, setRegStartTime] = useState("2023-04-16 12:00");
   const [regEndTime, setRegEndTime] = useState("2023-04-16 12:10");
@@ -76,7 +78,7 @@ function Strategy() {
         value: combinedString,
         label: combinedString,
       };
-    }),
+    })
   );
   const [rawData, setRawData] = useState<any[]>([]);
   const [rawData2, setRawData2] = useState<any[]>([]);
@@ -136,7 +138,7 @@ function Strategy() {
             $gte: moment(startTime).utc().format("YYYY-MM-DD HH:mm"),
             $lte: moment(endTime).utc().format("YYYY-MM-DD HH:mm"),
           },
-        },
+        }
       );
     } else {
       result = await getAllModuleItem(
@@ -148,7 +150,7 @@ function Strategy() {
             $gte: moment(startTime).utc().format("YYYY-MM-DD HH:mm"),
             $lte: moment(endTime).utc().format("YYYY-MM-DD HH:mm"),
           },
-        },
+        }
       );
     }
     setRawData2(result2);
@@ -158,7 +160,7 @@ function Strategy() {
   }
 
   async function modifyData() {
-    const data = {
+    const metadata = {
       key: dataKey,
       type: telemetryType,
       number: messageNumber,
@@ -172,9 +174,9 @@ function Strategy() {
     )
       return;
 
-    setSearchParams(data);
+    setSearchParams(metadata);
 
-    localStorage.setItem("graph", JSON.stringify(data));
+    localStorage.setItem("graph", JSON.stringify(metadata));
 
     const response = rawData;
     const response2 = rawData2;
@@ -204,7 +206,7 @@ function Strategy() {
         "battVoltage",
         response2,
         "motorCurrentPkAvg",
-        dataKey,
+        dataKey
       );
     } else {
       toTransform = response;
@@ -217,34 +219,34 @@ function Strategy() {
         .map((dataPoint) => ({
           ...dataPoint,
           dateStamp: Math.floor(
-            new Date(dataPoint["createdAt"]).getTime() / granularityMs,
+            new Date(dataPoint["createdAt"]).getTime() / granularityMs
           ),
         }))
         .filter(
           (dataPoint) =>
             dataPoint[dataKey[latestStatChange]] >= minTrimVal &&
-            dataPoint[dataKey[latestStatChange]] <= maxTrimVal,
+            dataPoint[dataKey[latestStatChange]] <= maxTrimVal
         );
     } else {
       filteredResponseTemp = toTransform.map((dataPoint) => ({
         ...dataPoint,
         dateStamp: Math.floor(
-          new Date(dataPoint["createdAt"]).getTime() / granularityMs,
+          new Date(dataPoint["createdAt"]).getTime() / granularityMs
         ),
       }));
     }
 
     const filteredResponse = filteredResponseTemp.reduce(
       (accumulator, currentValue) => {
         const duplicateDateStamp = accumulator.find(
-          (item) => item.dateStamp === currentValue.dateStamp,
+          (item) => item.dateStamp === currentValue.dateStamp
         );
         if (!duplicateDateStamp) {
           accumulator.push(currentValue);
         }
         return accumulator;
       },
-      [],
+      []
     );
 
     let sum = 0;
@@ -275,15 +277,14 @@ function Strategy() {
 
     try {
       startTimestamp = new Date(
-        filteredResponse[0]["dateStamp"] * granularityMs,
+        filteredResponse[0]["dateStamp"] * granularityMs
       ).getTime();
     } catch {
       return;
     }
 
     const endTimestamp = new Date(
-      filteredResponse[filteredResponse.length - 1]["dateStamp"] *
-        granularityMs,
+      filteredResponse[filteredResponse.length - 1]["dateStamp"] * granularityMs
     ).getTime();
 
     const givenTimespan = endTimestamp - startTimestamp;
@@ -301,12 +302,12 @@ function Strategy() {
 
     const regStartStamp = Math.max(
       oldRegStartStamp,
-      (startTimestamp + 3600000) / granularityMs,
+      (startTimestamp + 3600000) / granularityMs
     );
 
     const regEndStamp = Math.min(
       oldRegEndStamp,
-      (endTimestamp + 3600000) / granularityMs,
+      (endTimestamp + 3600000) / granularityMs
     );
 
     let filteredRegResponse;
@@ -315,18 +316,18 @@ function Strategy() {
       filteredRegResponse = filteredResponse.filter(
         (dataPoint) =>
           dataPoint["dateStamp"] >= regStartStamp - 3600000 / granularityMs &&
-          dataPoint["dateStamp"] <= regEndStamp - 3600000 / granularityMs,
+          dataPoint["dateStamp"] <= regEndStamp - 3600000 / granularityMs
       );
     } else {
       filteredRegResponse = filteredResponse;
     }
 
     const regXValues = filteredRegResponse.map(
-      (dataPoint) => dataPoint["dateStamp"],
+      (dataPoint) => dataPoint["dateStamp"]
     );
 
     const regYValues = filteredRegResponse.map(
-      (dataPoint) => dataPoint[dataKey[latestStatChange]],
+      (dataPoint) => dataPoint[dataKey[latestStatChange]]
     );
 
     const lastValue =
@@ -353,7 +354,7 @@ function Strategy() {
 
     let scaledXAxis = Array.from(
       { length: xValues.length * toExtrapolate },
-      (_, i) => i,
+      (_, i) => i
     );
 
     const xValGap =
@@ -393,7 +394,7 @@ function Strategy() {
 
     if (toExtrapolate > 1) {
       setDerivedRegressionEnd(
-        extendedRegression[extendedRegression.length - 1]["regression"],
+        extendedRegression[extendedRegression.length - 1]["regression"]
       );
     } else {
       setDerivedRegressionEnd(0);
@@ -405,7 +406,7 @@ function Strategy() {
       finalToGraph = extendedRegression.map((dataPoint) => ({
         ...dataPoint,
         createdAt: new Date(
-          dataPoint["dateStamp"] * granularityMs,
+          dataPoint["dateStamp"] * granularityMs
         ).toISOString(),
         regRange:
           dataPoint["dateStamp"] >= regStartStamp - 3600000 / granularityMs &&
@@ -417,14 +418,12 @@ function Strategy() {
       finalToGraph = extendedRegression.map((dataPoint) => ({
         ...dataPoint,
         createdAt: new Date(
-          dataPoint["dateStamp"] * granularityMs,
+          dataPoint["dateStamp"] * granularityMs
         ).toISOString(),
       }));
     }
 
-    setData(finalToGraph as any);
-    console.log(data);
-    console.log(dataKey);
+    setData((prevData) => [...prevData, ...finalToGraph]);
     setIsPressed(false);
   }
 
@@ -471,7 +470,7 @@ function Strategy() {
 
     if (actionMeta.option) {
       const changedIndex = selectedOptions.findIndex(
-        (option) => option.value === actionMeta.option.value,
+        (option) => option.value === actionMeta.option.value
       );
       setLatestStatChange(changedIndex);
     } else {
@@ -795,7 +794,7 @@ function Strategy() {
               defaultValue={granularityMs}
               onBlur={(event) =>
                 setGranularityMs(
-                  parseInt((event.target as HTMLInputElement).value),
+                  parseInt((event.target as HTMLInputElement).value)
                 )
               }
               onFocus={(event) => event.target.select()}
@@ -823,7 +822,7 @@ function Strategy() {
                 onFocus={(event) => event.target.select()}
                 onBlur={(event) =>
                   setMaxTrimVal(
-                    parseInt((event.target as HTMLInputElement).value),
+                    parseInt((event.target as HTMLInputElement).value)
                   )
                 }
                 onKeyDown={(event) => {
@@ -850,7 +849,7 @@ function Strategy() {
                 defaultValue={minTrimVal}
                 onBlur={(event) =>
                   setMinTrimVal(
-                    parseInt((event.target as HTMLInputElement).value),
+                    parseInt((event.target as HTMLInputElement).value)
                   )
                 }
                 onFocus={(event) => event.target.select()}