update cramer

src/routes/cramer-tracker/+page.svelte

@@ -1,73 +1,27 @@
 <script lang="ts">
-  import { numberOfUnreadNotification } from "$lib/store";
+  import { numberOfUnreadNotification, screenWidth } from "$lib/store";
   import { onMount } from "svelte";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
+  import RatingsChart from "$lib/components/RatingsChart.svelte";
 
   export let data;
 
-  let isLoaded = false;
+  let rawData = processTickerData(data?.getCramerTracker);
-  let rawData = data?.getCramerTracker ?? [];
+  let originalData = [...rawData]; // Unaltered copy of raw data
-  let displayList = rawData?.slice(0, 50) ?? [];
-  let winRate;
 
-  function sectorSelector(sector) {
+  let stockList = rawData?.slice(0, 50) ?? [];
-    let path;
+  let winRate;
-    switch (sector) {
-      case "Financials":
-        path = "financial";
-        break;
-      case "Healthcare":
-        path = "healthcare";
-        break;
-      case "Information Technology":
-        path = "technology";
-        break;
-      case "Technology":
-        path = "technology";
-        break;
-      case "Financial Services":
-        path = "financial";
-        break;
-      case "Industrials":
-        path = "industrials";
-        break;
-      case "Energy":
-        path = "energy";
-        break;
-      case "Utilities":
-        path = "utilities";
-        break;
-      case "Consumer Cyclical":
-        path = "consumer-cyclical";
-        break;
-      case "Real Estate":
-        path = "real-estate";
-        break;
-      case "Basic Materials":
-        path = "basic-materials";
-        break;
-      case "Communication Services":
-        path = "communication-services";
-        break;
-      case "Consumer Defensive":
-        path = "consumer-defensive";
-        break;
-      default:
-        // Handle default case if needed
-        break;
-    }
-    return path;
-  }
 
   async function handleScroll() {
     const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
     const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-    if (isBottom && displayList?.length !== rawData?.length) {
+
-      const nextIndex = displayList?.length;
+    if (isBottom && stockList?.length !== originalData?.length) {
-      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
+      const nextIndex = stockList?.length;
-      displayList = [...displayList, ...filteredNewResults];
+      const filteredNewResults = originalData?.slice(nextIndex, nextIndex + 50);
+      stockList = [...stockList, ...filteredNewResults];
     }
   }
 
@@ -107,10 +61,40 @@
     return wins / totalTrades;
   }
 
