310 lines
12 KiB
Svelte
310 lines
12 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
etfTicker,
|
|
wsBidPrice,
|
|
wsAskPrice,
|
|
screenWidth,
|
|
displayCompanyName,
|
|
} from "$lib/store";
|
|
|
|
import { abbreviateNumber, formatETFName } from "$lib/utils";
|
|
import { fade } from "svelte/transition";
|
|
import { goto } from "$app/navigation";
|
|
import defaultImage from "$lib/images/etf/cover/default.jpg";
|
|
|
|
export let etfProfile;
|
|
export let data;
|
|
|
|
let info;
|
|
let assetClass = "-";
|
|
let aum = "-";
|
|
let avgVolume = "-";
|
|
let inceptionDate = "-";
|
|
let holdingsCount = "-";
|
|
let provider = "-";
|
|
let sectorExposed;
|
|
let country;
|
|
let description = "";
|
|
let website = "-";
|
|
let snippet;
|
|
let dividendYield = "-";
|
|
let payoutRatio = "-";
|
|
|
|
let showFullText = false;
|
|
|
|
$: {
|
|
if (
|
|
$etfTicker &&
|
|
typeof $etfTicker !== "undefined" &&
|
|
typeof window !== "undefined" &&
|
|
typeof etfProfile !== "undefined" &&
|
|
etfProfile?.length !== 0
|
|
) {
|
|
info = etfProfile?.at(0);
|
|
assetClass = info?.assetClass;
|
|
sectorExposed = info?.sectorsList?.length;
|
|
aum = info?.aum;
|
|
country = info?.domicile;
|
|
inceptionDate = new Date(info?.inceptionDate)
|
|
?.toLocaleDateString("en-GB", {
|
|
day: "2-digit",
|
|
month: "2-digit",
|
|
year: "numeric",
|
|
})
|
|
.replace(/\//g, ".");
|
|
holdingsCount = info?.holdingsCount;
|
|
avgVolume = info?.avgVolume;
|
|
dividendYield =
|
|
typeof data?.getStockDividend?.dividendYield !== "undefined"
|
|
? data?.getStockDividend?.dividendYield?.toFixed(2) + "%"
|
|
: "-";
|
|
payoutRatio =
|
|
typeof data?.getStockDividend?.payoutRatio !== "undefined" &&
|
|
data?.getStockDividend?.payoutRatio !== null
|
|
? data?.getStockDividend?.payoutRatio?.toFixed(2) + "%"
|
|
: "-";
|
|
|
|
provider = info?.etfProvider;
|
|
country = info?.domicile ?? "-";
|
|
description =
|
|
info?.description ??
|
|
"A detailed description of the company is not yet available.";
|
|
website = info?.website;
|
|
snippet = description?.slice(0, 150) + "...";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="sm:space-y-3">
|
|
<div
|
|
class="sm:rounded-md shadow-lg sm:border sm:border-gray-600 bg-[#000] lg:bg-default h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0"
|
|
>
|
|
<!--Start Header-->
|
|
<div
|
|
class="lg:rounded-t-sm w-full h-[130px] bg-default p-3 flex flex-col bg-cover bg-center bg-no-repeat"
|
|
style="background-image: url('{defaultImage}');"
|
|
>
|
|
<div class="flex flex-row pt-1 pb-2">
|
|
<div class="badge badge-error gap-2 mt-2 text-sm text-white">
|
|
Asset Class - {assetClass}
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="flex flex-row justify-end items-center mt-2 relative z-10 -my-5">
|
|
<div style={`background-image: url(${sTier}`} class="animate-bounce circle-background mr-5 w-20 h-20 z-10">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-28 h-28" viewBox="0 0 106 34">
|
|
<g class="sparkles">
|
|
<path style="--duration: 4s;" d="M2.5740361 5.33344622s1.1875777-6.20179466 2.24320232 0c0 0 5.9378885 1.05562462 0 2.11124925 0 0-1.05562463 6.33374774-2.24320233 0-3.5627331-.6597654-3.29882695-1.31953078 0-2.11124925z" />
|
|
<path style="--duration: 3.2s;" d="M33.5173993 29.97263826s1.03464615-5.40315215 1.95433162 0c0 0 5.17323078.91968547 0 1.83937095 0 0-.91968547 5.51811283-1.95433162 0-3.10393847-.57480342-2.8740171-1.14960684 0-1.83937095z" />
|
|
<path style="--duration: 2.5s;" d="M69.03038108 1.71240809s.73779281-3.852918 1.39360864 0c0 0 3.68896404.65581583 0 1.31163166 0 0-.65581583 3.93489497-1.39360864 0-2.21337842-.4098849-2.04942447-.81976979 0-1.31163166z" />
|
|
</g>
|
|
</svg>
|
|
<div class="tier-text italic m-auto text-xl">
|
|
<span class="text-4xl" style="color: #FFFFFF}">
|
|
{tierList ?? 'n/a'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
-->
|
|
</div>
|
|
<!--End Header-->
|
|
|
|
<!--Start Content-->
|
|
<div class="w-full flex flex-wrap border-t border-gray-600">
|
|
<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">
|
|
<table class="table table-sm table-compact">
|
|
<tbody>
|
|
<tr class="text-white border-b border-[#27272A]">
|
|
<td
|
|
class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
>Bid</td
|
|
>
|
|
<td class="text-center sm:text-end bg-[#000] lg:bg-default"
|
|
>{$wsBidPrice !== 0 && $wsBidPrice !== null
|
|
? $wsBidPrice
|
|
: data?.getStockQuote?.bid}</td
|
|
>
|
|
<td
|
|
class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
>Ask</td
|
|
>
|
|
<td class="text-start sm:text-end bg-[#000] lg:bg-default"
|
|
>{$wsAskPrice !== 0 && $wsAskPrice !== null
|
|
? $wsAskPrice
|
|
: data?.getStockQuote?.ask}</td
|
|
>
|
|
</tr>
|
|
<tr class="text-white border-b border-[#27272A]">
|
|
<td
|
|
class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
>Provider</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-default"
|
|
>{formatETFName(provider)}</td
|
|
>
|
|
<td
|
|
class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
>Country</td
|
|
>
|
|
<td
|
|
class="text-start sm:text-end bg-[#000] lg:bg-default whitespace-nowrap"
|
|
>{country?.length !== 0 ? country : "-"}</td
|
|
>
|
|
</tr>
|
|
<tr class="text-white border-b border-[#27272A]">
|
|
<td
|
|
class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
>AUM</td
|
|
>
|
|
<td class="text-center sm:text-end bg-[#000] lg:bg-default"
|
|
>{abbreviateNumber(aum, true)}</td
|
|
>
|
|
<td
|
|
class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
>Vol</td
|
|
>
|
|
<td
|
|
class="text-start sm:text-end bg-[#000] lg:bg-default whitespace-nowrap"
|
|
>{abbreviateNumber(data?.getStockQuote?.volume)}</td
|
|
>
|
|
</tr>
|
|
<tr class="text-white border-b border-[#27272A]">
|
|
<td
|
|
class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
>NAV</td
|
|
>
|
|
<td class="text-center sm:text-end bg-[#000] lg:bg-default"
|
|
>{info?.nav?.toFixed(2)}</td
|
|
>
|
|
<td
|
|
class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
>Expense Ratio</td
|
|
>
|
|
<td class="text-start sm:text-end bg-[#000] lg:bg-default"
|
|
>{info?.expenseRatio?.toFixed(2)}%</td
|
|
>
|
|
</tr>
|
|
<tr class="text-white border-b border-[#27272A]">
|
|
<td
|
|
class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
>Shares Out.</td
|
|
>
|
|
<td class="text-center sm:text-end bg-[#000] lg:bg-default"
|
|
>{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td
|
|
>
|
|
<td
|
|
class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
>Avg. Vol</td
|
|
>
|
|
<td
|
|
class="text-start sm:text-end bg-[#000] lg:bg-default whitespace-nowrap"
|
|
>{abbreviateNumber(avgVolume)}</td
|
|
>
|
|
</tr>
|
|
<!--
|
|
<tr class="text-white border-b border-[#27272A]">
|
|
<td class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap">Open</td>
|
|
<td class="text-center sm:text-end bg-[#000] lg:bg-default">{data?.getStockQuote?.open?.toFixed(2)}</td>
|
|
<td class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap ">Prev. Close</td>
|
|
<td class="text-start sm:text-end bg-[#000] lg:bg-default whitespace-nowrap ">{data?.getStockQuote?.previousClose?.toFixed(2)}</td>
|
|
</tr>
|
|
-->
|
|
<tr class="text-white border-b border-[#27272A]">
|
|
<td
|
|
class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
>Dividend Yield</td
|
|
>
|
|
<td class="text-center sm:text-end bg-[#000] lg:bg-default"
|
|
>{dividendYield}</td
|
|
>
|
|
<td
|
|
class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
>Payout Ratio</td
|
|
>
|
|
<td class="text-start sm:text-end bg-[#000] lg:bg-default"
|
|
>{payoutRatio}</td
|
|
>
|
|
</tr>
|
|
<tr class="text-white border-b border-[#27272A]">
|
|
<td
|
|
class="text-start bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
>Holdings</td
|
|
>
|
|
<td class="text-center sm:text-end bg-[#000] lg:bg-default"
|
|
>{holdingsCount} Assets</td
|
|
>
|
|
<td
|
|
class="text-start sm:text-end bg-[#000] lg:bg-default text-white font-semibold whitespace-nowrap"
|
|
>Inception</td
|
|
>
|
|
<td class="text-start sm:text-end bg-[#000] lg:bg-default"
|
|
>{inceptionDate}</td
|
|
>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h2
|
|
class="text-start ml-4 text-xl font-bold text-white pb-2 pt-6 lg:pt-3"
|
|
>
|
|
Description
|
|
</h2>
|
|
|
|
<p class="text-gray-100 ml-2 text-sm whitespace-normal p-2">
|
|
{#if showFullText}
|
|
<div transition:fade={{ delay: 0, duration: 80 }} in={showFullText}>
|
|
{description}
|
|
</div>
|
|
{:else if $screenWidth <= 800}
|
|
{description}
|
|
{:else}
|
|
{snippet}
|
|
{/if}
|
|
</p>
|
|
{#if description.length !== 0}
|
|
<div class="flex flex-row w-full items-center mt-4 pb-2 mb-2">
|
|
<label
|
|
on:click={() => (showFullText = !showFullText)}
|
|
class="hidden lg:block ml-3 w-full text-md mt-1 cursor-pointer text-white sm:hover:text-blue-400 sm:hover:underline"
|
|
>
|
|
{#if showFullText}
|
|
Show less
|
|
{:else}
|
|
Show more
|
|
{/if}
|
|
</label>
|
|
|
|
<div class="flex justify-end w-full relative bottom-0 right-0 mr-3">
|
|
<a
|
|
target="_blank"
|
|
href={website}
|
|
class="inline-flex text-sm text-white sm:hover:text-blue-400 sm:hover:underline"
|
|
>
|
|
Go to website
|
|
<svg
|
|
class="w-5 h-5 ml-2"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
><path
|
|
d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
|
|
></path><path
|
|
d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
|
|
></path></svg
|
|
>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|