ui fixes

src/lib/components/Table/Table.svelte

@@ -49,7 +49,7 @@
   let downloadWorker: Worker | undefined;
   let checkedItems;
 
-  let stockList = rawData?.slice(0, 150);
+  let stockList = originalData?.slice(0, 150);
   let scrollPosition = 0;
   //$: stockList = originalData.slice(0, 150);
 

src/lib/utils.ts

@@ -194,20 +194,21 @@ export const groupNews = (news, watchList) => {
 };
 
 
-export const calculateChange = (oldList?: any[], newList?: any[]) => {
+export const calculateChange = (oldList = [], newList = []) => {
-  if (!oldList?.length || !newList?.length) return [...(oldList || [])];
+  if (!oldList.length || !newList.length) return [...oldList];
 
+  // Create a Map for fast lookups of new list items by symbol
   const newListMap = new Map(newList.map((item) => [item.symbol, item]));
-  const updatedList = [];
 
-  for (let i = 0; i < oldList.length; i++) {
+  return oldList.map((item) => {
-    const item = oldList[i];
     const newItem = newListMap.get(item.symbol);
 
-    if (newItem?.avgPrice) {
+    // Check if the symbols match and the newItem has the necessary properties
+    if (newItem && newItem.symbol === item.symbol && newItem.avgPrice) {
       const { price, changesPercentage } = item;
       const newPrice = newItem.avgPrice;
 
+      // Only update the changesPercentage if both price and changesPercentage are defined
       if (price != null && changesPercentage != null) {
         const baseLine = price / (1 + Number(changesPercentage) / 100);
         item.changesPercentage = ((newPrice / baseLine - 1) * 100);
@@ -217,40 +218,42 @@ export const calculateChange = (oldList?: any[], newList?: any[]) => {
       item.price = newPrice;
     }
 
-    updatedList.push(item);
+    return item;
-  }
+  });
-
-  return updatedList;
 };
 
 
 
-export function updateStockList(stockList, originalData) {
+export function updateStockList(stockList = [], originalData = []) {
-    // Create a Map for O(1) lookup of original data by symbol
+  // Create a Map for fast O(1) lookups of original data by symbol
-    const originalDataMap = new Map(
+  const originalDataMap = new Map(originalData.map(item => [item.symbol, item]));
-        originalData?.map(item => [item.symbol, item])
-    );
 
-    // Use .map() to create a new array with updated stocks
+  // Initialize an array to store the updated stock list
-    return stockList?.map(stock => {
+  const updatedStockList = [];
-        // Find matching stock in originalData
+
+  // Iterate through each stock in the stockList
+  for (let i = 0; i < stockList.length; i++) {
+    const stock = stockList[i];
     const matchingStock = originalDataMap?.get(stock?.symbol);
-
+    // If a matching stock is found, update it
-        // If a match is found, update price and changesPercentage
     if (matchingStock) {
-            return {
+      updatedStockList.push({
         ...stock,
-                price: matchingStock?.price,
+        price: matchingStock.price,
-                changesPercentage: matchingStock?.changesPercentage,
+        changesPercentage: matchingStock.changesPercentage,
-                previous: matchingStock?.previous ?? null,
+        previous: matchingStock.previous ?? null,
-            };
+      });
+    } else {
+      // If no match, add the stock unchanged
+      updatedStockList.push(stock);
+    }
   }
 
-        // If no match, return the original stock object unchanged
+  // Return the updated stock list
-        return stock;
+  return updatedStockList;
-    });
 }
 
+
 export const flyAndScale = (
   node: Element,
   params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 0 },

src/routes/etf/[tickerID]/holdings/+page.server.ts

@@ -1,5 +1,5 @@
 export const load = async ({ locals, params }) => {
-  const { apiKey, apiURL, user } = locals;
+  const { apiKey, apiURL } = locals;
   const getETFHoldings = async () => {
     const postData = {
       ticker: params.tickerID,
@@ -17,6 +17,7 @@ export const load = async ({ locals, params }) => {
 
     const output = await response.json();
 
+
     return output;
   };
 

src/routes/etf/[tickerID]/holdings/+page.svelte

@@ -8,7 +8,8 @@
   import Table from "$lib/components/Table/Table.svelte";
 
   export let data;
-  let rawData = data?.getETFHoldings?.holdings || [];
+  let rawData = data?.getETFHoldings?.holdings;
+
   const lastUpdate = new Date(data?.getETFHoldings?.lastUpdate);
   const options = { month: "short", day: "numeric", year: "numeric" };
   const formattedDate = lastUpdate?.toLocaleDateString("en-US", options);

src/routes/list/market-cap/[slug]/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { abbreviateNumber } from "$lib/utils";
   import Table from "$lib/components/Table/Table.svelte";
-  import { screenWidth } from "$lib/store";
   import { page } from "$app/stores";
 
   export let data;