126 lines
4.8 KiB
Svelte
126 lines
4.8 KiB
Svelte
<script lang='ts'>
|
|
import { goto } from '$app/navigation';
|
|
import { screenWidth } from '$lib/store';
|
|
import { abbreviateNumber} from '$lib/utils';
|
|
import { onMount } from 'svelte';
|
|
|
|
|
|
export let data;
|
|
let isLoaded = false;
|
|
|
|
let rawData = data?.getIndustryStocks;
|
|
|
|
let stockList = rawData?.slice(0,50);
|
|
|
|
async function handleScroll() {
|
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
|
if (isBottom && stockList?.length !== rawData?.length) {
|
|
const nextIndex = stockList?.length;
|
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
|
stockList = [...stockList, ...filteredNewResults];
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
onMount(async () => {
|
|
|
|
isLoaded = true;
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
})
|
|
|
|
|
|
|
|
$: charNumber = $screenWidth < 640 ? 15 : 20;
|
|
|
|
|
|
</script>
|
|
|
|
<section class="w-full overflow-hidden m-auto">
|
|
|
|
|
|
|
|
|
|
<!-- Page wrapper -->
|
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
|
|
|
|
|
<!-- Content area -->
|
|
<div class="w-full overflow-x-scroll">
|
|
|
|
|
|
|
|
<table class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
|
|
<thead>
|
|
<tr class="bg-[#09090B]">
|
|
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
|
|
Symbol
|
|
</th>
|
|
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
|
|
Name
|
|
</th>
|
|
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
|
|
Market Cap
|
|
</th>
|
|
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
|
|
% Change
|
|
</th>
|
|
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
|
|
Volume
|
|
</th>
|
|
<th class="hidden xl:table-cell text-end bg-[#09090B] text-white text-[1rem] font-semibold">
|
|
Revenue
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each stockList as item}
|
|
|
|
<tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] cursor-pointer">
|
|
|
|
|
|
<td class="text-sm sm:text-[1rem] whitespace-nowrap text-start text-blue-400">
|
|
{item?.symbol}
|
|
</td>
|
|
|
|
<td class="hidden sm:table-cell text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start">
|
|
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
|
</td>
|
|
|
|
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white">
|
|
{abbreviateNumber(item?.marketCap)}
|
|
</td>
|
|
|
|
|
|
<td class="text-sm sm:text-[1rem] whitespace-nowrap {item?.changesPercentage >= 0 ? 'text-[#10DB06]' : 'text-[#FF2F1F]'} text-end">
|
|
{item?.changesPercentage}
|
|
</td>
|
|
|
|
<td class="text-sm sm:text-[1rem] text-white text-end">
|
|
{abbreviateNumber(item?.volume)}
|
|
</td>
|
|
|
|
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
|
|
{item?.revenue === 0 ? '-' : abbreviateNumber(item?.revenue)}
|
|
</td>
|
|
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|