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

add more content to tickerinfo card

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-27 14:19:58 +02:00
parent 2aeeea4b8a
commit 6303dbee86
14 changed files with 52 additions and 112 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">

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}');">

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>

71
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,14 +22,9 @@
let country = '-';
let description = '';
let website = '-';
let marketCap = '-';
let avgVolume = '-';
let snippet;
let epsTTM = '-';
let peTTM = '-';
let sharesOutstanding = '-';
let forwardPE = '-';
let beta = '-';
let showFullText = false;
@ -77,13 +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) + "...";
epsTTM = info?.eps;
peTTM = info?.pe;
sharesOutstanding = info?.sharesOutstanding;
forwardPE = info?.forwardPE;
beta = info?.beta;
}
}
@ -91,8 +82,8 @@ $: {
</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:space-y-3 overflow-hidden">
<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`});">
@ -123,44 +114,60 @@ $: {
<h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 mt-3">Company Info</h2>
<div class="flex justify-center items-center w-full m-auto">
<table class="table table-sm table-compact">
<tbody >
<!-- row 1 -->
<tbody>
<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-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>
<!-- row 2 -->
<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>
<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 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-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-semibold whitespace-nowrap">Mkt Cap</td>
<td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{marketCap}</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">{avgVolume}</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">EPS (TTM)</td>
<td class="text-center bg-[#000] lg:bg-[#09090B] font-semibold">{epsTTM}</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">{peTTM}</td>
<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(sharesOutstanding)}</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>
@ -168,12 +175,12 @@ $: {
</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}

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">

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

@ -675,6 +675,7 @@ $: isScrolled = y > 0;
<!--Start Company Info -->
<Sidecard
data = {data}
stockDeck = {stockDeck}
lastPrice = {data?.getStockQuote?.price}
analystRating ={data?.getAnalystRating}

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

@ -74,29 +74,12 @@ if (progressYearPriceValue < currentPrice) {
*/
marketCap = '-';
currentPrice = '-';
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()
@ -256,57 +239,6 @@ updateYearRange()
<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}