analyst tab => forecast tab

src/routes/stocks/[tickerID]/+layout.svelte

@@ -97,7 +97,7 @@ function handleTypeOfTrade(state:string)
       options: "/options",
       dividends: "/dividends",
       fundamental: "/stats",
-      analyst: "/analyst",
+      forecast: "/forecast",
       news: "/news",
     };
 
@@ -320,7 +320,7 @@ $: {
         options: "options",
         insider: "insider",
         dividends: "dividends",
-        analyst: "analyst",
+        forecast: "forecast",
         news: "news",
       };
       displaySection = sectionMap[parts?.find((part) => Object?.keys(sectionMap)?.includes(part))] || "overview";
@@ -613,6 +613,17 @@ $: {
                           >
                           <div class="{displaySection === 'fundamental' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.8rem]" />
                         </li>
+                        <li class="cursor-pointer flex flex-col items-center">
+                          <a
+                            href={`/stocks/${$stockTicker}/forecast`}
+                            id="item3"
+                            on:click={() => changeSection("forecast", "item3")}
+                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'forecast' ? 'text-white ' : 'bg-[#09090B]'}"
+                          >
+                            Forecast
+                          </a>
+                          <div class="{displaySection === 'forecast' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" />
+                        </li>
                         <li class="cursor-pointer flex flex-col items-center">
                           <a
                             href={`/stocks/${$stockTicker}/options`}
@@ -624,17 +635,6 @@ $: {
                           </a>
                           <div class="{displaySection === 'options' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" />
                         </li>
-                        <li class="cursor-pointer flex flex-col items-center">
-                          <a
-                            href={`/stocks/${$stockTicker}/analyst`}
-                            id="item3"
-                            on:click={() => changeSection("analyst", "item3")}
-                            class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'analyst' ? 'text-white ' : 'bg-[#09090B]'}"
-                          >
-                            Analyst
-                          </a>
-                          <div class="{displaySection === 'analyst' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" />
-                        </li>
                         <li class="cursor-pointer flex flex-col items-center">
                           <a
                             href={`/stocks/${$stockTicker}/insider`}

src/routes/stocks/[tickerID]/+page.svelte

@@ -8,7 +8,6 @@
     corporateLobbyingComponent,
     taRatingComponent,
     swapComponent,
-    analystInsightComponent,
     governmentContractComponent,
     optionsNetFlowComponent,
     borrowedShareComponent,
@@ -16,8 +15,6 @@
     optionComponent,
     failToDeliverComponent,
     marketMakerComponent,
-    analystEstimateComponent,
-    sentimentComponent,
     screenWidth,
     displayCompanyName,
     numberOfUnreadNotification,
@@ -28,10 +25,6 @@
     darkPoolComponent,
     retailVolumeComponent,
     shareholderComponent,
-    trendAnalysisComponent,
-    revenueSegmentationComponent,
-    priceAnalysisComponent,
-    fundamentalAnalysisComponent,
     isCrosshairMoveActive,
     realtimePrice,
     priceIncrease,
@@ -935,14 +928,6 @@
             </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} />
-              {/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 }}
@@ -951,38 +936,6 @@
             </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} />
-              {/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} />
-              {/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} />
-              {/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} />
-              {/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 }}

