add table component to top shorted stocks

src/lib/components/Table/Table.svelte

@@ -27,7 +27,10 @@
     { name: "Revenue", rule: "revenue" },
   ];
 
+  export let hideLastRow = false;
+
   let ruleOfList = defaultList;
+  const defaultRules = defaultList?.map((item) => item?.rule);
 
   let pagePathName = $page?.url?.pathname;
   let testList = [];
@@ -144,20 +147,25 @@
 
     for (let i = 0; i < updateData.length; i++) {
       if (rawData[i]) {
-        // Check if "rank" is missing in updateData[i] and add it if it exists in rawData[i]
+        // Merge only the fields from rawData that are in defaultRules
+        let newData = { ...updateData[i] };
+
+        // Merge fields from defaultList (marketCap, price, etc.)
+        defaultRules.forEach((rule) => {
+          if (!(rule in updateData[i]) && rule in rawData[i]) {
+            newData[rule] = rawData[i][rule];
+          }
+        });
+
+        // Ensure 'rank' and 'years' are added if they are missing in updateData
         if (!("rank" in updateData[i]) && "rank" in rawData[i]) {
-          updateData[i] = {
+          newData.rank = rawData[i]["rank"];
-            ...updateData[i],
-            rank: rawData[i]["rank"],
-          };
         }
-        // Check if "years" is missing in updateData[i] and add it if it exists in rawData[i]
         if (!("years" in updateData[i]) && "years" in rawData[i]) {
-          updateData[i] = {
+          newData.years = rawData[i]["years"];
-            ...updateData[i],
-            years: rawData[i]["years"],
-          };
         }
+
+        updateData[i] = newData;
       }
     }
 
@@ -591,9 +599,15 @@
       <TableHeader {columns} {sortOrders} {sortData} />
     </thead>
     <tbody>
