From 010a0e1947e92595dd1bd275ce7b911fe5644987 Mon Sep 17 00:00:00 2001
From: Alexander Weber <account@alexweber.dev>
Date: Sat, 31 Aug 2024 10:31:28 +0200
Subject: [PATCH] analyst links are working now

---
 src/lib/components/AnalystCard.svelte         |  463 +++----
 src/lib/components/AnalystInsight.svelte      |  261 ++--
 src/routes/stocks/[tickerID]/+page.svelte     | 1132 +++++++----------
 .../stocks/[tickerID]/forecast/+layout.svelte |   15 +
 4 files changed, 801 insertions(+), 1070 deletions(-)

diff --git a/src/lib/components/AnalystCard.svelte b/src/lib/components/AnalystCard.svelte
index 01e4a672..1381ce73 100644
--- a/src/lib/components/AnalystCard.svelte
+++ b/src/lib/components/AnalystCard.svelte
@@ -1,305 +1,242 @@
-<script lang='ts'>
+<script lang="ts">
   //import ProgressBar from 'progressbar.js';
-  import {stockTicker, screenWidth} from '$lib/store';
-  import { abbreviateNumber } from '$lib/utils';
-  
+  import { stockTicker, screenWidth } from "$lib/store";
+  import { abbreviateNumber } from "$lib/utils";
+
   export let lastPrice;
   export let analystRating = {};
-  
 
   let buyCount = 0;
   let holdCount = 0;
   let sellCount = 0;
-  let priceTarget = 'n/a';
+  let priceTarget = "n/a";
   let numOfAnalyst = 0;
-  let consensusRating = 'n/a';
-  let changesPercentage = 0;  
-  
-  
-  
+  let consensusRating = "n/a";
+  let changesPercentage = 0;
+
   $: {
-    
-if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'undefined' && Object?.keys(analystRating)?.length !== 0)
-  { 
-    numOfAnalyst = analystRating?.numOfAnalyst;
-    buyCount = (analystRating?.Buy/numOfAnalyst * 100)?.toFixed(2);
-    holdCount = (analystRating?.Hold/numOfAnalyst * 100)?.toFixed(2);
-    sellCount = (analystRating?.Sell/numOfAnalyst * 100)?.toFixed(2);
-    priceTarget = analystRating?.priceTarget
-    consensusRating = analystRating?.consensusRating;
-    console.log(lastPrice)
-    try {
-        changesPercentage = ((priceTarget/lastPrice -1)*100)?.toFixed(2) ?? 0;
-      } catch(e) {
+    if ($stockTicker && typeof window !== "undefined" && typeof analystRating !== "undefined" && Object?.keys(analystRating)?.length !== 0) {
+      numOfAnalyst = analystRating?.numOfAnalyst;
+      buyCount = ((analystRating?.Buy / numOfAnalyst) * 100)?.toFixed(2);
+      holdCount = ((analystRating?.Hold / numOfAnalyst) * 100)?.toFixed(2);
+      sellCount = ((analystRating?.Sell / numOfAnalyst) * 100)?.toFixed(2);
+      priceTarget = analystRating?.priceTarget;
+      consensusRating = analystRating?.consensusRating;
+      console.log(lastPrice);
+      try {
+        changesPercentage = ((priceTarget / lastPrice - 1) * 100)?.toFixed(2) ?? 0;
+      } catch (e) {
         changesPercentage = 0;
       }
-    
+    }
   }
-}
-  
-  </script>
-  
+</script>
 
+<!--Start Analyst Card -->
+<div class="space-y-3 sm:pt-5 hidden sm:block sm:{Object?.keys(analystRating)?.length !== 0 ? '' : 'hidden'}">
+  <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px] -mx-1 sm:mx-0">
+    <!--Start Content-->
+    <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
+      <h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">Analyst Rating</h2>
 