src/routes/stocks/[tickerID]/forecast/+layout.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { stockTicker, screenWidth } from "$lib/store";
+  import { page } from "$app/stores";
+
+  let displaySubSection = "overview";
+
+  if (displaySubSection) {
+    const parts = $page?.url?.pathname.split("/");
+    const sectionMap = {
+      overview: "overview",
+      ai: "ai",
+      analyst: "analyst",
+    };
+
+    const foundSection = parts?.find((part) => Object?.values(sectionMap)?.includes(part));
+
+    displaySubSection = Object?.keys(sectionMap)?.find((key) => sectionMap[key] === foundSection) || "overview";
+  }
+
+  function changeSubSection(state) {
+    const subSectionMap = {
+      overview: "/forecast",
+      ai: "/forecast/ai",
+      analyst: "/forecast/analyst",
+    };
+
+    if (state !== "overview" && subSectionMap[state]) {
+      displaySubSection = state;
+      //goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
+    } else {
+      displaySubSection = state;
+      //goto(`/stocks/${$stockTicker}/stats`);
+    }
+  }
+</script>
+
+<section class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
+  <div class="m-auto h-full overflow-hidden">
+    <main class="w-fit sm:w-full sm:max-w-2xl">
+      <div class="m-auto">
+        <div class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar' : 'no-scrollbar'} mb-2">
+          <ul class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2">
+            <li class="cursor-pointer flex flex-col items-center">
+              <a
+                href={`/stocks/${$stockTicker}/forecast`}
+                on:click={() => changeSubSection("overview")}
+                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'overview' ? 'text-white ' : 'bg-[#09090B]'}"
+              >
+                Overview
+              </a>
+              <div class="{displaySubSection === 'overview' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
+            </li>
+            <li class="cursor-pointer flex flex-col items-center">
+              <a href={`/stocks/${$stockTicker}/forecast/ai`} on:click={() => changeSubSection("ai")} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'ai' ? 'text-white ' : 'bg-[#09090B]'}">
+                AI
+              </a>
+              <div class="{displaySubSection === 'ai' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
+            </li>
+            <li class="cursor-pointer flex flex-col items-center">
+              <a
+                href={`/stocks/${$stockTicker}/forecast/analyst`}
+                on:click={() => changeSubSection("analyst")}
+                class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'analyst' ? 'text-white ' : 'bg-[#09090B]'}"
+              >
+                Analysts
+              </a>
+              <div class="{displaySubSection === 'analyst' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </main>
+
+    <slot />
+  </div>
+</section>
+
+<style>
+  .scrollbar {
+    display: grid;
+    grid-gap: 18px;
+    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+    grid-auto-flow: column;
+    overflow-x: auto;
+    scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
+    scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
+  }
+
+  /* Custom scrollbar for Webkit (Chrome, Safari) */
+  .scrollbar::-webkit-scrollbar {
+    width: 0; /* Hide the width of the scrollbar */
+    height: 0; /* Hide the height of the scrollbar */
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    background: transparent; /* Make the thumb transparent */
+  }
+</style>

