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

Merge branch 'main' of https://github.com/Traijan1/stocknear_frontend

Browse Source
This commit is contained in:
Alexander Weber 2024-08-27 20:28:47 +02:00
commit f376a5f063
18 changed files with 277 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/AnalystCard.svelte
View File

@ -45,7 +45,7 @@ if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'u
<!--Start Analyst Card -->
<div class="space-y-3 sm:pt-5 hidden sm:block sm:{Object?.keys(analystRating)?.length !== 0 ? '' : 'hidden'}">
<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[400px] -mx-1 sm:mx-0">
<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] -mx-1 sm:mx-0">
<!--Start Content-->
<div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">

12
src/lib/components/CommunitySentiment.svelte
View File

File diff suppressed because one or more lines are too long

2
src/lib/components/CryptoProfileCard.svelte
View File

@ -47,7 +47,7 @@
</script>
<div class="sm:space-y-3">
<div class="lg:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[400px] lg:pt-0">
<div class="lg:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
<!--Start Header-->
<div class="sm:rounded-t-lg w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$cryptoTicker?.toUpperCase()}.jpg`});">

2
src/lib/components/DividendCard.svelte
View File

@ -25,7 +25,7 @@
<div class="space-y-3 lg:pt-5 lg:{dividendHistoryList?.length !== 0 ? '' : 'hidden'}">
<div class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[400px]">
<div class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px]">
<div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
<div class="flex flex-row items-center w-full ml-2 pb-2 p-3">

2
src/lib/components/ESGCard.svelte
View File

