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

Load PriceAnalysi component lazy

Browse Source
This commit is contained in:
MuslemRahimi 2024-06-06 18:52:38 +02:00
parent e1afb56934
commit 117cd9febb
8 changed files with 104 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/Lazy.svelte
View File

@ -19,5 +19,5 @@
{#if show}
<slot />
{:else}
<div bind:this={el}/>
<div bind:this={el}/>
{/if}

98
src/lib/components/PriceAnalysis.svelte
View File

@ -1,13 +1,27 @@
<script lang ='ts'>
import { displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, screenWidth} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, screenWidth, userRegion, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
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;
}
});
import Lazy from 'svelte-lazy';
export let priceAnalysisDict;
let priceAnalysisDict = {};
export let data;
const modalContent = `
@ -36,7 +50,6 @@ function getPlotOptions() {
const predictionDate = priceAnalysisDict?.predictionDate;
const upperBand = priceAnalysisDict?.upperBand;
const lowerBand = priceAnalysisDict?.lowerBand?.map(value => value < 0 ? 0 : value);
console.log(lowerBand)
const historicalPrice = priceAnalysisDict?.historicalPrice;
//const meanPredictionPrice = priceAnalysisDict?.meanResult;
@ -121,24 +134,55 @@ function getPlotOptions() {
return option;
}
const getPriceAnalysis = async (ticker) => {
// Get cached data for the specific tickerID
const cachedData = getCache(ticker, 'getPriceAnalysis');
if (cachedData) {
priceAnalysisDict = cachedData;
} else {
const postData = {'ticker': ticker};
// make the POST request to the endpoint
const response = await fetch(apiURL + '/price-analysis', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData)
});
priceAnalysisDict = await response.json();
// Cache the data for this specific tickerID with a specific name 'getPriceAnalysis'
setCache(ticker, priceAnalysisDict, 'getPriceAnalysis');
}
};
$: {
if(($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker) && typeof window !== 'undefined' && Object?.keys(priceAnalysisDict)?.length !== 0) {
if(($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker) && typeof window !== 'undefined') {
isLoaded = false;
lastPrice = data?.getStockQuote?.price ?? "n/a";
oneYearPricePrediction = priceAnalysisDict?.meanResult?.slice(-1)?.at(0);
const ticker = $assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker;
mape = priceAnalysisDict?.mape;
r2Score = priceAnalysisDict?.r2Score;
priceSentiment = lastPrice < oneYearPricePrediction ? 'Bullish' : 'Bearish';
optionsData = getPlotOptions()
/*
const sample = trendList?.filter(item => item?.label === displayData)?.at(0);
priceSentiment = sample?.sentiment;
r2Score = sample?.r2Score;
mape = sample?.mape;
*/
const asyncFunctions = [
getPriceAnalysis(ticker)
];
Promise.all(asyncFunctions)
.then((results) => {
oneYearPricePrediction = priceAnalysisDict?.meanResult?.slice(-1)?.at(0);
mape = priceAnalysisDict?.mape;
r2Score = priceAnalysisDict?.r2Score;
priceSentiment = lastPrice < oneYearPricePrediction ? 'Bullish' : 'Bearish';
optionsData = getPlotOptions()
})
.catch((error) => {
console.error('An error occurred:', error);
});
isLoaded = true;
}
}
@ -160,13 +204,15 @@ $: {
/>
</div>
{#if isLoaded}
{#if Object?.keys(priceAnalysisDict)?.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">
Our model predicts future prices by analyzing trends, seasonal variations, and holiday impacts. Here are the stats of the model for {$displayCompanyName} to ensure transparency and reliability.
</div>
</div>
<div class="w-full mt-5 mb-5 flex justify-start items-center">
<div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
@ -264,6 +310,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

@ -86,7 +86,6 @@ export const load = async ({ params, locals}) => {
fetchData(apiURL,'/stock-rating',params.tickerID),
fetchData(apiURL,'/sentiment-analysis',params.tickerID),
fetchData(apiURL,'/trend-analysis',params.tickerID),
fetchData(apiURL,'/price-analysis',params.tickerID),
fetchData(apiURL,'/value-at-risk',params.tickerID),
fetchData(apiURL,'/historical-price',params.tickerID),
fetchData(apiURL,'/one-day-price',params.tickerID),
@ -100,7 +99,6 @@ export const load = async ({ params, locals}) => {
getStockTARating,
getSentimentAnalysis,
getTrendAnalysis,
getPriceAnalysis,
getVaR,
getHistoricalPrice,
getOneDayPrice,
@ -120,7 +118,6 @@ export const load = async ({ params, locals}) => {
getStockTARating,
getSentimentAnalysis,
getTrendAnalysis,
getPriceAnalysis,
getVaR,
getHistoricalPrice,
getOneDayPrice,

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

@ -6,6 +6,7 @@
import {screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, cryptoTicker} from '$lib/store';
import { onDestroy, onMount, afterUpdate } from 'svelte';
import CryptoKeyInformation from '$lib/components/CryptoKeyInformation.svelte';
import Lazy from '$lib/components/Lazy.svelte';
const usRegion = ['cle1','iad1','pdx1','sfo1'];
@ -34,7 +35,6 @@
let varDict = {};
let sentimentList = []
let trendList = [];
let priceAnalysisDict = {};
//============================================//
@ -54,7 +54,6 @@
let TARating;
let SentimentAnalysis;
let TrendAnalysis;
let PriceAnalysis;
let VaR;
//let StockKeyInformation;
@ -66,7 +65,6 @@
onMount(async() => {
SentimentAnalysis = (await import('$lib/components/SentimentAnalysis.svelte')).default;
TrendAnalysis = (await import('$lib/components/TrendAnalysis.svelte')).default;
PriceAnalysis = (await import('$lib/components/PriceAnalysis.svelte')).default;
VaR = (await import('$lib/components/VaR.svelte')).default;
TARating = (await import('$lib/components/TARating.svelte')).default;
@ -593,7 +591,6 @@ function changeChartType() {
varDict={}
sentimentList = [];
trendList = [];
priceAnalysisDict = {};
output = null;
@ -603,7 +600,6 @@ function changeChartType() {
sentimentList = data?.getSentimentAnalysis;
trendList = data?.getTrendAnalysis;
varDict = data?.getVaR;
priceAnalysisDict = data?.getPriceAnalysis;
const asyncFunctions = [];
@ -1115,11 +1111,13 @@ afterUpdate(async () => {
{#if PriceAnalysis}
<div class="w-full mt-16 sm:mt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(priceAnalysisDict)?.length !== 0 ? '' : 'hidden'}">
<PriceAnalysis data={data} priceAnalysisDict={priceAnalysisDict}/>
<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/PriceAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
{/if}
</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'}">

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

@ -116,7 +116,6 @@ const promises = [
fetchData(apiURL,'/wiim',params.tickerID),
fetchData(apiURL,'/sentiment-analysis',params.tickerID),
fetchData(apiURL,'/trend-analysis',params.tickerID),
fetchData(apiURL,'/price-analysis',params.tickerID),
fetchData(apiURL,'/value-at-risk',params.tickerID),
fetchWatchlist(fastifyURL, locals?.user?.id),
fetchPortfolio(fastifyURL, locals?.user?.id)
@ -135,7 +134,6 @@ const promises = [
getWhyPriceMoved,
getSentimentAnalysis,
getTrendAnalysis,
getPriceAnalysis,
getVaR,
getUserWatchlist,
getUserPortfolio,
@ -160,7 +158,6 @@ const promises = [
getWhyPriceMoved,
getSentimentAnalysis,
getTrendAnalysis,
getPriceAnalysis,
getVaR,
getUserWatchlist,
getUserPortfolio,

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

@ -6,6 +6,8 @@
import {assetType, screenWidth, globalForm, userRegion, numberOfUnreadNotification, displayCompanyName, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, etfTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
import { onDestroy, onMount } from 'svelte';
import ETFKeyInformation from '$lib/components/ETFKeyInformation.svelte';
import Lazy from '$lib/components/Lazy.svelte';
export let data;
export let form;
@ -36,7 +38,6 @@
let taRating = {};
let varDict = {};
let trendList = [];
let priceAnalysisDict = {};
let previousClose = data?.getStockQuote?.previousClose;
//============================================//
@ -66,7 +67,6 @@
let WIIM;
let SentimentAnalysis;
let TrendAnalysis;
let PriceAnalysis;
let VaR;
//let ETFKeyInformation;
@ -76,7 +76,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;
VaR = (await import('$lib/components/VaR.svelte')).default;
OptionsData = (await import('$lib/components/OptionsData.svelte')).default;
TARating = (await import('$lib/components/TARating.svelte')).default;
@ -699,7 +698,6 @@
taRating = {};
varDict = {};
trendList = [];
priceAnalysisDict = {};
output = null;
@ -718,7 +716,6 @@
previousClose = data?.getStockQuote?.previousClose
taRating = data?.getStockTARating;
trendList = data?.getTrendAnalysis;
priceAnalysisDict = data?.getPriceAnalysis;
varDict = data?.getVaR;
//shareholderList = data?.getShareHolders;
@ -1288,11 +1285,14 @@
</div>
{/if}
{#if PriceAnalysis}
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(priceAnalysisDict)?.length !== 0 ? '' : 'hidden'}">
<PriceAnalysis data={data} priceAnalysisDict={priceAnalysisDict}/>
</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/PriceAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</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'}">

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

@ -153,7 +153,6 @@ export const load = async ({ params, locals, cookies}) => {
fetchData(apiURL,'/top-etf-ticker-holder',params.tickerID),
fetchData(apiURL,'/sentiment-analysis',params.tickerID),
fetchData(apiURL,'/trend-analysis',params.tickerID),
fetchData(apiURL,'/price-analysis',params.tickerID),
fetchData(apiURL,'/fundamental-predictor-analysis',params.tickerID),
fetchData(apiURL,'/value-at-risk',params.tickerID),
fetchData(apiURL,'/enterprise-values',params.tickerID),
@ -183,7 +182,6 @@ export const load = async ({ params, locals, cookies}) => {
getTopETFHolder,
getSentimentAnalysis,
getTrendAnalysis,
getPriceAnalysis,
getFundamentalAnalysis,
getVaR,
getEnterPriseValues,
@ -219,7 +217,6 @@ export const load = async ({ params, locals, cookies}) => {
getTopETFHolder,
getSentimentAnalysis,
getTrendAnalysis,
getPriceAnalysis,
getFundamentalAnalysis,
getVaR,
getEnterPriseValues,

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

@ -9,6 +9,7 @@
import StockKeyInformation from '$lib/components/StockKeyInformation.svelte';
import BullBearSay from '$lib/components/BullBearSay.svelte';
import CommunitySentiment from '$lib/components/CommunitySentiment.svelte';
import Lazy from '$lib/components/Lazy.svelte';
const usRegion = ['cle1','iad1','pdx1','sfo1'];
@ -47,7 +48,6 @@
let enterpriseValues = [];
let sentimentList = []
let trendList = [];
let priceAnalysisDict = {};
let fundamentalAnalysisDict = {};
let communitySentiment = {};
@ -96,7 +96,7 @@
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;
//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;
@ -652,7 +652,6 @@ function changeChartType() {
enterpriseValues = []
sentimentList = [];
trendList = [];
priceAnalysisDict = {};
fundamentalAnalysisDict = {};
communitySentiment = {}
output = null;
@ -673,7 +672,6 @@ function changeChartType() {
trendList = data?.getTrendAnalysis;
varDict = data?.getVaR;
enterpriseValues = data?.getEnterPriseValues;
priceAnalysisDict = data?.getPriceAnalysis;
fundamentalAnalysisDict = data?.getFundamentalAnalysis;
communitySentiment = data?.getCommunitySentiment;
@ -1234,11 +1232,14 @@ function changeChartType() {
{#if PriceAnalysis}
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(priceAnalysisDict)?.length !== 0 ? '' : 'hidden'}">
<PriceAnalysis data={data} priceAnalysisDict={priceAnalysisDict}/>
<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/PriceAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
{/if}
</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'}">