-  
-  
-  <!--Start Analyst Card -->
-  <div class="space-y-3 sm:pt-5 hidden sm:block sm:{Object?.keys(analystRating)?.length !== 0 ? '' : 'hidden'}">  
-    <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px] -mx-1 sm:mx-0">
-     
-      <!--Start Content-->
-      <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
-        <h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">
-          Analyst Rating
-        </h2>
-  
-        <div class="flex flex-col mt-5 w-full">
-            <div class="flex flex-row m-auto w-full">
-                <span class="text-start mr-auto ml-5 text-white font-medium text-xl">
-                    Signal
-                </span>
-                <span class="mr-5 text-white font-medium text-xl">
-                    Price Target
-                </span>
-            </div>
-            <div class="flex flex-row m-auto w-full">
-                    {#if consensusRating === 'Buy' || consensusRating === 'Strong Buy'}
-                    <span class="text-start font-semibold text-[#10DB06] mr-auto ml-5 mt-2 text-xl">
-                    {consensusRating}
-                    </span>
-                    {:else if consensusRating === 'Sell' || consensusRating === 'Strong Sell' }
-                    <span class="text-start font-semibold text-[#FF2F1F] mr-auto ml-5 mt-2 text-xl">
-                        {consensusRating}
-                    </span>
-                    {:else}
-                    <span class="text-start font-semibold text-[#FF2F1F] mr-auto ml-5 mt-2 text-xl">
-                        {consensusRating}
-                    </span>
-                    {/if}
-              
-              <span class="mr-5 mt-2 font-semibold text-xl text-white">
-                {#if priceTarget !== 'n/a'}  
-                  ${priceTarget}
-                {:else}
-                  -
-                {/if}
-              </span>
-                
-                
-            </div>
+      <div class="flex flex-col mt-5 w-full">
+        <div class="flex flex-row m-auto w-full">
+          <span class="text-start mr-auto ml-5 text-white font-medium text-xl"> Signal </span>
+          <span class="mr-5 text-white font-medium text-xl"> Price Target </span>
         </div>
-        
-
-        <div class="text-white pl-4 pr-4 mt-6">
-          {#if changesPercentage < 0 }
-              The Stock Price has a downside of
-              <span style="color: #FF2F1F; font-weight: 500">{abbreviateNumber(Math.abs(changesPercentage))}%</span>
-          {:else if changesPercentage >= 0 }
-              The Stock Price has an upside of
-              <span style="color: #10DB06; font-weight: 500">{abbreviateNumber(Math.abs(changesPercentage))}%</span>
-          {/if}
-          based on <span style="font-weight: 600">{numOfAnalyst}</span> analysts in the past 12 months.
-      </div>
-      
-
-
-  
-      
-          <div class="mt-5 w-full rounded-full flex justify-center items-center mb-5">
-            <div class="flex flex-col items-center w-full">
-              <!--Start Progress-->
-  
-                  
-             
-              <div class="flex flex-col items-center w-full">
-                <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
-                  <span class="text-white font-medium text-start mr-auto">
-                    Buy
-                  </span>
-                  <span class="text-white text-md font-medium ml-auto">
-                    {buyCount}%
-                  </span>
-                </div>
-                <progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]" value={buyCount} max="100"></progress>
-              </div>
-              
-              <div class="flex flex-col items-center w-full">
-                <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
-                  <span class="text-white font-medium text-start mr-auto">
-                    Hold
-                  </span>
-                  <span class="text-white text-md font-medium ml-auto">
-                    {holdCount}%
-                  </span>
-                </div>
-                <progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#fff] [&::-moz-progress-bar]:bg-[#fff]" value={holdCount} max="100"></progress>
-              </div>
-            
-              <div class="flex flex-col items-center w-full">
-                <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
-                  <span class="text-white font-medium text-start mr-auto">
-                    Sell
-                  </span>
-                  <span class="text-white text-md font-medium ml-auto">
-                    {sellCount}%
-                  </span>
-                </div>
-                <progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]" value={sellCount} max="100"></progress>
-              </div>
-
-              
-              <!--End Progress-->
-            
-
-            </div>
-          </div>
-        
-          <a href={`/stocks/${$stockTicker}/analyst`} class="rounded-lg cursor-pointer w-11/12 py-2 h-full mt-6 text-lg text-center font-bold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100">
-            Analyst Ratings
-          </a>
-
-        </div>
-    </div>
-  </div>
-  
-  <!--End Analyst Card-->
-
-
-
-
-  <!--Start Mobile Analyst Card-->
-<div class="space-y-3 sm:pt-5 sm:hidden">  
-  
-  <div class="bg-[#000] h-auto w-screen">
-  
-   <!--Start Header-->
-   <div class="bg-[#09090B] w-full  p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
-    <h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
-      Analyst Rating
-    </h2>
-
-    <div class="flex flex-col items-center mt-10 w-full">
-
-      <div class="flex flex-row justify-between items-center w-full mb-5">
-
-
-        <div class="flex flex-col items-start ml-3 ">
-          <span class="text-white text-lg font-medium inline-block">
-            Recommendation:
-          </span>
-          <span class="text-white text-2xl font-medium inline-block">
-              {#if consensusRating === 'Buy' || consensusRating === 'Strong Buy'}
-              <span class="text-start font-medium text-[#10DB06] text-2xl">
+        <div class="flex flex-row m-auto w-full">
+          {#if consensusRating === "Buy" || consensusRating === "Strong Buy"}
+            <span class="text-start font-semibold text-[#10DB06] mr-auto ml-5 mt-2 text-xl">
               {consensusRating}
-              </span>
-              {:else if consensusRating === 'Sell' || consensusRating === 'Strong Sell' }
-              <span class="text-start font-medium text-[#FF2F1F] text-2xl">
-                  {consensusRating}
-              </span>
-              {:else if consensusRating === 'Hold'}
-              <span class="text-start font-medium text-[#FF2F1F] text-2xl">
-                  {consensusRating ?? 'n/a'}
-              </span>
-              {:else}
-              <span class="text-start font-medium text-white text-2xl">
-                n/a
             </span>
-              {/if}
-          </span>
-        </div>
+          {:else if consensusRating === "Sell" || consensusRating === "Strong Sell"}
+            <span class="text-start font-semibold text-[#FF2F1F] mr-auto ml-5 mt-2 text-xl">
+              {consensusRating}
+            </span>
+          {:else}
+            <span class="text-start font-semibold text-[#FF2F1F] mr-auto ml-5 mt-2 text-xl">
+              {consensusRating}
+            </span>
+          {/if}
 
-
-
-        <div class="flex flex-col items-start mr-5">
-          <span class="text-white ml-auto text-lg font-medium inline-block">
-            Price Target:
-          </span>
-          <span class="text-white ml-auto text-2xl font-medium inline-block">
-            {#if priceTarget !== 'n/a'}  
+          <span class="mr-5 mt-2 font-semibold text-xl text-white">
+            {#if priceTarget !== "n/a"}
               ${priceTarget}
             {:else}
               -
             {/if}
           </span>
         </div>
-    
       </div>
 
-      {#if changesPercentage < 0 }
-      <div class="text-white p-4 text-center">
+      <div class="text-white pl-4 pr-4 mt-6">
+        {#if changesPercentage < 0}
           The Stock Price has a downside of
-          <span class="text-[#FF2F1F] font-medium">{abbreviateNumber(Math?.abs(changesPercentage))} %</span>
-          based on <span class="font-semibold">{numOfAnalyst}</span> analysts.
-      </div>
-      {:else if changesPercentage >= 0 }
-      <div class="text-white p-4 text-center">
+          <span style="color: #FF2F1F; font-weight: 500">{abbreviateNumber(Math.abs(changesPercentage))}%</span>
+        {:else if changesPercentage >= 0}
           The Stock Price has an upside of
-          <span class="text-[#10DB06] font-medium">{abbreviateNumber(Math?.abs(changesPercentage))} %</span>
-          based on <span class="font-semibold">{numOfAnalyst}</span> analysts.
+          <span style="color: #10DB06; font-weight: 500">{abbreviateNumber(Math.abs(changesPercentage))}%</span>
+        {/if}
+        based on <span style="font-weight: 600">{numOfAnalyst}</span> analysts in the past 12 months.
       </div>
-      {/if}
 
+      <div class="mt-5 w-full rounded-full flex justify-center items-center mb-5">
+        <div class="flex flex-col items-center w-full">
+          <!--Start Progress-->
+
+          <div class="flex flex-col items-center w-full">
+            <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
+              <span class="text-white font-medium text-start mr-auto"> Buy </span>
+              <span class="text-white text-md font-medium ml-auto">
+                {buyCount}%
+              </span>
+            </div>
+            <progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]" value={buyCount} max="100"></progress>
+          </div>
+
+          <div class="flex flex-col items-center w-full">
+            <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
+              <span class="text-white font-medium text-start mr-auto"> Hold </span>
+              <span class="text-white text-md font-medium ml-auto">
+                {holdCount}%
+              </span>
+            </div>
+            <progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#fff] [&::-moz-progress-bar]:bg-[#fff]" value={holdCount} max="100"></progress>
+          </div>
+
+          <div class="flex flex-col items-center w-full">
+            <div class="flex flex-row items-center w-11/12 mt-5 mb-2">
+              <span class="text-white font-medium text-start mr-auto"> Sell </span>
+              <span class="text-white text-md font-medium ml-auto">
+                {sellCount}%
+              </span>
+            </div>
+            <progress class="progress bg-[#3B3D3F] w-11/12 [&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]" value={sellCount} max="100"></progress>
+          </div>
+
+          <!--End Progress-->
+        </div>
+      </div>
+
+      <a href={`/stocks/${$stockTicker}/forecast/analyst`} class="rounded-lg cursor-pointer w-11/12 py-2 h-full mt-6 text-lg text-center font-bold text-white m-auto hover:bg-purple-700 bg-purple-600 transition duration-100"> Analyst Ratings </a>
     </div>
   </div>
-  <!--End Header-->
+</div>
+
+<!--End Analyst Card-->
+
+<!--Start Mobile Analyst Card-->
+<div class="space-y-3 sm:pt-5 sm:hidden">
+  <div class="bg-[#000] h-auto w-screen">
+    <!--Start Header-->
+    <div class="bg-[#09090B] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
+      <h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">Analyst Rating</h2>
+
+      <div class="flex flex-col items-center mt-10 w-full">
+        <div class="flex flex-row justify-between items-center w-full mb-5">
+          <div class="flex flex-col items-start ml-3">
+            <span class="text-white text-lg font-medium inline-block"> Recommendation: </span>
+            <span class="text-white text-2xl font-medium inline-block">
+              {#if consensusRating === "Buy" || consensusRating === "Strong Buy"}
+                <span class="text-start font-medium text-[#10DB06] text-2xl">
+                  {consensusRating}
+                </span>
+              {:else if consensusRating === "Sell" || consensusRating === "Strong Sell"}
+                <span class="text-start font-medium text-[#FF2F1F] text-2xl">
+                  {consensusRating}
+                </span>
+              {:else if consensusRating === "Hold"}
+                <span class="text-start font-medium text-[#FF2F1F] text-2xl">
+                  {consensusRating ?? "n/a"}
+                </span>
+              {:else}
+                <span class="text-start font-medium text-white text-2xl"> n/a </span>
+              {/if}
+            </span>
+          </div>
+
+          <div class="flex flex-col items-start mr-5">
+            <span class="text-white ml-auto text-lg font-medium inline-block"> Price Target: </span>
+            <span class="text-white ml-auto text-2xl font-medium inline-block">
+              {#if priceTarget !== "n/a"}
+                ${priceTarget}
+              {:else}
+                -
+              {/if}
+            </span>
+          </div>
+        </div>
+
+        {#if changesPercentage < 0}
+          <div class="text-white p-4 text-center">
+            The Stock Price has a downside of
+            <span class="text-[#FF2F1F] font-medium">{abbreviateNumber(Math?.abs(changesPercentage))} %</span>
+            based on <span class="font-semibold">{numOfAnalyst}</span> analysts.
+          </div>
+        {:else if changesPercentage >= 0}
+          <div class="text-white p-4 text-center">
+            The Stock Price has an upside of
+            <span class="text-[#10DB06] font-medium">{abbreviateNumber(Math?.abs(changesPercentage))} %</span>
+            based on <span class="font-semibold">{numOfAnalyst}</span> analysts.
+          </div>
+        {/if}
+      </div>
+    </div>
+    <!--End Header-->
 
     {#if numOfAnalyst !== 0}
-    <div class="mt-5 flex flex-col m-auto items-center rounded-lg w-full mb-16 p-3">
-
-
-      <div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5  flex flex-row items-center">
-        <div class="flex flex-col -mt-2 w-full">
+      <div class="mt-5 flex flex-col m-auto items-center rounded-lg w-full mb-16 p-3">
+        <div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
+          <div class="flex flex-col -mt-2 w-full">
             <div class="flex flex-row items-center w-full">
-                <span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2">
-                  Buy
-                </span>
-            <span class="text-white text-md font-medium ml-auto">
-              {buyCount}%
-            </span>
+              <span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"> Buy </span>
+              <span class="text-white text-md font-medium ml-auto">
+                {buyCount}%
+              </span>
             </div>
-            <progress class="progress w-full {buyCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]'  : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}" value={buyCount} max="100"></progress>
+            <progress
+              class="progress w-full {buyCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
+              value={buyCount}
+              max="100"
+            ></progress>
+          </div>
+        </div>
+
+        <div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
+          <div class="flex flex-col -mt-2 w-full">
+            <div class="flex flex-row items-center w-full">
+              <span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"> Hold </span>
+              <span class="text-white text-md font-medium ml-auto">
+                {holdCount}%
+              </span>
+            </div>
+            <progress
+              class="progress w-full {holdCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
+              value={holdCount}
+              max="100"
+            ></progress>
+          </div>
+        </div>
+
+        <div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5 flex flex-row items-center">
+          <div class="flex flex-col -mt-2 w-full">
+            <div class="flex flex-row items-center w-full">
+              <span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2"> Sell </span>
+              <span class="text-white text-md font-medium ml-auto">
+                {sellCount}
+              </span>
+            </div>
+            <progress
+              class="progress w-full {sellCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]' : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}"
+              value={sellCount}
+              max="100"
+            ></progress>
+          </div>
         </div>
       </div>
-
-      <div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5  flex flex-row items-center">
-        <div class="flex flex-col -mt-2 w-full">
-            <div class="flex flex-row items-center w-full">
-                <span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2">
-                  Hold
-                </span>
-            <span class="text-white text-md font-medium ml-auto">
-              {holdCount}%
-            </span>
-            </div>
-            <progress class="progress w-full {holdCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]'  : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}" value={holdCount} max="100"></progress>
-        </div>
-      </div>
-
-      <div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5  flex flex-row items-center">
-        <div class="flex flex-col -mt-2 w-full">
-            <div class="flex flex-row items-center w-full">
-                <span class="text-white text-md font-medium text-start mb-2 mr-auto mt-2">
-                  Sell
-                </span>
-            <span class="text-white text-md font-medium ml-auto">
-              {sellCount}
-            </div>
-            <progress class="progress w-full {sellCount >= 50 ? '[&::-webkit-progress-value]:bg-[#10DB06] [&::-moz-progress-bar]:bg-[#10DB06]'  : '[&::-webkit-progress-value]:bg-[#FF2F1F] [&::-moz-progress-bar]:bg-[#FF2F1F]'}" value={sellCount} max="100"></progress>
-        </div>
-      </div>
-
-    
-    
-
-     
-    </div>
     {:else}
-      <div class=" mt-20 flex justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-        No data available
-      </div>
+      <div class=" mt-20 flex justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</div>
     {/if}
-
-  </div>
   </div>
+</div>
 <!--End Mobile Analyst Card-->
-  
diff --git a/src/lib/components/AnalystInsight.svelte b/src/lib/components/AnalystInsight.svelte
index ebffc5cf..7ac7c46a 100644
--- a/src/lib/components/AnalystInsight.svelte
+++ b/src/lib/components/AnalystInsight.svelte
@@ -1,15 +1,14 @@
-<script lang ='ts'>
-    import { analystInsightComponent, stockTicker, getCache, setCache} from '$lib/store';
-    import InfoModal from '$lib/components/InfoModal.svelte';
-  
-    export let data;
-  
-    let isLoaded = false;  
-  
-    let rawData = {};
+<script lang="ts">
+  import { analystInsightComponent, stockTicker, getCache, setCache } from "$lib/store";
+  import InfoModal from "$lib/components/InfoModal.svelte";
 
+  export let data;
 
-function latestInfoDate(inputDate) {
+  let isLoaded = false;
+
+  let rawData = {};
+
+  function latestInfoDate(inputDate) {
     // Convert the input date string to milliseconds since epoch
     const inputDateMs = Date?.parse(inputDate);
 
@@ -23,179 +22,145 @@ function latestInfoDate(inputDate) {
     const differenceInDays = Math?.floor(differenceInMs / (1000 * 60 * 60 * 24));
 
     // Return the difference in days
-    return differenceInDays <=1;
-}
-
+    return differenceInDays <= 1;
+  }
 
   const getAnalystInsight = async (ticker) => {
     // Get cached data for the specific tickerID
-    const cachedData = getCache(ticker, 'getAnalystInsight');
+    const cachedData = getCache(ticker, "getAnalystInsight");
     if (cachedData) {
       rawData = cachedData;
     } else {
-  
-      const postData = {'ticker': ticker};
+      const postData = { ticker: ticker };
       // make the POST request to the endpoint
-      const response = await fetch(data?.apiURL + '/analyst-insight', {
-        method: 'POST',
+      const response = await fetch(data?.apiURL + "/analyst-insight", {
+        method: "POST",
         headers: {
-          "Content-Type": "application/json", "X-API-KEY": data?.apiKey
+          "Content-Type": "application/json",
+          "X-API-KEY": data?.apiKey,
         },
-        body: JSON.stringify(postData)
+        body: JSON.stringify(postData),
       });
-  
+
       rawData = await response.json();
       // Cache the data for this specific tickerID with a specific name 'getAnalystInsight'
-      setCache(ticker, rawData, 'getAnalystInsight');
+      setCache(ticker, rawData, "getAnalystInsight");
     }
-    
-    if(Object?.keys(rawData)?.length !== 0) {
+
+    if (Object?.keys(rawData)?.length !== 0) {
       $analystInsightComponent = true;
     } else {
       $analystInsightComponent = false;
     }
   };
-  
-  
-  
+
   $: {
-  if($stockTicker && typeof window !== 'undefined') {
-    isLoaded=false;
-    const ticker = $stockTicker;
-    const asyncFunctions = [
-      getAnalystInsight(ticker)
-      ];
+    if ($stockTicker && typeof window !== "undefined") {
+      isLoaded = false;
+      const ticker = $stockTicker;
+      const asyncFunctions = [getAnalystInsight(ticker)];
       Promise.all(asyncFunctions)
-          .then((results) => {
-          })
-          .catch((error) => {
-            console.error('An error occurred:', error);
-          });
-    isLoaded = true;
-  
+        .then((results) => {})
+        .catch((error) => {
+          console.error("An error occurred:", error);
+        });
+      isLoaded = true;
+    }
   }
-  }
-  
-  
-  </script>
-    
-    
-    
-  <section class="overflow-hidden text-white h-full pb-8">
-    <main class="overflow-hidden ">
-                    
-        <div class="flex flex-row items-center">
-            <label for="analystInsightInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
-              <svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block mr-1 mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M20.562 10.188c.25-.688.313-1.376.25-2.063c-.062-.687-.312-1.375-.625-2c-.562-.937-1.375-1.687-2.312-2.125c-1-.437-2.063-.562-3.125-.312c-.5-.5-1.063-.938-1.688-1.25S11.687 2 11 2a5.17 5.17 0 0 0-3 .938c-.875.624-1.5 1.5-1.813 2.5c-.75.187-1.375.5-2 .875c-.562.437-1 1-1.375 1.562c-.562.938-.75 2-.625 3.063a5.44 5.44 0 0 0 1.25 2.874a4.7 4.7 0 0 0-.25 2.063c.063.688.313 1.375.625 2c.563.938 1.375 1.688 2.313 2.125c1 .438 2.062.563 3.125.313c.5.5 1.062.937 1.687 1.25S12.312 22 13 22a5.17 5.17 0 0 0 3-.937c.875-.625 1.5-1.5 1.812-2.5a4.54 4.54 0 0 0 1.938-.875c.562-.438 1.062-.938 1.375-1.563c.562-.937.75-2 .625-3.062c-.125-1.063-.5-2.063-1.188-2.876m-7.5 10.5c-1 0-1.75-.313-2.437-.875c0 0 .062-.063.125-.063l4-2.312a.5.5 0 0 0 .25-.25a.57.57 0 0 0 .062-.313V11.25l1.688 1v4.625a3.685 3.685 0 0 1-3.688 3.813M5 17.25c-.438-.75-.625-1.625-.438-2.5c0 0 .063.063.125.063l4 2.312a.56.56 0 0 0 .313.063c.125 0 .25 0 .312-.063l4.875-2.812v1.937l-4.062 2.375A3.7 3.7 0 0 1 7.312 19c-1-.25-1.812-.875-2.312-1.75M3.937 8.563a3.8 3.8 0 0 1 1.938-1.626v4.751c0 .124 0 .25.062.312a.5.5 0 0 0 .25.25l4.875 2.813l-1.687 1l-4-2.313a3.7 3.7 0 0 1-1.75-2.25c-.25-.937-.188-2.062.312-2.937M17.75 11.75l-4.875-2.812l1.687-1l4 2.312c.625.375 1.125.875 1.438 1.5s.5 1.313.437 2.063a3.7 3.7 0 0 1-.75 1.937c-.437.563-1 1-1.687 1.25v-4.75c0-.125 0-.25-.063-.312c0 0-.062-.126-.187-.188m1.687-2.5s-.062-.062-.125-.062l-4-2.313c-.125-.062-.187-.062-.312-.062s-.25 0-.313.062L9.812 9.688V7.75l4.063-2.375c.625-.375 1.312-.5 2.062-.5c.688 0 1.375.25 2 .688c.563.437 1.063 1 1.313 1.625s.312 1.375.187 2.062m-10.5 3.5l-1.687-1V7.063c0-.688.187-1.438.562-2C8.187 4.438 8.75 4 9.375 3.688a3.37 3.37 0 0 1 2.062-.313c.688.063 1.375.375 1.938.813c0 0-.063.062-.125.062l-4 2.313a.5.5 0 0 0-.25.25c-.063.125-.063.187-.063.312zm.875-2L12 9.5l2.187 1.25v2.5L12 14.5l-2.188-1.25z"/></svg>
-              AI Analyst Insight
-            </label>
-            <InfoModal
-              title={"AI Analyst Insight"}
-              content={"We use large language models to analyze the latest reports from Wall Street analysts, providing concise summaries and key insights. This approach helps save time and allows you to focus on the most important information."}
-              id={"analystInsightInfo"}
-            />
-        </div>
-  
-        {#if data?.user?.tier === 'Pro'}
-        {#if isLoaded}
-  
+</script>
+
+<section class="overflow-hidden text-white h-full pb-8">
+  <main class="overflow-hidden">
+    <div class="flex flex-row items-center">
+      <label for="analystInsightInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
+        <svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block mr-1 mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+          ><path
+            fill="#fff"
+            d="M20.562 10.188c.25-.688.313-1.376.25-2.063c-.062-.687-.312-1.375-.625-2c-.562-.937-1.375-1.687-2.312-2.125c-1-.437-2.063-.562-3.125-.312c-.5-.5-1.063-.938-1.688-1.25S11.687 2 11 2a5.17 5.17 0 0 0-3 .938c-.875.624-1.5 1.5-1.813 2.5c-.75.187-1.375.5-2 .875c-.562.437-1 1-1.375 1.562c-.562.938-.75 2-.625 3.063a5.44 5.44 0 0 0 1.25 2.874a4.7 4.7 0 0 0-.25 2.063c.063.688.313 1.375.625 2c.563.938 1.375 1.688 2.313 2.125c1 .438 2.062.563 3.125.313c.5.5 1.062.937 1.687 1.25S12.312 22 13 22a5.17 5.17 0 0 0 3-.937c.875-.625 1.5-1.5 1.812-2.5a4.54 4.54 0 0 0 1.938-.875c.562-.438 1.062-.938 1.375-1.563c.562-.937.75-2 .625-3.062c-.125-1.063-.5-2.063-1.188-2.876m-7.5 10.5c-1 0-1.75-.313-2.437-.875c0 0 .062-.063.125-.063l4-2.312a.5.5 0 0 0 .25-.25a.57.57 0 0 0 .062-.313V11.25l1.688 1v4.625a3.685 3.685 0 0 1-3.688 3.813M5 17.25c-.438-.75-.625-1.625-.438-2.5c0 0 .063.063.125.063l4 2.312a.56.56 0 0 0 .313.063c.125 0 .25 0 .312-.063l4.875-2.812v1.937l-4.062 2.375A3.7 3.7 0 0 1 7.312 19c-1-.25-1.812-.875-2.312-1.75M3.937 8.563a3.8 3.8 0 0 1 1.938-1.626v4.751c0 .124 0 .25.062.312a.5.5 0 0 0 .25.25l4.875 2.813l-1.687 1l-4-2.313a3.7 3.7 0 0 1-1.75-2.25c-.25-.937-.188-2.062.312-2.937M17.75 11.75l-4.875-2.812l1.687-1l4 2.312c.625.375 1.125.875 1.438 1.5s.5 1.313.437 2.063a3.7 3.7 0 0 1-.75 1.937c-.437.563-1 1-1.687 1.25v-4.75c0-.125 0-.25-.063-.312c0 0-.062-.126-.187-.188m1.687-2.5s-.062-.062-.125-.062l-4-2.313c-.125-.062-.187-.062-.312-.062s-.25 0-.313.062L9.812 9.688V7.75l4.063-2.375c.625-.375 1.312-.5 2.062-.5c.688 0 1.375.25 2 .688c.563.437 1.063 1 1.313 1.625s.312 1.375.187 2.062m-10.5 3.5l-1.687-1V7.063c0-.688.187-1.438.562-2C8.187 4.438 8.75 4 9.375 3.688a3.37 3.37 0 0 1 2.062-.313c.688.063 1.375.375 1.938.813c0 0-.063.062-.125.062l-4 2.313a.5.5 0 0 0-.25.25c-.063.125-.063.187-.063.312zm.875-2L12 9.5l2.187 1.25v2.5L12 14.5l-2.188-1.25z"
+          /></svg
+        >
+        AI Analyst Insight
+      </label>
+      <InfoModal
+        title={"AI Analyst Insight"}
+        content={"We use large language models to analyze the latest reports from Wall Street analysts, providing concise summaries and key insights. This approach helps save time and allows you to focus on the most important information."}
+        id={"analystInsightInfo"}
+      />
+    </div>
+
+    {#if data?.user?.tier === "Pro"}
+      {#if isLoaded}
         {#if Object?.keys(rawData)?.length !== 0}
-  
-        <div class="w-full flex flex-col items-start">
-            <div class="text-white text-[1rem] mt-2 mb-2 w-full">
-                The AI model summarizes the latest Wallstreet Analyst Insight Report and extracts key points for you, focusing on what matters most.
-            </div>
-        </div>
-  
-        
-        
-        <div class="w-full mt-4">
+          <div class="w-full flex flex-col items-start">
+            <div class="text-white text-[1rem] mt-2 mb-2 w-full">The AI model summarizes the latest Wallstreet Analyst Insight Report and extracts key points for you, focusing on what matters most.</div>
+          </div>
+
+          <div class="w-full mt-4">
+            <a href={"/stocks/" + $stockTicker + "/forecast/analyst"} class="text-blue-400 hover:text-white flex justify-end mb-3 text-sm sm:text-[1rem]"> See All Ratings </a>
 
-            <a href="{'/stocks/'+$stockTicker+'/analyst'}" class="text-blue-400 hover:text-white flex justify-end mb-3 text-sm sm:text-[1rem]">
-                See All Ratings
-            </a>
-    
             <div class="relative">
-                <div class="">
-                    
-                    <div class="flex justify-center ">
-                        <!--<div class="{rawData.changesPercentage >= 0 ? 'bg-[#10DB06]' : 'bg-[#FF2F1F]'} w-1.5 mb-5 rounded-l-xl" />-->
-                            
-                        <!--Start Item-->
-                        <div class="flex flex-row items-center w-full mb-6">
-                
-                            <div class="w-full rounded-lg {latestInfoDate(rawData?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#27272A]'} shadow-lg h-full pl-3 pt-2 pb-4">
-                                <div class="flex flex-col items-start"> 
+              <div class="">
+                <div class="flex justify-center">
+                  <!--<div class="{rawData.changesPercentage >= 0 ? 'bg-[#10DB06]' : 'bg-[#FF2F1F]'} w-1.5 mb-5 rounded-l-xl" />-->
 
-                                    <div class="flex flex-row items-start w-full pt-2">
-                                        <span class="text-white text-[0.915rem] pl-2 italic">Last Report from {rawData.date}</span>
-                                        {#if latestInfoDate(rawData.date)}
-                                            <label class="bg-[#2D4F8A] text-white font-medium text-xs rounded-lg px-2 py-0.5 ml-3">New</label>
-                                        {/if}
-                                    </div>
-
-                                    <div class="flex flex-col w-full pt-3 pl-2 pr-2 sm:pr-4">
-                                        <span class="text-white text-[1rem] ">
-                                            {rawData?.insight}
-                                        </span>
-                                    </div>
-                
-                                </div>
-                            </div>
+                  <!--Start Item-->
+                  <div class="flex flex-row items-center w-full mb-6">
+                    <div class="w-full rounded-lg {latestInfoDate(rawData?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#27272A]'} shadow-lg h-full pl-3 pt-2 pb-4">
+                      <div class="flex flex-col items-start">
+                        <div class="flex flex-row items-start w-full pt-2">
+                          <span class="text-white text-[0.915rem] pl-2 italic">Last Report from {rawData.date}</span>
+                          {#if latestInfoDate(rawData.date)}
+                            <label class="bg-[#2D4F8A] text-white font-medium text-xs rounded-lg px-2 py-0.5 ml-3">New</label>
+                          {/if}
                         </div>
-                        <!--End Item-->
 
+                        <div class="flex flex-col w-full pt-3 pl-2 pr-2 sm:pr-4">
+                          <span class="text-white text-[1rem]">
+                            {rawData?.insight}
+                          </span>
+                        </div>
+                      </div>
                     </div>
+                  </div>
+                  <!--End Item-->
                 </div>
+              </div>
             </div>
-        </div>
-  
-  
- 
-  
-  
-        
-        {/if}
-  
-        {: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"></span>
-            </label>
-            </div>
-        </div>
-        {/if}
-  
-        {:else}
-        <div class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
-            <svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
-            Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
           </div>
         {/if}
-  
-    </main>
-  </section>
-  
-  
-  
-  
-  <style>
-  
+      {: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"></span>
+            </label>
+          </div>
+        </div>
+      {/if}
+    {:else}
+      <div class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+        <svg class="mr-1.5 w-5 h-5 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+          ><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z" /></svg
+        >
+        Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+      </div>
+    {/if}
+  </main>
+</section>
+
+<style>
   .app {
-  height: 300px;
-  max-width: 100%; /* Ensure chart width doesn't exceed the container */
-  
+    height: 300px;
+    max-width: 100%; /* Ensure chart width doesn't exceed the container */
   }
-  
+
   @media (max-width: 640px) {
-  .app {
-    height: 210px;
+    .app {
+      height: 210px;
+    }
   }
-  }
-  
+
   .chart {
-  width: 100%;
+    width: 100%;
   }
-  
-  </style>
\ No newline at end of file
+</style>
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 66d9bdcc..40d8d306 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -1,23 +1,59 @@
 <script lang="ts">
+  import { AreaSeries, Chart, PriceLine, CandlestickSeries } from "svelte-lightweight-charts";
 
-  import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
-  
-  import { TrackingModeExitMode } from 'lightweight-charts';
-  import {getCache, setCache, corporateLobbyingComponent, taRatingComponent, swapComponent, analystInsightComponent, governmentContractComponent, optionsNetFlowComponent, borrowedShareComponent, clinicalTrialComponent, optionComponent, failToDeliverComponent, marketMakerComponent, analystEstimateComponent, sentimentComponent, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, varComponent, shareStatisticsComponent, enterpriseComponent, darkPoolComponent, retailVolumeComponent, shareholderComponent, trendAnalysisComponent,  revenueSegmentationComponent, priceAnalysisComponent, fundamentalAnalysisComponent, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
-  import { onDestroy, onMount } from 'svelte';
-  import BullBearSay from '$lib/components/BullBearSay.svelte';
-  import NextEarnings from '$lib/components/NextEarnings.svelte';
-  import CommunitySentiment from '$lib/components/CommunitySentiment.svelte';
-  import Lazy from '$lib/components/Lazy.svelte';
-    
-  
-    export let data;
-    export let form;
-  
-    let displayChartType = 'line';
-  
-    let prePostData = {};
-    let communitySentiment = {};
+  import { TrackingModeExitMode } from "lightweight-charts";
+  import {
+    getCache,
+    setCache,
+    corporateLobbyingComponent,
+    taRatingComponent,
+    swapComponent,
+    analystInsightComponent,
+    governmentContractComponent,
+    optionsNetFlowComponent,
+    borrowedShareComponent,
+    clinicalTrialComponent,
+    optionComponent,
+    failToDeliverComponent,
+    marketMakerComponent,
+    analystEstimateComponent,
+    sentimentComponent,
+    screenWidth,
+    displayCompanyName,
+    numberOfUnreadNotification,
+    globalForm,
+    varComponent,
+    shareStatisticsComponent,
+    enterpriseComponent,
+    darkPoolComponent,
+    retailVolumeComponent,
+    shareholderComponent,
+    trendAnalysisComponent,
+    revenueSegmentationComponent,
+    priceAnalysisComponent,
+    fundamentalAnalysisComponent,
+    isCrosshairMoveActive,
+    realtimePrice,
+    priceIncrease,
+    currentPortfolioPrice,
+    stockTicker,
+    isOpen,
+    isBeforeMarketOpen,
+    isWeekend,
+  } from "$lib/store";
+  import { onDestroy, onMount } from "svelte";
+  import BullBearSay from "$lib/components/BullBearSay.svelte";
+  import NextEarnings from "$lib/components/NextEarnings.svelte";
+  import CommunitySentiment from "$lib/components/CommunitySentiment.svelte";
+  import Lazy from "$lib/components/Lazy.svelte";
+
+  export let data;
+  export let form;
+
+  let displayChartType = "line";
+
+  let prePostData = {};
+  let communitySentiment = {};
 
   $: previousClose = data?.getStockQuote?.previousClose;
 
@@ -602,560 +638,373 @@
               </div>
             </div>
 
-                                      <div class="ml-auto">
-                                      {#if Object?.keys(prePostData)?.length !== 0 && prePostData?.price !== 0}
-                                      <div class="flex flex-col justify-end items-end">
-                                        <div class="flex flex-row items-center justify-end">
-                                        <span class="text-white text-lg sm:text-2xl font-bold">
-                                          ${prePostData?.price}
-                                        </span>
-                                        {#if prePostData?.changesPercentage >= 0}
-                                        <span class="ml-1 items-center justify-start text-[#10DB06] font-medium text-xs sm:text-sm">({prePostData?.changesPercentage}%)</span> 
-                                        {:else if prePostData?.changesPercentage < 0}
-                                        <span class="ml-1 items-center justify-start text-[#FF2F1F] font-medium text-xs sm:text-sm">({prePostData?.changesPercentage}%)</span> 
-                                        {/if}
-                                        </div>
-                                        {#if $isBeforeMarketOpen && !$isOpen && !$isWeekend}
-                                        <div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-24">
-                                          <span>Pre-market:</span>
-                                            <svg class="ml-1 w-4 h-4 inline-block"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#EA9703" d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64m-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48M58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"/></svg>
-                                        </div>
-                                        {:else}
-                                        <div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-28">
-                                          <span>Post-market:</span>
-                                            <svg class="ml-1 w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#70A1EF" d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"/></svg>
-                                        </div>
-                                        {/if}
+            <div class="ml-auto">
+              {#if Object?.keys(prePostData)?.length !== 0 && prePostData?.price !== 0}
+                <div class="flex flex-col justify-end items-end">
+                  <div class="flex flex-row items-center justify-end">
+                    <span class="text-white text-lg sm:text-2xl font-bold">
+                      ${prePostData?.price}
+                    </span>
+                    {#if prePostData?.changesPercentage >= 0}
+                      <span class="ml-1 items-center justify-start text-[#10DB06] font-medium text-xs sm:text-sm">({prePostData?.changesPercentage}%)</span>
+                    {:else if prePostData?.changesPercentage < 0}
+                      <span class="ml-1 items-center justify-start text-[#FF2F1F] font-medium text-xs sm:text-sm">({prePostData?.changesPercentage}%)</span>
+                    {/if}
+                  </div>
+                  {#if $isBeforeMarketOpen && !$isOpen && !$isWeekend}
+                    <div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-24">
+                      <span>Pre-market:</span>
+                      <svg class="ml-1 w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
+                        ><path
+                          fill="#EA9703"
+                          d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64m-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48M58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"
+                        /></svg
+                      >
+                    </div>
+                  {:else}
+                    <div class="flex flex-row items-center justify-end text-white text-[0.65rem] sm:text-sm font-normal text-end w-28">
+                      <span>Post-market:</span>
+                      <svg class="ml-1 w-4 h-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
+                        ><path
+                          fill="#70A1EF"
+                          d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"
+                        /></svg
+                      >
+                    </div>
+                  {/if}
+                </div>
+              {/if}
+            </div>
+          </div>
+          <!-----End-Header-CandleChart-Indicators------>
+          <!--Start Time Interval-->
+          <div class="hidden sm:flex flex-row items-center pl-1 sm:pl-6 w-full mt-4">
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1D")} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}"> 1D </button>
+              <div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1W")} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}"> 1W </button>
+              <div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1M")} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}"> 1M </button>
+              <div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("6M")} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}"> 6M </button>
+              <div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1Y")} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}"> 1Y </button>
+              <div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
 
-                                      </div>
-                                      {/if}
-                                      
-                                    </div>
-                                
-                                </div>
-                                <!-----End-Header-CandleChart-Indicators------>
-                                   <!--Start Time Interval-->
-                                   <div class="hidden sm:flex flex-row items-center pl-1 sm:pl-6 w-full mt-4">
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('1D')} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1D
-                                    </button>
-                                    <div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
-                                    </div>
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => (changeData('1W'))} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1W
-                                    </button>
-                                    <div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => (changeData('1M'))} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1M
-                                    </button>
-                                    <div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('6M')} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        6M
-                                    </button>
-                                    <div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-                                  <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('1Y')} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1Y
-                                    </button>
-                                    <div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                  </div>
-                                  
-                                  <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('MAX')} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        MAX
-                                    </button>
-                                    <div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                  
-                                  </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("MAX")} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}"> MAX </button>
+              <div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
 
+            <label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
+              {#if displayChartType === "line"}
+                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z" /></svg>
+              {:else}
+                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5L9 10l4 6l8-9.5" /></svg>
+              {/if}
+            </label>
+          </div>
+          <!--End Time Interval-->
 
-  
-                                  <label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
-                                    {#if displayChartType === 'line'}
-                                      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
-                                      {:else}
-                                      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5L9 10l4 6l8-9.5"/></svg>
-                                      {/if}
-                                </label>
-                                  
-                                </div>
-                                  <!--End Time Interval-->
-                                
-                                  <!--End Ticker Section-->
-                                <!-- Start Graph -->
-  
-                                {#if output !== null}
-                                  <div class ="w-full sm:pl-7 ml-auto max-w-5xl mb-10">
-                                    {#if displayData === '1D' && oneDayPrice?.length === 0}
-                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-                                      No data available
-                                    </h2>
-                                    {:else if displayData === '1W' && oneWeekPrice?.length === 0}
-                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-                                      No data available
-                                    </h2>
-                                    {:else if displayData === '1M' && oneMonthPrice?.length === 0}
-                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-                                      No data available
-                                    </h2>
-                                    {:else if displayData === '6M' && sixMonthPrice?.length === 0}
-                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-                                      No data available
-                                    </h2>
-                                    {:else if displayData === '1Y' && oneYearPrice?.length === 0}
-                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-                                      No data available
-                                    </h2>
-                                    {:else if displayData === 'MAX' && threeYearPrice?.length === 0}
-                                    <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
-                                      No data available
-                                    </h2>
-                                    {:else}
-  
-                                    <Chart {...options} autoSize={true} ref={(ref) => chart = ref} on:crosshairMove={handleCrosshairMove} >
-                                    
-                                    {#if displayData === '1D'}
-                                      {#if displayChartType === 'line'}
-                                      <AreaSeries 
-                                        data={oneDayPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                        lineWidth={1.5}
-                                        priceScaleId="left"
-                                        lineColor={colorChange}
-                                        topColor={topColorChange}
-                                        bottomColor={bottomColorChange}
-                                        crosshairMarkerVisible={false}
-                                        ref={handleSeriesReference}
-                                        priceLineVisible= {false}
-                                        lastPriceAnimation={1}
-                                        >
-                                        <PriceLine
-                                          price={oneDayPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                      </AreaSeries>
-                                      {:else}
-                                      <CandlestickSeries
-                                          data={oneDayPrice}
-                                          crosshairMarkerVisible={false}
-                                          ref={handleSeriesReference}
-                                          priceLineVisible= {false}
-                                          >
-                                        <PriceLine
-                                          price={oneDayPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                    </CandlestickSeries>
-                                      {/if}
-                                      {:else if displayData === '1W'}
-                                      {#if displayChartType === 'line'}
-                                      <AreaSeries 
-                                        data={oneWeekPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                        lineWidth={1.5}
-                                        priceScaleId="left"
-                                        lineColor={colorChange}
-                                        topColor={topColorChange}
-                                        bottomColor={bottomColorChange}
-                                        crosshairMarkerVisible={false}
-                                        ref={handleSeriesReference}
-                                        priceLineVisible= {false}
-                                        lastPriceAnimation={1}
-                                        >
-                                        <PriceLine
-                                          price={oneWeekPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                      </AreaSeries>
-                                      {:else}
-                                      <CandlestickSeries
-                                          data={oneWeekPrice}
-                                          crosshairMarkerVisible={false}
-                                          ref={handleSeriesReference}
-                                          priceLineVisible= {false}
-                                          >
-                                        <PriceLine
-                                          price={oneWeekPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                    </CandlestickSeries>
-                                      {/if}
-  
-                                      {:else if displayData === '1M'}
-                                      {#if displayChartType === 'line'}
-                                      <AreaSeries 
-                                        data={oneMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                        lineWidth={1.5}
-                                        priceScaleId="left"
-                                        lineColor={colorChange}
-                                        topColor={topColorChange}
-                                        bottomColor={bottomColorChange}
-                                        crosshairMarkerVisible={false}
-                                        ref={handleSeriesReference}
-                                        priceLineVisible= {false}
-                                        lastPriceAnimation={1}
-                                        >
-                                        <PriceLine
-                                          price={oneMonthPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                      </AreaSeries>
-                                      {:else}
-                                      <CandlestickSeries
-                                          data={oneMonthPrice}
-                                          crosshairMarkerVisible={false}
-                                          ref={handleSeriesReference}
-                                          priceLineVisible= {false}
-                                          >
-                                        <PriceLine
-                                          price={oneMonthPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                    </CandlestickSeries>
-                                      {/if}
-  
-  
-                                      {:else if displayData === '6M'}
-                                      {#if displayChartType === 'line'}
-                                      <AreaSeries 
-                                      data={sixMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                        lineWidth={1.5}
-                                        priceScaleId="left"
-                                        lineColor={colorChange}
-                                        topColor={topColorChange}
-                                        bottomColor={bottomColorChange}
-                                        crosshairMarkerVisible={false}
-                                        ref={handleSeriesReference}
-                                        priceLineVisible= {false}
-                                        lastPriceAnimation={1}
-                                        >
-                                        <PriceLine
-                                          price={sixMonthPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                      </AreaSeries>
-                                      {:else}
-                                      <CandlestickSeries
-                                          data={sixMonthPrice}
-                                          crosshairMarkerVisible={false}
-                                          ref={handleSeriesReference}
-                                          priceLineVisible= {false}
-                                          >
-                                        <PriceLine
-                                          price={sixMonthPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                    </CandlestickSeries>
-                                      {/if}
-  
-  
-  
-                                      {:else if displayData === '1Y'}
-                                      {#if displayChartType === 'line'}
-                                      <AreaSeries 
-                                      data={oneYearPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                        lineWidth={1.5}
-                                        priceScaleId="left"
-                                        lineColor={colorChange}
-                                        topColor={topColorChange}
-                                        bottomColor={bottomColorChange}
-                                        crosshairMarkerVisible={false}
-                                        ref={handleSeriesReference}
-                                        priceLineVisible= {false}
-                                        lastPriceAnimation={1}
-                                        >
-                                        <PriceLine
-                                          price={oneYearPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                      </AreaSeries>
-                                      {:else}
-                                      <CandlestickSeries
-                                          data={oneYearPrice}
-                                          crosshairMarkerVisible={false}
-                                          ref={handleSeriesReference}
-                                          priceLineVisible= {false}
-                                          >
-                                        <PriceLine
-                                          price={oneYearPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                    </CandlestickSeries>
-                                      {/if}
-  
-  
-  
-                                      {:else if displayData === 'MAX'}
-                                      {#if displayChartType === 'line'}
-                                      <AreaSeries 
-                                        data={threeYearPrice?.map(({ time, close }) => ({ time, value: close }))}
-                                        lineWidth={1.5}
-                                        priceScaleId="left"
-                                        lineColor={colorChange}
-                                        topColor={topColorChange}
-                                        bottomColor={bottomColorChange}
-                                        crosshairMarkerVisible={false}
-                                        ref={handleSeriesReference}
-                                        priceLineVisible= {false}
-                                        lastPriceAnimation={1}
-                                        >
-                                        <PriceLine
-                                          price={threeYearPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                      </AreaSeries>
-                                      {:else}
-                                      <CandlestickSeries
-                                          data={threeYearPrice}
-                                          crosshairMarkerVisible={false}
-                                          ref={handleSeriesReference}
-                                          priceLineVisible= {false}
-                                          >
-                                        <PriceLine
-                                          price={threeYearPrice?.at(0)?.close}
-                                          lineWidth = {1}
-                                          color="#fff"
-                                        />
-                                    </CandlestickSeries>
-                                      {/if}
-  
-  
-                                    {/if}
-                                    </Chart>
-                                    {/if}
-  
-                                  </div>
-                                  {:else}
-                                  <!-- else output not loaded yet-->
-                                    <div class="flex justify-center w-full sm:w-[650px] h-80 sm:w-[600px] items-center">
-                                        <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"></span>
-                                          </label>
-                                      </div>  
-                                    </div>
-                                  {/if}
-                                  
-                                  <!--End Graph-->
-  
-                                    <!--Start Time Interval-->
-                                    <div class="pl-1 w-screen sm:hidden flex flex-row items-center">
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('1D')} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1D
-                                    </button>
-                                    <div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
-                                    </div>
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => (changeData('1W'))} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1W
-                                    </button>
-                                    <div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => (changeData('1M'))} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1M
-                                    </button>
-                                    <div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-                                    <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('6M')} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        6M
-                                    </button>
-                                    <div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                    </div>
-                                  <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('1Y')} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        1Y
-                                    </button>
-                                    <div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                  </div>
-                                  
-                                  <div class="flex flex-col items-center mr-4">
-                                    <button on:click={() => changeData('MAX')} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}">
-                                        MAX
-                                    </button>
-                                    <div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
-                                  </div>
+          <!--End Ticker Section-->
+          <!-- Start Graph -->
 
-                                    
-                                    </div>
-                                    <!--End Time Interval-->
+          {#if output !== null}
+            <div class="w-full sm:pl-7 ml-auto max-w-5xl mb-10">
+              {#if displayData === "1D" && oneDayPrice?.length === 0}
+                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
+              {:else if displayData === "1W" && oneWeekPrice?.length === 0}
+                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
+              {:else if displayData === "1M" && oneMonthPrice?.length === 0}
+                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
+              {:else if displayData === "6M" && sixMonthPrice?.length === 0}
+                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
+              {:else if displayData === "1Y" && oneYearPrice?.length === 0}
+                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
+              {:else if displayData === "MAX" && threeYearPrice?.length === 0}
+                <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">No data available</h2>
+              {:else}
+                <Chart {...options} autoSize={true} ref={(ref) => (chart = ref)} on:crosshairMove={handleCrosshairMove}>
+                  {#if displayData === "1D"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={oneDayPrice?.map(({ time, close }) => ({ time, value: close }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine price={oneDayPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries data={oneDayPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
+                        <PriceLine price={oneDayPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "1W"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={oneWeekPrice?.map(({ time, close }) => ({ time, value: close }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine price={oneWeekPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries data={oneWeekPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
+                        <PriceLine price={oneWeekPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "1M"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={oneMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine price={oneMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries data={oneMonthPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
+                        <PriceLine price={oneMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "6M"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={sixMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine price={sixMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries data={sixMonthPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
+                        <PriceLine price={sixMonthPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "1Y"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={oneYearPrice?.map(({ time, close }) => ({ time, value: close }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine price={oneYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries data={oneYearPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
+                        <PriceLine price={oneYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </CandlestickSeries>
+                    {/if}
+                  {:else if displayData === "MAX"}
+                    {#if displayChartType === "line"}
+                      <AreaSeries
+                        data={threeYearPrice?.map(({ time, close }) => ({ time, value: close }))}
+                        lineWidth={1.5}
+                        priceScaleId="left"
+                        lineColor={colorChange}
+                        topColor={topColorChange}
+                        bottomColor={bottomColorChange}
+                        crosshairMarkerVisible={false}
+                        ref={handleSeriesReference}
+                        priceLineVisible={false}
+                        lastPriceAnimation={1}
+                      >
+                        <PriceLine price={threeYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </AreaSeries>
+                    {:else}
+                      <CandlestickSeries data={threeYearPrice} crosshairMarkerVisible={false} ref={handleSeriesReference} priceLineVisible={false}>
+                        <PriceLine price={threeYearPrice?.at(0)?.close} lineWidth={1} color="#fff" />
+                      </CandlestickSeries>
+                    {/if}
+                  {/if}
+                </Chart>
+              {/if}
+            </div>
+          {:else}
+            <!-- else output not loaded yet-->
+            <div class="flex justify-center w-full sm:w-[650px] h-80 sm:w-[600px] items-center">
+              <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"></span>
+                </label>
+              </div>
+            </div>
+          {/if}
 
+          <!--End Graph-->
 
-                                  <div class="w-full mt-14 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
-                                      <CommunitySentiment communitySentiment={communitySentiment}/>
-                                  </div>
+          <!--Start Time Interval-->
+          <div class="pl-1 w-screen sm:hidden flex flex-row items-center">
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1D")} class="text-sm font-medium text-gray-400 {displayData === '1D' ? 'text-white ' : 'bg-[#09090B]'}"> 1D </button>
+              <div class="{displayData === '1D' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] rounded-full" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1W")} class="w-full text-sm font-medium text-gray-400 {displayData === '1W' ? 'text-white ' : 'bg-[#09090B]'}"> 1W </button>
+              <div class="{displayData === '1W' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1M")} class="text-sm font-medium text-gray-400 {displayData === '1M' ? 'text-white ' : 'bg-[#09090B]'}"> 1M </button>
+              <div class="{displayData === '1M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("6M")} class="text-sm font-medium text-gray-400 {displayData === '6M' ? 'text-white ' : 'bg-[#09090B]'}"> 6M </button>
+              <div class="{displayData === '6M' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("1Y")} class="text-sm font-medium text-gray-400 {displayData === '1Y' ? 'text-white ' : 'bg-[#09090B]'}"> 1Y </button>
+              <div class="{displayData === '1Y' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
 
+            <div class="flex flex-col items-center mr-4">
+              <button on:click={() => changeData("MAX")} class="text-sm font-medium text-gray-400 {displayData === 'MAX' ? 'text-white ' : 'bg-[#09090B]'}"> MAX </button>
+              <div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
+            </div>
+          </div>
+          <!--End Time Interval-->
 
-                                {#if $screenWidth <= 1022} <!--BUG: Dont remove since when changing ETF symbol display freezes-->
-                               
-                                <div class="w-full mt-10 m-auto sm:p-6 lg:hidden ">
-                                  <Lazy>
-                                    <h3 class="cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
-                                      Key Information
-                                    </h3>
-                                    {#await import('$lib/components/StockKeyInformation.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp}
-                                        data={data} />
-                                    {/await}
-                                  </Lazy>
+          <div class="w-full mt-14 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
+            <CommunitySentiment {communitySentiment} />
+          </div>
 
-                                  </div>
-                                  {/if}
+          {#if $screenWidth <= 1022}
+            <!--BUG: Dont remove since when changing ETF symbol display freezes-->
 
-                               
-                                  <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getNextEarnings || {})?.length !== 0 ? '' : 'hidden'}">
-                                    <NextEarnings data={data}/>
-                                  </div>
+            <div class="w-full mt-10 m-auto sm:p-6 lg:hidden">
+              <Lazy>
+                <h3 class="cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">Key Information</h3>
+                {#await import("$lib/components/StockKeyInformation.svelte") then { default: Comp }}
+                  <svelte:component this={Comp} {data} />
+                {/await}
+              </Lazy>
+            </div>
+          {/if}
 
-                                <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getBullBearSay || {})?.length !== 0 ? '' : 'hidden'}">
-                                  <BullBearSay data={data}/>
-                                </div>
+          <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getNextEarnings || {})?.length !== 0 ? '' : 'hidden'}">
+            <NextEarnings {data} />
+          </div>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data?.getWhyPriceMoved?.length !== 0  ? '' : 'hidden'}">
-                                  {#await import('$lib/components/WIIM.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
+          <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(data?.getBullBearSay || {})?.length !== 0 ? '' : 'hidden'}">
+            <BullBearSay {data} />
+          </div>
 
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data?.getWhyPriceMoved?.length !== 0 ? '' : 'hidden'}">
+              {#await import("$lib/components/WIIM.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pt-6 {!$analystInsightComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/AnalystInsight.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$clinicalTrialComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/ClinicalTrial.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$clinicalTrialComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/ClinicalTrial.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
+          <Lazy>
+            <div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/VaR.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pt-6 {!$governmentContractComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/GovernmentContract.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$priceAnalysisComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/PriceAnalysis.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
-                                
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$trendAnalysisComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/TrendAnalysis.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$corporateLobbyingComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/CorporateLobbying.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$fundamentalAnalysisComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/FundamentalAnalysis.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$swapComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/Swap.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$sentimentComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$enterpriseComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/Enterprise.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/OptionsData.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/VaR.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
-                                
-                              
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionsNetFlowComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/OptionsNetFlow.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$analystEstimateComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/AnalystEstimate.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data}/>
-                                  {/await}
-                                  </div>
-                                </Lazy>
-
-                                
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pt-6 {!$governmentContractComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/GovernmentContract.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                                </Lazy>
-
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$corporateLobbyingComponent ? 'hidden' : ''}">
-                                    {#await import('$lib/components/CorporateLobbying.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} data={data} />
-                                    {/await}
-                                  </div>
-                                </Lazy>
-
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$swapComponent ? 'hidden' : ''}">
-                                    {#await import('$lib/components/Swap.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} data={data} />
-                                    {/await}
-                                  </div>
-                                </Lazy>
-
-                                  <Lazy>
-                                    <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$enterpriseComponent ? 'hidden' : ''}">
-                                    {#await import('$lib/components/Enterprise.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} data={data} />
-                                    {/await}
-                                  </div>
-                                  </Lazy>
-
-                                  <Lazy>
-                                    <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionComponent ? 'hidden' : ''}">
-                                    {#await import('$lib/components/OptionsData.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} data={data} />
-                                    {/await}
-                                  </div>
-                                  </Lazy>
-
-                                  <Lazy>
-                                    <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionsNetFlowComponent ? 'hidden' : ''}">
-                                      {#await import('$lib/components/OptionsNetFlow.svelte') then {default: Comp}}
-                                        <svelte:component this={Comp} data={data} />
-                                      {/await}
-                                    </div>
-                                  </Lazy>
-                                
-                                  <!--
+          <!--
                                   <Lazy>
                                     <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$impliedVolatilityComponent ? 'hidden' : ''}">
                                       {#await import('$lib/components/ImpliedVolatility.svelte') then {default: Comp}}
@@ -1164,95 +1013,74 @@
                                     </div>
                                   </Lazy>
                                   -->
-                                
 
-                                 <!--Start RevenueSegmentation-->
-                                  <Lazy>
-                                    <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {!$revenueSegmentationComponent ? 'hidden' : ''}">
-                                    {#await import('$lib/components/RevenueSegmentation.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} apiURL={data?.apiURL} apiKey={data?.apiKey} userTier={data?.user?.tier}/>
-                                    {/await}
-                                    </div>
-                                    </Lazy>
-                               <!--End RevenueSegmentation-->
-                              
-                              <Lazy>
-                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$failToDeliverComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/FailToDeliver.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                              </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$failToDeliverComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/FailToDeliver.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                              <Lazy>
-                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$borrowedShareComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/BorrowedShare.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                              </Lazy>
-                              
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$borrowedShareComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/BorrowedShare.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                              <Lazy>
-                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$marketMakerComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/MarketMaker.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data} />
-                                  {/await}
-                                </div>
-                              </Lazy>
-                              
-                              
-                               <Lazy>
-                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$darkPoolComponent ? 'hidden' : ''}">
-                                {#await import('$lib/components/DarkPool.svelte') then {default: Comp}}
-                                  <svelte:component this={Comp} data={data} />
-                                {/await}
-                              </div>
-                              </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$marketMakerComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/MarketMaker.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$darkPoolComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/DarkPool.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                               <Lazy>
-                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$retailVolumeComponent ? 'hidden' : ''}">
-                                {#await import('$lib/components/RetailVolume.svelte') then {default: Comp}}
-                                  <svelte:component this={Comp} data={data} />
-                                {/await}
-                              </div>
-                              </Lazy>
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$retailVolumeComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/RetailVolume.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
+          <Lazy>
+            <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$shareStatisticsComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/ShareStatistics.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$shareStatisticsComponent ? 'hidden' : ''}">
-                                  {#await import('$lib/components/ShareStatistics.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} data={data}/>
-                                  {/await}
-                                </div>
-                                </Lazy>
+          <!--Start Shareholders-->
+          <Lazy>
+            <div class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5 {!$shareholderComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/ShareHolders.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
+          <!--End Shareholders-->
 
-                                  
-                                   <!--Start Shareholders-->
-                                   <Lazy>
-                                    <div class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5 {!$shareholderComponent ? 'hidden' : ''}">
-                                    {#await import('$lib/components/ShareHolders.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} data={data}/>
-                                    {/await}
-                                    </div>
-                                    </Lazy>
-                                   <!--End Shareholders-->
+          <Lazy>
+            <div class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {!$taRatingComponent ? 'hidden' : ''}">
+              {#await import("$lib/components/TARating.svelte") then { default: Comp }}
+                <svelte:component this={Comp} {data} />
+              {/await}
+            </div>
+          </Lazy>
 
-  
-                                 
-                              
-                                  <Lazy>
-                                    <div class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {!$taRatingComponent ? 'hidden' : ''}">
-                                      {#await import('$lib/components/TARating.svelte') then {default: Comp}}
-                                        <svelte:component this={Comp} data={data}/>
-                                      {/await}
-                                    </div>
-                                  </Lazy>
-
-  
-                  
-                                  <!--
+          <!--
                                   <Lazy>
                                   <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {!$dcfComponent ? 'hidden' : ''}">
                                     {#await import('$lib/components/DCF.svelte') then {default: Comp}}
@@ -1269,36 +1097,22 @@
                                   </div>
                                   -->
 
-                                  <Lazy>
-                                    <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {data?.getStockDeck?.at(0)?.stockSplits?.length === 0 ? 'hidden' : ''}">
-                                      {#await import('$lib/components/StockSplits.svelte') then {default: Comp}}
-                                        <svelte:component this={Comp} stockDeck={data?.getStockDeck}/>
-                                      {/await}
-                                  </div>
-                                </Lazy>
-  
-
-                              
-  
-  
-                      
-  
-                            </div>
-          </div>
+          <Lazy>
+            <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {data?.getStockDeck?.at(0)?.stockSplits?.length === 0 ? 'hidden' : ''}">
+              {#await import("$lib/components/StockSplits.svelte") then { default: Comp }}
+                <svelte:component this={Comp} stockDeck={data?.getStockDeck} />
+              {/await}
+            </div>
+          </Lazy>
+        </div>
+      </div>
     </div>
-  </section>
-  
-  
-  
-  
-  
-  
-  <!--End-Indicator-Modal-->
-  
-  
-  <style lang='scss'>
-     
-  
+  </div>
+</section>
+
+<!--End-Indicator-Modal-->
+
+<style lang="scss">
   canvas {
     width: 100%;
     height: 100%;
diff --git a/src/routes/stocks/[tickerID]/forecast/+layout.svelte b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
index 2d88696c..ab49d3e2 100644
--- a/src/routes/stocks/[tickerID]/forecast/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/forecast/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { stockTicker, screenWidth } from "$lib/store";
+  import { onDestroy } from "svelte";
   import { page } from "$app/stores";
 
   let displaySubSection = "overview";
@@ -24,6 +25,9 @@
       analyst: "/forecast/analyst",
     };
 
+    console.log(state);
+    console.log(subSectionMap[state]);
+
     if (state !== "overview" && subSectionMap[state]) {
       displaySubSection = state;
       //goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
@@ -32,6 +36,17 @@
       //goto(`/stocks/${$stockTicker}/stats`);
     }
   }
+
+  const unsubscribe = page.subscribe(($page) => {
+    const splitRoute = $page.url.pathname.split("/");
+    const routeState = splitRoute[splitRoute.length - 1] !== "forecast" ? splitRoute[splitRoute.length - 1] : "overview";
+
+    changeSubSection(routeState);
+  });
+
+  onDestroy(() => {
+    unsubscribe();
+  });
 </script>
 
 <section class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">