AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Load TrendAnalysis component lazy

Browse Source
This commit is contained in:
MuslemRahimi 2024-06-06 20:23:50 +02:00
parent 117cd9febb
commit fe8dd9e2b7
7 changed files with 102 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/lib/components/TrendAnalysis.svelte
View File

@ -1,23 +1,37 @@
<script lang ='ts'>
import { displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType} from '$lib/store';
import { displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, userRegion, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
//import Chart from '$lib/components/Chart.svelte';
//import Lazy from 'svelte-lazy';
export let trendList;
export let data;
let trendList = [];
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 displayData = 'threeMonth';
let lastPrice = 'n/a';
//let showMore = false;
//let oneMonthResult;
let accuracy;
let precision;
let flowSentiment = 'n/a';
let displayData = 'threeMonth';
let lastPrice = 'n/a';
function changeStatement(event)
@ -25,15 +39,52 @@ function changeStatement(event)
displayData = event.target.value;
}
const getTrendAnalysis = async (ticker) => {
// Get cached data for the specific tickerID
const cachedData = getCache(ticker, 'getTrendAnalysis');
if (cachedData) {
trendList = cachedData;
} else {
const postData = {'ticker': ticker};
// make the POST request to the endpoint
const response = await fetch(apiURL + '/trend-analysis', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData)
});
trendList = await response.json();
// Cache the data for this specific tickerID with a specific name 'getTrendAnalysis'
setCache(ticker, trendList, 'getTrendAnalysis');
}
};
$: {
if(($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker) && typeof window !== 'undefined' && trendList?.length !== 0) {
lastPrice = data?.getStockQuote?.price ?? "n/a";
const sample = trendList?.filter(item => item?.label === displayData)?.at(0);
flowSentiment = sample?.sentiment;
accuracy = sample?.accuracy;
precision = sample?.precision;
if(($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker) && typeof window !== 'undefined') {
isLoaded = false;
const ticker = $assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker;
const asyncFunctions = [
getTrendAnalysis(ticker)
];
Promise.all(asyncFunctions)
.then((results) => {
lastPrice = data?.getStockQuote?.price ?? "n/a";
const sample = trendList?.filter(item => item?.label === displayData)?.at(0);
flowSentiment = sample?.sentiment;
accuracy = sample?.accuracy;
precision = sample?.precision;
})
.catch((error) => {
console.error('An error occurred:', error);
});
isLoaded = true;
}
}
@ -54,7 +105,8 @@ $: {
id={"trendAnalysisInfo"}
/>
</div>
{#if isLoaded}
{#if trendList?.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">
@ -167,6 +219,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>

3
src/routes/crypto/[tickerID]/+layout.server.ts
View File

@ -85,7 +85,6 @@ export const load = async ({ params, locals}) => {
fetchData(apiURL,'/stock-quote',params.tickerID),
fetchData(apiURL,'/stock-rating',params.tickerID),
fetchData(apiURL,'/sentiment-analysis',params.tickerID),
fetchData(apiURL,'/trend-analysis',params.tickerID),
fetchData(apiURL,'/value-at-risk',params.tickerID),
fetchData(apiURL,'/historical-price',params.tickerID),
fetchData(apiURL,'/one-day-price',params.tickerID),
@ -98,7 +97,6 @@ export const load = async ({ params, locals}) => {
getStockQuote,
getStockTARating,
getSentimentAnalysis,
getTrendAnalysis,
getVaR,
getHistoricalPrice,
getOneDayPrice,
@ -117,7 +115,6 @@ export const load = async ({ params, locals}) => {
getStockQuote,
getStockTARating,
getSentimentAnalysis,
getTrendAnalysis,
getVaR,
getHistoricalPrice,
getOneDayPrice,

17
src/routes/crypto/[tickerID]/+page.svelte
View File

@ -34,7 +34,6 @@
let taRating = {};
let varDict = {};
let sentimentList = []
let trendList = [];
//============================================//
@ -53,7 +52,6 @@
let TARating;
let SentimentAnalysis;
let TrendAnalysis;
let VaR;
//let StockKeyInformation;
@ -64,7 +62,6 @@
onMount(async() => {
SentimentAnalysis = (await import('$lib/components/SentimentAnalysis.svelte')).default;
TrendAnalysis = (await import('$lib/components/TrendAnalysis.svelte')).default;
VaR = (await import('$lib/components/VaR.svelte')).default;
TARating = (await import('$lib/components/TARating.svelte')).default;
@ -590,7 +587,6 @@ function changeChartType() {
taRating = {};
varDict={}
sentimentList = [];
trendList = [];
output = null;
@ -598,7 +594,6 @@ function changeChartType() {
previousClose = data?.getStockQuote?.previousClose;
taRating = data?.getStockTARating;
sentimentList = data?.getSentimentAnalysis;
trendList = data?.getTrendAnalysis;
varDict = data?.getVaR;
const asyncFunctions = [];
@ -1119,11 +1114,13 @@ afterUpdate(async () => {
</div>
</Lazy>
{#if TrendAnalysis}
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {trendList?.length !== 0 ? '' : 'hidden'}">
<TrendAnalysis data={data} trendList={trendList}/>
</div>
{/if}
<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/TrendAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
</Lazy>
{#if SentimentAnalysis}
<div class="w-full mt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {sentimentList?.length !== 0 ? '' : 'hidden'}">

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

@ -115,7 +115,6 @@ const promises = [
fetchData(apiURL,'/options-bubble',params.tickerID),
fetchData(apiURL,'/wiim',params.tickerID),
fetchData(apiURL,'/sentiment-analysis',params.tickerID),
fetchData(apiURL,'/trend-analysis',params.tickerID),
fetchData(apiURL,'/value-at-risk',params.tickerID),
fetchWatchlist(fastifyURL, locals?.user?.id),
fetchPortfolio(fastifyURL, locals?.user?.id)
@ -133,7 +132,6 @@ const promises = [
getOptionsData,
getWhyPriceMoved,
getSentimentAnalysis,
getTrendAnalysis,
getVaR,
getUserWatchlist,
getUserPortfolio,
@ -157,7 +155,6 @@ const promises = [
getOptionsData,
getWhyPriceMoved,
getSentimentAnalysis,
getTrendAnalysis,
getVaR,
getUserWatchlist,
getUserPortfolio,

17
src/routes/etf/[tickerID]/+page.svelte
View File

@ -37,7 +37,6 @@
let optionsDict = {};
let taRating = {};
let varDict = {};
let trendList = [];
let previousClose = data?.getStockQuote?.previousClose;
//============================================//
@ -66,7 +65,6 @@
let OptionsData;
let WIIM;
let SentimentAnalysis;
let TrendAnalysis;
let VaR;
//let ETFKeyInformation;
@ -75,7 +73,6 @@
WIIM = (await import('$lib/components/WIIM.svelte')).default;
SentimentAnalysis = (await import('$lib/components/SentimentAnalysis.svelte')).default;
TrendAnalysis = (await import('$lib/components/TrendAnalysis.svelte')).default;
VaR = (await import('$lib/components/VaR.svelte')).default;
OptionsData = (await import('$lib/components/OptionsData.svelte')).default;
TARating = (await import('$lib/components/TARating.svelte')).default;
@ -697,7 +694,6 @@
prePostData = {};
taRating = {};
varDict = {};
trendList = [];
output = null;
@ -715,7 +711,6 @@
optionsDict = data?.getOptionsData;
previousClose = data?.getStockQuote?.previousClose
taRating = data?.getStockTARating;
trendList = data?.getTrendAnalysis;
varDict = data?.getVaR;
//shareholderList = data?.getShareHolders;
@ -1294,11 +1289,13 @@
</div>
</Lazy>
{#if TrendAnalysis}
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {trendList?.length !== 0 ? '' : 'hidden'}">
<TrendAnalysis data={data} trendList={trendList}/>
</div>
{/if}
<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/TrendAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
</Lazy>
{#if SentimentAnalysis}
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data?.getSentimentAnalysis?.length !== 0 ? '' : 'hidden'}">

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

@ -152,7 +152,6 @@ export const load = async ({ params, locals, cookies}) => {
fetchData(apiURL,'/wiim',params.tickerID),
fetchData(apiURL,'/top-etf-ticker-holder',params.tickerID),
fetchData(apiURL,'/sentiment-analysis',params.tickerID),
fetchData(apiURL,'/trend-analysis',params.tickerID),
fetchData(apiURL,'/fundamental-predictor-analysis',params.tickerID),
fetchData(apiURL,'/value-at-risk',params.tickerID),
fetchData(apiURL,'/enterprise-values',params.tickerID),
@ -181,7 +180,6 @@ export const load = async ({ params, locals, cookies}) => {
getWhyPriceMoved,
getTopETFHolder,
getSentimentAnalysis,
getTrendAnalysis,
getFundamentalAnalysis,
getVaR,
getEnterPriseValues,
@ -216,7 +214,6 @@ export const load = async ({ params, locals, cookies}) => {
getWhyPriceMoved,
getTopETFHolder,
getSentimentAnalysis,
getTrendAnalysis,
getFundamentalAnalysis,
getVaR,
getEnterPriseValues,

18
src/routes/stocks/[tickerID]/+page.svelte
View File

@ -47,7 +47,6 @@
let varDict = {};
let enterpriseValues = [];
let sentimentList = []
let trendList = [];
let fundamentalAnalysisDict = {};
let communitySentiment = {};
@ -75,7 +74,6 @@
let OptionsData;
let WIIM;
let SentimentAnalysis;
let TrendAnalysis;
let PriceAnalysis;
let FundamentalAnalysis;
let VaR;
@ -95,7 +93,6 @@
*/
WIIM = (await import('$lib/components/WIIM.svelte')).default;
SentimentAnalysis = (await import('$lib/components/SentimentAnalysis.svelte')).default;
TrendAnalysis = (await import('$lib/components/TrendAnalysis.svelte')).default;
//PriceAnalysis = (await import('$lib/components/PriceAnalysis.svelte')).default;
FundamentalAnalysis = (await import('$lib/components/FundamentalAnalysis.svelte')).default;
VaR = (await import('$lib/components/VaR.svelte')).default;
@ -651,7 +648,6 @@ function changeChartType() {
varDict={}
enterpriseValues = []
sentimentList = [];
trendList = [];
fundamentalAnalysisDict = {};
communitySentiment = {}
output = null;
@ -669,7 +665,6 @@ function changeChartType() {
marketMoods = data?.getBullBearSay;
taRating = data?.getStockTARating;
sentimentList = data?.getSentimentAnalysis;
trendList = data?.getTrendAnalysis;
varDict = data?.getVaR;
enterpriseValues = data?.getEnterPriseValues;
fundamentalAnalysisDict = data?.getFundamentalAnalysis;
@ -1240,12 +1235,13 @@ function changeChartType() {
</div>
</Lazy>
{#if TrendAnalysis}
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {trendList?.length !== 0 ? '' : 'hidden'}">
<TrendAnalysis data={data} trendList={trendList}/>
</div>
{/if}
<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/TrendAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</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'}">