Load Enterprise component lazy

src/lib/components/Enterprise.svelte

@@ -1,14 +1,27 @@
 
 <script lang ='ts'>
-    import { displayCompanyName, stockTicker, screenWidth} from '$lib/store';
+    import { displayCompanyName, stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts'
     import { abbreviateNumber } from "$lib/utils";
 
     import Lazy from 'svelte-lazy';
+    let isLoaded = false;
+    const usRegion = ['cle1','iad1','pdx1','sfo1'];
+
+    let apiURL;
+
+    userRegion.subscribe(value => {
+
+        if (usRegion.includes(value)) {
+        apiURL = import.meta.env.VITE_USEAST_API_URL;
+        } else {
+        apiURL = import.meta.env.VITE_EU_API_URL;
+        }
+    });
 
 
-    export let rawData = [];
+    let rawData = [];
     let optionsData;
 
 
@@ -114,19 +127,47 @@ function getPlotOptions() {
 
 return option;
 }
-   
+
+const getEnterPriseValues = async (ticker) => {
+    // Get cached data for the specific tickerID
+    const cachedData = getCache(ticker, 'getEnterPriseValues');
+    if (cachedData) {
+      rawData = cachedData;
+    } else {
+
+      const postData = {'ticker': ticker};
+      // make the POST request to the endpoint
+      const response = await fetch(apiURL + '/enterprise-values', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(postData)
+      });
+
+      rawData = await response.json();
+
+      // Cache the data for this specific tickerID with a specific name 'getEnterPriseValues'
+      setCache(ticker, rawData, 'getEnterPriseValues');
+    }
+};
+
+
 $: {
-  if($stockTicker && typeof window !== 'undefined' && rawData?.length !== 0) {
+  if($stockTicker && typeof window !== 'undefined') {
+    isLoaded=false;
+    const asyncFunctions = [
+      getEnterPriseValues($stockTicker)
+      ];
+      Promise.all(asyncFunctions)
+          .then((results) => {
+            optionsData = getPlotOptions()
+          })
+          .catch((error) => {
+            console.error('An error occurred:', error);
+          });
+    isLoaded = true;
 
-    optionsData = getPlotOptions()
-
-    // Calculate total number of contracts
-    /*
-    avgTotalValue = Math.floor((rawData?.reduce((sum, item) => sum + item?.totalValue, 0))/rawData?.length);
-    const { year:yearWithMaxLobbying, totalValue: maxLobbying } = rawData?.reduce((max, item) => item?.totalValue > max?.totalValue ? item : max, rawData?.at(0));
-    displayYear = yearWithMaxLobbying;
-    displayMaxLobbying = maxLobbying
-    */
   }
 }
 

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

@@ -154,7 +154,6 @@ export const load = async ({ params, locals, cookies}) => {
     fetchData(apiURL,'/sentiment-analysis',params.tickerID),
     fetchData(apiURL,'/fundamental-predictor-analysis',params.tickerID),
     fetchData(apiURL,'/value-at-risk',params.tickerID),
-    fetchData(apiURL,'/enterprise-values',params.tickerID),
     fetchData(apiURL,'/historical-price',params.tickerID),
     fetchData(apiURL,'/one-day-price',params.tickerID),
     fetchWatchlist(fastifyURL, locals?.user?.id),
@@ -182,7 +181,6 @@ export const load = async ({ params, locals, cookies}) => {
     getSentimentAnalysis,
     getFundamentalAnalysis,
     getVaR,
-    getEnterPriseValues,
     getHistoricalPrice,
     getOneDayPrice,
     getUserWatchlist,
@@ -216,7 +214,6 @@ export const load = async ({ params, locals, cookies}) => {
     getSentimentAnalysis,
     getFundamentalAnalysis,
     getVaR,
-    getEnterPriseValues,
     getHistoricalPrice,
     getOneDayPrice,
     getUserWatchlist,

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

@@ -45,7 +45,6 @@
     let marketMoods = {}
     let taRating = {};
     let varDict = {};
-    let enterpriseValues = [];
     let sentimentList = []
     let fundamentalAnalysisDict = {};
     let communitySentiment = {};
@@ -82,7 +81,6 @@
 
   //let AnalystEstimate;
 
-  let Enterprise;
 
 
   onMount(async() => {
@@ -96,7 +94,6 @@
     //PriceAnalysis = (await import('$lib/components/PriceAnalysis.svelte')).default;
     FundamentalAnalysis = (await import('$lib/components/FundamentalAnalysis.svelte')).default;
     VaR = (await import('$lib/components/VaR.svelte')).default;
-    Enterprise = (await import('$lib/components/Enterprise.svelte')).default;
     
     TARating = (await import('$lib/components/TARating.svelte')).default;
     RevenueSegmentation = (await import('$lib/components/RevenueSegmentation.svelte')).default;
@@ -354,7 +351,6 @@ $: {
 
 
     oneDayPrice = output?.map(item => ({ time: Date.parse(item?.time), open: item?.open !== null ? item?.open : NaN, high: item?.high !== null ? item?.high : NaN, low: item?.low !== null ? item?.low : NaN, close: item?.close !== null ? item?.close : NaN}));
-    console.log(oneDayPrice)
     oneWeekPrice = pastPriceList['1W']?.map(({ time, open,high,low,close }) => ({ time: Date.parse(time), open,high,low,close }));
     oneMonthPrice = pastPriceList['1M']?.map(({ time, open,high,low,close }) => ({ time: Date.parse(time), open,high,low,close }));
     sixMonthPrice = pastPriceList['6M']?.map(({ time, open,high,low,close }) => ({ time: Date.parse(time), open,high,low,close }));
@@ -646,7 +642,6 @@ function changeChartType() {
       marketMoods = {};
       taRating = {};
       varDict={}
-      enterpriseValues = []
       sentimentList = [];
       fundamentalAnalysisDict = {};
       communitySentiment = {}
@@ -666,7 +661,6 @@ function changeChartType() {
       taRating = data?.getStockTARating;
       sentimentList = data?.getSentimentAnalysis;
       varDict = data?.getVaR;
-      enterpriseValues = data?.getEnterPriseValues;
       fundamentalAnalysisDict = data?.getFundamentalAnalysis;
       communitySentiment = data?.getCommunitySentiment;
     
@@ -1270,11 +1264,14 @@ function changeChartType() {
   
                                   </div>
 
-                                  {#if Enterprise}
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {enterpriseValues?.length !== 0  ? '' : 'hidden'}">
-                                    <Enterprise rawData={enterpriseValues}/>
+    
+                                  <Lazy>
+                                    <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
+                                    {#await import('$lib/components/Enterprise.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp} data={data} />
+                                    {/await}
                                   </div>
-                                  {/if}
+                                  </Lazy>
                                 
                                   {#if OptionsData}
                                     <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(optionsDict)?.length !== 0 ? '' : 'hidden'}">