add lazy loading to FundamentalAnalysis component
This commit is contained in:
MuslemRahimi
parent
b6e3c4f423
commit
0c54633207
@ -1,26 +1,83 @@
|
||||
|
||||
<script lang ='ts'>
|
||||
import { displayCompanyName, stockTicker} from '$lib/store';
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
import { fundamentalAnalysisComponent, displayCompanyName, stockTicker, userRegion, getCache, setCache} from '$lib/store';
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
|
||||
export let fundamentalAnalysisDict;
|
||||
export let data;
|
||||
let fundamentalAnalysisDict = {};
|
||||
let isLoaded = false;
|
||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
||||
|
||||
let deactivateContent = data?.user?.tier === 'Pro' ? false : true;
|
||||
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 data;
|
||||
|
||||
let deactivateContent = data?.user?.tier === 'Pro' ? false : true;
|
||||
|
||||
|
||||
//let showMore = false;
|
||||
//let oneMonthResult;
|
||||
let accuracy;
|
||||
let precision;
|
||||
let flowSentiment = 'n/a';
|
||||
//let showMore = false;
|
||||
//let oneMonthResult;
|
||||
let accuracy;
|
||||
let precision;
|
||||
let flowSentiment = 'n/a';
|
||||
|
||||
const getFundamentalAnalysis = async (ticker) => {
|
||||
// Get cached data for the specific tickerID
|
||||
const cachedData = getCache(ticker, 'getFundamentalAnalysis');
|
||||
if (cachedData) {
|
||||
fundamentalAnalysisDict = cachedData;
|
||||
} else {
|
||||
|
||||
const postData = {'ticker': ticker};
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch(apiURL + '/fundamental-predictor-analysis', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
});
|
||||
|
||||
fundamentalAnalysisDict = await response?.json();
|
||||
|
||||
// Cache the data for this specific tickerID with a specific name 'getFundamentalAnalysis'
|
||||
setCache(ticker, fundamentalAnalysisDict, 'getFundamentalAnalysis');
|
||||
}
|
||||
if(Object?.keys(fundamentalAnalysisDict)?.length !== 0) {
|
||||
$fundamentalAnalysisComponent = true;
|
||||
}
|
||||
else {
|
||||
$fundamentalAnalysisComponent = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
$: {
|
||||
if($stockTicker && typeof window !== 'undefined' && Object?.keys(fundamentalAnalysisDict)?.length !== 0) {
|
||||
flowSentiment = fundamentalAnalysisDict?.sentiment;
|
||||
accuracy = fundamentalAnalysisDict?.accuracy;
|
||||
precision = fundamentalAnalysisDict?.precision;
|
||||
if($stockTicker && typeof window !== 'undefined') {
|
||||
|
||||
isLoaded = false;
|
||||
const asyncFunctions = [
|
||||
getFundamentalAnalysis($stockTicker)
|
||||
];
|
||||
Promise.all(asyncFunctions)
|
||||
.then((results) => {
|
||||
flowSentiment = fundamentalAnalysisDict?.sentiment;
|
||||
accuracy = fundamentalAnalysisDict?.accuracy;
|
||||
precision = fundamentalAnalysisDict?.precision;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('An error occurred:', error);
|
||||
});
|
||||
isLoaded = true;
|
||||
|
||||
}
|
||||
}
|
||||
@ -42,7 +99,9 @@ $: {
|
||||
id={"fundamentalAnalysisInfo"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{#if isLoaded}
|
||||
|
||||
{#if Object?.keys(fundamentalAnalysisDict)?.length !== 0}
|
||||
<div class="w-full flex flex-col items-start">
|
||||
<div class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
|
||||
@ -156,6 +215,16 @@ $: {
|
||||
</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}
|
||||
|
||||
</main>
|
||||
</section>
|
||||
|
||||
@ -58,6 +58,7 @@ export const loginData = writable(({}));
|
||||
export const replyCommentClicked = writable(({}));
|
||||
export const editCommentClicked = writable(({}));
|
||||
|
||||
export const fundamentalAnalysisComponent = writable(<boolean>(false));
|
||||
|
||||
|
||||
export const strategyId = writable(<string> (""));
|
||||
|
||||
@ -137,8 +137,6 @@ export const load = async ({ params, locals, cookies}) => {
|
||||
const promises = [
|
||||
fetchData(apiURL,'/fair-price',params.tickerID),
|
||||
fetchData(apiURL,'/similar-stocks',params.tickerID),
|
||||
//fetchData(apiURL,'/price-prediction',params.tickerID),
|
||||
//fetchData(apiURL,'/trading-signals',params.tickerID),
|
||||
fetchData(apiURL,'/stockdeck',params.tickerID),
|
||||
fetchData(apiURL,'/stock-correlation',params.tickerID),
|
||||
fetchData(apiURL,'/analyst-summary-rating',params.tickerID),
|
||||
@ -148,7 +146,6 @@ export const load = async ({ params, locals, cookies}) => {
|
||||
fetchData(apiURL,'/bull-bear-say',params.tickerID),
|
||||
fetchData(apiURL,'/wiim',params.tickerID),
|
||||
fetchData(apiURL,'/top-etf-ticker-holder',params.tickerID),
|
||||
fetchData(apiURL,'/fundamental-predictor-analysis',params.tickerID),
|
||||
fetchData(apiURL,'/value-at-risk',params.tickerID),
|
||||
fetchData(apiURL,'/historical-price',params.tickerID),
|
||||
fetchData(apiURL,'/one-day-price',params.tickerID),
|
||||
@ -160,8 +157,6 @@ export const load = async ({ params, locals, cookies}) => {
|
||||
const [
|
||||
getFairPrice,
|
||||
getSimilarStock,
|
||||
//getPricePrediction,
|
||||
//getTradingSignals,
|
||||
getStockDeck,
|
||||
getCorrelation,
|
||||
getAnalystRating,
|
||||
@ -171,7 +166,6 @@ export const load = async ({ params, locals, cookies}) => {
|
||||
getBullBearSay,
|
||||
getWhyPriceMoved,
|
||||
getTopETFHolder,
|
||||
getFundamentalAnalysis,
|
||||
getVaR,
|
||||
getHistoricalPrice,
|
||||
getOneDayPrice,
|
||||
@ -200,7 +194,6 @@ export const load = async ({ params, locals, cookies}) => {
|
||||
getBullBearSay,
|
||||
getWhyPriceMoved,
|
||||
getTopETFHolder,
|
||||
getFundamentalAnalysis,
|
||||
getVaR,
|
||||
getHistoricalPrice,
|
||||
getOneDayPrice,
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
|
||||
|
||||
import { TrackingModeExitMode } from 'lightweight-charts';
|
||||
import {screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
|
||||
import {screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, fundamentalAnalysisComponent, userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import StockKeyInformation from '$lib/components/StockKeyInformation.svelte';
|
||||
import BullBearSay from '$lib/components/BullBearSay.svelte';
|
||||
@ -41,7 +41,6 @@
|
||||
let marketMoods = {}
|
||||
let taRating = {};
|
||||
let varDict = {};
|
||||
let fundamentalAnalysisDict = {};
|
||||
let communitySentiment = {};
|
||||
|
||||
//============================================//
|
||||
@ -64,7 +63,6 @@
|
||||
let Correlation;
|
||||
let OptionsData;
|
||||
let WIIM;
|
||||
let FundamentalAnalysis;
|
||||
let VaR;
|
||||
|
||||
//let StockKeyInformation;
|
||||
@ -79,7 +77,6 @@
|
||||
}
|
||||
*/
|
||||
WIIM = (await import('$lib/components/WIIM.svelte')).default;
|
||||
FundamentalAnalysis = (await import('$lib/components/FundamentalAnalysis.svelte')).default;
|
||||
VaR = (await import('$lib/components/VaR.svelte')).default;
|
||||
|
||||
TARating = (await import('$lib/components/TARating.svelte')).default;
|
||||
@ -624,7 +621,6 @@ function changeChartType() {
|
||||
marketMoods = {};
|
||||
taRating = {};
|
||||
varDict={}
|
||||
fundamentalAnalysisDict = {};
|
||||
communitySentiment = {}
|
||||
output = null;
|
||||
|
||||
@ -638,7 +634,6 @@ function changeChartType() {
|
||||
marketMoods = data?.getBullBearSay;
|
||||
taRating = data?.getStockTARating;
|
||||
varDict = data?.getVaR;
|
||||
fundamentalAnalysisDict = data?.getFundamentalAnalysis;
|
||||
communitySentiment = data?.getCommunitySentiment;
|
||||
|
||||
similarstock = data?.getSimilarStock;
|
||||
@ -1214,11 +1209,13 @@ function changeChartType() {
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
{#if FundamentalAnalysis}
|
||||
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(fundamentalAnalysisDict)?.length !== 0 ? '' : 'hidden'}">
|
||||
<FundamentalAnalysis data={data} fundamentalAnalysisDict={fundamentalAnalysisDict}/>
|
||||
</div>
|
||||
{/if}
|
||||
<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={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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user