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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-06-20 20:31:22 +02:00
parent 7d9b1cd6ec
commit ddeed42306
11 changed files with 131 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/Enterprise.svelte
View File

@ -1,6 +1,6 @@
<script lang ='ts'>
import { displayCompanyName, stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
import { enterpriseComponent, displayCompanyName, stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
@ -154,6 +154,12 @@ const getEnterPriseValues = async (ticker) => {
// Cache the data for this specific tickerID with a specific name 'getEnterPriseValues'
setCache(ticker, rawData, 'getEnterPriseValues');
}
if(rawData?.length !== 0) {
$enterpriseComponent = true;
} else {
$enterpriseComponent = false;
}
};

7
src/lib/components/SentimentAnalysis.svelte
View File

@ -1,6 +1,6 @@
<script lang ='ts'>
import { displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, userRegion, getCache, setCache} from '$lib/store';
import {sentimentComponent, displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, userRegion, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
let sentimentList = [];
@ -60,6 +60,11 @@ const getSentimentAnalysis = async (ticker) => {
// Cache the data for this specific tickerID with a specific name 'getSentimentAnalysis'
setCache(ticker, sentimentList, 'getSentimentAnalysis');
}
if(sentimentList?.length !== 0) {
$sentimentComponent = true;
} else {
$sentimentComponent = false;
}
};

7
src/lib/components/ShareStatistics.svelte
View File

@ -1,6 +1,6 @@
<script lang ='ts'>
import { displayCompanyName, stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
import { shareStatisticsComponent, displayCompanyName, stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber } from "$lib/utils";
@ -134,6 +134,11 @@ const getShareStatistics = async (ticker) => {
// Cache the data for this specific tickerID with a specific name 'getShareStatistics'
setCache(ticker, rawData, 'getShareStatistics');
}
if (Object?.keys(rawData)?.length !== 0) {
$shareStatisticsComponent = true;
} else {
$shareStatisticsComponent = false;
}
};

76
src/lib/components/VaR.svelte
View File

@ -1,20 +1,82 @@
<script lang ='ts'>
import { displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType} from '$lib/store';
import { varComponent, displayCompanyName, stockTicker, etfTicker, cryptoTicker, userRegion, assetType, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
export let varDict = {};
export let data;
let isLoaded = false;
let rating;
let outlook;
let valueAtRisk;
let varDict = {}
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;
}
});
const getVaR = async (ticker) => {
// Get cached data for the specific tickerID
const cachedData = getCache(ticker, 'getVaR');
if (cachedData) {
varDict = cachedData;
} else {
const postData = {'ticker': ticker};
// make the POST request to the endpoint
const response = await fetch(apiURL + '/value-at-risk', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData)
});
varDict = await response.json();
// Cache the data for this specific tickerID with a specific name 'getVaR'
setCache(ticker, varDict, 'getVaR');
}
if(Object?.keys(varDict)?.length !== 0) {
$varComponent = true;
}
else {
$varComponent = false;
}
};
$: {
if($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker && typeof window !== 'undefined' && Object?.keys(varDict)?.length !== 0) {
rating = varDict?.rating;
outlook = varDict?.outlook;
valueAtRisk = varDict?.var;
if($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker && typeof window !== 'undefined') {
isLoaded = false;
const ticker = $assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker;
const asyncFunctions = [
getVaR(ticker)
];
Promise.all(asyncFunctions)
.then((results) => {
rating = varDict?.rating;
outlook = varDict?.outlook;
valueAtRisk = varDict?.var;
})
.catch((error) => {
console.error('An error occurred:', error);
});
isLoaded = true;
}
}

4
src/lib/store.ts
View File

@ -62,9 +62,13 @@ export const fundamentalAnalysisComponent = writable(<boolean>(false));
export const priceAnalysisComponent = writable(<boolean>(false));
export const revenueSegmentationComponent = writable(<boolean>(false));
export const trendAnalysisComponent = writable(<boolean>(false));
export const shareStatisticsComponent = writable(<boolean>(false));
export const shareholderComponent = writable(<boolean>(false));
export const retailVolumeComponent = writable(<boolean>(false));
export const darkPoolComponent = writable(<boolean>(false));
export const enterpriseComponent = writable(<boolean>(false));
export const varComponent = writable(<boolean>(false));
export const sentimentComponent = writable(<boolean>(false));
export const strategyId = writable(<string> (""));

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

@ -84,7 +84,6 @@ export const load = async ({ params, locals, setHeaders}) => {
fetchData(apiURL,'/crypto-profile',params.tickerID),
fetchData(apiURL,'/stock-quote',params.tickerID),
fetchData(apiURL,'/stock-rating',params.tickerID),
fetchData(apiURL,'/value-at-risk',params.tickerID),
fetchData(apiURL,'/one-day-price',params.tickerID),
fetchWatchlist(fastifyURL, locals?.user?.id),
fetchPortfolio(fastifyURL, locals?.user?.id)
@ -94,7 +93,6 @@ export const load = async ({ params, locals, setHeaders}) => {
getCryptoProfile,
getStockQuote,
getStockTARating,
getVaR,
getOneDayPrice,
getUserWatchlist,
getUserPortfolio,
@ -110,7 +108,6 @@ export const load = async ({ params, locals, setHeaders}) => {
getCryptoProfile,
getStockQuote,
getStockTARating,
getVaR,
getOneDayPrice,
getUserWatchlist,
getUserPortfolio,

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

@ -3,7 +3,7 @@
import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
import { TrackingModeExitMode } from 'lightweight-charts';
import {setCache, getCache, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, cryptoTicker} from '$lib/store';
import {setCache, getCache, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, priceAnalysisComponent, trendAnalysisComponent, sentimentComponent, varComponent, userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, cryptoTicker} from '$lib/store';
import { onDestroy, onMount } from 'svelte';
import CryptoKeyInformation from '$lib/components/CryptoKeyInformation.svelte';
import Lazy from '$lib/components/Lazy.svelte';
@ -30,7 +30,6 @@
let previousClose = data?.getStockQuote?.previousClose;
let taRating = {};
let varDict = {};
//============================================//
@ -48,7 +47,6 @@
let TARating;
let VaR;
//let StockKeyInformation;
//let AnalystEstimate;
@ -57,8 +55,6 @@
onMount(async() => {
VaR = (await import('$lib/components/VaR.svelte')).default;
TARating = (await import('$lib/components/TARating.svelte')).default;
})
@ -651,14 +647,12 @@ function changeChartType() {
oneYearPrice = [];
threeYearPrice = [];
taRating = {};
varDict={}
output = null;
cryptoProfile = data?.getCryptoProfile;
previousClose = data?.getStockQuote?.previousClose;
taRating = data?.getStockTARating;
varDict = data?.getVaR;
const asyncFunctions = [];
@ -1172,7 +1166,7 @@ afterUpdate(async () => {
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$priceAnalysisComponent ? 'hidden' : ''}">
{#await import('$lib/components/PriceAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
@ -1180,7 +1174,7 @@ afterUpdate(async () => {
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$trendAnalysisComponent ? 'hidden' : ''}">
{#await import('$lib/components/TrendAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
@ -1188,17 +1182,19 @@ afterUpdate(async () => {
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$sentimentComponent ? 'hidden' : ''}">
{#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
</Lazy>
{#if VaR}
<div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(varDict)?.length !== 0 ? '' : 'hidden'}">
<VaR data={data} varDict={varDict}/>
<Lazy>
<div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent ? 'hidden' : ''}">
{#await import('$lib/components/VaR.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
{/if}
</Lazy>

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

@ -114,7 +114,6 @@ const promises = [
fetchData(apiURL,'/stock-rating', params.tickerID),
fetchData(apiURL,'/options-bubble',params.tickerID),
fetchData(apiURL,'/wiim',params.tickerID),
fetchData(apiURL,'/value-at-risk',params.tickerID),
fetchData(apiURL,'/one-day-price',params.tickerID),
fetchWatchlist(fastifyURL, locals?.user?.id),
fetchPortfolio(fastifyURL, locals?.user?.id)
@ -131,7 +130,6 @@ const promises = [
getStockTARating,
getOptionsData,
getWhyPriceMoved,
getVaR,
getOneDayPrice,
getUserWatchlist,
getUserPortfolio,
@ -154,7 +152,6 @@ const promises = [
getStockTARating,
getOptionsData,
getWhyPriceMoved,
getVaR,
getOneDayPrice,
getUserWatchlist,
getUserPortfolio,

20
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, 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, 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';
@ -52,7 +52,6 @@
let prePostData = {};
let optionsDict = {};
let taRating = {};
let varDict = {};
let previousClose = data?.getStockQuote?.previousClose;
//============================================//
@ -80,14 +79,12 @@
let SectorSegmentation;
let OptionsData;
let WIIM;
let VaR;
//let ETFKeyInformation;
onMount(async() => {
WIIM = (await import('$lib/components/WIIM.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;
//PricePredictionCard = (await import('$lib/components/PricePredictionCard.svelte')).default;
@ -705,7 +702,6 @@ async function initializePrice() {
correlationList = [];
prePostData = {};
taRating = {};
varDict = {};
output = null;
@ -723,7 +719,6 @@ async function initializePrice() {
optionsDict = data?.getOptionsData;
previousClose = data?.getStockQuote?.previousClose
taRating = data?.getStockTARating;
varDict = data?.getVaR;
//stockDeck = data?.getStockDeckData;
@ -1290,18 +1285,21 @@ async function initializePrice() {
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$sentimentComponent ? 'hidden' : ''}">
{#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
</Lazy>
{#if VaR}
<div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(varDict)?.length !== 0 ? '' : 'hidden'}">
<VaR data={data} varDict={varDict}/>
<Lazy>
<div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent ? 'hidden' : ''}">
{#await import('$lib/components/VaR.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
{/if}
</Lazy>
{#if OptionsData}
<div class="w-full mt-10 sm:mt-0 m-auto sm:p-6 {Object?.keys(optionsDict)?.length !== 0 ? '' : 'hidden'}">

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

@ -146,7 +146,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
fetchData(apiURL,'/bull-bear-say',params.tickerID),
fetchData(apiURL,'/wiim',params.tickerID),
fetchData(apiURL,'/top-etf-ticker-holder',params.tickerID),
fetchData(apiURL,'/value-at-risk',params.tickerID),
fetchData(apiURL,'/one-day-price',params.tickerID),
fetchWatchlist(fastifyURL, locals?.user?.id),
fetchPortfolio(fastifyURL, locals?.user?.id),
@ -165,7 +164,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
getBullBearSay,
getWhyPriceMoved,
getTopETFHolder,
getVaR,
getOneDayPrice,
getUserWatchlist,
getUserPortfolio,
@ -190,7 +188,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
getBullBearSay,
getWhyPriceMoved,
getTopETFHolder,
getVaR,
getOneDayPrice,
getUserWatchlist,
getUserPortfolio,

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

@ -3,9 +3,8 @@
import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
import { TrackingModeExitMode } from 'lightweight-charts';
import {getCache, setCache, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, darkPoolComponent, retailVolumeComponent, shareholderComponent, trendAnalysisComponent, revenueSegmentationComponent, priceAnalysisComponent, fundamentalAnalysisComponent, userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
import {getCache, setCache, 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 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';
@ -37,7 +36,6 @@
let previousClose = data?.getStockQuote?.previousClose;
let marketMoods = {}
let taRating = {};
let varDict = {};
let communitySentiment = {};
//============================================//
@ -60,21 +58,11 @@
let Correlation;
let OptionsData;
let WIIM;
let VaR;
//let StockKeyInformation;
onMount(async() => {
/*
if ($screenWidth < 640) {
StockKeyInformation = (await import('$lib/components/StockKeyInformation.svelte')).default;
}
*/
WIIM = (await import('$lib/components/WIIM.svelte')).default;
VaR = (await import('$lib/components/VaR.svelte')).default;
TARating = (await import('$lib/components/TARating.svelte')).default;
StockSplits = (await import('$lib/components/StockSplits.svelte')).default;
@ -689,7 +677,6 @@ function changeChartType() {
prePostData = {};
marketMoods = {};
taRating = {};
varDict={}
communitySentiment = {}
output = null;
@ -700,7 +687,6 @@ function changeChartType() {
previousClose = data?.getStockQuote?.previousClose;
marketMoods = data?.getBullBearSay;
taRating = data?.getStockTARating;
varDict = data?.getVaR;
communitySentiment = data?.getCommunitySentiment;
similarstock = data?.getSimilarStock;
@ -1234,17 +1220,18 @@ function changeChartType() {
{#if $screenWidth <= 1022} <!--BUG: Dont remove since when changing ETF symbol display freezes-->
<div class="w-full mt-10 m-auto sm:p-6 lg:hidden ">
<div class="w-full mt-10 m-auto sm:p-6 lg:hidden ">
<h3 class="cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
Key Information
</h3>
<StockKeyInformation
stockDeck={stockDeck}
similarstock={similarstock}
topETFHolder={topETFHolder}
data={data}
/>
{#await import('$lib/components/StockKeyInformation.svelte') then {default: Comp}}
<svelte:component this={Comp}
stockDeck={stockDeck}
similarstock={similarstock}
topETFHolder={topETFHolder}
data={data} />
{/await}
</div>
{/if}
@ -1288,18 +1275,21 @@ function changeChartType() {
</Lazy>
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$sentimentComponent ? 'hidden' : ''}">
{#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
</Lazy>
{#if VaR}
<div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(varDict)?.length !== 0 ? '' : 'hidden'}">
<VaR data={data} varDict={varDict}/>
<Lazy>
<div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent ? 'hidden' : ''}">
{#await import('$lib/components/VaR.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
</div>
{/if}
</Lazy>
@ -1313,7 +1303,7 @@ function changeChartType() {
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$enterpriseComponent ? 'hidden' : ''}">
{#await import('$lib/components/Enterprise.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data} />
{/await}
@ -1358,7 +1348,7 @@ function changeChartType() {
<Lazy>
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
<div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$shareStatisticsComponent ? 'hidden' : ''}">
{#await import('$lib/components/ShareStatistics.svelte') then {default: Comp}}
<svelte:component this={Comp} data={data}/>
{/await}