-  onMount(() => {
+  function processTickerData(data) {
-    winRate = computeWinRate(rawData);
+    const tickerMap = new Map();
+
+    data.forEach((item) => {
+      const { ticker } = item;
+
+      if (!ticker) return; // Skip if ticker is not defined
+
+      if (!tickerMap.has(ticker)) {
+        // Add the item and initialize count
+        tickerMap.set(ticker, { ...item, ratings: 1 });
+      } else {
+        const existing = tickerMap.get(ticker);
+
+        // Increment the ratings count
+        existing.ratings += 1;
+
+        // Keep the item with the latest date
+        if (new Date(item?.date) > new Date(existing?.date)) {
+          tickerMap.set(ticker, {
+            ...item,
+            ratings: existing?.ratings,
+          });
+        }
+      }
+    });
+
+    // Convert the Map back to an array
+    return Array?.from(tickerMap?.values());
+  }
+
+  onMount(() => {
+    winRate = computeWinRate(data?.getCramerTracker);
 
-    isLoaded = true;
     window.addEventListener("scroll", handleScroll);
     return () => {
       window.removeEventListener("scroll", handleScroll);
@@ -119,22 +103,26 @@
 
   $: charNumber = 20;
 
-  let columns = [
+  $: columns = [
-    { key: "date", label: "Date", align: "left" },
+    ...($screenWidth > 1024
+      ? [{ key: "chart", label: "", align: "right" }]
+      : []),
     { key: "ticker", label: "Symbol", align: "left" },
     { key: "name", label: "Name", align: "left" },
     { key: "sentiment", label: "Sentiment", align: "right" },
     { key: "returnSince", label: "Return Since", align: "right" },
-    { key: "sector", label: "Sector", align: "right" },
+    { key: "ratings", label: "Ratings", align: "right" },
+    { key: "date", label: "Date", align: "right" },
   ];
 
-  let sortOrders = {
+  $: sortOrders = {
+    chart: { order: "none", type: "string" },
     date: { order: "none", type: "date" },
     ticker: { order: "none", type: "string" },
     name: { order: "none", type: "string" },
     sentiment: { order: "none", type: "string" },
     returnSince: { order: "none", type: "number" },
-    sector: { order: "none", type: "string" },
+    ratings: { order: "none", type: "number" },
   };
 
   const sortData = (key) => {
@@ -148,8 +136,6 @@
     // 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];
@@ -157,7 +143,8 @@
 
     // Reset to original data when 'none' and stop further sorting
     if (sortOrder === "none") {
-      displayList = [...originalData]?.slice(0, 50); // Reset to original data (spread to avoid mutation)
+      originalData = [...rawData]; // Reset originalData to rawData
+      stockList = originalData?.slice(0, 50); // Reset displayed data
       return;
     }
 
@@ -192,8 +179,17 @@
     };
 
     // Sort using the generic comparison function
-    displayList = [...originalData].sort(compareValues)?.slice(0, 50);
+    stockList = [...originalData].sort(compareValues)?.slice(0, 50);
   };
+  $: checkedSymbol = "";
+  function openGraph(symbol) {
+    // Clear all existing symbols
+    if (checkedSymbol === symbol) {
+      checkedSymbol = "";
+    } else {
+      checkedSymbol = symbol;
+    }
+  }
 </script>
 
 <svelte:head>
@@ -228,7 +224,7 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden pb-20 pt-5 px-4 lg:px-3"
+  class="w-full max-w-3xl sm: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>
@@ -253,123 +249,155 @@
             </p>
           </div>
 
-          {#if isLoaded}
+          <div
-            <div
+            class="mb-8 w-full text-center sm:text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5"
-              class="mb-8 w-full text-center sm:text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5"
+          >
+            <svg
+              class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 256 256"
             >
-              <svg
+              <path
-                class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
+                fill="#fff"
-                xmlns="http://www.w3.org/2000/svg"
+                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-                viewBox="0 0 256 256"
+              />
+            </svg>
+            <span>
+              Jim Cramer was accurate in <strong
+                >{(winRate * 100)?.toFixed(0)}%</strong
               >
-                <path
+              of his last {rawData?.length} forecasts. Is it time to consider the
-                  fill="#fff"
+              "Inverse Cramer" strategy?
-                  d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+            </span>
-                />
+          </div>
-              </svg>
-              <span>
-                Jim Cramer was accurate in <strong
-                  >{(winRate * 100)?.toFixed(0)}%</strong
-                >
-                of his last {rawData?.length} forecasts. Is it time to consider the
-                "Inverse Cramer" strategy?
-              </span>
-            </div>
 
-            <div class="w-full m-auto mt-20 sm:mt-10">
+          <div class="w-full m-auto mt-20 sm:mt-10">
-              <div
+            <div
-                class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll"
+              class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll"
+            >
+              <table
+                class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
               >
-                <table
+                <thead>
-                  class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
+                  <TableHeader {columns} {sortOrders} {sortData} />
-                >
+                </thead>
-                  <thead>
+                <tbody>
-                    <TableHeader {columns} {sortOrders} {sortData} />
+                  {#each stockList as item}
-                  </thead>
+                    <tr
-                  <tbody>
+                      class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]"
-                    {#each displayList as item}
+                    >
-                      <tr
+                      <td class="hidden lg:table-cell"
-                        class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]"
+                        ><button
+                          on:click={() => openGraph(item?.ticker)}
+                          class="h-full pl-2 pr-2 align-middle lg:pl-3"
+                          ><svg
+                            class="w-5 h-5 text-icon {checkedSymbol ===
+                            item?.ticker
+                              ? 'rotate-180'
+                              : ''}"
+                            viewBox="0 0 20 20"
+                            fill="white"
+                            style="max-width:40px"
+                            ><path
+                              fill-rule="evenodd"
+                              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                              clip-rule="evenodd"
+                            ></path></svg
+                          ></button
+                        ></td
                       >
-                        <td
+                      <td
-                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-sm sm:text-[1rem] text-start whitespace-nowrap"
-                        >
+                      >
-                          {new Date(item?.date)?.toLocaleString("en-US", {
+                        <HoverStockChart symbol={item?.ticker} />
-                            month: "short",
+                      </td>
-                            day: "numeric",
-                            year: "numeric",
-                            daySuffix: "2-digit",
-                          })}
-                        </td>
 
-                        <td
+                      <td
-                          class="text-sm sm:text-[1rem] text-start whitespace-nowrap"
+                        class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
-                        >
+                      >
-                          <HoverStockChart symbol={item?.ticker} />
+                        {item?.name?.length > charNumber
-                        </td>
+                          ? item?.name?.slice(0, charNumber) + "..."
+                          : item?.name}
+                      </td>
 
-                        <td
+                      <td
-                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                        class="text-sm sm:text-[1rem] whitespace-nowrap {[
-                        >
+                          'Bullish',
-                          {item?.name?.length > charNumber
+                          'Buy',
-                            ? item?.name?.slice(0, charNumber) + "..."
+                        ].includes(item?.sentiment) ||
-                            : item?.name}
+                        item?.sentiment?.includes('Buy')
-                        </td>
+                          ? 'text-[#00FC50]'
+                          : ['Bearish', 'Sell', 'Trim'].includes(
+                                item?.sentiment,
+                              ) ||
+                              item?.sentiment?.includes('Sell') === 'Bearish'
+                            ? 'text-[#FF2F1F]'
+                            : 'text-[#C6A755]'} text-end"
+                      >
+                        {item?.sentiment}
+                      </td>
 
-                        <td
+                      <td
-                          class="text-sm sm:text-[1rem] whitespace-nowrap {[
+                        class="text-sm sm:text-[1rem] {item?.returnSince >= 0
-                            'Bullish',
+                          ? 'text-[#00FC50]'
-                            'Buy',
+                          : 'text-[#FF2F1F]'} text-end"
-                          ].includes(item?.sentiment) ||
+                      >
-                          item?.sentiment?.includes('Buy')
+                        {item?.returnSince > 0 ? "+" : ""}{item?.returnSince}%
-                            ? 'text-[#00FC50]'
+                      </td>
-                            : ['Bearish', 'Sell', 'Trim'].includes(
-                                  item?.sentiment,
-                                ) ||
-                                item?.sentiment?.includes('Sell') === 'Bearish'
-                              ? 'text-[#FF2F1F]'
-                              : 'text-[#C6A755]'} text-end"
-                        >
-                          {item?.sentiment}
-                        </td>
 
-                        <td
+                      <td
-                          class="text-sm sm:text-[1rem] {item?.returnSince >= 0
+                        class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
-                            ? 'text-[#00FC50]'
+                      >
-                            : 'text-[#FF2F1F]'} text-end"
+                        {item?.ratings !== null ? item?.ratings : "n/a"}
-                        >
+                      </td>
-                          {item?.returnSince > 0 ? "+" : ""}{item?.returnSince}%
-                        </td>
 
