From 08e738352e2150d320151cba55125eb2285d5258 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sat, 2 Nov 2024 10:35:18 +0100
Subject: [PATCH] update hover chart

---
 src/lib/components/HoverStockChart.svelte     | 26 ++++++----
 src/routes/+layout.svelte                     |  4 ++
 src/routes/+page.svelte                       | 48 +++++++------------
 .../etf/[tickerID]/holdings/+page.svelte      |  2 +-
 src/routes/etf/etf-providers/+layout.svelte   |  6 +--
 .../etf/etf-providers/[slug]/+page.svelte     |  8 +---
 6 files changed, 44 insertions(+), 50 deletions(-)

diff --git a/src/lib/components/HoverStockChart.svelte b/src/lib/components/HoverStockChart.svelte
index 4cb81b81..95ab6d1c 100644
--- a/src/lib/components/HoverStockChart.svelte
+++ b/src/lib/components/HoverStockChart.svelte
@@ -8,6 +8,7 @@
   import { abbreviateNumber } from "$lib/utils";
   import { afterUpdate } from "svelte";
   export let symbol;
+  export let assetType = "stock";
 
   let priceData = [];
   let changesPercentage = 0;
@@ -48,6 +49,21 @@
       );
   }
 
+  function getHref(symbol: string) {
+    let path = "";
+    if (symbol?.length !== 0) {
+      if (assetType?.toLowerCase() === "stock") {
+        path = `/stocks/${symbol}`;
+      } else if (assetType?.toLowerCase() === "etf") {
+        path = `/etf/${symbol}`;
+      } else if (["BTC", "USD"]?.includes(symbol)) {
+        path = "";
+      } else {
+        path = `/crypto/${symbol}`;
+      }
+    }
+    return path;
+  }
   const topLineColor = "#71CA96";
   const topFillColor1 = "rgba( 38, 166, 154, 0.2)";
   const bottomLineColor = "#FF7070";
@@ -156,19 +172,13 @@
   });
 </script>
 
-<div on:mouseover={() => getStockData(symbol)}>
+<div on:mouseover={() => getStockData(symbol)} class="inline-block">
   <HoverCard.Root>
     <div on:mouseover>
       <HoverCard.Trigger
         class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
       >
