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

Load Shareholders component lazy

Browse Source
This commit is contained in:
MuslemRahimi 2024-06-06 22:36:56 +02:00
parent d55e6bb829
commit 6954ef1a11
4 changed files with 84 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/lib/components/ShareHolders.svelte
View File

@ -1,21 +1,32 @@
<script lang='ts'>
import { Chart } from 'svelte-echarts'
import {stockTicker, screenWidth} from '$lib/store';
import { screenWidth, stockTicker, etfTicker, cryptoTicker, assetType, userRegion, getCache, setCache} from '$lib/store';
import { formatString } from '$lib/utils';
import { goto } from '$app/navigation';
import { abbreviateNumber } from '$lib/utils';
import InfoModal from '$lib/components/InfoModal.svelte';
import Lazy from 'svelte-lazy';
export let shareholderList;
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;
}
});
let shareholderList = []
let optionsPieChart;
let institutionalOwner = 0;
let otherOwner = 0;
let topHolders = 0;
let isLoaded:boolean
let showFullStats = false;
@ -23,6 +34,16 @@ let showFullStats = false;
const plotPieChart = () => {
shareholderList = shareholderList?.filter(item => item?.ownership <= 100);
topHolders = 0;
otherOwner = 0;
institutionalOwner = 0;
institutionalOwner = shareholderList?.reduce((total, shareholder) => total + shareholder.ownership, 0);
otherOwner = institutionalOwner === 0 ? 0 : (100-institutionalOwner);
topHolders = shareholderList?.slice(0,10)?.reduce((total, shareholder) => total + shareholder.ownership, 0);
const options = {
grid: {
left: '0%',
@ -59,25 +80,52 @@ const plotPieChart = () => {
return options;
}
const getShareholders = async (ticker) => {
// Get cached data for the specific tickerID
const cachedData = getCache(ticker, 'getShareholders');
if (cachedData) {
shareholderList = cachedData;
} else {
const postData = {'ticker': ticker};
// make the POST request to the endpoint
const response = await fetch(apiURL + '/shareholders', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData)
});
shareholderList = await response.json();
// Cache the data for this specific tickerID with a specific name 'getShareholders'
setCache(ticker, shareholderList, 'getShareholders');
}
};
$: {
if ($stockTicker && typeof window !== 'undefined' && typeof shareholderList !== 'undefined' && shareholderList?.length !== 0)
if($stockTicker && typeof window !== 'undefined')
{
isLoaded = false;
showFullStats = false;
shareholderList = shareholderList?.filter(item => item?.ownership <= 100);
topHolders = 0;
otherOwner = 0;
institutionalOwner = 0;
institutionalOwner = shareholderList?.reduce((total, shareholder) => total + shareholder.ownership, 0);
const ticker = $stockTicker;
otherOwner = institutionalOwner === 0 ? 0 : (100-institutionalOwner);
topHolders = shareholderList?.slice(0,10)?.reduce((total, shareholder) => total + shareholder.ownership, 0);
optionsPieChart = plotPieChart()
const asyncFunctions = [
getShareholders(ticker)
];
Promise.all(asyncFunctions)
.then((results) => {
optionsPieChart = plotPieChart()
})
.catch((error) => {
console.error('An error occurred:', error);
});
isLoaded = true;
}
}
@ -114,7 +162,8 @@ $: {
id={"shareholdersInfo"}
/>
</div>
{#if isLoaded}
{#if shareholderList?.length !== 0}
<div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#202020] sm:bg-[#0F0F0F]">
<div class="text-white text-md mt-3">
@ -126,11 +175,13 @@ $: {
<div class="flex flex-row items-center sm:-mt-5">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-56">
<Chart options={optionsPieChart} class="chart w-full" />
</div>
</Lazy>
<div class="flex flex-col items-center sm:pt-0 m-auto">
<div class="flex flex-row items-center mr-auto mb-5">
@ -222,6 +273,17 @@ $: {
<svg class="w-10 sm:w-12 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#334155" d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"/></svg>
</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}
</div>
</main>

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

@ -713,7 +713,6 @@
taRating = data?.getStockTARating;
varDict = data?.getVaR;
//shareholderList = data?.getShareHolders;
//stockDeck = data?.getStockDeckData;

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

@ -139,7 +139,6 @@ export const load = async ({ params, locals, cookies}) => {
fetchData(apiURL,'/similar-stocks',params.tickerID),
//fetchData(apiURL,'/price-prediction',params.tickerID),
//fetchData(apiURL,'/trading-signals',params.tickerID),
fetchData(apiURL,'/shareholders',params.tickerID),
fetchData(apiURL,'/stockdeck',params.tickerID),
fetchData(apiURL,'/revenue-segmentation',params.tickerID),
fetchData(apiURL,'/stock-correlation',params.tickerID),
@ -166,7 +165,6 @@ export const load = async ({ params, locals, cookies}) => {
getSimilarStock,
//getPricePrediction,
//getTradingSignals,
getShareHolders,
getStockDeck,
getRevenueSegmentation,
getCorrelation,
@ -199,7 +197,6 @@ export const load = async ({ params, locals, cookies}) => {
getSimilarStock,
//getPricePrediction,
//getTradingSignals,
getShareHolders,
getStockDeck,
getRevenueSegmentation,
getCorrelation,

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

@ -33,7 +33,6 @@
let stockDeck = data?.getStockDeck ?? [];
let analystEstimateList = data?.getAnalystEstimate ?? []
let fairPrice = data?.getFairPrice ?? [];
let shareholderList = data?.getShareHolders ?? [];
let revenueSegmentation = data?.getRevenueSegmentation ?? [];
let correlationList = data?.getCorrelation?.correlation ?? [];
let modelStats = data?.getTradingSignals ?? {};
@ -67,13 +66,11 @@
let TARating;
let RevenueSegmentation;
let StockSplits;
let ShareHolders;
let DCF;
let Correlation;
let OptionsData;
let WIIM;
let SentimentAnalysis;
let PriceAnalysis;
let FundamentalAnalysis;
let VaR;
@ -91,17 +88,13 @@
*/
WIIM = (await import('$lib/components/WIIM.svelte')).default;
SentimentAnalysis = (await import('$lib/components/SentimentAnalysis.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;
TARating = (await import('$lib/components/TARating.svelte')).default;
RevenueSegmentation = (await import('$lib/components/RevenueSegmentation.svelte')).default;
StockSplits = (await import('$lib/components/StockSplits.svelte')).default;
ShareHolders = (await import('$lib/components/ShareHolders.svelte')).default;
DCF = (await import('$lib/components/DCF.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;
OptionsData = (await import('$lib/components/OptionsData.svelte')).default;
@ -652,7 +645,6 @@ function changeChartType() {
pricePrediction = data?.getPricePrediction;
modelStats = data?.getTradingSignals;
stockDeck = data?.getStockDeck;
shareholderList = data?.getShareHolders;
revenueSegmentation = data?.getRevenueSegmentation;
correlationList = data?.getCorrelation?.correlation;
analystEstimateList = data?.getAnalystEstimate;
@ -1295,13 +1287,13 @@ function changeChartType() {
<!--Start Shareholders-->
<div class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5 {shareholderList?.length !== 0 ? '' : 'hidden'}">
{#if ShareHolders}
<ShareHolders
shareholderList = {shareholderList}
/>
{/if}
</div>
<Lazy>
<div class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5">
{#await import('$lib/components/ShareHolders.svelte') then {default: Comp}}
<svelte:component this={Comp} />
{/await}
</div>
</Lazy>
<!--End Shareholders-->