remove correlation component

src/lib/components/Correlation.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-  import { stockTicker, etfTicker, assetType, screenWidth } from '$lib/store';
+  import { correlationComponent, stockTicker, etfTicker, assetType, screenWidth,getCache, setCache } from '$lib/store';
   import { goto } from '$app/navigation';
   import InfoModal from '$lib/components/InfoModal.svelte';
   import Lazy from 'svelte-lazy';
 
-  export let correlationList;
+  export let data;
 
   let showFullStats = false;
-    
+  let isLoaded = false;
+  let rawData = [];
     
     
   async function stockSelector(symbol)
@@ -26,22 +27,58 @@
       
     }
   
-    
+  async function getCorrelation(ticker) {
-  $: {
+    const cachedData = getCache(ticker, 'getCorrelation');
-      if (($assetType === 'etf' ? $etfTicker : $stockTicker) && typeof window !== 'undefined' && typeof correlationList !== 'undefined' && correlationList?.length !== 0 ) {
+    if (cachedData) {
-          showFullStats = false;
+      rawData = cachedData;
+    } else {
+      try {
+        const response = await fetch(data?.apiURL+'/correlation-ticker', {
+          method: 'POST',
+          headers: {
+            "Content-Type": "application/json",
+            "X-API-KEY": data?.apiKey
+          },
+          body: JSON.stringify({ ticker })
+        });
+        rawData = (await response.json()) || [];
++
+        setCache(ticker, rawData, 'getCorrelation');
+      } catch (error) {
+        console.error('Failed to fetch swap data:', error);
+        rawData = [];
       }
+    }
+    if (rawData?.lenght !== 0) {
+      $correlationComponent = true;
+    }
+    else {
+      $correlationComponent = false;
+    }
   }
   
 
+  $: {
+  if (($assetType === 'stock' ? $stockTicker : $etfTicker) && typeof window !== 'undefined') {
+    showFullStats = false;
+    isLoaded = false;
+    const ticker = $assetType === 'stock' ? $stockTicker : $etfTicker;
+      getCorrelation(ticker).then(() => {
+      isLoaded = true;
+    });
+    
+  }
+}
   
     
   $: charNumber = $screenWidth < 640 ? 10 : 20;
     
   
-  
   </script>
 
+
+  <svelte:options immutable={true} />
+    
     <section class="overflow-hidden w-full">
                                 
       <main>
@@ -57,13 +94,16 @@
         />
         </div>
       
+    {#if data?.user?.tier === 'Pro'}
+      {#if isLoaded}  
+        {#if rawData?.length !== 0}
+
     <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
-      {#if correlationList?.length !== 0}
 
-        {#each (showFullStats ? correlationList : correlationList?.slice(0, 3)) as item, index}
+        {#each (showFullStats ? rawData : rawData?.slice(0, 3)) as item, index}
        
 
-      <div class="shadow-lg bg-[#27272A] w-full rounded-lg p-4 sm:p-3 mb-5  flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && correlationList?.length > 2 ? 'opacity-[0.3]' : '' }">
+      <div class="shadow-lg bg-[#27272A] w-full rounded-lg p-4 sm:p-3 mb-5  flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && rawData?.length > 2 ? 'opacity-[0.3]' : '' }">
 
         <div on:click={() => stockSelector(item?.symbol)} class="flex-shrink-0 mr-3 rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-[#09090B]">
             <img
@@ -99,19 +139,34 @@
 
       {/each}
 
-      <label on:click={() => showFullStats = !showFullStats} class="{correlationList?.length < 4 ? 'hidden' : ''} cursor-pointer flex justify-center items-center mt-5">
+      <label on:click={() => showFullStats = !showFullStats} class="{rawData?.length < 4 ? 'hidden' : ''} cursor-pointer flex justify-center items-center mt-5">
         <svg class="w-10 h-10 transform {showFullStats ? 'rotate-180' : ''} " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#2A323C" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"/></svg>
       </label>
   
-      {:else}
-      <h2 class=" mt-10 flex justify-center items-center text-3xl font-bold text-slate-700 mb-5 m-auto">
-          No data available
-          <svg class="w-10 sm:w-12 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#334155" d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"/></svg>
-        </h2>
-      {/if}
     
     </Lazy>
 
+    {/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>
     

src/lib/store.ts

@@ -81,6 +81,7 @@ export const analystInsightComponent= writable(<boolean>(false));
 export const swapComponent= writable(<boolean>(false));
 export const taRatingComponent= writable(<boolean>(false));
 export const dcfComponent= writable(<boolean>(false));
+export const correlationComponent = writable(<boolean>(false));
 
 
 

src/routes/+layout.svelte

@@ -44,6 +44,7 @@
   export let data;
 
   let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
+  console.log(cloudFrontUrl)
 
 
 //const trialLeftDays = Math?.floor(addDays(data, 7, ''));

src/routes/etf/[tickerID]/+layout.server.ts

@@ -116,7 +116,6 @@ const promises = [
     fetchData(apiURL,apiKey, '/etf-profile', params.tickerID),
     fetchData(apiURL,apiKey, '/similar-etfs',  params.tickerID),
     fetchData(apiURL,apiKey, '/etf-country-weighting', params.tickerID),
-    fetchData(apiURL,apiKey, '/stock-correlation', params.tickerID),
     fetchData(apiURL,apiKey, '/etf-holdings',  params.tickerID),
     fetchData(apiURL,apiKey, '/stock-dividend',params.tickerID),
     fetchData(apiURL,apiKey, '/stock-quote',  params.tickerID),
@@ -130,7 +129,6 @@ const promises = [
     getETFProfile,
     getSimilarETFs,
     getCountryWeighting,
-    getCorrelation,
     getETFHoldings,
     getStockDividend,
     getStockQuote,
@@ -150,7 +148,6 @@ const promises = [
     getETFProfile,
     getSimilarETFs,
     getCountryWeighting,
-    getCorrelation,
     getETFHoldings,
     getStockDividend,
     getStockQuote,

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

@@ -34,7 +34,6 @@
       let geographicList = [];
       let sectorList = [];
       let etfProfile = [];
-      let correlationList = [];
       let topHoldingList = [];
       let dividendList = [];
       let similarTicker = []
@@ -60,7 +59,6 @@
     
   //let PricePredictionCard;
   //let TradingModel;
-    let Correlation;
     let CountrySegmentation;
     let SectorSegmentation;
     let WIIM;
@@ -70,7 +68,6 @@
   onMount(async() => {  
 
     WIIM = (await import('$lib/components/WIIM.svelte')).default;
-    Correlation = (await import('$lib/components/Correlation.svelte')).default;
     CountrySegmentation = (await import('$lib/components/CountrySegmentation.svelte')).default;
     SectorSegmentation = (await import('$lib/components/SectorSegmentation.svelte')).default;
   })
@@ -674,7 +671,6 @@ async function initializePrice() {
     
         geographicList = [];
         sectorList = [];
-        correlationList = [];
         prePostData = {};
         output = null;
   
@@ -685,8 +681,6 @@ async function initializePrice() {
           return b?.exposure - a?.exposure;
         })
         etfProfile = data?.getETFProfile;  
-        correlationList = data?.getCorrelation?.correlation;
-  
         topHoldingList = data?.getETFHoldings;
         dividendList = data?.getStockDividend;
         similarTicker = data?.getSimilarETFs;
@@ -1340,11 +1334,13 @@ async function initializePrice() {
                                   
     
                                   
-                                    <div class="w-full pt-10 m-auto sm:p-6 rounded-2xl {correlationList?.length !== 0 ? '' : 'hidden'}">
+                                      <!--
-                                      {#if Correlation}
+                                      <div class="w-full m-auto pt-10 sm:pl-6 sm:pb-6 sm:pt-6 {!$correlationComponent ? 'hidden' : ''}">
-                                        <Correlation correlationList={correlationList}/>
+                                        {#await import('$lib/components/Correlation.svelte') then {default: Comp}}
-                                      {/if}  
+                                          <svelte:component this={Comp} data={data}/>
-                                    </div>
+                                        {/await}
+                                      </div>
+                                      -->
                   
                               </div>
                           </div>

src/routes/options-flow/+page.svelte

@@ -803,12 +803,12 @@ $: {
       
         
               <!-- Content area -->
-              <div class="mt-4 w-full overflow-x-auto overflow-y-auto h-[900px] rounded-lg">
+              <div class="mt-4 w-full overflow-x-auto overflow-y-auto h-[850px] rounded-lg">
                 <div class="table-container">
                 <div class="table">
                   <VirtualList
                     width="100%"
-                    height={900}
+                    height={850}
                     itemCount={rawData.length}
                     itemSize={40}
                   >

src/routes/options-zero-dte/+page.svelte

@@ -737,12 +737,12 @@ $: {
           <!-- Page wrapper -->
           <div class="flex justify-center w-full m-auto h-full overflow-hidden">
                 <!-- Content area -->
-                <div class="mt-4 w-full overflow-x-auto overflow-y-auto h-[900px] rounded-lg">
+                <div class="mt-4 w-full overflow-x-auto overflow-y-auto h-[850px] rounded-lg">
                   <div class="table-container">
                   <div class="table">
                     <VirtualList
                       width="100%"
-                      height={900}
+                      height={850}
                       itemCount={rawData.length}
                       itemSize={40}
                     >

src/routes/stocks/[tickerID]/+layout.server.ts

@@ -136,7 +136,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
     const promises = [
     fetchData(apiURL,apiKey, '/similar-stocks',params.tickerID),
     fetchData(apiURL,apiKey, '/stockdeck',params.tickerID),
-    fetchData(apiURL,apiKey, '/stock-correlation',params.tickerID),
     fetchData(apiURL,apiKey, '/analyst-summary-rating',params.tickerID),
     fetchData(apiURL,apiKey, '/stock-quote',params.tickerID),
     fetchData(apiURL,apiKey, '/bull-bear-say',params.tickerID),
@@ -151,7 +150,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
   const [
     getSimilarStock,
     getStockDeck,
-    getCorrelation,
     getAnalystRating,
     getStockQuote,
     getBullBearSay,
@@ -172,7 +170,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
   return {
     getSimilarStock,
     getStockDeck,
-    getCorrelation,
     getAnalystRating,
     getStockQuote,
     getBullBearSay,

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

@@ -3,7 +3,7 @@
   import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
   
   import { TrackingModeExitMode } from 'lightweight-charts';
-  import {getCache, setCache, dcfComponent, taRatingComponent, swapComponent, analystInsightComponent, governmentContractComponent, optionsNetFlowComponent, impliedVolatilityComponent, 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, currentPrice, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
+  import {getCache, setCache, correlationComponent, dcfComponent, taRatingComponent, swapComponent, analystInsightComponent, governmentContractComponent, optionsNetFlowComponent, impliedVolatilityComponent, 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, currentPrice, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
   import { onDestroy, onMount } from 'svelte';
   import BullBearSay from '$lib/components/BullBearSay.svelte';
   import CommunitySentiment from '$lib/components/CommunitySentiment.svelte';
@@ -16,7 +16,6 @@
     let displayChartType = 'line';
   
     let stockDeck = data?.getStockDeck ?? [];
-    let correlationList = data?.getCorrelation?.correlation ?? [];
     let prePostData = {};
     let similarstock = [];
     let topETFHolder = [];
@@ -41,16 +40,13 @@
   
   
   let StockSplits;
-  let Correlation;
   let WIIM;
 
 
 
   onMount(async() => {
     WIIM = (await import('$lib/components/WIIM.svelte')).default;
-    
     StockSplits = (await import('$lib/components/StockSplits.svelte')).default;
-    Correlation = (await import('$lib/components/Correlation.svelte')).default;
 
   })
   
@@ -664,7 +660,6 @@ function changeChartType() {
   
   
       stockDeck = data?.getStockDeck;
-      correlationList = data?.getCorrelation?.correlation;
       marketMoods = data?.getBullBearSay;
       communitySentiment = data?.getCommunitySentiment;
     
@@ -1440,22 +1435,22 @@ function changeChartType() {
                                   </div>
                                   <!--End DCF-->
   
-                                  <div class="w-full m-auto pt-10 sm:pl-6 sm:pb-6 sm:pt-6  {correlationList?.length !== 0 ? '' : 'hidden'}">
+                                  <!--
-                                    {#if Correlation}
+                                  <div class="w-full m-auto pt-10 sm:pl-6 sm:pb-6 sm:pt-6 {!$correlationComponent ? 'hidden' : ''}">
-                                    <Correlation correlationList={correlationList}/>
+                                    {#await import('$lib/components/Correlation.svelte') then {default: Comp}}
-                                    {/if}
+                                      <svelte:component this={Comp} data={data}/>
+                                    {/await}
                                   </div>
+                                  -->
 
-  
+                                  <!--Start Stock Splits-->
-  
+                                  {#if StockSplits && stockDeck?.at(0)?.stockSplits?.length !== 0}
-                                    <!--Start Stock Splits-->
+                                  <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto rounded-2xl mb-10">
-                                    {#if StockSplits && stockDeck?.at(0)?.stockSplits?.length !== 0}
+                                      <StockSplits
-                                    <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto rounded-2xl mb-10">
+                                        stockDeck={stockDeck}
-                                        <StockSplits
+                                      />  
-                                          stockDeck={stockDeck}
+                                  </div>
-                                        />  
+                                  {/if}
-                                    </div>
-                                    {/if}
                                   <!--End Stock Splits-->