-        <a
-          href={symbol?.length !== 0 && !["BTC", "USD"]?.includes(symbol)
-            ? `/stocks/${symbol}`
-            : symbol === "BTC"
-              ? "/crypto/BTCUSD"
-              : ""}
-          class="sm:hover:text-white text-blue-400"
+        <a href={getHref(symbol)} class="sm:hover:text-white text-blue-400"
           >{symbol?.length !== 0 ? symbol : "-"}</a
         >
       </HoverCard.Trigger>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 71a223b9..2986f8f6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -337,6 +337,7 @@ const handleTwitchMessage = (event) => {
                               >Top Analyst</a
                             >
                           </Button>
+                          <!--
                           <Button
                             builders={[builder]}
                             type="submit"
@@ -348,6 +349,7 @@ const handleTwitchMessage = (event) => {
                               >Top Analyst Stocks</a
                             >
                           </Button>
+                          -->
                           <Button
                             builders={[builder]}
                             type="submit"
@@ -941,11 +943,13 @@ const handleTwitchMessage = (event) => {
                             class="text-[1rem] text-white ml-4 mt-4"
                             >Top Analyst</a
                           >
+                          <!--
                           <a
                             href="/analysts/top-stocks"
                             class="text-[1rem] text-white ml-4 mt-4"
                             >Top Analyst Stocks</a
                           >
+                            -->
                           <a
                             href="/most-shorted-stocks"
                             class="text-[1rem] text-white ml-4 mt-4"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b83a0505..4ca4332d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,6 +8,7 @@
   import ArrowUpRight from "lucide-svelte/icons/arrow-up-right";
   import { abbreviateNumber } from "$lib/utils";
   import * as Tabs from "$lib/components/shadcn/tabs/index.js";
+  import HoverStockChart from "$lib/components/HoverStockChart.svelte";
 
   import { screenWidth, numberOfUnreadNotification } from "$lib/store";
 
@@ -267,11 +268,7 @@
                   {#each gainersList as item}
                     <Table.Row>
                       <Table.Cell>
-                        <a
-                          href={`/stocks/${item?.symbol}`}
-                          class="text-sm sm:text-[1rem] font-medium text-blue-400 sm:hover:text-white transition duration-100"
-                          >{item?.symbol}</a
-                        >
+                        <HoverStockChart symbol={item?.symbol} />
                       </Table.Cell>
                       <Table.Cell
                         class="hidden sm:table-cell xl:table.-column text-sm sm:text-[1rem]"
@@ -348,11 +345,7 @@
                   {#each losersList as item}
                     <Table.Row>
                       <Table.Cell>
-                        <a
-                          href={`/stocks/${item?.symbol}`}
-                          class="text-sm sm:text-[1rem] font-medium text-blue-400 sm:hover:text-white transition duration-100"
-                          >{item?.symbol}</a
-                        >
+                        <HoverStockChart symbol={item?.symbol} />
                       </Table.Cell>
                       <Table.Cell
                         class="hidden sm:table-cell xl:table.-column text-sm sm:text-[1rem]"
@@ -469,13 +462,10 @@
                   {#each optionsTable as item}
                     <Table.Row>
                       <Table.Cell>
-                        <a
-                          href={item?.underlying_type === "stock"
-                            ? `/stocks/${item?.ticker}`
-                            : `/etf/${item?.ticker}`}
-                          class="text-sm sm:text-[1rem] font-medium text-blue-400 sm:hover:text-white transition duration-100"
-                          >{item?.ticker}</a
-                        >
+                        <HoverStockChart
+                          symbol={item?.ticker}
+                          assetType={item?.underlying_type}
+                        />
                       </Table.Cell>
                       <Table.Cell
                         class="text-right xl:table.-column text-sm sm:text-[1rem] {item?.put_call ===
@@ -537,11 +527,9 @@
               {#if data?.getDashboard?.recentDividends?.length !== 0}
                 <ul style="padding-left: 5px;">
                   {#each data?.getDashboard?.recentDividends as item}
-                    <strong>{item?.name}</strong> (<a
-                      href="/stocks/{item?.symbol}"
-                      class="sm:hover:text-white text-blue-400"
-                      >{item?.symbol}</a
-                    >) has announced its upcoming dividend details as of {convertTimestamp(
+                    <strong>{item?.name}</strong> (<HoverStockChart
+                      symbol={item?.symbol}
+                    />) has announced its upcoming dividend details as of {convertTimestamp(
                       item?.updated,
                     )}:
 
@@ -645,11 +633,9 @@
                     <li
                       style="margin-left: 8px; line-height: 22px; margin-bottom: 30px; list-style-type: disc;"
                     >
-                      <strong>{item?.name}</strong> (<a
-                        href="/stocks/{item?.symbol}"
-                        class="text-blue-400 sm:hover:text-white"
-                        >{item?.symbol}</a
-                      >)
+                      <strong>{item?.name}</strong> (<HoverStockChart
+                        symbol={item?.symbol}
+                      />)
                       {item?.isToday === true
                         ? "will report today"
                         : [
@@ -724,11 +710,9 @@
               {#if data?.getDashboard?.recentEarnings?.length !== 0}
                 <ul style="padding-left: 5px;">
                   {#each data?.getDashboard?.recentEarnings as item}
-                    <strong>{item?.name}</strong> (<a
-                      href="/stocks/{item?.symbol}"
-                      class="sm:hover:text-white text-blue-400"
-                      >{item?.symbol}</a
-                    >) has released its quarterly earnings at {formatTime(
+                    <strong>{item?.name}</strong> (<HoverStockChart
+                      symbol={item?.symbol}
+                    />) has released its quarterly earnings at {formatTime(
                       item?.time,
                     )}:
 
diff --git a/src/routes/etf/[tickerID]/holdings/+page.svelte b/src/routes/etf/[tickerID]/holdings/+page.svelte
index 8ff3d46f..12566df7 100644
--- a/src/routes/etf/[tickerID]/holdings/+page.svelte
+++ b/src/routes/etf/[tickerID]/holdings/+page.svelte
@@ -5,7 +5,7 @@
     displayCompanyName,
   } from "$lib/store";
   import { Button } from "$lib/components/shadcn/button/index.js";
-  import { screenWidth, getCache, setCache } from "$lib/store";
+  import { screenWidth } from "$lib/store";
   import { abbreviateNumber, formatString } from "$lib/utils";
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
diff --git a/src/routes/etf/etf-providers/+layout.svelte b/src/routes/etf/etf-providers/+layout.svelte
index 2ff5060f..2f6f0d74 100644
--- a/src/routes/etf/etf-providers/+layout.svelte
+++ b/src/routes/etf/etf-providers/+layout.svelte
@@ -93,7 +93,7 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <a
                 href={"/pricing"}
@@ -113,7 +113,7 @@
           {/if}
 
           <div
-            class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
             <a
               href={"/analysts"}
@@ -132,7 +132,7 @@
           </div>
 
           <div
-            class="w-full bg-[#27272A] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
             <a
               href={"/politicians"}
diff --git a/src/routes/etf/etf-providers/[slug]/+page.svelte b/src/routes/etf/etf-providers/[slug]/+page.svelte
index 67e5d61f..9b5a5d95 100644
--- a/src/routes/etf/etf-providers/[slug]/+page.svelte
+++ b/src/routes/etf/etf-providers/[slug]/+page.svelte
@@ -3,6 +3,7 @@
   import { screenWidth, numberOfUnreadNotification } from "$lib/store";
   import { onMount } from "svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
+  import HoverStockChart from "$lib/components/HoverStockChart.svelte";
 
   export let data;
   let rawData = data?.getETFProviderData;
@@ -226,12 +227,7 @@
                 <td
                   class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
                 >
-                  <a
-                    href={"/etf/" + item?.symbol}
-                    class="sm:hover:text-white text-blue-400"
-                  >
-                    {item?.symbol}
-                  </a>
+                  <HoverStockChart symbol={item?.symbol} assetType={"etf"} />
                 </td>
 
                 <td