src/routes/stocks/[tickerID]/forecast/+page.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { numberOfUnreadNotification, displayCompanyName, stockTicker, analystEstimateComponent, currentPortfolioPrice } from "$lib/store";
+  import Lazy from "$lib/components/Lazy.svelte";
+
+  export let data;
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$stockTicker}) Forecast Overview · stocknear
+  </title>
+  <meta name="description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+
+  <!-- Other meta tags -->
+  <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`} />
+  <meta property="og:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+  <meta property="og:type" content="website" />
+  <!-- Add more Open Graph meta tags as needed -->
+
+  <!-- Twitter specific meta tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`} />
+  <meta name="twitter:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+
+<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
+  <div class="flex justify-center m-auto h-full overflow-hidden w-full">
+    <div class="relative flex justify-center items-center overflow-hidden w-full">
+      <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
+        <Lazy>
+          <div class="w-full m-auto sm:pb-6 sm:pt-6 {!$analystEstimateComponent ? 'hidden' : ''}">
+            {#await import("$lib/components/AnalystEstimate.svelte") then { default: Comp }}
+              <svelte:component this={Comp} {data} />
+            {/await}
+          </div>
+        </Lazy>
+      </div>
+    </div>
+  </div>
+</section>

src/routes/stocks/[tickerID]/forecast/ai/+page.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { numberOfUnreadNotification, displayCompanyName, stockTicker, analystInsightComponent, sentimentComponent, trendAnalysisComponent, priceAnalysisComponent, fundamentalAnalysisComponent } from "$lib/store";
+  import Lazy from "$lib/components/Lazy.svelte";
+
+  export let data;
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$stockTicker}) Forecast AI · stocknear
+  </title>
+  <meta name="description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+
+  <!-- Other meta tags -->
+  <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Forecast AI · stocknear`} />
+  <meta property="og:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+  <meta property="og:type" content="website" />
+  <!-- Add more Open Graph meta tags as needed -->
+
+  <!-- Twitter specific meta tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Forecast AI · stocknear`} />
+  <meta name="twitter:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+
+<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
+  <div class="flex justify-center m-auto h-full overflow-hidden w-full">
+    <div class="relative flex justify-center items-center overflow-hidden w-full">
+      <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
+        <Lazy>
+          <div class="w-full mt-10 sm:mt-0 m-auto sm:pt-6 {!$analystInsightComponent ? 'hidden' : ''}">
+            {#await import("$lib/components/AnalystInsight.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:pb-6 sm:pt-6 {!$priceAnalysisComponent ? 'hidden' : ''}">
+            {#await import("$lib/components/PriceAnalysis.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:pb-6 sm:pt-6 {!$trendAnalysisComponent ? 'hidden' : ''}">
+            {#await import("$lib/components/TrendAnalysis.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:pb-6 sm:pt-6 {!$fundamentalAnalysisComponent ? 'hidden' : ''}">
+            {#await import("$lib/components/FundamentalAnalysis.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:pb-6 sm:pt-6 {!$sentimentComponent ? 'hidden' : ''}">
+            {#await import("$lib/components/SentimentAnalysis.svelte") then { default: Comp }}
+              <svelte:component this={Comp} {data} />
+            {/await}
+          </div>
+        </Lazy>
+      </div>
+    </div>
+  </div>
+</section>

src/routes/stocks/[tickerID]/forecast/ai/+page.ts

@@ -0,0 +1,43 @@
+import { getCache, setCache } from '$lib/store';
+
+
+export const load = async ({ parent, params }) => {
+
+  const getAnalystTickerHistory = async () => {
+    
+    let output;
+
+    const cachedData = getCache(params.tickerID, 'getAnalystTickerHistory');
+      if (cachedData) {
+        output = cachedData;
+      } else {
+
+        const {apiURL, apiKey} = await parent();
+
+        const postData = {
+          ticker: params.tickerID
+        };
+
+      // make the POST request to the endpoint
+      const response = await fetch(apiURL + '/analyst-ticker-history', {
+        method: 'POST',
+        headers: {
+          "Content-Type": "application/json", "X-API-KEY": apiKey
+        },
+        body: JSON.stringify(postData)
+      });
+
+    output = await response.json();
+
+    setCache(params.tickerID, output, 'getAnalystTickerHistory');
+    
+    }
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getAnalystTickerHistory: await getAnalystTickerHistory()
+  };
+};

src/routes/stocks/[tickerID]/forecast/analyst/+page.ts

@@ -0,0 +1,43 @@
+import { getCache, setCache } from '$lib/store';
+
+
+export const load = async ({ parent, params }) => {
+
+  const getAnalystTickerHistory = async () => {
+    
+    let output;
+
+    const cachedData = getCache(params.tickerID, 'getAnalystTickerHistory');
+      if (cachedData) {
+        output = cachedData;
+      } else {
+
+        const {apiURL, apiKey} = await parent();
+
+        const postData = {
+          ticker: params.tickerID
+        };
+
+      // make the POST request to the endpoint
+      const response = await fetch(apiURL + '/analyst-ticker-history', {
+        method: 'POST',
+        headers: {
+          "Content-Type": "application/json", "X-API-KEY": apiKey
+        },
+        body: JSON.stringify(postData)
+      });
+
+    output = await response.json();
+
+    setCache(params.tickerID, output, 'getAnalystTickerHistory');
+    
+    }
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getAnalystTickerHistory: await getAnalystTickerHistory()
+  };
+};

src/routes/stocks/[tickerID]/stats/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Lazy from "$lib/components/Lazy.svelte";
   import ReturnCard from "$lib/components/ReturnCard.svelte";
-  import { numberOfUnreadNotification, displayCompanyName, screenWidth, stockTicker, analystEstimateComponent, revenueSegmentationComponent } from "$lib/store";
+  import { numberOfUnreadNotification, displayCompanyName, screenWidth, stockTicker, revenueSegmentationComponent } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
 
   export let data;
@@ -200,14 +200,6 @@ updateYearRange()
 
         <!--End Widget-->
 
-        <Lazy>
-          <div class="w-full m-auto sm:pb-6 sm:pt-6 {!$analystEstimateComponent ? 'hidden' : ''}">
-            {#await import("$lib/components/AnalystEstimate.svelte") then { default: Comp }}
-              <svelte:component this={Comp} {data} />
-            {/await}
-          </div>
-        </Lazy>
-
         <!--Start RevenueSegmentation-->
         <Lazy>
           <div class="w-full pt-10 sm:pb-6 sm:pt-6 m-auto {!$revenueSegmentationComponent ? 'hidden' : ''}">