-                        <td
+                      <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium"
+                        class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
+                      >
+                        {new Date(item?.date).toLocaleString("en-US", {
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric",
+                          daySuffix: "2-digit",
+                        })}
+                      </td>
+                    </tr>
+                    {#if checkedSymbol === item?.ticker}
+                      <tr
+                        ><td colspan="8" class="px-0" style=""
+                          ><div class="-mt-0.5 px-0 pb-2">
+                            <div class="relative h-[400px]">
+                              <div class="absolute top-0 w-full">
+                                <div
+                                  class="h-[250px] w-full xs:h-[300px] sm:h-[400px]"
+                                  style="overflow: hidden;"
+                                >
+                                  <div
+                                    style="position: relative; height: 0px; z-index: 1;"
+                                  >
+                                    <RatingsChart
+                                      ratingsList={data?.getCramerTracker?.map(
+                                        (item) => ({
+                                          ...item,
+                                          type: item?.sentiment,
+                                        }),
+                                      )}
+                                      symbol={item?.ticker}
+                                      numOfRatings={item?.ratings}
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div></td
                         >
-                          <a
-                            href={"/list/sector/" +
-                              sectorSelector(item?.sector)}
-                            class="sm:hover:text-white text-blue-400"
-                          >
-                            {item?.sector}
-                          </a>
-                        </td>
                       </tr>
-                    {/each}
+                    {/if}
-                  </tbody>
+                  {/each}
-                </table>
+                </tbody>
-              </div>
+              </table>
             </div>
-          {:else}
+          </div>
-            <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}
         </main>
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">