update table component

src/lib/components/Table/Table.svelte

@@ -71,7 +71,7 @@
     { name: "Analyst Rating", rule: "analystRating", type: "rating" },
     { name: "Analyst Count", rule: "analystCounter", type: "int" },
     { name: "Price Target", rule: "priceTarget", type: "float" },
-    { name: "Price Target Upside", rule: "upside", type: "percentSign" },
+    { name: "Upside", rule: "upside", type: "percentSign" },
     { name: "Country", rule: "country", type: "str" },
     { name: "Gross Profit", rule: "grossProfit", type: "int" },
     { name: "Revenue Growth", rule: "growthRevenue", type: "percentSign" },
@@ -136,10 +136,8 @@
 
   checkedItems = new Set(ruleOfList.map((item) => item.name));
   allRows = sortIndicatorCheckMarks(allRows);
-
   const handleDownloadMessage = (event) => {
     let updateData = event?.data?.rawData ?? []; // Use a new variable for updated data
-
     // Check if both arrays exist and have data
     if (!updateData?.length || !rawData?.length) {
       return;
@@ -147,16 +145,26 @@
 
     for (let i = 0; i < updateData.length; i++) {
       if (rawData[i]) {
-        // Merge only the fields from rawData that are in defaultRules
+        // Create a new object to merge the data
-        let newData = { ...updateData[i] };
+        let newData = {};
 
-        // Merge fields from defaultList (marketCap, price, etc.)
+        // Merge fields from updateData
+        Object.assign(newData, updateData[i]);
+
+        // Merge fields from defaultRules that are missing in updateData
         defaultRules.forEach((rule) => {
           if (!(rule in updateData[i]) && rule in rawData[i]) {
             newData[rule] = rawData[i][rule];
           }
         });
 
+        // Preserve the original 'priceTarget' value from rawData
+        for (let rule of defaultRules) {
+          if (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]) {
           newData.rank = rawData[i]["rank"];
@@ -232,6 +240,13 @@
       // Sort checked items first
       if (isAChecked !== isBChecked) return isAChecked ? -1 : 1;
 
+      // Prioritize items based on default rules
+      const isADefaultRule = defaultRules?.includes(a?.rule);
+      const isBDefaultRule = defaultRules?.includes(b?.rule);
+      if (isADefaultRule !== isBDefaultRule) {
+        return isADefaultRule ? -1 : 1;
+      }
+
       // Check if the user is not Pro
       if (data?.user?.tier !== "Pro") {
         const isAPriority = proOnlyItems.has(a?.name);
@@ -332,21 +347,18 @@
   // Function to generate columns based on keys in rawData
   function generateColumns(data) {
     const leftAlignKeys = new Set(["rank", "symbol", "name"]);
+
     // Custom labels for specific keys
     const customLabels = {
       changesPercentage: "% Change",
       score: "AI Score",
       researchAndDevelopmentExpenses: "R&D",
+      counter: "Ratings Count",
       // Add more key-label mappings here as needed
     };
+
     // Define preferred order for columns
-    const preferredOrder = [
+    const preferredOrder = ["rank", "symbol", "name"];
-      "rank",
-      "symbol",
-      "name",
-      "price",
-      "changesPercentage",
-    ];
 
     // Create a mapping of rule to name and type from allRows
     const ruleToMetadataMap = Object.fromEntries(
@@ -355,12 +367,18 @@
 
     // Separate preferred keys and other keys, excluding "type"
     const keys = Object?.keys(data[0])?.filter((key) => key !== "type");
-    const orderedKeys =
+
-      ruleOfList?.length === 0
+    // Merge the preferred order with the default list order
-        ? ["rank", "symbol", "name"]
+    const orderedKeys = [
-        : [
       ...preferredOrder?.filter((key) => keys?.includes(key)),
-            ...keys?.filter((key) => !preferredOrder?.includes(key)),
+      ...defaultList
+        ?.map((item) => item.rule)
+        .filter((key) => keys?.includes(key)),
+      ...keys?.filter(
+        (key) =>
+          !preferredOrder?.includes(key) &&
+          !defaultList?.some((item) => item.rule === key),
+      ),
     ];
 
     return orderedKeys?.map((key) => ({
@@ -539,7 +557,24 @@
         {#each searchQuery?.length !== 0 ? testList : allRows as item}
           <DropdownMenu.Item class="sm:hover:bg-[#27272A]">
             <div class="flex items-center">
-              {#if data?.user?.tier === "Pro" || excludedRules?.has(item?.rule)}
+              {#if defaultRules?.includes(item?.rule)}
+                <label
+                  on:click|capture={(event) => {
+                    event.preventDefault();
+                  }}
+                  class="text-white"
+                >
+                  <input
+                    disabled={defaultRules?.includes(item?.rule) ? true : false}
+                    type="checkbox"
+                    class="rounded {defaultRules?.includes(item?.rule)
+                      ? 'checked:bg-gray-700'
+                      : 'checked:bg-blue-700'}"
+                    checked={isChecked(item?.name)}
+                  />
+                  <span class="ml-2">{item?.name}</span>
+                </label>
+              {:else if data?.user?.tier === "Pro" || excludedRules?.has(item?.rule)}
                 <label
                   on:click|capture={(event) => {
                     event.preventDefault();
@@ -549,8 +584,11 @@
                   for={item?.name}
                 >
                   <input
+                    disabled={defaultRules?.includes(item?.rule) ? true : false}
                     type="checkbox"
-                    class="rounded"
+                    class="rounded {defaultRules?.includes(item?.rule)
+                      ? 'checked:bg-gray-800'
+                      : 'checked:bg-blue-700'}"
                     checked={isChecked(item?.name)}
                   />
                   <span class="ml-2">{item?.name}</span>

src/routes/analysts/top-stocks/+page.svelte

@@ -1,118 +1,27 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
+  import { numberOfUnreadNotification } from "$lib/store";
-  import { numberOfUnreadNotification, screenWidth } from "$lib/store";
+  import Table from "$lib/components/Table/Table.svelte";
-  import { abbreviateNumber } from "$lib/utils";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
-  import { onMount } from "svelte";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
-  import TableHeader from "$lib/components/Table/TableHeader.svelte";
 
   export let data;
-  let isLoaded = false;
-  let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
-  let rawData = data?.getTopAnalystStocks;
+  const excludedRules = new Set([
+    "volume",
+    "price",
+    "upside",
+    "priceTarget",
+    "marketCap",
+    "changesPercentage",
+  ]);
 
-  let analytRatingList = rawData?.slice(0, 50) ?? [];
+  const defaultList = [
-
+    { name: "Ratings Count", rule: "counter" },
-  async function handleScroll() {
+    { name: "Price Target", rule: "priceTarget" },
-    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    { name: "Price", rule: "price" },
-    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    { name: "Upside", rule: "upside" },
-    if (isBottom && analytRatingList?.length !== rawData?.length) {
-      const nextIndex = analytRatingList?.length;
-      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      analytRatingList = [...analytRatingList, ...filteredNewResults];
-    }
-  }
-
-  onMount(async () => {
-    isLoaded = true;
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  });
-
-  let columns = [
-    { key: "rank", label: "Rank", align: "left" },
-    { key: "ticker", label: "Symbol", align: "left" },
-    { key: "name", label: "Name", align: "left" },
-    { key: "counter", label: "Ratings Count", align: "right" },
-    { key: "priceTarget", label: "Price Target", align: "right" },
-    { key: "price", label: "Current Price", align: "right" },
-    { key: "marketCap", label: "Market Cap", align: "right" },
-    { key: "upside", label: "Upside", align: "right" },
   ];
-
+  const hideLastRow = true;
-  let sortOrders = {
-    rank: { order: "none", type: "number" },
-    ticker: { order: "none", type: "string" },
-    name: { order: "none", type: "string" },
-    counter: { order: "none", type: "number" },
-    priceTarget: { order: "none", type: "number" },
-    price: { order: "none", type: "number" },
-    marketCap: { order: "none", type: "number" },
-    upside: { order: "none", type: "number" },
-  };
-
-  const sortData = (key) => {
-    // Reset all other keys to 'none' except the current key
-    let finalList = [];
-    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"];
-    const originalData = rawData?.slice(0, 40);
-    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") {
-      analytRatingList = [...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
-    analytRatingList = [...originalData].sort(compareValues);
-  };
-
-  $: charNumber = $screenWidth < 640 ? 30 : 20;
 </script>
 
 <svelte:head>
@@ -193,108 +102,14 @@
           </div>
 
           <div class="w-full m-auto mt-10">
-            {#if isLoaded}
+            <Table
-              <div
+              {data}
-                class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll sm:overflow-hidden"
+              rawData={data?.getTopAnalystStocks}
-              >
+              {defaultList}
-                <table
+              {excludedRules}
-                  class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
+              {hideLastRow}
-                >
+            />
-                  <thead>
-                    <TableHeader {columns} {sortOrders} {sortData} />
-                  </thead>
-                  <tbody>
-                    {#each analytRatingList as item, index}
-                      <tr
-                        class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
-                          1 ===
-                          rawData?.length && data?.user?.tier !== 'Pro'
-                          ? 'opacity-[0.1]'
-                          : ''}"
-                      >
-                        <td
-                          class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white text-center"
-                        >
-                          {item?.rank}
-                        </td>
-
-                        <td
-                          class="text-sm sm:text-[1rem] whitespace-nowrap text-start"
-                        >
-                          <a
-                            href={"/stocks/" + item?.ticker}
-                            class="sm:hover:text-white text-blue-400"
-                          >
-                            {item?.ticker}
-                          </a>
-                        </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?.counter}
-                        </td>
-
-                        <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
-                        >
-                          {item?.priceTarget?.toFixed(2)}
-                        </td>
-
-                        <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
-                        >
-                          {item?.price?.toFixed(2)}
-                        </td>
-                        <td
-                          class="text-end font-medium text-white text-sm sm:text-[1rem] whitespace-nowrap"
-                        >
-                          {item?.marketCap !== null
-                            ? abbreviateNumber(item?.marketCap)
-                            : "-"}
-                        </td>
-
-                        <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
-                        >
-                          {#if Number(item?.upside) >= 0}
-                            <span class="text-[#00FC50]"
-                              >+{Number(item?.upside)?.toFixed(2)}%</span
-                            >
-                          {:else}
-                            <span class="text-[#B84242]"
-                              >{Number(item?.upside)?.toFixed(2)}%</span
-                            >
-                          {/if}
-                        </td>
-                      </tr>
-                    {/each}
-                  </tbody>
-                </table>
           </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}
-          </div>
-          {#if isLoaded}
           <UpgradeToPro
             {data}
             title="Get stock forecasts from Wall Street's highest rated professionals"
@@ -402,8 +217,8 @@
                     <dd
                       class="mt-2 text-base leading-7 text-muted dark:text-faded"
                     >
-                        The more ratings the analyst has provided, the higher
+                      The more ratings the analyst has provided, the higher the
-                        the score.
+                      score.
                     </dd>
                   </div>
                   <div class="relative pl-14">
@@ -440,11 +255,10 @@
               </div>
             </div>
           </div>
-          {/if}
         </main>
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
-          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
+          {#if data?.user?.tier !== "Pro"}
             <div
               class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >