update holdings page of etfs
This commit is contained in:
MuslemRahimi
parent
6a9ddf29d2
commit
cff4bd23ef
@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker, cryptoTicker, numberOfUnreadNotification, displayCompanyName} from '$lib/store';
|
||||
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
|
||||
|
||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
@ -11,9 +10,27 @@
|
||||
export let data;
|
||||
let notDestroyed = true;
|
||||
let rawData = data?.getETFHoldings;
|
||||
let holdings = rawData?.slice(0,15);
|
||||
let holdings = rawData?.slice(0,50);
|
||||
|
||||
let category = 'weights';
|
||||
let order = 'highToLow';
|
||||
function changeOrder(newCategory: string) {
|
||||
if (newCategory === category) {
|
||||
order = order === 'highToLow' ? 'lowToHigh' : 'highToLow';
|
||||
} else {
|
||||
category = newCategory;
|
||||
order = 'highToLow';
|
||||
}
|
||||
holdings = sortElements(category, rawData)?.slice(0,50);
|
||||
}
|
||||
|
||||
const sortElements = (category, tickerList) => {
|
||||
return tickerList?.sort((a, b) => {
|
||||
const aValue = category === 'weights' ? a?.weightPercentage : a?.sharesNumber;
|
||||
const bValue = category === 'weights' ? b?.weightPercentage : b?.sharesNumber;
|
||||
return order === 'highToLow' ? bValue - aValue : aValue - bValue;
|
||||
});
|
||||
}
|
||||
|
||||
function stockSelector(symbol)
|
||||
{
|
||||
@ -36,7 +53,7 @@ async function infiniteHandler({ detail: { loaded, complete } })
|
||||
}
|
||||
else if (notDestroyed) {
|
||||
const nextIndex = holdings?.length;
|
||||
const newHoldings = rawData?.slice(nextIndex, nextIndex + 25);
|
||||
const newHoldings = rawData?.slice(nextIndex, nextIndex + 50);
|
||||
holdings = [...holdings, ...newHoldings];
|
||||
loaded();
|
||||
}
|
||||
@ -51,6 +68,8 @@ $: {
|
||||
|
||||
let charNumber = 40;
|
||||
|
||||
|
||||
|
||||
$: {
|
||||
if($screenWidth < 640)
|
||||
{
|
||||
@ -119,56 +138,47 @@ $: {
|
||||
|
||||
{#if holdings?.length !== 0}
|
||||
|
||||
<div class="flex justify-start items-center m-auto overflow-x-auto">
|
||||
<div class="w-full overflow-x-auto">
|
||||
|
||||
|
||||
<table class="table table-pin-cols table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 overflow-x-auto">
|
||||
<thead>
|
||||
<tr class="">
|
||||
<td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-sm">No.</td>
|
||||
<td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-sm">Symbol</td>
|
||||
<td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-sm hidden sm:table-cell">Name</td>
|
||||
<td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-end text-sm ">Shares</td>
|
||||
<td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-end text-sm">% Weight</td>
|
||||
<td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-sm sm:text-[1rem] whitespace-nowrap">Symbol</td>
|
||||
<td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-sm sm:text-[1rem] whitespace-nowrap ">Name</td>
|
||||
<td on:click={() => changeOrder('shares')} class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-end text-sm sm:text-[1rem] whitespace-nowrap cursor-pointer">
|
||||
Shares
|
||||
<svg class="w-5 h-5 inline-block {order === 'highToLow' && category === 'shares' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</td>
|
||||
<td on:click={() => changeOrder('weights')} class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-end text-sm sm:text-[1rem] whitespace-nowrap cursor-pointer">
|
||||
% Weight
|
||||
<svg class="w-5 h-5 inline-block {order === 'highToLow' && category === 'weights' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each (data?.user?.tier === 'Pro' ? holdings : holdings?.slice(0,3)) as item,index}
|
||||
{#each holdings as item}
|
||||
<!-- row -->
|
||||
{#if item?.asset !== null}
|
||||
<tr on:click={() => stockSelector(item?.asset)} class="w-full sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === holdings?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} {item?.asset?.length !== 0 ? 'cursor-pointer' : ''}">
|
||||
<tr on:click={() => stockSelector(item?.asset)} class="w-full sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {item?.asset?.length !== 0 ? 'cursor-pointer' : ''}">
|
||||
|
||||
<td class="text-gray-200 border-b border-[#09090B]">
|
||||
{index+1}
|
||||
</td>
|
||||
|
||||
<td class="font-normal border-b border-[#09090B]">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="text-blue-400">{item?.asset}</span>
|
||||
<span class="sm:hidden text-white">
|
||||
{item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}
|
||||
</span>
|
||||
</div>
|
||||
<td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B]">
|
||||
{item?.asset?.length !== 0 ? item?.asset : '-'}
|
||||
</td>
|
||||
|
||||
<td class="text-gray-200 border-b border-[#09090B] w-fit hidden sm:table-cell">
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B]">
|
||||
{item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
<td class="text-gray-200 border-b border-[#09090B] text-end ">
|
||||
<span class="text-white font-medium text-md ">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
}).format(item?.sharesNumber)}
|
||||
</span>
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end">
|
||||
{abbreviateNumber(item?.sharesNumber)}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-gray-200 border-b border-[#09090B] text-end">
|
||||
<span class="text-white font-medium text-md ">{item?.weightPercentage?.toFixed(2)}%</span>
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end">
|
||||
{item?.weightPercentage >= 0.01 ? item?.weightPercentage?.toFixed(2) : '< 0.01'}%
|
||||
</td>
|
||||
|
||||
|
||||
@ -186,11 +196,8 @@ $: {
|
||||
|
||||
</div>
|
||||
|
||||
{#if data?.user?.tier === 'Pro'}
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
{/if}
|
||||
|
||||
<UpgradeToPro data={data} title="Explore all US ETF holdings for diverse investment strategies and informed decision-making."/>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -249,7 +249,7 @@ onMount(async() => {
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user