From 1f153f055f0d68b62193228981d206879e9e4e2b Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Fri, 26 Jul 2024 16:01:07 +0200 Subject: [PATCH] lazy load dcf component --- src/lib/components/DCF.svelte | 95 ++++++++++++++----- src/lib/components/TARating.svelte | 1 - src/lib/store.ts | 1 + .../stocks/[tickerID]/+layout.server.ts | 3 - src/routes/stocks/[tickerID]/+page.svelte | 17 ++-- 5 files changed, 76 insertions(+), 41 deletions(-) diff --git a/src/lib/components/DCF.svelte b/src/lib/components/DCF.svelte index ef170948..e1cb71e0 100644 --- a/src/lib/components/DCF.svelte +++ b/src/lib/components/DCF.svelte @@ -2,17 +2,16 @@ import { Chart } from 'svelte-echarts' import InfoModal from '$lib/components/InfoModal.svelte'; - import {currentPortfolioPrice, stockTicker, screenWidth} from '$lib/store'; + import {dcfComponent, stockTicker, screenWidth, getCache, setCache} from '$lib/store'; import Lazy from 'svelte-lazy'; //export let quantData; - export let fairPrice; export let data; + let fairPrice; + let isLoaded = false; let lastPrice:Number; - - let optionsBarChart; let change:Number; @@ -186,23 +185,61 @@ } - - - - $: { - - if ($stockTicker && typeof window !== 'undefined') - { - - lastPrice = Number($currentPortfolioPrice); - change = ( (1 - fairPrice/lastPrice ) * 100)?.toFixed(2); - - optionsBarChart = plotBarChart() - - } +async function getFairPrice(ticker) { + const cachedData = getCache(ticker, 'getFairPrice'); + if (cachedData) { + fairPrice = cachedData; + } else { + try { + const response = await fetch(data?.apiURL+'/fair-price', { + method: 'POST', + headers: { + "Content-Type": "application/json", + "X-API-KEY": data?.apiKey + }, + body: JSON.stringify({ ticker }) + }); + fairPrice = await response.json(); + + setCache(ticker, fairPrice, 'getFairPrice'); + } catch (error) { + console.error('Failed to fetch swap data:', error); + fairPrice = null; + } } + if (fairPrice !== null) { + $dcfComponent = true; + } + else { + $dcfComponent = false; + } + } + + + +$: { + + if ($stockTicker && typeof window !== 'undefined') + { + isLoaded = false; + getFairPrice($stockTicker).then(() => { + + if (fairPrice !== null) { + lastPrice = data?.getStockQuote?.price?.toFixed(2); + change = ( (1 - fairPrice/lastPrice ) * 100)?.toFixed(2); + optionsBarChart = plotBarChart() + } + + isLoaded = true; + }); + + } +} + + + @@ -221,8 +258,9 @@ {#if data?.user?.tier === 'Pro'} - + {#if isLoaded} {#if fairPrice !== null} +
@@ -287,16 +325,21 @@
- - {:else} -

- No data available - -

- {/if} + + {/if} + {:else} +
+
+ +
+
+ {/if} + {:else}
diff --git a/src/lib/components/TARating.svelte b/src/lib/components/TARating.svelte index e879e5a0..1c4401e8 100644 --- a/src/lib/components/TARating.svelte +++ b/src/lib/components/TARating.svelte @@ -78,7 +78,6 @@ async function getTaRating(ticker) { else { $taRatingComponent = false; } - console.log($taRatingComponent) } diff --git a/src/lib/store.ts b/src/lib/store.ts index db107181..4f88e588 100644 --- a/src/lib/store.ts +++ b/src/lib/store.ts @@ -80,6 +80,7 @@ export const governmentContractComponent= writable((false)); export const analystInsightComponent= writable((false)); export const swapComponent= writable((false)); export const taRatingComponent= writable((false)); +export const dcfComponent= writable((false)); diff --git a/src/routes/stocks/[tickerID]/+layout.server.ts b/src/routes/stocks/[tickerID]/+layout.server.ts index 432e0c59..eff1c6ae 100644 --- a/src/routes/stocks/[tickerID]/+layout.server.ts +++ b/src/routes/stocks/[tickerID]/+layout.server.ts @@ -134,7 +134,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => { const promises = [ - fetchData(apiURL,apiKey, '/fair-price',params.tickerID), fetchData(apiURL,apiKey, '/similar-stocks',params.tickerID), fetchData(apiURL,apiKey, '/stockdeck',params.tickerID), fetchData(apiURL,apiKey, '/stock-correlation',params.tickerID), @@ -150,7 +149,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => { ]; const [ - getFairPrice, getSimilarStock, getStockDeck, getCorrelation, @@ -172,7 +170,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => { return { - getFairPrice, getSimilarStock, getStockDeck, getCorrelation, diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte index 5fd488f3..f569522f 100644 --- a/src/routes/stocks/[tickerID]/+page.svelte +++ b/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, 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, 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 fairPrice = data?.getFairPrice ?? []; let correlationList = data?.getCorrelation?.correlation ?? []; let prePostData = {}; let similarstock = []; @@ -664,7 +663,6 @@ function changeChartType() { output = null; - fairPrice = data?.getFairPrice; stockDeck = data?.getStockDeck; correlationList = data?.getCorrelation?.correlation; marketMoods = data?.getBullBearSay; @@ -1434,14 +1432,11 @@ function changeChartType() { -
- -
- {#await import('$lib/components/DCF.svelte') then {default: Comp}} - - {/await} -
- + +
+ {#await import('$lib/components/DCF.svelte') then {default: Comp}} + + {/await}