From f759268c2252cef0a5081a63815c1b690b6715ef Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 7 Jun 2024 09:48:56 +0200
Subject: [PATCH] add lazy loading to RevenueSegmentation component

---
 src/lib/components/RevenueSegmentation.svelte | 138 +++++++++++++-----
 src/routes/etf/[tickerID]/+page.svelte        |  13 +-
 .../stocks/[tickerID]/+layout.server.ts       |   3 -
 src/routes/stocks/[tickerID]/+page.svelte     |  18 +--
 4 files changed, 118 insertions(+), 54 deletions(-)

diff --git a/src/lib/components/RevenueSegmentation.svelte b/src/lib/components/RevenueSegmentation.svelte
index 7371959a..c70ab078 100644
--- a/src/lib/components/RevenueSegmentation.svelte
+++ b/src/lib/components/RevenueSegmentation.svelte
@@ -1,5 +1,5 @@
 <script lang='ts'>
-    import { stockTicker, screenWidth} from '$lib/store';
+    import { stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
     import { abbreviateNumber, formatString } from '$lib/utils';
     import Sankey from '$lib/components/Sankey.svelte';
     import { LayerCake, Svg } from 'layercake';
@@ -7,10 +7,22 @@
 
     import InfoModal from '$lib/components/InfoModal.svelte';
     
-    export let revenueSegmentation;
+    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;
+        }
+    });
 
 
-    
+    let revenueSegmentation = [];
     
     let data = [];
     let geographicList = [];
@@ -85,26 +97,9 @@
     
             geographicList?.sort((a, b) => b?.value - a?.value);
         }
