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

update etf info card

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-28 13:48:07 +02:00
parent 4c42b9745f
commit 0cc0add50d
4 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,6 @@
dividendHistoryList = dividendList?.history; dividendHistoryList = dividendList?.history;
dividendYield = dividendList?.dividendYield; dividendYield = dividendList?.dividendYield;
console.log(dividendList)
} }
} }

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

@ -72,7 +72,7 @@
<div class="w-screen overflow-y-scroll" > <div class="w-screen overflow-y-scroll" >
<ETFProfileCard etfProfile = {etfProfile}/> <ETFProfileCard data={data} etfProfile = {etfProfile}/>
</div> </div>

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

@ -6,20 +6,15 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import defaultImage from '$lib/images/etf/cover/default.jpg'; import defaultImage from '$lib/images/etf/cover/default.jpg';
export let logoUrl;
export let etfProfile; export let etfProfile;
export let data;
let info; let info;
let imageUrl;
let tierList = 'S';
let assetClass = '-'; let assetClass = '-';
let aum = '-'; let aum = '-';
let avgVolume = '-'; let avgVolume = '-';
let inceptionDate = '-'; let inceptionDate = '-';
let holdingsCount = '-'; let holdingsCount = '-';
let exchange = '-';
let provider = '-'; let provider = '-';
let sectorExposed; let sectorExposed;
let country; let country;
@ -27,7 +22,6 @@
let website = '-'; let website = '-';
let snippet; let snippet;
let showFullText = false; let showFullText = false;
@ -92,35 +86,45 @@ let showFullText = false;
<div class="w-full flex flex-wrap border-t border-slate-800"> <div class="w-full flex flex-wrap border-t border-slate-800">
<h2 class="text-start ml-4 text-2xl font-bold text-white pb-2 mt-3">ETF Info</h2> <h2 class="text-start ml-4 text-2xl font-bold text-white pb-2 mt-3">ETF Info</h2>
<div class="flex items-center w-full"> <div class="flex items-center w-full">
<table class="table table-md table-compact"> <table class="table table-sm table-compact">
<tbody> <tbody>
<!-- row 1 -->
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem">
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Name</td> <tr class="text-white border-b border-[#27272A]">
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{$displayCompanyName?.length > 30 ? $displayCompanyName?.slice(0,30) + '...' : $displayCompanyName}</td> <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Provider</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Ticker</td> <td on:click={() => goto(`/etf/etf-providers/${provider}`)} class="text-center sm:text-end text-blue-400 lg:hover:text-white cursor-pointer bg-[#000] lg:bg-[#09090B]">{formatETFName(provider)}</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{$etfTicker}</td> <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Country</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{country?.length !== 0 ? country : '-'}</td>
</tr> </tr>
<!-- row 3 --> <tr class="text-white border-b border-[#27272A]">
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem"> <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">AUM</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Provider</td> <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(aum,true)}</td>
<td on:click={() => goto(`/etf/etf-providers/${provider}`)} class="text-blue-400 lg:border-b lg:border-[#27272A] lg:hover:text-white cursor-pointer bg-[#000] lg:bg-[#09090B]">{formatETFName(provider)}</td> <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Vol</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Country</td> <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{abbreviateNumber(data?.getStockQuote?.volume)}</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B]">{country?.length !== 0 ? country : '-'}</td>
</tr> </tr>
<!-- row 2 --> <tr class="text-white border-b border-[#27272A]">
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem"> <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Shares Out.</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Value</td> <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{abbreviateNumber(aum,true)}</td> <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Avg. Vol</td>
<td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-medium">Volume</td> <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{abbreviateNumber(avgVolume)}</td>
<td class="bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal">{abbreviateNumber(avgVolume)}</td>
</tr> </tr>
<!-- row 3 --> <tr class="text-white border-b border-[#27272A]">
<tr class="text-white border-b border-[#27272A]" style="font-size: 0.8rem"> <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Open</td>
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-medium">Holdings</td> <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.open?.toFixed(2)}</td>
<td class="bg-[#000] lg:bg-[#09090B]">{holdingsCount} Assets</td> <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Prev. Close</td>
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-medium">Inception</td> <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{data?.getStockQuote?.previousClose?.toFixed(2)}</td>
<td class="bg-[#000] lg:bg-[#09090B]">{inceptionDate}</td> </tr>
<tr class="text-white border-b border-[#27272A]">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">EPS (ttm)</td>
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.eps?.toFixed(2)}</td>
<td class="text-start sm:text-end 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]">{data?.getStockQuote?.pe?.toFixed(2)}</td>
</tr>
<tr class="text-white border-b border-[#27272A]">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Holdings</td>
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{holdingsCount} Assets</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Inception</td>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{inceptionDate}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

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

@ -763,6 +763,7 @@ $: {
<!--Start Company Info --> <!--Start Company Info -->
<ETFProfileCard <ETFProfileCard
data = {data}
etfProfile = {etfProfile} etfProfile = {etfProfile}
/> />