remove correlation component
This commit is contained in:
MuslemRahimi
parent
22d5d14b65
commit
265c83c1fd
@ -1,13 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { stockTicker, etfTicker, assetType, screenWidth } from '$lib/store';
|
||||
import { correlationComponent, stockTicker, etfTicker, assetType, screenWidth,getCache, setCache } from '$lib/store';
|
||||
import { goto } from '$app/navigation';
|
||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||
import Lazy from 'svelte-lazy';
|
||||
|
||||
export let correlationList;
|
||||
export let data;
|
||||
|
||||
let showFullStats = false;
|
||||
|
||||
let isLoaded = false;
|
||||
let rawData = [];
|
||||
|
||||
|
||||
async function stockSelector(symbol)
|
||||
@ -26,21 +27,57 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
$: {
|
||||
if (($assetType === 'etf' ? $etfTicker : $stockTicker) && typeof window !== 'undefined' && typeof correlationList !== 'undefined' && correlationList?.length !== 0 ) {
|
||||
showFullStats = false;
|
||||
async function getCorrelation(ticker) {
|
||||
const cachedData = getCache(ticker, 'getCorrelation');
|
||||
if (cachedData) {
|
||||
rawData = cachedData;
|
||||
} else {
|
||||
try {
|
||||
const response = await fetch(data?.apiURL+'/correlation-ticker', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": data?.apiKey
|
||||
},
|
||||
body: JSON.stringify({ ticker })
|
||||
});
|
||||
rawData = (await response.json()) || [];
|
||||
+
|
||||
setCache(ticker, rawData, 'getCorrelation');
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch swap data:', error);
|
||||
rawData = [];
|
||||
}
|
||||
}
|
||||
if (rawData?.lenght !== 0) {
|
||||
$correlationComponent = true;
|
||||
}
|
||||
else {
|
||||
$correlationComponent = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$: {
|
||||
if (($assetType === 'stock' ? $stockTicker : $etfTicker) && typeof window !== 'undefined') {
|
||||
showFullStats = false;
|
||||
isLoaded = false;
|
||||
const ticker = $assetType === 'stock' ? $stockTicker : $etfTicker;
|
||||
getCorrelation(ticker).then(() => {
|
||||
isLoaded = true;
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
$: charNumber = $screenWidth < 640 ? 10 : 20;
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<svelte:options immutable={true} />
|
||||
|
||||
<section class="overflow-hidden w-full">
|
||||
|
||||
@ -57,13 +94,16 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if data?.user?.tier === 'Pro'}
|
||||
{#if isLoaded}
|
||||
{#if rawData?.length !== 0}
|
||||
|
||||
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
|
||||
{#if correlationList?.length !== 0}
|
||||
|
||||
{#each (showFullStats ? correlationList : correlationList?.slice(0, 3)) as item, index}
|
||||
|
||||
{#each (showFullStats ? rawData : rawData?.slice(0, 3)) as item, index}
|
||||
|
||||
|
||||
<div class="shadow-lg bg-[#27272A] w-full rounded-lg p-4 sm:p-3 mb-5 flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && correlationList?.length > 2 ? 'opacity-[0.3]' : '' }">
|
||||
<div class="shadow-lg bg-[#27272A] w-full rounded-lg p-4 sm:p-3 mb-5 flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && rawData?.length > 2 ? 'opacity-[0.3]' : '' }">
|
||||
|
||||
<div on:click={() => stockSelector(item?.symbol)} class="flex-shrink-0 mr-3 rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-[#09090B]">
|
||||
<img
|
||||
@ -99,18 +139,33 @@
|
||||
|
||||
{/each}
|
||||
|
||||
<label on:click={() => showFullStats = !showFullStats} class="{correlationList?.length < 4 ? 'hidden' : ''} cursor-pointer flex justify-center items-center mt-5">
|
||||
<label on:click={() => showFullStats = !showFullStats} class="{rawData?.length < 4 ? 'hidden' : ''} cursor-pointer flex justify-center items-center mt-5">
|
||||
<svg class="w-10 h-10 transform {showFullStats ? 'rotate-180' : ''} " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#2A323C" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"/></svg>
|
||||
</label>
|
||||
|
||||
{:else}
|
||||
<h2 class=" mt-10 flex justify-center items-center text-3xl font-bold text-slate-700 mb-5 m-auto">
|
||||
No data available
|
||||
<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}
|
||||
|
||||
</Lazy>
|
||||
|
||||
{/if}
|
||||
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label class="bg-[#09090B] 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-[#111112] 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>
|
||||
Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
</section>
|
||||
|
||||
@ -81,6 +81,7 @@ export const analystInsightComponent= writable(<boolean>(false));
|
||||
export const swapComponent= writable(<boolean>(false));
|
||||
export const taRatingComponent= writable(<boolean>(false));
|
||||
export const dcfComponent= writable(<boolean>(false));
|
||||
export const correlationComponent = writable(<boolean>(false));
|
||||
|
||||
|
||||
|
||||
|
||||
@ -44,6 +44,7 @@
|
||||
export let data;
|
||||
|
||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||
console.log(cloudFrontUrl)
|
||||
|
||||
|
||||
//const trialLeftDays = Math?.floor(addDays(data, 7, ''));
|
||||
|
||||
@ -116,7 +116,6 @@ const promises = [
|
||||
fetchData(apiURL,apiKey, '/etf-profile', params.tickerID),
|
||||
fetchData(apiURL,apiKey, '/similar-etfs', params.tickerID),
|
||||
fetchData(apiURL,apiKey, '/etf-country-weighting', params.tickerID),
|
||||
fetchData(apiURL,apiKey, '/stock-correlation', params.tickerID),
|
||||
fetchData(apiURL,apiKey, '/etf-holdings', params.tickerID),
|
||||
fetchData(apiURL,apiKey, '/stock-dividend',params.tickerID),
|
||||
fetchData(apiURL,apiKey, '/stock-quote', params.tickerID),
|
||||
@ -130,7 +129,6 @@ const promises = [
|
||||
getETFProfile,
|
||||
getSimilarETFs,
|
||||
getCountryWeighting,
|
||||
getCorrelation,
|
||||
getETFHoldings,
|
||||
getStockDividend,
|
||||
getStockQuote,
|
||||
@ -150,7 +148,6 @@ const promises = [
|
||||
getETFProfile,
|
||||
getSimilarETFs,
|
||||
getCountryWeighting,
|
||||
getCorrelation,
|
||||
getETFHoldings,
|
||||
getStockDividend,
|
||||
getStockQuote,
|
||||
|
||||
@ -34,7 +34,6 @@
|
||||
let geographicList = [];
|
||||
let sectorList = [];
|
||||
let etfProfile = [];
|
||||
let correlationList = [];
|
||||
let topHoldingList = [];
|
||||
let dividendList = [];
|
||||
let similarTicker = []
|
||||
@ -60,7 +59,6 @@
|
||||
|
||||
//let PricePredictionCard;
|
||||
//let TradingModel;
|
||||
let Correlation;
|
||||
let CountrySegmentation;
|
||||
let SectorSegmentation;
|
||||
let WIIM;
|
||||
@ -70,7 +68,6 @@
|
||||
onMount(async() => {
|
||||
|
||||
WIIM = (await import('$lib/components/WIIM.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;
|
||||
})
|
||||
@ -674,7 +671,6 @@ async function initializePrice() {
|
||||
|
||||
geographicList = [];
|
||||
sectorList = [];
|
||||
correlationList = [];
|
||||
prePostData = {};
|
||||
output = null;
|
||||
|
||||
@ -684,9 +680,7 @@ async function initializePrice() {
|
||||
sectorList = sectorList?.sort(function(a,b) {
|
||||
return b?.exposure - a?.exposure;
|
||||
})
|
||||
etfProfile = data?.getETFProfile;
|
||||
correlationList = data?.getCorrelation?.correlation;
|
||||
|
||||
etfProfile = data?.getETFProfile;
|
||||
topHoldingList = data?.getETFHoldings;
|
||||
dividendList = data?.getStockDividend;
|
||||
similarTicker = data?.getSimilarETFs;
|
||||
@ -1340,11 +1334,13 @@ async function initializePrice() {
|
||||
|
||||
|
||||
|
||||
<div class="w-full pt-10 m-auto sm:p-6 rounded-2xl {correlationList?.length !== 0 ? '' : 'hidden'}">
|
||||
{#if Correlation}
|
||||
<Correlation correlationList={correlationList}/>
|
||||
{/if}
|
||||
</div>
|
||||
<!--
|
||||
<div class="w-full m-auto pt-10 sm:pl-6 sm:pb-6 sm:pt-6 {!$correlationComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/Correlation.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data}/>
|
||||
{/await}
|
||||
</div>
|
||||
-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -803,12 +803,12 @@ $: {
|
||||
|
||||
|
||||
<!-- Content area -->
|
||||
<div class="mt-4 w-full overflow-x-auto overflow-y-auto h-[900px] rounded-lg">
|
||||
<div class="mt-4 w-full overflow-x-auto overflow-y-auto h-[850px] rounded-lg">
|
||||
<div class="table-container">
|
||||
<div class="table">
|
||||
<VirtualList
|
||||
width="100%"
|
||||
height={900}
|
||||
height={850}
|
||||
itemCount={rawData.length}
|
||||
itemSize={40}
|
||||
>
|
||||
|
||||
@ -737,12 +737,12 @@ $: {
|
||||
<!-- Page wrapper -->
|
||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||
<!-- Content area -->
|
||||
<div class="mt-4 w-full overflow-x-auto overflow-y-auto h-[900px] rounded-lg">
|
||||
<div class="mt-4 w-full overflow-x-auto overflow-y-auto h-[850px] rounded-lg">
|
||||
<div class="table-container">
|
||||
<div class="table">
|
||||
<VirtualList
|
||||
width="100%"
|
||||
height={900}
|
||||
height={850}
|
||||
itemCount={rawData.length}
|
||||
itemSize={40}
|
||||
>
|
||||
|
||||
@ -136,7 +136,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
|
||||
const promises = [
|
||||
fetchData(apiURL,apiKey, '/similar-stocks',params.tickerID),
|
||||
fetchData(apiURL,apiKey, '/stockdeck',params.tickerID),
|
||||
fetchData(apiURL,apiKey, '/stock-correlation',params.tickerID),
|
||||
fetchData(apiURL,apiKey, '/analyst-summary-rating',params.tickerID),
|
||||
fetchData(apiURL,apiKey, '/stock-quote',params.tickerID),
|
||||
fetchData(apiURL,apiKey, '/bull-bear-say',params.tickerID),
|
||||
@ -151,7 +150,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
|
||||
const [
|
||||
getSimilarStock,
|
||||
getStockDeck,
|
||||
getCorrelation,
|
||||
getAnalystRating,
|
||||
getStockQuote,
|
||||
getBullBearSay,
|
||||
@ -172,7 +170,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
|
||||
return {
|
||||
getSimilarStock,
|
||||
getStockDeck,
|
||||
getCorrelation,
|
||||
getAnalystRating,
|
||||
getStockQuote,
|
||||
getBullBearSay,
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
|
||||
|
||||
import { TrackingModeExitMode } from 'lightweight-charts';
|
||||
import {getCache, setCache, dcfComponent, taRatingComponent, swapComponent, analystInsightComponent, governmentContractComponent, optionsNetFlowComponent, impliedVolatilityComponent, borrowedShareComponent, clinicalTrialComponent, optionComponent, failToDeliverComponent, marketMakerComponent, analystEstimateComponent, sentimentComponent, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, varComponent, shareStatisticsComponent, enterpriseComponent, darkPoolComponent, retailVolumeComponent, shareholderComponent, trendAnalysisComponent, revenueSegmentationComponent, priceAnalysisComponent, fundamentalAnalysisComponent, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
|
||||
import {getCache, setCache, correlationComponent, dcfComponent, taRatingComponent, swapComponent, analystInsightComponent, governmentContractComponent, optionsNetFlowComponent, impliedVolatilityComponent, borrowedShareComponent, clinicalTrialComponent, optionComponent, failToDeliverComponent, marketMakerComponent, analystEstimateComponent, sentimentComponent, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, varComponent, shareStatisticsComponent, enterpriseComponent, darkPoolComponent, retailVolumeComponent, shareholderComponent, trendAnalysisComponent, revenueSegmentationComponent, priceAnalysisComponent, fundamentalAnalysisComponent, 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';
|
||||
@ -16,7 +16,6 @@
|
||||
let displayChartType = 'line';
|
||||
|
||||
let stockDeck = data?.getStockDeck ?? [];
|
||||
let correlationList = data?.getCorrelation?.correlation ?? [];
|
||||
let prePostData = {};
|
||||
let similarstock = [];
|
||||
let topETFHolder = [];
|
||||
@ -41,16 +40,13 @@
|
||||
|
||||
|
||||
let StockSplits;
|
||||
let Correlation;
|
||||
let WIIM;
|
||||
|
||||
|
||||
|
||||
onMount(async() => {
|
||||
WIIM = (await import('$lib/components/WIIM.svelte')).default;
|
||||
|
||||
StockSplits = (await import('$lib/components/StockSplits.svelte')).default;
|
||||
Correlation = (await import('$lib/components/Correlation.svelte')).default;
|
||||
|
||||
})
|
||||
|
||||
@ -664,7 +660,6 @@ function changeChartType() {
|
||||
|
||||
|
||||
stockDeck = data?.getStockDeck;
|
||||
correlationList = data?.getCorrelation?.correlation;
|
||||
marketMoods = data?.getBullBearSay;
|
||||
communitySentiment = data?.getCommunitySentiment;
|
||||
|
||||
@ -1440,22 +1435,22 @@ function changeChartType() {
|
||||
</div>
|
||||
<!--End DCF-->
|
||||
|
||||
<div class="w-full m-auto pt-10 sm:pl-6 sm:pb-6 sm:pt-6 {correlationList?.length !== 0 ? '' : 'hidden'}">
|
||||
{#if Correlation}
|
||||
<Correlation correlationList={correlationList}/>
|
||||
{/if}
|
||||
<!--
|
||||
<div class="w-full m-auto pt-10 sm:pl-6 sm:pb-6 sm:pt-6 {!$correlationComponent ? 'hidden' : ''}">
|
||||
{#await import('$lib/components/Correlation.svelte') then {default: Comp}}
|
||||
<svelte:component this={Comp} data={data}/>
|
||||
{/await}
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
|
||||
<!--Start Stock Splits-->
|
||||
{#if StockSplits && stockDeck?.at(0)?.stockSplits?.length !== 0}
|
||||
<div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto rounded-2xl mb-10">
|
||||
<StockSplits
|
||||
stockDeck={stockDeck}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<!--Start Stock Splits-->
|
||||
{#if StockSplits && stockDeck?.at(0)?.stockSplits?.length !== 0}
|
||||
<div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto rounded-2xl mb-10">
|
||||
<StockSplits
|
||||
stockDeck={stockDeck}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<!--End Stock Splits-->
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user