-    }
-    
-    
-    
-        
-        
-    $: {
-        if($stockTicker &&  typeof window !== 'undefined' && typeof revenueSegmentation !== 'undefined' && revenueSegmentation?.length !== 0)
-        {   
-            showFullStats = false;
-            data = [];
-            geographicList = [];
-            totalProductRevenue = 0;
-            totalGeographicRevenue = 0;
-    
-            
-            
-            prepareData(revenueSegmentation)
-            
-            geographicList?.forEach(item => {
+
+
+        geographicList?.forEach(item => {
                 if (item?.name === "TAIWAN, PROVINCE OF CHINA") {
                     item.name = "TAIWAN";
                 }
@@ -113,10 +108,10 @@
                 }
             });
 
-            geographicList = geographicList.map(item => {
+            geographicList = geographicList?.map(item => {
                 return {
                     ...item,
-                    name: item.name
+                    name: item?.name
                         ?.replace("Video Game Brands - ", "")
                 };
             });
@@ -135,8 +130,64 @@
             
             geographicList = [...geographicList];
 
-        }
     }
+    
+    
+    
+const getRevenueSegmentation = async (ticker) => {
+    // Get cached data for the specific tickerID
+    const cachedData = getCache(ticker, 'getRevenueSegmentation');
+    if (cachedData) {
+      revenueSegmentation = cachedData;
+    } else {
+
+      const postData = {'ticker': ticker};
+      // make the POST request to the endpoint
+      const response = await fetch(apiURL + '/revenue-segmentation', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(postData)
+      });
+
+      revenueSegmentation = await response.json();
+
+      // Cache the data for this specific tickerID with a specific name 'getRevenueSegmentation'
+      setCache(ticker, revenueSegmentation, 'getRevenueSegmentation');
+    }
+};
+    
+        
+
+
+$: {
+  if($stockTicker &&  typeof window !== 'undefined') {
+    isLoaded = false;
+    showFullStats = false;
+    data = [];
+    geographicList = [];
+    totalProductRevenue = 0;
+    totalGeographicRevenue = 0;
+    const ticker = $stockTicker;
+
+    const asyncFunctions = [
+      getRevenueSegmentation(ticker)
+      ];
+      Promise.all(asyncFunctions)
+          .then((results) => {
+            prepareData(revenueSegmentation)
+        
+          })
+          .catch((error) => {
+            console.error('An error occurred:', error);
+          });
+    isLoaded = true;
+  }
+}
+
+
+
 let showFullStats = false;
 let charNumber = 40;
 
@@ -161,19 +212,20 @@ $: {
             <main class="w-full">
                 <div class="w-fit sm:w-full sm:max-w-2xl m-auto mt-5 sm:mt-0">
                                 
-            
-                            {#if Object?.keys(data)?.length !== 0  && totalProductRevenue !== 0}
+                    <div class="flex flex-row items-center">
+                        <label for="revenueProductSegmentationInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
+                          Revenue Breakdown
+                        </label>
+                        <InfoModal
+                          title={"Revenue Breakdown"}
+                          content={"A revenue stream for a company is how they make money. It can come from selling things, providing services, or other sources. These different ways of making money add up to keep the company running and growing."}
+                          id={"revenueProductSegmentationInfo"}
+                        />
+                    </div>
+
+                    {#if isLoaded}
+                        {#if Object?.keys(data)?.length !== 0  && totalProductRevenue !== 0}
                         
-                            <div class="flex flex-row items-center">
-                                <label for="revenueProductSegmentationInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
-                                  Revenue Breakdown
-                                </label>
-                                <InfoModal
-                                  title={"Revenue Breakdown"}
-                                  content={"A revenue stream for a company is how they make money. It can come from selling things, providing services, or other sources. These different ways of making money add up to keep the company running and growing."}
-                                  id={"revenueProductSegmentationInfo"}
-                                />
-                            </div>
                             <div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#202020] sm:bg-[#0F0F0F]">
                                 <div class="text-white  text-md mt-3 w-full mb-5">
                                     Based on the latest earnings report
@@ -268,6 +320,16 @@ $: {
                                 <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}
+
+                    {:else}
+                    <div class="flex justify-center items-center h-80">
+                        <div class="relative">
+                        <label class="bg-[#202020] 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}
                             
                         </div>
                     </main>
diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index c5d0e441..6bf53513 100644
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/src/routes/etf/[tickerID]/+page.svelte
@@ -1312,8 +1312,17 @@
                                       <div class="w-full mt-10 sm:mt-0 m-auto sm:p-6 {Object?.keys(optionsDict)?.length !== 0 ? '' : 'hidden'}">
                                         <OptionsData data={data} optionsDict={optionsDict}/>
                                       </div>
-                                    {/if}
-                                    
+                                  {/if}
+                                  
+                                  <!--Start Shareholders-->
+                                  <Lazy>
+                                    <div class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5">
+                                    {#await import('$lib/components/ShareHolders.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp} />
+                                    {/await}
+                                    </div>
+                                    </Lazy>
+                                    <!--End Shareholders-->
   
                                     <!--End Price Prediction Model-->
     
diff --git a/src/routes/stocks/[tickerID]/+layout.server.ts b/src/routes/stocks/[tickerID]/+layout.server.ts
index 46195433..26eec58b 100644
--- a/src/routes/stocks/[tickerID]/+layout.server.ts
+++ b/src/routes/stocks/[tickerID]/+layout.server.ts
@@ -140,7 +140,6 @@ export const load = async ({ params, locals, cookies}) => {
     //fetchData(apiURL,'/price-prediction',params.tickerID),
     //fetchData(apiURL,'/trading-signals',params.tickerID),
     fetchData(apiURL,'/stockdeck',params.tickerID),
-    fetchData(apiURL,'/revenue-segmentation',params.tickerID),
     fetchData(apiURL,'/stock-correlation',params.tickerID),
     fetchData(apiURL,'/analyst-summary-rating',params.tickerID),
     fetchData(apiURL,'/analyst-estimate',params.tickerID),
@@ -166,7 +165,6 @@ export const load = async ({ params, locals, cookies}) => {
     //getPricePrediction,
     //getTradingSignals,
     getStockDeck,
-    getRevenueSegmentation,
     getCorrelation,
     getAnalystRating,
     getAnalystEstimate,
@@ -198,7 +196,6 @@ export const load = async ({ params, locals, cookies}) => {
     //getPricePrediction,
     //getTradingSignals,
     getStockDeck,
-    getRevenueSegmentation,
     getCorrelation,
     getAnalystRating,
     getAnalystEstimate,
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index d45567e7..bcc35fa4 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -33,7 +33,6 @@
     let stockDeck = data?.getStockDeck ?? [];
     let analystEstimateList = data?.getAnalystEstimate ?? []
     let fairPrice = data?.getFairPrice ?? [];
-    let revenueSegmentation = data?.getRevenueSegmentation ?? [];
     let correlationList = data?.getCorrelation?.correlation ?? [];
     let modelStats = data?.getTradingSignals ?? {};
     let prePostData = {};
@@ -64,7 +63,6 @@
   
   
   let TARating;
-  let RevenueSegmentation;
   let StockSplits;
   let Correlation;
   let OptionsData;
@@ -91,7 +89,6 @@
     VaR = (await import('$lib/components/VaR.svelte')).default;
     
     TARating = (await import('$lib/components/TARating.svelte')).default;
-    RevenueSegmentation = (await import('$lib/components/RevenueSegmentation.svelte')).default;
     StockSplits = (await import('$lib/components/StockSplits.svelte')).default;
     Correlation = (await import('$lib/components/Correlation.svelte')).default;
     OptionsData = (await import('$lib/components/OptionsData.svelte')).default;
@@ -643,7 +640,6 @@ function changeChartType() {
       pricePrediction = data?.getPricePrediction;
       modelStats = data?.getTradingSignals;
       stockDeck = data?.getStockDeck;
-      revenueSegmentation = data?.getRevenueSegmentation;
       correlationList = data?.getCorrelation?.correlation;
       analystEstimateList = data?.getAnalystEstimate;
       previousClose = data?.getStockQuote?.previousClose;
@@ -1272,13 +1268,13 @@ function changeChartType() {
 
 
                                  <!--Start RevenueSegmentation-->
-                                  <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {revenueSegmentation?.at(0)?.length !== 0 ? '' : 'hidden'}">
-                                    {#if RevenueSegmentation}
-                                      <RevenueSegmentation
-                                      revenueSegmentation = {revenueSegmentation}
-                                      />
-                                    {/if}
-                                  </div>
+                                  <Lazy>
+                                    <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto">
+                                    {#await import('$lib/components/RevenueSegmentation.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp} />
+                                    {/await}
+                                    </div>
+                                    </Lazy>
                                <!--End RevenueSegmentation-->