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

update holdings page of etfs

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-13 20:53:37 +02:00
parent 6a9ddf29d2
commit cff4bd23ef
2 changed files with 43 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/routes/etf/[tickerID]/holdings/+page.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { etfTicker, cryptoTicker, numberOfUnreadNotification, displayCompanyName} from '$lib/store'; import { etfTicker, cryptoTicker, numberOfUnreadNotification, displayCompanyName} from '$lib/store';
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
@ -11,9 +10,27 @@
export let data; export let data;
let notDestroyed = true; let notDestroyed = true;
let rawData = data?.getETFHoldings; 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) function stockSelector(symbol)
{ {
@ -36,7 +53,7 @@ async function infiniteHandler({ detail: { loaded, complete } })
} }
else if (notDestroyed) { else if (notDestroyed) {
const nextIndex = holdings?.length; const nextIndex = holdings?.length;
const newHoldings = rawData?.slice(nextIndex, nextIndex + 25); const newHoldings = rawData?.slice(nextIndex, nextIndex + 50);
holdings = [...holdings, ...newHoldings]; holdings = [...holdings, ...newHoldings];
loaded(); loaded();
} }
@ -51,6 +68,8 @@ $: {
let charNumber = 40; let charNumber = 40;
$: { $: {
if($screenWidth < 640) if($screenWidth < 640)
{ {
@ -119,56 +138,47 @@ $: {
{#if holdings?.length !== 0} {#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"> <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> <thead>
<tr class=""> <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 sm:text-[1rem] whitespace-nowrap">Symbol</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 sm:text-[1rem] whitespace-nowrap ">Name</td>
<td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-sm hidden sm:table-cell">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">
<td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-end text-sm ">Shares</td> Shares
<td class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-end text-sm">% Weight</td> <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> </tr>
</thead> </thead>
<tbody> <tbody>
{#each (data?.user?.tier === 'Pro' ? holdings : holdings?.slice(0,3)) as item,index} {#each holdings as item}
<!-- row --> <!-- row -->
{#if item?.asset !== null} {#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]"> <td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B]">
{index+1} {item?.asset?.length !== 0 ? item?.asset : '-'}
</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> </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)} {item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}
</td> </td>
<td class="text-gray-200 border-b border-[#09090B] text-end "> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end">
<span class="text-white font-medium text-md "> {abbreviateNumber(item?.sharesNumber)}
{new Intl.NumberFormat("en", {
minimumFractionDigits: 0,
maximumFractionDigits: 0
}).format(item?.sharesNumber)}
</span>
</td> </td>
<td class="text-gray-200 border-b border-[#09090B] text-end"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end">
<span class="text-white font-medium text-md ">{item?.weightPercentage?.toFixed(2)}%</span> {item?.weightPercentage >= 0.01 ? item?.weightPercentage?.toFixed(2) : '< 0.01'}%
</td> </td>
@ -186,11 +196,8 @@ $: {
</div> </div>
{#if data?.user?.tier === 'Pro'}
<InfiniteLoading on:infinite={infiniteHandler} /> <InfiniteLoading on:infinite={infiniteHandler} />
{/if}
<UpgradeToPro data={data} title="Explore all US ETF holdings for diverse investment strategies and informed decision-making."/>

2
src/routes/stocks/[tickerID]/dividends/+page.svelte
View File

@ -249,7 +249,7 @@ onMount(async() => {
</div> </div>
</div> </div>