add lazy loading to RevenueSegmentation component
This commit is contained in:
MuslemRahimi
parent
25fc94fc92
commit
f759268c22
@ -1,5 +1,5 @@
|
||||
<script lang='ts'>
|
||||
import { stockTicker, screenWidth} from '$lib/store';
|
||||
import { stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
|
||||
import { abbreviateNumber, formatString } from '$lib/utils';
|
||||
import Sankey from '$lib/components/Sankey.svelte';
|
||||
import { LayerCake, Svg } from 'layercake';
|
||||
@ -7,10 +7,22 @@
|
||||
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
|
||||
export let revenueSegmentation;
|
||||
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 revenueSegmentation = [];
|
||||
|
||||
let data = [];
|
||||
let geographicList = [];
|
||||
@ -85,26 +97,9 @@
|
||||
|
||||
geographicList?.sort((a, b) => b?.value - a?.value);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$: {
|
||||
if($stockTicker && typeof window !== 'undefined' && typeof revenueSegmentation !== 'undefined' && revenueSegmentation?.length !== 0)
|
||||
{
|
||||
showFullStats = false;
|
||||
data = [];
|
||||
geographicList = [];
|
||||
totalProductRevenue = 0;
|
||||
totalGeographicRevenue = 0;
|
||||
|
||||
|
||||
|
||||
prepareData(revenueSegmentation)
|
||||
|
||||
geographicList?.forEach(item => {
|
||||
|
||||
|
||||
geographicList?.forEach(item => {
|
||||
if (item?.name === "TAIWAN, PROVINCE OF CHINA") {
|
||||
item.name = "TAIWAN";
|
||||
}
|
||||
@ -113,10 +108,10 @@
|
||||
}
|
||||
});
|
||||
|
||||
geographicList = geographicList.map(item => {
|
||||
geographicList = geographicList?.map(item => {
|
||||
return {
|
||||
...item,
|
||||
name: item.name
|
||||
name: item?.name
|
||||
?.replace("Video Game Brands - ", "")
|
||||
};
|
||||
});
|
||||
@ -135,8 +130,64 @@
|
||||
|
||||
geographicList = [...geographicList];
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const getRevenueSegmentation = async (ticker) => {
|
||||
// Get cached data for the specific tickerID
|
||||
const cachedData = getCache(ticker, 'getRevenueSegmentation');
|
||||
if (cachedData) {
|
||||
revenueSegmentation = cachedData;
|
||||
} else {
|
||||
|
||||
const postData = {'ticker': ticker};
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch(apiURL + '/revenue-segmentation', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
});
|
||||
|
||||
revenueSegmentation = await response.json();
|
||||
|
||||
// Cache the data for this specific tickerID with a specific name 'getRevenueSegmentation'
|
||||
setCache(ticker, revenueSegmentation, 'getRevenueSegmentation');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
$: {
|
||||
if($stockTicker && typeof window !== 'undefined') {
|
||||
isLoaded = false;
|
||||
showFullStats = false;
|
||||
data = [];
|
||||
geographicList = [];
|
||||
totalProductRevenue = 0;
|
||||
totalGeographicRevenue = 0;
|
||||
const ticker = $stockTicker;
|
||||
|
||||
const asyncFunctions = [
|
||||
getRevenueSegmentation(ticker)
|
||||
];
|
||||
Promise.all(asyncFunctions)
|
||||
.then((results) => {
|
||||
prepareData(revenueSegmentation)
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('An error occurred:', error);
|
||||
});
|
||||
isLoaded = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
let showFullStats = false;
|
||||
let charNumber = 40;
|
||||
|
||||
@ -161,19 +212,20 @@ $: {
|
||||
<main class="w-full">
|
||||
<div class="w-fit sm:w-full sm:max-w-2xl m-auto mt-5 sm:mt-0">
|
||||
|
||||
|
||||
{#if Object?.keys(data)?.length !== 0 && totalProductRevenue !== 0}
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="revenueProductSegmentationInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
||||
Revenue Breakdown
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Revenue Breakdown"}
|
||||
content={"A revenue stream for a company is how they make money. It can come from selling things, providing services, or other sources. These different ways of making money add up to keep the company running and growing."}
|
||||
id={"revenueProductSegmentationInfo"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
{#if Object?.keys(data)?.length !== 0 && totalProductRevenue !== 0}
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<label for="revenueProductSegmentationInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
|
||||
Revenue Breakdown
|
||||
</label>
|
||||
<InfoModal
|
||||
title={"Revenue Breakdown"}
|
||||
content={"A revenue stream for a company is how they make money. It can come from selling things, providing services, or other sources. These different ways of making money add up to keep the company running and growing."}
|
||||
id={"revenueProductSegmentationInfo"}
|
||||
/>
|
||||
</div>
|
||||
<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 w-full mb-5">
|
||||
Based on the latest earnings report
|
||||
@ -268,6 +320,16 @@ $: {
|
||||
<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>
|
||||
|
||||
@ -1312,8 +1312,17 @@
|
||||
<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}/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{/if}
|
||||
|
||||
<!--Start Shareholders-->
|
||||
<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-->
|
||||
|
||||
<!--End Price Prediction Model-->
|
||||
|
||||
|
||||
@ -140,7 +140,6 @@ export const load = async ({ params, locals, cookies}) => {
|
||||
//fetchData(apiURL,'/price-prediction',params.tickerID),
|
||||
//fetchData(apiURL,'/trading-signals',params.tickerID),
|
||||
fetchData(apiURL,'/stockdeck',params.tickerID),
|
||||
fetchData(apiURL,'/revenue-segmentation',params.tickerID),
|
||||
fetchData(apiURL,'/stock-correlation',params.tickerID),
|
||||
fetchData(apiURL,'/analyst-summary-rating',params.tickerID),
|
||||
fetchData(apiURL,'/analyst-estimate',params.tickerID),
|
||||
@ -166,7 +165,6 @@ export const load = async ({ params, locals, cookies}) => {
|
||||
//getPricePrediction,
|
||||
//getTradingSignals,
|
||||
getStockDeck,
|
||||
getRevenueSegmentation,
|
||||
getCorrelation,
|
||||
getAnalystRating,
|
||||
getAnalystEstimate,
|
||||
@ -198,7 +196,6 @@ export const load = async ({ params, locals, cookies}) => {
|
||||
//getPricePrediction,
|
||||
//getTradingSignals,
|
||||
getStockDeck,
|
||||
getRevenueSegmentation,
|
||||
getCorrelation,
|
||||
getAnalystRating,
|
||||
getAnalystEstimate,
|
||||
|
||||
@ -33,7 +33,6 @@
|
||||
let stockDeck = data?.getStockDeck ?? [];
|
||||
let analystEstimateList = data?.getAnalystEstimate ?? []
|
||||
let fairPrice = data?.getFairPrice ?? [];
|
||||
let revenueSegmentation = data?.getRevenueSegmentation ?? [];
|
||||
let correlationList = data?.getCorrelation?.correlation ?? [];
|
||||
let modelStats = data?.getTradingSignals ?? {};
|
||||
let prePostData = {};
|
||||
@ -64,7 +63,6 @@
|
||||
|
||||
|
||||
let TARating;
|
||||
let RevenueSegmentation;
|
||||
let StockSplits;
|
||||
let Correlation;
|
||||
let OptionsData;
|
||||
@ -91,7 +89,6 @@
|
||||
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;
|
||||
Correlation = (await import('$lib/components/Correlation.svelte')).default;
|
||||
OptionsData = (await import('$lib/components/OptionsData.svelte')).default;
|
||||
@ -643,7 +640,6 @@ function changeChartType() {
|
||||
pricePrediction = data?.getPricePrediction;
|
||||
modelStats = data?.getTradingSignals;
|
||||
stockDeck = data?.getStockDeck;
|
||||
revenueSegmentation = data?.getRevenueSegmentation;
|
||||
correlationList = data?.getCorrelation?.correlation;
|
||||
analystEstimateList = data?.getAnalystEstimate;
|
||||
previousClose = data?.getStockQuote?.previousClose;
|
||||
@ -1272,13 +1268,13 @@ function changeChartType() {
|
||||
|
||||
|
||||
<!--Start RevenueSegmentation-->
|
||||
<div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {revenueSegmentation?.at(0)?.length !== 0 ? '' : 'hidden'}">
|
||||
{#if RevenueSegmentation}
|
||||
<RevenueSegmentation
|
||||
revenueSegmentation = {revenueSegmentation}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<Lazy>
|
||||
<div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto">
|
||||
{#await import('$lib/components/RevenueSegmentation.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
<!--End RevenueSegmentation-->
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user