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

update key information cards

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-29 22:59:43 +02:00
parent e7f875d035
commit 9018c6028a
5 changed files with 36 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,23 +20,14 @@ $: {
if ($stockTicker && typeof window !== 'undefined' && typeof stockDeck !== 'undefined' && stockDeck?.length !== 0)
{
info = stockDeck[0]
info = stockDeck?.at(0)
esgScore = info?.esgScore !== 'n/a' ? Math.round(info?.esgScore.toFixed(1)) : 'n/a';
socialScore = info?.socialScore !== 'n/a' ? Math.round(info?.socialScore.toFixed(1)) : 'n/a';
environmentalScore = info?.environmentalScore !== 'n/a' ? Math.round(info?.environmentalScore.toFixed(1)) : 'n/a';
governanceScore = info?.governanceScore !== 'n/a' ? Math.round(info?.governanceScore.toFixed(1)) : 'n/a';
environmentalScore = info?.environmentalScore !== 'n/a' ? Math.round(info?.environmentalScore?.toFixed(1)) : 'n/a';
governanceScore = info?.governanceScore !== 'n/a' ? Math.round(info?.governanceScore?.toFixed(1)) : 'n/a';
esgRiskRating = info?.esgRiskRating;
};
/*
if (esgRatingCircleContainer)
{
esgRatingAcc(esgScore/100);
}
*/
}
@ -146,20 +137,16 @@ $: {
<div class="bg-[#000] h-auto w-screen">
<!--Start Header-->
<div class="bg-[#27272A] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
<div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
<h2 class="text-center m-auto text-[1.1rem] font-semibold text-white mt-5">
ESG Score
</h2>
<div class="flex flex-col items-center mt-10 w-full">
<span class="text-white text-center text-md text-opacity-[0.8]">
<div class="flex flex-col items-center mt-10 mb-5 w-full px-3">
<span class="text-white text-center text-md">
Gain valuable insights into a company's sustainability by evaluating its ESG (Environmental, Social, and Governance) scores.
</span>
<div class="flex flex-row justify-center items-center w-full mt-5">
</div>
</div>
</div>
<!--End Header-->

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

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

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

@ -103,18 +103,14 @@ export let similarstock;
<div class="bg-[#000] h-auto w-screen">
<!--Start Header-->
<div class="bg-[#27272A] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
<div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
Similar Ticker
</h2>
<div class="flex flex-col items-center mt-10 w-full">
<span class="text-white text-center text-md text-opacity-[0.8] pl-8 pr-8">
<div class="flex flex-col items-center mt-10 mb-5 w-full px-8">
<span class="text-white text-center text-md">
Identify trends in similar assets and explore superior competing options in your portfolio.
</span>
<div class="flex flex-row justify-center items-center w-full mt-5">
</div>
</div>
</div>
@ -125,9 +121,9 @@ export let similarstock;
<table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
<thead>
<tr>
<th class="text-white font-bold text-sm text-start bg-[#000]">Company</th>
<th class="text-white font-bold text-sm text-center bg-[#000]">Market Cap</th>
<th class="text-white font-bold text-sm text-end bg-[#000]">Avg Volume</th>
<th class="text-white font-semibold text-sm text-start bg-[#000]">Company</th>
<th class="text-white font-semibold text-sm text-end bg-[#000]">Market Cap</th>
<th class="text-white font-semibold text-sm text-end bg-[#000]">Avg Volume</th>
</tr>
</thead>
<tbody>
@ -135,16 +131,13 @@ export let similarstock;
<tr on:click={() => stockSelector(item?.symbol)} class="text-white cursor-pointer bg-[#000] border-b border-[#000]">
{#if index <=6}
<td class="text-gray-200">
<td class="text-white whitespace-nowrap">
<div class="flex flex-row items-center">
<div class="rounded-full w-10 h-10 relative flex items-center justify-center">
<img style="clip-path: circle(50%);" class="w-6 h-6 rounded-full" src={`https://financialmodelingprep.com/image-stock/${item.symbol}.png`} loading="lazy"/>
</div>
<div class="flex flex-col ml-3 w-full">
<div class="flex flex-col w-full">
<span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
<span class="text-white text-xs">
{#if typeof item?.name !== 'undefined'}
{item?.name?.length > 10 ? item?.name?.slice(0,10) + "..." : item?.name}
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
{:else}
n/a
{/if}
@ -155,11 +148,11 @@ export let similarstock;
</td>
<td class="text-white text-center font-medium ">
<td class="text-white text-end font-medium text-sm">
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'}
</td>
<td class="text-white font-medium text-end">
<td class="text-white font-medium text-end text-sm">
{item?.avgVolume !== null ? abbreviateNumber(item?.avgVolume) : '-'}
</td>
{/if}

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

@ -4,7 +4,7 @@
import ExecutiveCard from '$lib/components/ExecutiveCard.svelte';
import SimilarTickerCard from '$lib/components/SimilarTickerCard.svelte';
import ESGCard from '$lib/components/ESGCard.svelte';
//import ESGCard from '$lib/components/ESGCard.svelte';
import SECFilingsCard from '$lib/components/SECFilingsCard.svelte';
import TopETFTickerHolder from '$lib/components/TopETFTickerHolder.svelte';
@ -44,9 +44,11 @@ $: {
<label on:click={() => $secFilingsClicked = true} for="secFilingModal" class="w-auto border border-gray-300 flex px-4 py-2 mb-2 justify-center items-center text-xs font-medium rounded-xl text-gray-200">
SEC Filings
</label>
<!--
<label for="esgModal" class="w-auto border border-gray-300 flex px-4 py-2 mb-2 justify-center items-center text-xs font-medium rounded-xl text-gray-200">
ESG Score
</label>
-->
<label for="similarTickerModal" class="w-auto border border-gray-300 flex px-4 py-2 mb-2 justify-center items-center text-xs font-medium rounded-xl text-gray-200">
Similar
</label>
@ -145,6 +147,7 @@ $: {
<!--Start ESG Modal-->
<!--
<div class="drawer drawer-end z-40 overflow-hidden w-screen">
<input id="esgModal" type="checkbox" class="drawer-toggle"/>
<div class="drawer-side overflow-hidden">
@ -164,6 +167,7 @@ $: {
</div>
</div>
</div>
-->
<!--End ESG Modal-->

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

@ -101,18 +101,15 @@
<div class="bg-[#000] h-auto w-screen">
<!--Start Header-->
<div class="bg-[#27272A] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
<div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
<h2 class="text-center m-auto text-lg font-semibold text-white mt-5">
Top ETFs Holder
</h2>
<div class="flex flex-col items-center mt-10 w-full">
<span class="text-white text-center text-md text-opacity-[0.8] pl-8 pr-8">
<div class="flex flex-col items-center mt-10 mb-5 w-full px-8">
<span class="text-white text-center text-md">
Find the ETFs with the highest portfolio weights for this stock.
</span>
<div class="flex flex-row justify-center items-center w-full mt-5">
</div>
</div>
</div>
@ -123,9 +120,9 @@
<table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
<thead>
<tr>
<th class="text-white font-bold text-sm text-start bg-[#000]">Company</th>
<th class="text-white font-bold text-sm text-center bg-[#000]">Total Assets</th>
<th class="text-white font-bold text-sm text-end bg-[#000]">% of Fund</th>
<th class="text-white font-semibold text-sm text-start bg-[#000]">Company</th>
<th class="text-white font-semibold text-sm text-end bg-[#000]">Total Assets</th>
<th class="text-white font-semibold text-sm text-end bg-[#000]">% of Fund</th>
</tr>
</thead>
<tbody>
@ -133,13 +130,13 @@
<tr on:click={() => etfSelector(item?.symbol)} class="text-white cursor-pointer bg-[#000] border-b border-[#000]">
{#if index <=6}
<td class="text-gray-200">
<td class="text-white whitespace-nowrap">
<div class="flex flex-row items-center">
<div class="flex flex-col w-full">
<span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
<span class="text-white text-xs">
{#if typeof item?.name !== 'undefined'}
{item?.name?.length > 15 ? item?.name?.slice(0,15) + "..." : item?.name}
{item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
{:else}
n/a
{/if}
@ -150,7 +147,7 @@
</td>
<td class="text-white text-center font-medium ">
<td class="text-white text-end font-medium ">
{item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets,true) : '-'}
</td>