@ -50,7 +50,7 @@ $: {
<!--Start ESG Card -->
<div class="space-y-3 lg:pt-5 hidden lg:block lg:{esgScore && esgRiskRating && environmentalScore && governanceScore !== 'n/a' ? '' : 'hidden'}">
<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto sm:h-[470px] {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[400px] -mx-1 sm:mx-0">
<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto sm:h-[470px] {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] -mx-1 sm:mx-0">
<!--Start Content-->
<div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">

2
src/lib/components/ETFProfileCard.svelte
View File

@ -56,7 +56,7 @@ let showFullText = false;
</script>
<div class="sm:space-y-3">
<div class="sm:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[400px] lg:pt-0">
<div class="sm:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
<!--Start Header-->
<div class="lg:rounded-t-sm w-full h-[130px] bg-[#09090B] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url('{defaultImage}');">

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

@ -351,19 +351,19 @@ else {
{#each (showFullStats ? topMarketMakers?.slice(0,10) : topMarketMakers?.slice(0,3)) as item,index}
<tr class="border-y border-gray-800 odd:bg-[#27272A] {index === 2 && !showFullStats && topMarketMakers?.length > 3 ? 'opacity-[0.5]' : '' } sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]">
<td class="text-white font-medium whitespace-nowrap">
<td class="text-white text-sm sm:text-[1rem] font-medium whitespace-nowrap">
{item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}
</td>
<td class="text-white text-end font-medium whitespace-nowrap">
<td class="text-white text-end text-sm sm:text-[1rem] font-medium whitespace-nowrap">
{abbreviateNumber(item?.avgWeeklyTradeCount)}
</td>
<td class="text-white text-end font-medium whitespace-nowrap">
<td class="text-white text-end text-sm sm:text-[1rem] font-medium whitespace-nowrap">
{abbreviateNumber(item?.avgWeeklyShareQuantity)}
</td>
<td class="text-white text-end font-medium whitespace-nowrap">
<td class="text-white text-end text-sm sm:text-[1rem] font-medium whitespace-nowrap">
{abbreviateNumber(item?.avgNotionalSum, true)}
</td>
</tr>

4
src/lib/components/Sidecard.svelte
View File

@ -6,7 +6,7 @@ import ESGCard from '$lib/components/ESGCard.svelte';
import SimilarTickerCard from '$lib/components/SimilarTickerCard.svelte';
import TopETFTickerHolder from '$lib/components/TopETFTickerHolder.svelte';
export let data;
export let stockDeck;
export let lastPrice;
export let similarstock;
@ -18,7 +18,7 @@ export let analystRating
<TickerInfoCard stockDeck={stockDeck} />
<TickerInfoCard data={data} stockDeck={stockDeck} />
<AnalystCard lastPrice={lastPrice} analystRating={analystRating} />

2
src/lib/components/SimilarETFCard.svelte
View File

@ -26,7 +26,7 @@ export let similarTicker;
<div class="space-y-3 sm:pt-5 hidden lg:block sm:{similarTicker?.length !== 0 ? '' : 'hidden'}">
<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[400px]">
<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px]">
<div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
<h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 p-3">

2
src/lib/components/SimilarTickerCard.svelte
View File

@ -26,7 +26,7 @@ export let similarstock;
<div class="space-y-3 sm:pt-5 hidden lg:block lg:{similarstock?.length !== 0 ? '' : 'hidden'}">
<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[400px]">
<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px]">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
<h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">

2
src/lib/components/StockKeyInformation.svelte
View File

@ -130,7 +130,7 @@ $: {
<div class="w-screen overflow-y-scroll" >
<TickerInfoCard stockDeck={data?.getStockDeck}/>
<TickerInfoCard data={data} stockDeck={data?.getStockDeck}/>
</div>

14
src/lib/components/TARating.svelte
View File

@ -149,7 +149,7 @@ $: if ($assetType || $stockTicker || $etfTicker || $cryptoTicker) {
<!--Start Momentum Indicators-->
<div class="w-full overflow-hidden">
<div class="w-full overflow-x-scroll">
<table class="table table-sm table-compact w-full mb-5 mt-5">
<!-- head -->
<thead>
@ -162,12 +162,12 @@ $: if ($assetType || $stockTicker || $etfTicker || $cryptoTicker) {
<tbody>
{#each (showFullStats ? signalList : signalList?.slice(0, 3)) as item,index}
<tr class="border-y border-gray-800 odd:bg-[#27272A] {index === 2 && !showFullStats && signalList?.length > 2 ? 'opacity-[0.3]' : '' }">
<td class="text-white text-sm w-1/2 sm:w-full">
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap">
{item?.name}
</td>
<td class="text-white text-end">
<span class="text-white text-md font-medium">
<span class="text-white text-sm sm:text-[1rem] font-medium">
{item?.value}
</span>
</td>
@ -182,11 +182,11 @@ $: if ($assetType || $stockTicker || $etfTicker || $cryptoTicker) {
</tbody>
</table>
<label on:click={() => showFullStats = !showFullStats} class="{signalList?.length < 4 ? 'hidden' : ''} cursor-pointer m-auto 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>
</div>
<label on:click={() => showFullStats = !showFullStats} class="{signalList?.length < 4 ? 'hidden' : ''} cursor-pointer m-auto 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>
<!--End Momentum Indicators-->
{/if}

95
src/lib/components/TickerInfoCard.svelte
View File

@ -5,7 +5,7 @@
import { fade } from 'svelte/transition';
export let stockDeck;
export let data;
let info;
@ -22,11 +22,9 @@
let country = '-';
let description = '';
let website = '-';
let marketCap = '-';
let avgVolume = '-';
let snippet;
let forwardPE = '-';
let beta = '-';
let showFullText = false;
@ -74,10 +72,9 @@ $: {
country = info?.country ?? '-';
description = info?.description ?? 'A detailed description of the company is not yet available.';
website = info?.website;
marketCap = abbreviateNumber(info?.marketCap,true) ?? '-';
avgVolume = abbreviateNumber(info?.avgVolume) ?? '-'
snippet= description?.slice(0, 150) + "...";
forwardPE = info?.forwardPE;
beta = info?.beta;
}
}
@ -86,7 +83,7 @@ $: {
</script>
<div class="sm:space-y-3">
<div class="sm:rounded-lg shadow-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[400px] lg:pt-0">
<div class="sm:rounded-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
<!--Start Header-->
<div class="sm:rounded-t-lg w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$stockTicker?.toUpperCase()}.jpg`});">
@ -115,47 +112,75 @@ $: {
<!--Start Content-->
<div class="w-full flex flex-wrap border-t border-slate-800 px-2 lg:px-0">
<h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 mt-3">Company Info</h2>
<div class="flex justify-start items-center w-full m-auto">
<table class="table table-sm table-compact ">
<div class="flex justify-center items-center w-full m-auto">
<table class="table table-sm table-compact">
<tbody>
<!-- row 1 -->
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">CEO</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{ceoName}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Industry</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{industry}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">CEO</td>
<td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{ceoName}</td>
<td class="text-start sm:text-center lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Country</td>
<td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{country}</td>
</tr>
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Market Cap</td>
<td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.marketCap,true)}</td>
<td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Volume</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.volume)}</td>
</tr>
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Beta</td>
<td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{beta}</td>
<td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Avg. Volume</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.avgVolume)}</td>
</tr>
<!-- row 2 -->
<tr class="text-white " style="font-size: 0.75rem">
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Country</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{country}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white whitespace-pre-line font-medium">Sector</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-pre-line">{sector}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white whitespace-pre-line font-semibold whitespace-nowrap">Sector</td>
<td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-pre-line font-semibold">{sector}</td>
<td class="text-start sm:text-center lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Employees</td>
<td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] font-semibold">{employees}</td>
</tr>
<!-- row 3 -->
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Employees</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{employees}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Exchange</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{exchange}</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Industry</td>
<td class="text-center bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{industry}</td>
<td class="text-start sm:text-center lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Exchange</td>
<td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] font-semibold">{exchange}</td>
</tr>
<!-- row 4 -->
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-medium">Mkt Cap</td>
<td class="bg-[#000] lg:bg-[#09090B]">{marketCap}</td>
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-medium">Avg. Volume</td>
<td class="bg-[#000] lg:bg-[#09090B]">{avgVolume}</td>
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Open</td>
<td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.open}</td>
<td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Previous Close</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold whitespace-nowrap ">{data?.getStockQuote?.previousClose}</td>
</tr>
{#if $screenWidth > 640}
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Day's Range</td>
<td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.dayLow} - {data?.getStockQuote?.dayHigh}</td>
<td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">52-Week Range</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold whitespace-nowrap ">{data?.getStockQuote?.yearLow} - {data?.getStockQuote?.yearHigh}</td>
</tr>
{/if}
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">EPS (ttm)</td>
<td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.eps}</td>
<td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">PE Ratio (ttm)</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold">{data?.getStockQuote?.pe}</td>
</tr>
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.75rem">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Shares Out.</td>
<td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td>
<td class="text-start sm:text-center bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Forward PE</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] font-semibold whitespace-nowrap ">{forwardPE === undefined ? '-' : forwardPE}</td>
</tr>
</tbody>
</table>
</div>
<h2 class="text-start ml-4 text-xl font-bold text-white pb-2 pt-3">
<h2 class="text-start sm:ml-4 text-xl font-bold text-white pb-2 pt-5 sm:pt-3">
Description
</h2>
<p class="text-gray-100 ml-2 text-sm whitespace-normal p-2">
<p class="text-gray-100 sm:ml-2 text-sm whitespace-normal sm:p-2">
{#if showFullText}
<div transition:fade={{ delay: 0, duration: 80 }} in={showFullText}>
{description}
@ -199,4 +224,4 @@ $: {

2
src/lib/components/TopETFTickerHolder.svelte
View File

@ -22,7 +22,7 @@
<div class="space-y-3 sm:pt-5 hidden lg:block lg:{topETFHolder?.length !== 0 ? '' : 'hidden'}">
<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[400px]">
<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px]">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
<h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">

2
src/lib/components/TopHoldingCard.svelte
View File

@ -37,7 +37,7 @@ $: {
<div class="space-y-3 lg:pt-5 lg:{topHoldingList?.length !== 0 ? '' : 'hidden'}">
<div class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[400px]">
<div class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px]">
<div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">

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

@ -1,16 +1,110 @@
<script lang ='ts'>
import { varComponent, displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { varComponent, displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { init, use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
export let data;
use([LineChart, GridComponent, TooltipComponent, CanvasRenderer])
export let data;
let isLoaded = false;
let rating;
let outlook;
let valueAtRisk;
let varDict = {}
let optionsData;
let monthlyVarAvg;
function getPlotOptions() {
let dates = [];
let varList = [];
// Iterate over the data and extract required information
varDict?.history?.forEach(item => {
dates?.push(item?.date);
varList?.push(item?.var);
});
const sum = varList.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
monthlyVarAvg = (sum / varList?.length)?.toFixed(2);
const option = {
silent: true,
tooltip: {
trigger: 'axis',
hideDelay: 100, // Set the delay in milliseconds
},
animation: false,
grid: {
left: '0%',
right: '2%',
bottom: '2%',
top: '5%',
containLabel: true
},
xAxis:
{
type: 'category',
boundaryGap: false,
data: dates,
axisLabel: {
color: '#fff',
formatter: function (value) {
// Format the date
const date = new Date(value + '-01'); // Append a day to make it a full date
const options = { year: 'numeric', month: 'short' };
return new Intl.DateTimeFormat('en-US', options).format(date);
}
}
},
yAxis: [
{
type: 'value',
splitLine: {
show: false, // Disable x-axis grid lines
},
axisLabel: {
color: '#fff',
formatter: function (value, index) {
if (index % 2 === 0) {
return value?.toFixed(0)+'%'
} else {
return ''; // Hide this tick
}
}
}
}
],
series: [
{
name: 'VaR',
data: varList,
type: 'line',
areaStyle: {opacity: 0.8},
itemStyle: {
color: '#E11D48' // Change bar color to white
},
showSymbol: false,
},
]
};
return option;
}
const getVaR = async (ticker) => {
// Get cached data for the specific tickerID
@ -30,7 +124,6 @@
});
varDict = await response.json();
// Cache the data for this specific tickerID with a specific name 'getVaR'
setCache(ticker, varDict, 'getVaR');
}
@ -59,7 +152,8 @@
.then((results) => {
rating = varDict?.rating;
outlook = varDict?.outlook;
valueAtRisk = varDict?.var;
valueAtRisk = varDict?.history?.slice(-1)?.at(0)?.var;
optionsData = getPlotOptions();
})
.catch((error) => {
console.error('An error occurred:', error);
@ -91,6 +185,7 @@
{#if Object?.keys(varDict)?.length !== 0}
<div class="pb-4 w-full mt-5">
<div class="w-auto p-4 sm:p-6 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative">
<div class="flex flex-row items-center justify-between ">
@ -123,7 +218,18 @@
</div>
</div>
<h2 class="text-white text-xl sm:text-2xl font-semibold mt-5">
Historical VaR
</h2>
<div class="text-white text-[1rem] mt-3">
Based on historical price data, the company experienced an average monthly Value at Risk (VaR) of {monthlyVarAvg}%.
</div>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
{:else}
@ -146,4 +252,22 @@
<style>
.app {
height: 300px;
max-width: 100%; /* Ensure chart width doesn't exceed the container */
}
@media (max-width: 640px) {
.app {
height: 210px;
}
}
.chart {
width: 100%;
}
</style>

26
src/routes/stocks/[tickerID]/+layout.svelte
View File

@ -677,14 +677,24 @@ $: {
</div>
</div>
<aside class="hidden lg:block w-fit max-w-xl xl:w-[120px] md:pt-10 pb-12 md:pb-20">
<div class="sm:pl-10">
<!--Start Company Info -->
<Sidecard {stockDeck} lastPrice={data?.getStockQuote?.price} analystRating={data?.getAnalystRating} {similarstock} {topETFHolder} />
<!--End Company Info -->
</div>
</aside>
<!--
<aside class="hidden lg:block w-fit max-w-xl xl:w-[120px] md:pt-10 pb-12 md:pb-20">
<div class="sm:pl-10">
<!--Start Company Info -->
<Sidecard
data = {data}
stockDeck = {stockDeck}
lastPrice = {data?.getStockQuote?.price}
analystRating ={data?.getAnalystRating}
similarstock = {similarstock}
topETFHolder = {topETFHolder}
/>
<!--End Company Info -->
</div>
</aside>
<!--
{#if $screenWidth < 640 && MobileStockNavbar}
<MobileStockNavbar
logoUrl={logoUrl}

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

@ -35,35 +35,50 @@
today.setDate(today.getDate() - 2); // Set to Friday
}
return (
(date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear()) ||
(date.getDate() === yesterday.getDate() && date.getMonth() === yesterday.getMonth() && date.getFullYear() === yesterday.getFullYear())
);
}
return date.getDate() === today.getDate() &&
date.getMonth() === today.getMonth() &&
date.getFullYear() === today.getFullYear() ||
date.getDate() === yesterday.getDate() &&
date.getMonth() === yesterday.getMonth() &&
date.getFullYear() === yesterday.getFullYear();
}
marketCap = "-";
/*
let progressDayPriceValue = 0;
let progressYearPriceValue = 0;
let totalDuration = 500;
async function updateDayRange() {
const interval = 10; // interval between each update in ms
const increment = (currentPrice / (totalDuration / interval));
if (progressDayPriceValue < currentPrice) {
progressDayPriceValue = progressDayPriceValue + increment;
setTimeout(updateDayRange, interval);
}
};
async function updateYearRange() {
const interval = 10; // interval between each update in ms
const increment = (currentPrice / (totalDuration / interval));
if (progressYearPriceValue < currentPrice) {
progressYearPriceValue = progressYearPriceValue + increment;
setTimeout(updateYearRange, interval);
}
};
*/
currentPrice = 0;
previousClose = "-";
volume = "-";
eps = "-";
pe = "-";
alpha = "-";
beta = "-";
stockQuote = data?.getStockQuote;
quantStats = data?.getQuantStats ?? {};
marketCap = abbreviateNumber(stockQuote?.marketCap);
volume = abbreviateNumber(stockQuote?.volume);
currentPrice = stockQuote?.price;
previousClose = stockQuote?.previousClose;
eps = stockQuote?.eps;
pe = stockQuote?.pe;
beta = stockQuote?.beta;
alpha = quantStats[$stockTicker?.toUpperCase()]?.Alpha;
/*
updateDayRange()
@ -211,47 +226,8 @@ updateYearRange()
<!--End RevenueSegmentation-->
<div class="grid grid-cols-1 gap-2 mt-10">
<h3 class="text-start ml-2 text-lg sm:text-2xl font-bold text-white mt-5">Company Stats</h3>
<div class="flex justify-start items-center w-full m-auto overflow-x-scroll no-scrollbar">
<table class="table table-sm table-compact text-start flex justify-start items-center w-full px-3 m-auto">
<tbody class="">
<!-- row 1 -->
<tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-sm sm:text-[1rem] text-white">Mkt Cap</td>
<td class="text-end text-sm sm:text-[1rem]"> ${marketCap}</td>
<td class="text-end text-sm sm:text-[1rem] text-white">Volume</td>
<td class="text-end text-sm sm:text-[1rem]">{volume}</td>
</tr>
<!-- row 2 -->
<tr class="text-white odd:bg-[#27272A] text-sm sm:text-[1rem]">
<td class="text-start text-sm sm:text-[1rem]">Price</td>
<td class="text-end text-sm sm:text-[1rem]">${currentPrice}</td>
<td class="text-end text-white text-sm sm:text-[1rem]">Prev. Close</td>
<td class="text-end text-sm sm:text-[1rem]">${previousClose}</td>
</tr>
<!-- row 3 -->
<tr class="text-white odd:bg-[#27272A] font-semibold">
<td class="text-start text-sm sm:text-[1rem] text-white">Alpha</td>
<td class="text-end text-sm sm:text-[1rem]">
{typeof alpha !== "undefined" ? alpha : "-"}
</td>
<td class="text-end text-sm sm:text-[1rem] text-white">Beta</td>
<td class="text-end text-sm sm:text-[1rem]">
{typeof beta !== "undefined" && !isNaN(beta) ? beta?.toFixed(2) : "-"}
</td>
</tr>
<tr class="text-white font-semibold">
<td class="text-start">EPS</td>
<td class="text-sm text-end">{eps}</td>
<td class="text-end">PE</td>
<td class="text-sm text-end">{pe}</td>
</tr>
</tbody>
</table>
</div>
{#if $stockTicker in quantStats && Object.keys(quantStats[$stockTicker]).length > 0}
<h3 class="text-start w-full mt-8 mb-2 text-lg sm:text-2xl font-bold text-white">