-      {#each stockList as item}
+      {#each stockList as item, index}
         <tr
-          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] {index +
+            1 ===
+            rawData?.length &&
+          data?.user?.tier !== 'Pro' &&
+          hideLastRow
+            ? 'opacity-[0.1]'
+            : ''}"
         >
           {#each columns as column}
             <td
@@ -629,8 +643,20 @@
                     >{item[column.key]?.toFixed(2)}%</span
                   >
                 {/if}
+              {:else if column?.type === "rating"}
+                {#if ["Strong Buy", "Buy"].includes(item[column.key])}
+                  <span class="text-[#00FC50]">{item[column.key]}</span>
+                {:else if ["Strong Sell", "Sell"].includes(item[column.key])}
+                  <span class="text-[#FF2F1F]">{item[column.key]}</span>
+                {:else if item[column.key] === "Hold"}
+                  <span class="text-[#FFA838]">{item[column.key]}</span>
                 {:else}
-                {item[column.key] !== null ? item[column.key] : "-"}
+                  -
+                {/if}
+              {:else}
+                {item[column.key] !== null && item[column.key] !== undefined
+                  ? item[column.key]
+                  : "-"}
               {/if}
             </td>
           {/each}

src/routes/list/exchange/[slug]/+page.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
   import { abbreviateNumber } from "$lib/utils";
-  import { onMount } from "svelte";
   import Table from "$lib/components/Table/Table.svelte";
 
   export let data;
 
   let rawData = data?.getExchangeCategory;
-  let stockList = rawData?.slice(0, 50);
 
   let totalMarketCap = rawData?.reduce(
     (total, stock) => total + stock?.marketCap,
@@ -22,23 +20,6 @@
     nyse: "NYSE (New York Stock Exchange)",
     nasdaq: "NASDAQ",
   };
-
-  async function handleScroll() {
-    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-    if (isBottom && stockList?.length !== rawData?.length) {
-      const nextIndex = stockList?.length;
-      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      stockList = [...stockList, ...filteredNewResults];
-    }
-  }
-
-  onMount(async () => {
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  });
 </script>
 
 <section class="w-full overflow-hidden m-auto">

src/routes/most-shorted-stocks/+page.svelte

@@ -1,121 +1,27 @@
 <script lang="ts">
-  import { numberOfUnreadNotification, screenWidth } from "$lib/store";
+  import { numberOfUnreadNotification } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
+  import Table from "$lib/components/Table/Table.svelte";
-  import { onMount } from "svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
-  import TableHeader from "$lib/components/Table/TableHeader.svelte";
-  import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   export let data;
 
-  let isLoaded = false;
+  const excludedRules = new Set([
-  let rawData = [];
+    "volume",
-  let stockList = [];
+    "price",
+    "shortRatio",
+    "sharesShort",
+    "shortOutStandingPercent",
+    "shortFloatPercent",
+    "changesPercentage",
+  ]);
 
-  async function handleScroll() {
+  const defaultList = [
-    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    { name: "Short Ratio", rule: "shortRatio" },
-    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    { name: "Short Interest", rule: "sharesShort" },
-    if (isBottom && stockList?.length !== rawData?.length) {
+    { name: "Short % Shares", rule: "shortOutStandingPercent" },
-      const nextIndex = stockList?.length;
+    { name: "Short % Float", rule: "shortFloatPercent" },
-      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
-      stockList = [...stockList, ...filteredNewResults];
-    }
-  }
-
-  onMount(() => {
-    rawData = data?.getMostShortedStocks ?? [];
-    stockList = rawData?.slice(0, 50) ?? [];
-    isLoaded = true;
-
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  });
-
-  let columns = [
-    { key: "rank", label: "Rank", align: "right" },
-    { key: "symbol", label: "Symbol", align: "left" },
-    { key: "name", label: "Name", align: "left" },
-    { key: "shortRatio", label: "Short Ratio", align: "right" },
-    { key: "sharesShort", label: "Short Interest", align: "right" },
-    { key: "shortFloatPercent", label: "Short % Float", align: "right" },
-    {
-      key: "shortOutStandingPercent",
-      label: "Short % of Shares Out",
-      align: "right",
-    },
   ];
-
+  const hideLastRow = true;
-  let sortOrders = {
-    rank: { order: "none", type: "number" },
-    symbol: { order: "none", type: "string" },
-    name: { order: "none", type: "string" },
-    shortRatio: { order: "none", type: "number" },
-    sharesShort: { order: "none", type: "number" },
-    shortFloatPercent: { order: "none", type: "number" },
-    shortOutStandingPercent: { order: "none", type: "number" },
-  };
-
-  const sortData = (key) => {
-    // Reset all other keys to 'none' except the current key
-    for (const k in sortOrders) {
-      if (k !== key) {
-        sortOrders[k].order = "none";
-      }
-    }
-
-    // Cycle through 'none', 'asc', 'desc' for the clicked key
-    const orderCycle = ["none", "asc", "desc"];
-
-    let originalData = rawData;
-
-    const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
-    sortOrders[key].order =
-      orderCycle[(currentOrderIndex + 1) % orderCycle.length];
-    const sortOrder = sortOrders[key].order;
-
-    // Reset to original data when 'none' and stop further sorting
-    if (sortOrder === "none") {
-      stockList = [...originalData]; // Reset to original data (spread to avoid mutation)
-      return;
-    }
-
-    // Define a generic comparison function
-    const compareValues = (a, b) => {
-      const { type } = sortOrders[key];
-      let valueA, valueB;
-
-      switch (type) {
-        case "date":
-          valueA = new Date(a[key]);
-          valueB = new Date(b[key]);
-          break;
-        case "string":
-          valueA = a[key].toUpperCase();
-          valueB = b[key].toUpperCase();
-          return sortOrder === "asc"
-            ? valueA.localeCompare(valueB)
-            : valueB.localeCompare(valueA);
-        case "number":
-        default:
-          valueA = parseFloat(a[key]);
-          valueB = parseFloat(b[key]);
-          break;
-      }
-
-      if (sortOrder === "asc") {
-        return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
-      } else {
-        return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
-      }
-    };
-
-    // Sort using the generic comparison function
-    stockList = [...originalData].sort(compareValues);
-  };
-
-  $: charNumber = $screenWidth < 640 ? 15 : 20;
 </script>
 
 <svelte:head>
@@ -156,7 +62,7 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3"
+  class="w-full max-w-screen-2xl overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
@@ -181,93 +87,20 @@
             </p>
           </div>
 
-          {#if isLoaded}
           <div class="w-full m-auto mt-20 sm:mt-10">
-              <div
+            <Table
-                class="w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden"
+              {data}
-              >
+              rawData={data?.getMostShortedStocks}
-                <table
+              {excludedRules}
-                  class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
+              {defaultList}
-                >
+              {hideLastRow}
-                  <thead>
+            />
-                    <TableHeader {columns} {sortOrders} {sortData} />
-                  </thead>
-                  <tbody>
-                    {#each stockList as item, index}
-                      <tr
-                        class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
-                          1 ===
-                          stockList?.length && data?.user?.tier !== 'Pro'
-                          ? 'opacity-[0.1]'
-                          : ''}"
-                      >
-                        <td
-                          class="text-white text-sm sm:text-[1rem] font-medium text-white text-center"
-                        >
-                          {item?.rank}
-                        </td>
-
-                        <td
-                          class="text-sm sm:text-[1rem] whitespace-nowrap text-start"
-                        >
-                          <HoverStockChart symbol={item?.symbol} />
-                        </td>
-
-                        <td
-                          class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start"
-                        >
-                          {item?.name?.length > charNumber
-                            ? item?.name?.slice(0, charNumber) + "..."
-                            : item?.name}
-                        </td>
-
-                        <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
-                        >
-                          {item?.shortRatio}
-                        </td>
-
-                        <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
-                        >
-                          {abbreviateNumber(item?.sharesShort)}
-                        </td>
-
-                        <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
-                        >
-                          {item?.shortFloatPercent}%
-                        </td>
-
-                        <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
-                        >
-                          {item?.shortOutStandingPercent}%
-                        </td>
-                      </tr>
-                    {/each}
-                  </tbody>
-                </table>
           </div>
-            </div>
+
-          {:else}
-            <div class="flex justify-center items-center h-80">
-              <div class="relative">
-                <label
-                  class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-                >
-                  <span class="loading loading-spinner loading-md text-gray-400"
-                  ></span>
-                </label>
-              </div>
-            </div>
-          {/if}
-          {#if isLoaded}
           <UpgradeToPro
             {data}
             title="Get stock forecasts from Wall Street's highest rated professionals"
           />
-          {/if}
         </main>
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}