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

lazy load options component

Browse Source
This commit is contained in:
MuslemRahimi 2024-06-26 09:37:10 +02:00
parent 284bf7d623
commit 9e337f3f80
6 changed files with 121 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/lib/components/OptionsData.svelte
View File

@ -1,15 +1,27 @@
<script lang='ts'>
import { assetType, stockTicker, etfTicker, displayCompanyName} from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import InfoModal from '$lib/components/InfoModal.svelte';
import { LayerCake, Html } from 'layercake';
import Circle from '$lib/components/Circle/Circle.html.svelte';
import { optionComponent, assetType, stockTicker, etfTicker, displayCompanyName, userRegion, getCache, setCache} from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import InfoModal from '$lib/components/InfoModal.svelte';
import { LayerCake, Html } from 'layercake';
import Circle from '$lib/components/Circle/Circle.html.svelte';
export let optionsDict = {};
export let data;
export let data;
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;
}
});
let optionsDict = {};
let isLoaded = false;
function changeStatement(event)
{
@ -34,9 +46,41 @@ function allValuesZero(obj) {
let checkIfNotZero:boolean;
$: {
if (displayTimePeriod && Object?.keys(optionsDict)?.length !== 0)
{
const getOptionsBubble = async (ticker) => {
// Get cached data for the specific tickerID
const cachedData = getCache(ticker, 'getOptionsBubble');
if (cachedData) {
optionsDict = cachedData;
} else {
const postData = {'ticker': ticker};
// make the POST request to the endpoint
const response = await fetch(apiURL + '/options-bubble', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData)
});
optionsDict = await response.json();
// Cache the data for this specific tickerID with a specific name 'getOptionsBubble'
setCache(ticker, optionsDict, 'getOptionsBubble');
}
if(Object?.keys(optionsDict)?.length !== 0) {
$optionComponent = true;
}
else {
$optionComponent = false;
}
};
function prepareData() {
checkIfNotZero = false;
rawData = [];
try {
@ -58,9 +102,38 @@ $: {
rawData.push({ 'contract': 'puts', value: putProportion });
signal = callProportion >= putProportion ? 'Bullish' : 'Bearish';
checkIfNotZero = allValuesZero(dataset);
}
$: {
if(($assetType === 'stock' ? $stockTicker : $etfTicker) && typeof window !== 'undefined') {
isLoaded = false;
const ticker = $assetType === 'stock' ? $stockTicker : $etfTicker;
const asyncFunctions = [
getOptionsBubble(ticker)
];
Promise.all(asyncFunctions)
.then((results) => {
prepareData()
})
.catch((error) => {
console.error('An error occurred:', error);
});
isLoaded = true;
}
}
$: {
if (displayTimePeriod && Object?.keys(optionsDict)?.length !== 0 && isLoaded === true)
{
prepareData()
}
}
</script>
<section class="bg-[#0F0F0F] overflow-hidden text-white h-full w-full sm:mb-10">
@ -82,15 +155,15 @@ $: {
</div>
{#if data?.user?.tier === 'Pro'}
{#if isLoaded}
<div class="flex flex-row items-end justify-between">
<select class="mt-5 sm:mb-0 ml-1 w-36 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]" on:change={changeStatement}>
<option disabled>Choose a time period</option>
<option disabled={deactivateContent} value="oneDay">
{!deactivateContent ? 'Last 24h' : 'Last 24h (Pro Only)'}
<option value="oneDay">
Last 24h
</option>
<option disabled={deactivateContent} value="oneWeek">
{!deactivateContent ? 'Last Week' : 'Last Week (Pro Only)'}
<option value="oneWeek">
Last Week
</option>
<option value="oneMonth" selected>
Last Month
@ -170,6 +243,15 @@ $: {
</div>
{/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}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>

1
src/lib/store.ts
View File

@ -71,6 +71,7 @@ export const varComponent = writable(<boolean>(false));
export const sentimentComponent = writable(<boolean>(false));
export const analystEstimateComponent = writable(<boolean>(false));
export const marketMakerComponent = writable(<boolean>(false));
export const optionComponent = writable(<boolean>(false));
export const strategyId = writable(<string> (""));

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

@ -112,7 +112,6 @@ const promises = [
fetchData(apiURL,'/stock-dividend',params.tickerID),
fetchData(apiURL,'/stock-quote', params.tickerID),
fetchData(apiURL,'/stock-rating', params.tickerID),
fetchData(apiURL,'/options-bubble',params.tickerID),
fetchData(apiURL,'/wiim',params.tickerID),
fetchData(apiURL,'/one-day-price',params.tickerID),
fetchWatchlist(fastifyURL, locals?.user?.id),
@ -128,7 +127,6 @@ const promises = [
getStockDividend,
getStockQuote,
getStockTARating,
getOptionsData,
getWhyPriceMoved,
getOneDayPrice,
getUserWatchlist,
@ -150,7 +148,6 @@ const promises = [
getStockDividend,
getStockQuote,
getStockTARating,
getOptionsData,
getWhyPriceMoved,
getOneDayPrice,
getUserWatchlist,

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

@ -3,7 +3,7 @@
import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
import { TrackingModeExitMode } from 'lightweight-charts';
import {getCache, setCache, sentimentComponent, varComponent, retailVolumeComponent, trendAnalysisComponent, priceAnalysisComponent, assetType, screenWidth, globalForm, userRegion, numberOfUnreadNotification, displayCompanyName, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, etfTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
import {getCache, setCache, optionComponent, sentimentComponent, varComponent, retailVolumeComponent, trendAnalysisComponent, priceAnalysisComponent, 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';
@ -50,7 +50,6 @@
let dividendList = [];
let similarTicker = []
let prePostData = {};
let optionsDict = {};
let taRating = {};
let previousClose = data?.getStockQuote?.previousClose;
@ -77,7 +76,6 @@
let Correlation;
let CountrySegmentation;
let SectorSegmentation;
let OptionsData;
let WIIM;
//let ETFKeyInformation;
@ -85,19 +83,10 @@
onMount(async() => {
WIIM = (await import('$lib/components/WIIM.svelte')).default;
OptionsData = (await import('$lib/components/OptionsData.svelte')).default;
TARating = (await import('$lib/components/TARating.svelte')).default;
//PricePredictionCard = (await import('$lib/components/PricePredictionCard.svelte')).default;
//TradingModel = (await import('$lib/components/TradingModel.svelte')).default;
Correlation = (await import('$lib/components/Correlation.svelte')).default;
CountrySegmentation = (await import('$lib/components/CountrySegmentation.svelte')).default;
SectorSegmentation = (await import('$lib/components/SectorSegmentation.svelte')).default;
//ShareHolders = (await import('$lib/components/ShareHolders.svelte')).default;
/*
if ($screenWidth < 640) {
ETFKeyInformation = (await import('$lib/components/ETFKeyInformation.svelte')).default;
}
*/
})
@ -716,7 +705,6 @@ async function initializePrice() {
topHoldingList = data?.getETFHoldings;
dividendList = data?.getStockDividend;
similarTicker = data?.getSimilarETFs;
optionsDict = data?.getOptionsData;
previousClose = data?.getStockQuote?.previousClose
taRating = data?.getStockTARating;
@ -1300,12 +1288,13 @@ async function initializePrice() {
</div>
</Lazy>
{#if OptionsData}
<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}/>
<Lazy>
<div class="w-full mt-10 sm:mt-0 m-auto sm:p-6 {!$optionComponent ? 'hidden' : ''}">
{#await import('$lib/components/OptionsData.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
{/if}
</Lazy>

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

@ -142,7 +142,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
fetchData(apiURL,'/analyst-summary-rating',params.tickerID),
fetchData(apiURL,'/stock-quote',params.tickerID),
fetchData(apiURL,'/stock-rating',params.tickerID),
fetchData(apiURL,'/options-bubble',params.tickerID),
fetchData(apiURL,'/bull-bear-say',params.tickerID),
fetchData(apiURL,'/wiim',params.tickerID),
fetchData(apiURL,'/top-etf-ticker-holder',params.tickerID),
@ -160,7 +159,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
getAnalystRating,
getStockQuote,
getStockTARating,
getOptionsData,
getBullBearSay,
getWhyPriceMoved,
getTopETFHolder,
@ -184,7 +182,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
getAnalystRating,
getStockQuote,
getStockTARating,
getOptionsData,
getBullBearSay,
getWhyPriceMoved,
getTopETFHolder,

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

@ -3,7 +3,7 @@
import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
import { TrackingModeExitMode } from 'lightweight-charts';
import {getCache, setCache, marketMakerComponent, analystEstimateComponent, sentimentComponent, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, varComponent, shareStatisticsComponent, enterpriseComponent, darkPoolComponent, retailVolumeComponent, shareholderComponent, trendAnalysisComponent, revenueSegmentationComponent, priceAnalysisComponent, fundamentalAnalysisComponent, userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
import {getCache, setCache, optionComponent, marketMakerComponent, analystEstimateComponent, sentimentComponent, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, varComponent, shareStatisticsComponent, enterpriseComponent, darkPoolComponent, retailVolumeComponent, shareholderComponent, trendAnalysisComponent, revenueSegmentationComponent, priceAnalysisComponent, fundamentalAnalysisComponent, userRegion, 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';
@ -32,7 +32,6 @@
let prePostData = {};
let similarstock = [];
let topETFHolder = [];
let optionsDict = data?.getOptionsData ?? {};
let previousClose = data?.getStockQuote?.previousClose;
let marketMoods = {}
let taRating = {};
@ -56,7 +55,6 @@
let TARating;
let StockSplits;
let Correlation;
let OptionsData;
let WIIM;
@ -67,7 +65,6 @@
TARating = (await import('$lib/components/TARating.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;
})
@ -673,7 +670,6 @@ function changeChartType() {
oneMonthPrice = [];
oneYearPrice = [];
threeYearPrice = [];
optionsDict = {};
prePostData = {};
marketMoods = {};
taRating = {};
@ -691,7 +687,6 @@ function changeChartType() {
similarstock = data?.getSimilarStock;
topETFHolder = data?.getTopETFHolder;
optionsDict = data?.getOptionsData;
//previousClose = stockDeck?.at(0)?.previousClose;
@ -1310,11 +1305,14 @@ function changeChartType() {
</div>
</Lazy>
{#if OptionsData}
<div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(optionsDict)?.length !== 0 ? '' : 'hidden'}">
<OptionsData data={data} optionsDict={optionsDict}/>
<Lazy>
<div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionComponent ? 'hidden' : ''}">
{#await import('$lib/components/OptionsData.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
{/if}
</Lazy>