fix lists layout
This commit is contained in:
MuslemRahimi
parent
72855c6d88
commit
761992ada2
@ -2,27 +2,31 @@
|
|||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from '$lib/store';
|
||||||
import { abbreviateNumber} from '$lib/utils';
|
import { abbreviateNumber} from '$lib/utils';
|
||||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let rawData = data?.getBasicMaterialsSector;
|
let rawData = data?.getBasicMaterialsSector;
|
||||||
let marketCapList = rawData?.slice(0,50);
|
let marketCapList = rawData?.slice(0,50);
|
||||||
|
|
||||||
|
|
||||||
async function infiniteHandler({ detail: { loaded, complete } })
|
async function handleScroll() {
|
||||||
{
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
|
if (isBottom && displayList?.length !== rawData?.length) {
|
||||||
|
const nextIndex = displayList?.length;
|
||||||
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
|
displayList = [...displayList, ...filteredNewResults];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
if (marketCapList?.length === rawData?.length) {
|
|
||||||
complete();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const nextIndex = marketCapList?.length;
|
|
||||||
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
|
|
||||||
marketCapList = [...marketCapList, ...newElements];
|
|
||||||
loaded();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||||
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||||
@ -42,17 +46,17 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-full max-w-4xl overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
A complete list of companies in the Basic Materials Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Basic Materials Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#09090B] shadow w-full rounded-lg">
|
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
||||||
|
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-3">
|
<div class="grid grid-cols-2 sm:grid-cols-4">
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
@ -152,7 +156,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -164,12 +168,12 @@
|
|||||||
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
|
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
|
<th class="text-white font-semibold text-[1rem]">Company</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
|
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
|
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -178,46 +182,38 @@
|
|||||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||||
|
|
||||||
|
|
||||||
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
|
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
{item?.symbol}
|
{item?.symbol}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||||
<div class="sm:hidden flex flex-row">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-blue-400 font-medium">{item?.symbol}</span>
|
|
||||||
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-end border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||||
{abbreviateNumber(item?.marketCap,true)}
|
{abbreviateNumber(item?.marketCap,true)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.revenue !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<div class="flex flex-row justify-end items-center">
|
<div class="flex flex-row justify-end items-center">
|
||||||
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
|
<span class="text-white ml-auto">${item.price?.toFixed(2)}</span>
|
||||||
<div class="flex flex-row mt-0.5 ml-auto">
|
<div class="flex flex-row mt-0.5 ml-auto">
|
||||||
{#if item.changesPercentage >=0}
|
{#if item.changesPercentage >=0}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
|
||||||
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
|
||||||
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -237,11 +233,10 @@
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,24 +1,8 @@
|
|||||||
import { userRegion, getCache, setCache } from '$lib/store';
|
import { getCache, setCache } from '$lib/store';
|
||||||
|
|
||||||
|
|
||||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
|
||||||
|
|
||||||
let apiURL;
|
|
||||||
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
|
|
||||||
|
|
||||||
|
|
||||||
userRegion.subscribe(value => {
|
|
||||||
|
|
||||||
if (usRegion.includes(value)) {
|
|
||||||
apiURL = import.meta.env.VITE_USEAST_API_URL;
|
|
||||||
} else {
|
|
||||||
apiURL = import.meta.env.VITE_EU_API_URL;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const load = async () => {
|
export const load = async ({parent}) => {
|
||||||
const getBasicMaterialsSector = async () => {
|
const getBasicMaterialsSector = async () => {
|
||||||
let output;
|
let output;
|
||||||
|
|
||||||
@ -28,6 +12,8 @@ export const load = async () => {
|
|||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
const {apiKey, apiURL} = await parent();
|
||||||
|
|
||||||
const postData = {'filterList': 'basic-materials'};
|
const postData = {'filterList': 'basic-materials'};
|
||||||
|
|
||||||
const response = await fetch(apiURL + '/filter-stock-list', {
|
const response = await fetch(apiURL + '/filter-stock-list', {
|
||||||
|
|||||||
@ -29,13 +29,13 @@ $: {
|
|||||||
<section class="w-full overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
|
|
||||||
A list of all Bitcoin ETFs available for trading on the US stock market, offering investors exposure to the cryptocurrency's price.
|
A list of all Bitcoin ETFs available for trading on the US stock market, offering investors exposure to the cryptocurrency's price.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal bg-[#09090B] shadow w-full rounded-lg">
|
<div class="stats stats-horizontal bg-[#27272A] shadow w-full rounded-lg">
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Total ETFs</div>
|
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Total ETFs</div>
|
||||||
|
|||||||
@ -1,24 +1,9 @@
|
|||||||
import { userRegion, getCache, setCache } from '$lib/store';
|
import { getCache, setCache } from '$lib/store';
|
||||||
|
|
||||||
|
|
||||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
|
||||||
|
|
||||||
let apiURL;
|
|
||||||
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
|
|
||||||
|
|
||||||
|
|
||||||
userRegion.subscribe(value => {
|
|
||||||
|
|
||||||
if (usRegion.includes(value)) {
|
|
||||||
apiURL = import.meta.env.VITE_USEAST_API_URL;
|
|
||||||
} else {
|
|
||||||
apiURL = import.meta.env.VITE_EU_API_URL;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const load = async () => {
|
|
||||||
|
export const load = async ({parent}) => {
|
||||||
const getETFBitcoinList = async () => {
|
const getETFBitcoinList = async () => {
|
||||||
let output;
|
let output;
|
||||||
|
|
||||||
@ -28,6 +13,8 @@ export const load = async () => {
|
|||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
const {apiKey, apiURL} = await parent();
|
||||||
|
|
||||||
const response = await fetch(apiURL + '/etf-bitcoin-list', {
|
const response = await fetch(apiURL + '/etf-bitcoin-list', {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
headers: {
|
headers: {
|
||||||
|
|||||||
@ -2,27 +2,31 @@
|
|||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from '$lib/store';
|
||||||
import { abbreviateNumber} from '$lib/utils';
|
import { abbreviateNumber} from '$lib/utils';
|
||||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let rawData = data?.getCommunicationServicesSector;
|
let rawData = data?.getCommunicationServicesSector;
|
||||||
let marketCapList = rawData?.slice(0,50);
|
let marketCapList = rawData?.slice(0,50);
|
||||||
|
|
||||||
|
|
||||||
async function infiniteHandler({ detail: { loaded, complete } })
|
async function handleScroll() {
|
||||||
{
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
|
if (isBottom && displayList?.length !== rawData?.length) {
|
||||||
|
const nextIndex = displayList?.length;
|
||||||
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
|
displayList = [...displayList, ...filteredNewResults];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
if (marketCapList?.length === rawData?.length) {
|
|
||||||
complete();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const nextIndex = marketCapList?.length;
|
|
||||||
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
|
|
||||||
marketCapList = [...marketCapList, ...newElements];
|
|
||||||
loaded();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||||
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||||
@ -42,118 +46,117 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-full max-w-4xl overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
|
|
||||||
A complete list of companies in the Communication Services Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Communication Services Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#09090B] shadow w-full rounded-lg">
|
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
||||||
|
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-3">
|
<div class="grid grid-cols-2 sm:grid-cols-4">
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
Stocks
|
Stocks
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Stocks"}
|
|
||||||
content={"The total number of companies who operates in this sector."}
|
|
||||||
id={"stocksInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Market Cap"}
|
title={"Stocks"}
|
||||||
content={"Combined market cap of all companies in this sector."}
|
content={"The total number of companies who operates in this sector."}
|
||||||
id={"marketCapModal"}
|
id={"stocksInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Market Cap
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Revenue
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profits
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profit Margin
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
<div class="stat">
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<div class="flex flex-row items-center">
|
||||||
Revenue
|
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
PE Ratio
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Revenue"}
|
title={"PE Ratio"}
|
||||||
content={"The total revenue of all companies in this sector."}
|
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
||||||
id={"revenueInfo"}
|
id={"peRatioInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -165,12 +168,12 @@
|
|||||||
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
|
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
|
<th class="text-white font-semibold text-[1rem]">Company</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
|
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
|
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -179,46 +182,38 @@
|
|||||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||||
|
|
||||||
|
|
||||||
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
|
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
{item?.symbol}
|
{item?.symbol}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||||
<div class="sm:hidden flex flex-row">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-blue-400 font-medium">{item?.symbol}</span>
|
|
||||||
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-end border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||||
{abbreviateNumber(item?.marketCap,true)}
|
{abbreviateNumber(item?.marketCap,true)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<div class="flex flex-row justify-end items-center">
|
<div class="flex flex-row justify-end items-center">
|
||||||
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
|
<span class="text-white ml-auto">${item.price?.toFixed(2)}</span>
|
||||||
<div class="flex flex-row mt-0.5 ml-auto">
|
<div class="flex flex-row mt-0.5 ml-auto">
|
||||||
{#if item.changesPercentage >=0}
|
{#if item.changesPercentage >=0}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
|
||||||
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
|
||||||
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -238,8 +233,10 @@
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,24 +1,7 @@
|
|||||||
import { userRegion, getCache, setCache } from '$lib/store';
|
import { getCache, setCache } from '$lib/store';
|
||||||
|
|
||||||
|
|
||||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
export const load = async ({parent}) => {
|
||||||
|
|
||||||
let apiURL;
|
|
||||||
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
|
|
||||||
|
|
||||||
|
|
||||||
userRegion.subscribe(value => {
|
|
||||||
|
|
||||||
if (usRegion.includes(value)) {
|
|
||||||
apiURL = import.meta.env.VITE_USEAST_API_URL;
|
|
||||||
} else {
|
|
||||||
apiURL = import.meta.env.VITE_EU_API_URL;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const load = async () => {
|
|
||||||
const getCommunicationServicesSector = async () => {
|
const getCommunicationServicesSector = async () => {
|
||||||
let output;
|
let output;
|
||||||
|
|
||||||
@ -27,6 +10,7 @@ export const load = async () => {
|
|||||||
if (cachedData) {
|
if (cachedData) {
|
||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
const {apiKey, apiURL} = await parent();
|
||||||
|
|
||||||
const postData = {'filterList': 'communication-services'};
|
const postData = {'filterList': 'communication-services'};
|
||||||
|
|
||||||
|
|||||||
@ -2,27 +2,31 @@
|
|||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from '$lib/store';
|
||||||
import { abbreviateNumber} from '$lib/utils';
|
import { abbreviateNumber} from '$lib/utils';
|
||||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let rawData = data?.getConsumerCyclicalSector;
|
let rawData = data?.getConsumerCyclicalSector;
|
||||||
let marketCapList = rawData?.slice(0,50);
|
let marketCapList = rawData?.slice(0,50);
|
||||||
|
|
||||||
|
|
||||||
async function infiniteHandler({ detail: { loaded, complete } })
|
async function handleScroll() {
|
||||||
{
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
|
if (isBottom && displayList?.length !== rawData?.length) {
|
||||||
|
const nextIndex = displayList?.length;
|
||||||
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
|
displayList = [...displayList, ...filteredNewResults];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
if (marketCapList?.length === rawData?.length) {
|
|
||||||
complete();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const nextIndex = marketCapList?.length;
|
|
||||||
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
|
|
||||||
marketCapList = [...marketCapList, ...newElements];
|
|
||||||
loaded();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||||
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||||
@ -42,118 +46,117 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-full max-w-4xl overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
|
|
||||||
A complete list of companies in the Consumer Cyclical Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Consumer Cyclical Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#09090B] shadow w-full rounded-lg">
|
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
||||||
|
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-3">
|
<div class="grid grid-cols-2 sm:grid-cols-4">
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
Stocks
|
Stocks
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Stocks"}
|
|
||||||
content={"The total number of companies who operates in this sector."}
|
|
||||||
id={"stocksInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Market Cap"}
|
title={"Stocks"}
|
||||||
content={"Combined market cap of all companies in this sector."}
|
content={"The total number of companies who operates in this sector."}
|
||||||
id={"marketCapModal"}
|
id={"stocksInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Market Cap
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Revenue
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profits
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profit Margin
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
<div class="stat">
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<div class="flex flex-row items-center">
|
||||||
Revenue
|
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
PE Ratio
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Revenue"}
|
title={"PE Ratio"}
|
||||||
content={"The total revenue of all companies in this sector."}
|
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
||||||
id={"revenueInfo"}
|
id={"peRatioInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -165,12 +168,12 @@
|
|||||||
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
|
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
|
<th class="text-white font-semibold text-[1rem]">Company</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
|
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
|
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -179,45 +182,38 @@
|
|||||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||||
|
|
||||||
|
|
||||||
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
|
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
{item?.symbol}
|
{item?.symbol}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
|
||||||
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<div class="sm:hidden flex flex-row">
|
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-blue-400 font-medium">{item?.symbol}</span>
|
|
||||||
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-end border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||||
{abbreviateNumber(item?.marketCap,true)}
|
{abbreviateNumber(item?.marketCap,true)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<div class="flex flex-row justify-end items-center">
|
<div class="flex flex-row justify-end items-center">
|
||||||
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
|
<span class="text-white ml-auto">${item.price?.toFixed(2)}</span>
|
||||||
<div class="flex flex-row mt-0.5 ml-auto">
|
<div class="flex flex-row mt-0.5 ml-auto">
|
||||||
{#if item.changesPercentage >=0}
|
{#if item.changesPercentage >=0}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
|
||||||
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
|
||||||
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -237,11 +233,10 @@
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,24 +1,8 @@
|
|||||||
import { userRegion, getCache, setCache } from '$lib/store';
|
import {getCache, setCache } from '$lib/store';
|
||||||
|
|
||||||
|
|
||||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
|
||||||
|
|
||||||
let apiURL;
|
|
||||||
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
|
|
||||||
|
|
||||||
|
|
||||||
userRegion.subscribe(value => {
|
|
||||||
|
|
||||||
if (usRegion.includes(value)) {
|
|
||||||
apiURL = import.meta.env.VITE_USEAST_API_URL;
|
|
||||||
} else {
|
|
||||||
apiURL = import.meta.env.VITE_EU_API_URL;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const load = async () => {
|
export const load = async ({parent}) => {
|
||||||
const getConsumerCyclicalSector = async () => {
|
const getConsumerCyclicalSector = async () => {
|
||||||
let output;
|
let output;
|
||||||
|
|
||||||
@ -27,7 +11,7 @@ export const load = async () => {
|
|||||||
if (cachedData) {
|
if (cachedData) {
|
||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
const {apiKey, apiURL} = await parent();
|
||||||
const postData = {'filterList': 'consumer-cyclical'}
|
const postData = {'filterList': 'consumer-cyclical'}
|
||||||
|
|
||||||
const response = await fetch(apiURL + '/filter-stock-list', {
|
const response = await fetch(apiURL + '/filter-stock-list', {
|
||||||
|
|||||||
@ -2,27 +2,31 @@
|
|||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from '$lib/store';
|
||||||
import { abbreviateNumber} from '$lib/utils';
|
import { abbreviateNumber} from '$lib/utils';
|
||||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let rawData = data?.getConsumerDefensiveSector;
|
let rawData = data?.getConsumerDefensiveSector;
|
||||||
let marketCapList = rawData?.slice(0,50);
|
let marketCapList = rawData?.slice(0,50);
|
||||||
|
|
||||||
|
|
||||||
async function infiniteHandler({ detail: { loaded, complete } })
|
async function handleScroll() {
|
||||||
{
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
|
if (isBottom && displayList?.length !== rawData?.length) {
|
||||||
|
const nextIndex = displayList?.length;
|
||||||
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
|
displayList = [...displayList, ...filteredNewResults];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
if (marketCapList?.length === rawData?.length) {
|
|
||||||
complete();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const nextIndex = marketCapList?.length;
|
|
||||||
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
|
|
||||||
marketCapList = [...marketCapList, ...newElements];
|
|
||||||
loaded();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||||
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||||
@ -42,118 +46,117 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-full max-w-4xl overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
|
|
||||||
A complete list of companies in the Consumer Defensive Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Consumer Defensive Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#09090B] shadow w-full rounded-lg">
|
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
||||||
|
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-3">
|
<div class="grid grid-cols-2 sm:grid-cols-4">
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
Stocks
|
Stocks
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Stocks"}
|
|
||||||
content={"The total number of companies who operates in this sector."}
|
|
||||||
id={"stocksInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Market Cap"}
|
title={"Stocks"}
|
||||||
content={"Combined market cap of all companies in this sector."}
|
content={"The total number of companies who operates in this sector."}
|
||||||
id={"marketCapModal"}
|
id={"stocksInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Market Cap
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Revenue
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profits
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profit Margin
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
<div class="stat">
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<div class="flex flex-row items-center">
|
||||||
Revenue
|
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
PE Ratio
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Revenue"}
|
title={"PE Ratio"}
|
||||||
content={"The total revenue of all companies in this sector."}
|
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
||||||
id={"revenueInfo"}
|
id={"peRatioInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -165,12 +168,12 @@
|
|||||||
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
|
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
|
<th class="text-white font-semibold text-[1rem]">Company</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
|
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
|
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -179,46 +182,38 @@
|
|||||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||||
|
|
||||||
|
|
||||||
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
|
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
{item?.symbol}
|
{item?.symbol}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||||
<div class="sm:hidden flex flex-row">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-blue-400 font-medium">{item?.symbol}</span>
|
|
||||||
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-end border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||||
{abbreviateNumber(item?.marketCap,true)}
|
{abbreviateNumber(item?.marketCap,true)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<div class="flex flex-row justify-end items-center">
|
<div class="flex flex-row justify-end items-center">
|
||||||
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
|
<span class="text-white ml-auto">${item.price?.toFixed(2)}</span>
|
||||||
<div class="flex flex-row mt-0.5 ml-auto">
|
<div class="flex flex-row mt-0.5 ml-auto">
|
||||||
{#if item.changesPercentage >=0}
|
{#if item.changesPercentage >=0}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
|
||||||
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
|
||||||
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -238,7 +233,10 @@
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,24 +1,9 @@
|
|||||||
import { userRegion, getCache, setCache } from '$lib/store';
|
import { getCache, setCache } from '$lib/store';
|
||||||
|
|
||||||
|
|
||||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
|
||||||
|
|
||||||
let apiURL;
|
|
||||||
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
|
|
||||||
|
|
||||||
|
|
||||||
userRegion.subscribe(value => {
|
|
||||||
|
|
||||||
if (usRegion.includes(value)) {
|
|
||||||
apiURL = import.meta.env.VITE_USEAST_API_URL;
|
|
||||||
} else {
|
|
||||||
apiURL = import.meta.env.VITE_EU_API_URL;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const load = async () => {
|
|
||||||
|
export const load = async ({parent}) => {
|
||||||
const getConsumerDefensiveSector = async () => {
|
const getConsumerDefensiveSector = async () => {
|
||||||
let output;
|
let output;
|
||||||
|
|
||||||
@ -28,6 +13,8 @@ export const load = async () => {
|
|||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
const {apiKey, apiURL} = await parent();
|
||||||
|
|
||||||
const postData = {'filterList': 'consumer-defensive'};
|
const postData = {'filterList': 'consumer-defensive'};
|
||||||
|
|
||||||
const response = await fetch(apiURL + '/filter-stock-list', {
|
const response = await fetch(apiURL + '/filter-stock-list', {
|
||||||
|
|||||||
@ -1,26 +1,28 @@
|
|||||||
<script lang='ts'>
|
<script lang='ts'>
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from '$lib/store';
|
||||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let rawData = data?.getDelistedStocks;
|
let rawData = data?.getDelistedStocks;
|
||||||
let marketCapList = rawData?.slice(0,50);
|
let marketCapList = rawData?.slice(0,50);
|
||||||
|
|
||||||
|
|
||||||
async function infiniteHandler({ detail: { loaded, complete } })
|
async function handleScroll() {
|
||||||
{
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
if (marketCapList?.length === rawData?.length) {
|
if (isBottom && marketCapList?.length !== rawData?.length) {
|
||||||
complete();
|
const nextIndex = marketCapList?.length;
|
||||||
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
|
marketCapList = [...marketCapList, ...filteredNewResults];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
else {
|
|
||||||
const nextIndex = marketCapList?.length;
|
|
||||||
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
|
|
||||||
marketCapList = [...marketCapList, ...newElements];
|
|
||||||
loaded();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
})
|
||||||
let charNumber = 40;
|
let charNumber = 40;
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
@ -34,17 +36,17 @@ $: {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-full max-w-4xl overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
|
|
||||||
A list of companies delisted from the exchange and no longer publicly traded.
|
A list of companies delisted from the exchange and no longer publicly traded.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#09090B] shadow w-full rounded-lg">
|
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
|
<div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
|
||||||
@ -66,7 +68,7 @@ $: {
|
|||||||
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -75,45 +77,39 @@ $: {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<table class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
<table class="table rounded-none sm:rounded-md w-full m-auto mt-4 ">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
|
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
|
<th class="text-white font-semibold text-[1rem]">Company</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem]">IPO</th>
|
<th class="text-white font-semibold text-[1rem]">IPO</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Exchange</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Exchange</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Delisted</th>
|
<th class="text-white font-semibold text-[1rem] text-end">Delisted</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each marketCapList as item,index}
|
{#each marketCapList as item,index}
|
||||||
<!-- row -->
|
<!-- row -->
|
||||||
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
|
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
|
||||||
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
|
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
{item?.symbol}
|
{item?.symbol}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<span class="hidden sm:inline-block text-white font-medium">{item?.companyName?.length > charNumber ? item?.companyName?.slice(0,charNumber) + "..." : item?.companyName}</span>
|
{item?.companyName?.length > charNumber ? item?.companyName?.slice(0,charNumber) + "..." : item?.companyName}
|
||||||
<div class="sm:hidden flex flex-row">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-blue-400 font-medium">{item?.symbol}</span>
|
|
||||||
<span class="text-gray-200 font-medium">{item?.companyName?.length > charNumber ? item?.companyName?.slice(0,charNumber) + "..." : item?.companyName}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium border-b-[#09090B]">
|
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
{new Date(item?.ipoDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
|
{new Date(item?.ipoDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
|
||||||
{item?.exchange}
|
{item?.exchange}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-white font-medium text-end border-b-[#09090B]">
|
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
|
||||||
{new Date(item?.delistedDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
|
{new Date(item?.delistedDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
@ -128,8 +124,6 @@ $: {
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,23 +1,8 @@
|
|||||||
import { userRegion, getCache, setCache } from '$lib/store';
|
import { getCache, setCache } from '$lib/store';
|
||||||
|
|
||||||
|
|
||||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
|
||||||
|
|
||||||
let apiURL;
|
export const load = async ({parent}) => {
|
||||||
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
|
|
||||||
|
|
||||||
|
|
||||||
userRegion.subscribe(value => {
|
|
||||||
|
|
||||||
if (usRegion.includes(value)) {
|
|
||||||
apiURL = import.meta.env.VITE_USEAST_API_URL;
|
|
||||||
} else {
|
|
||||||
apiURL = import.meta.env.VITE_EU_API_URL;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
export const load = async () => {
|
|
||||||
const getDelistedStocks = async () => {
|
const getDelistedStocks = async () => {
|
||||||
let output;
|
let output;
|
||||||
|
|
||||||
@ -27,6 +12,7 @@ export const load = async () => {
|
|||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
const {apiKey, apiURL} = await parent();
|
||||||
|
|
||||||
const response = await fetch(apiURL + '/delisted-companies', {
|
const response = await fetch(apiURL + '/delisted-companies', {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
|
|||||||
@ -2,27 +2,31 @@
|
|||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from '$lib/store';
|
||||||
import { abbreviateNumber} from '$lib/utils';
|
import { abbreviateNumber} from '$lib/utils';
|
||||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let rawData = data?.getEnergySector;
|
let rawData = data?.getEnergySector;
|
||||||
let marketCapList = rawData?.slice(0,50);
|
let marketCapList = rawData?.slice(0,50);
|
||||||
|
|
||||||
|
|
||||||
async function infiniteHandler({ detail: { loaded, complete } })
|
async function handleScroll() {
|
||||||
{
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
|
if (isBottom && displayList?.length !== rawData?.length) {
|
||||||
|
const nextIndex = displayList?.length;
|
||||||
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
|
displayList = [...displayList, ...filteredNewResults];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
if (marketCapList?.length === rawData?.length) {
|
|
||||||
complete();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const nextIndex = marketCapList?.length;
|
|
||||||
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
|
|
||||||
marketCapList = [...marketCapList, ...newElements];
|
|
||||||
loaded();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||||
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||||
@ -42,118 +46,117 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-full max-w-4xl overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
|
|
||||||
A complete list of companies in the Energy Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Energy Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#09090B] shadow w-full rounded-lg">
|
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
||||||
|
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-3">
|
<div class="grid grid-cols-2 sm:grid-cols-4">
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
Stocks
|
Stocks
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Stocks"}
|
|
||||||
content={"The total number of companies who operates in this sector."}
|
|
||||||
id={"stocksInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Market Cap"}
|
title={"Stocks"}
|
||||||
content={"Combined market cap of all companies in this sector."}
|
content={"The total number of companies who operates in this sector."}
|
||||||
id={"marketCapModal"}
|
id={"stocksInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Market Cap
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Revenue
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profits
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profit Margin
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
<div class="stat">
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<div class="flex flex-row items-center">
|
||||||
Revenue
|
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
PE Ratio
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Revenue"}
|
title={"PE Ratio"}
|
||||||
content={"The total revenue of all companies in this sector."}
|
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
||||||
id={"revenueInfo"}
|
id={"peRatioInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -162,15 +165,15 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
|
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
|
<th class="text-white font-semibold text-[1rem]">Company</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
|
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
|
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -179,46 +182,38 @@
|
|||||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||||
|
|
||||||
|
|
||||||
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
|
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
{item?.symbol}
|
{item?.symbol}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||||
<div class="sm:hidden flex flex-row">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-blue-400 font-medium">{item?.symbol}</span>
|
|
||||||
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-end border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||||
{abbreviateNumber(item?.marketCap,true)}
|
{abbreviateNumber(item?.marketCap,true)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<div class="flex flex-row justify-end items-center">
|
<div class="flex flex-row justify-end items-center">
|
||||||
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
|
<span class="text-white ml-auto">${item.price?.toFixed(2)}</span>
|
||||||
<div class="flex flex-row mt-0.5 ml-auto">
|
<div class="flex flex-row mt-0.5 ml-auto">
|
||||||
{#if item.changesPercentage >=0}
|
{#if item.changesPercentage >=0}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
|
||||||
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
|
||||||
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -238,7 +233,10 @@
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,24 +1,7 @@
|
|||||||
import { userRegion, getCache, setCache } from '$lib/store';
|
import { getCache, setCache } from '$lib/store';
|
||||||
|
|
||||||
|
|
||||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
export const load = async ({parent}) => {
|
||||||
|
|
||||||
let apiURL;
|
|
||||||
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
|
|
||||||
|
|
||||||
|
|
||||||
userRegion.subscribe(value => {
|
|
||||||
|
|
||||||
if (usRegion.includes(value)) {
|
|
||||||
apiURL = import.meta.env.VITE_USEAST_API_URL;
|
|
||||||
} else {
|
|
||||||
apiURL = import.meta.env.VITE_EU_API_URL;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const load = async () => {
|
|
||||||
const getEnergySector = async () => {
|
const getEnergySector = async () => {
|
||||||
let output;
|
let output;
|
||||||
|
|
||||||
@ -28,6 +11,8 @@ export const load = async () => {
|
|||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
const {apiKey, apiURL} = await parent();
|
||||||
|
|
||||||
const postData = {'filterList': 'energy'}
|
const postData = {'filterList': 'energy'}
|
||||||
|
|
||||||
const response = await fetch(apiURL + '/filter-stock-list', {
|
const response = await fetch(apiURL + '/filter-stock-list', {
|
||||||
|
|||||||
@ -2,27 +2,31 @@
|
|||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from '$lib/store';
|
||||||
import { abbreviateNumber} from '$lib/utils';
|
import { abbreviateNumber} from '$lib/utils';
|
||||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let rawData = data?.getFinancialSector;
|
let rawData = data?.getFinancialSector;
|
||||||
let marketCapList = rawData?.slice(0,50);
|
let marketCapList = rawData?.slice(0,50);
|
||||||
|
|
||||||
|
|
||||||
async function infiniteHandler({ detail: { loaded, complete } })
|
async function handleScroll() {
|
||||||
{
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
|
if (isBottom && displayList?.length !== rawData?.length) {
|
||||||
|
const nextIndex = displayList?.length;
|
||||||
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
|
displayList = [...displayList, ...filteredNewResults];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
if (marketCapList?.length === rawData?.length) {
|
|
||||||
complete();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const nextIndex = marketCapList?.length;
|
|
||||||
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
|
|
||||||
marketCapList = [...marketCapList, ...newElements];
|
|
||||||
loaded();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||||
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||||
@ -45,12 +49,12 @@
|
|||||||
<section class="w-full overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
A complete list of companies in the Financial Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Financial Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#09090B] shadow w-full rounded-lg">
|
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
||||||
|
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-4">
|
<div class="grid grid-cols-2 sm:grid-cols-4">
|
||||||
|
|
||||||
@ -164,12 +168,12 @@
|
|||||||
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
|
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
|
<th class="text-white font-semibold text-[1rem]">Company</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
|
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
|
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -178,46 +182,38 @@
|
|||||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||||
|
|
||||||
|
|
||||||
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
|
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
{item?.symbol}
|
{item?.symbol}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||||
<div class="sm:hidden flex flex-row">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-blue-400 font-medium">{item?.symbol}</span>
|
|
||||||
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-end border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||||
{abbreviateNumber(item?.marketCap,true)}
|
{abbreviateNumber(item?.marketCap,true)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<div class="flex flex-row justify-end items-center">
|
<div class="flex flex-row justify-end items-center">
|
||||||
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
|
<span class="text-white ml-auto">${item.price?.toFixed(2)}</span>
|
||||||
<div class="flex flex-row mt-0.5 ml-auto">
|
<div class="flex flex-row mt-0.5 ml-auto">
|
||||||
{#if item.changesPercentage >=0}
|
{#if item.changesPercentage >=0}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
|
||||||
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
|
||||||
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -237,8 +233,6 @@
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,24 +1,8 @@
|
|||||||
import { userRegion, getCache, setCache } from '$lib/store';
|
import { getCache, setCache } from '$lib/store';
|
||||||
|
|
||||||
|
|
||||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
|
||||||
|
|
||||||
let apiURL;
|
|
||||||
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
|
|
||||||
|
|
||||||
|
|
||||||
userRegion.subscribe(value => {
|
|
||||||
|
|
||||||
if (usRegion.includes(value)) {
|
|
||||||
apiURL = import.meta.env.VITE_USEAST_API_URL;
|
|
||||||
} else {
|
|
||||||
apiURL = import.meta.env.VITE_EU_API_URL;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const load = async () => {
|
export const load = async ({parent}) => {
|
||||||
const getFinancialSector = async () => {
|
const getFinancialSector = async () => {
|
||||||
let output;
|
let output;
|
||||||
|
|
||||||
@ -28,6 +12,8 @@ export const load = async () => {
|
|||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
const {apiKey, apiURL} = await parent();
|
||||||
|
|
||||||
const postData = {'filterList': 'financial'}
|
const postData = {'filterList': 'financial'}
|
||||||
|
|
||||||
const response = await fetch(apiURL + '/filter-stock-list', {
|
const response = await fetch(apiURL + '/filter-stock-list', {
|
||||||
|
|||||||
@ -2,27 +2,31 @@
|
|||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from '$lib/store';
|
||||||
import { abbreviateNumber} from '$lib/utils';
|
import { abbreviateNumber} from '$lib/utils';
|
||||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let rawData = data?.getHealthcareSector;
|
let rawData = data?.getHealthcareSector;
|
||||||
let marketCapList = rawData?.slice(0,50);
|
let marketCapList = rawData?.slice(0,50);
|
||||||
|
|
||||||
|
|
||||||
async function infiniteHandler({ detail: { loaded, complete } })
|
async function handleScroll() {
|
||||||
{
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
|
if (isBottom && displayList?.length !== rawData?.length) {
|
||||||
|
const nextIndex = displayList?.length;
|
||||||
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
|
displayList = [...displayList, ...filteredNewResults];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
if (marketCapList?.length === rawData?.length) {
|
|
||||||
complete();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const nextIndex = marketCapList?.length;
|
|
||||||
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
|
|
||||||
marketCapList = [...marketCapList, ...newElements];
|
|
||||||
loaded();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||||
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||||
@ -42,118 +46,117 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-full max-w-4xl overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
|
|
||||||
A complete list of companies in the Healthcare Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Healthcare Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#09090B] shadow w-full rounded-lg">
|
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
||||||
|
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-3">
|
<div class="grid grid-cols-2 sm:grid-cols-4">
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
Stocks
|
Stocks
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Stocks"}
|
|
||||||
content={"The total number of companies who operates in this sector."}
|
|
||||||
id={"stocksInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Market Cap"}
|
title={"Stocks"}
|
||||||
content={"Combined market cap of all companies in this sector."}
|
content={"The total number of companies who operates in this sector."}
|
||||||
id={"marketCapModal"}
|
id={"stocksInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Market Cap
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Revenue
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profits
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profit Margin
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
<div class="stat">
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<div class="flex flex-row items-center">
|
||||||
Revenue
|
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
PE Ratio
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Revenue"}
|
title={"PE Ratio"}
|
||||||
content={"The total revenue of all companies in this sector."}
|
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
||||||
id={"revenueInfo"}
|
id={"peRatioInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -161,15 +164,16 @@
|
|||||||
<div class="w-full overflow-x-scroll">
|
<div class="w-full overflow-x-scroll">
|
||||||
|
|
||||||
|
|
||||||
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
|
||||||
|
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
|
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
|
<th class="text-white font-semibold text-[1rem]">Company</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
|
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
|
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -178,46 +182,38 @@
|
|||||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||||
|
|
||||||
|
|
||||||
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
|
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
{item?.symbol}
|
{item?.symbol}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||||
<div class="sm:hidden flex flex-row">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-blue-400 font-medium">{item?.symbol}</span>
|
|
||||||
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-end border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||||
{abbreviateNumber(item?.marketCap,true)}
|
{abbreviateNumber(item?.marketCap,true)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<div class="flex flex-row justify-end items-center">
|
<div class="flex flex-row justify-end items-center">
|
||||||
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
|
<span class="text-white ml-auto">${item.price?.toFixed(2)}</span>
|
||||||
<div class="flex flex-row mt-0.5 ml-auto">
|
<div class="flex flex-row mt-0.5 ml-auto">
|
||||||
{#if item.changesPercentage >=0}
|
{#if item.changesPercentage >=0}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
|
||||||
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
|
||||||
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -234,11 +230,9 @@
|
|||||||
|
|
||||||
{/each}
|
{/each}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,24 +1,7 @@
|
|||||||
import { userRegion, getCache, setCache } from '$lib/store';
|
import { getCache, setCache } from '$lib/store';
|
||||||
|
|
||||||
|
|
||||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
export const load = async ({parent}) => {
|
||||||
|
|
||||||
let apiURL;
|
|
||||||
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
|
|
||||||
|
|
||||||
|
|
||||||
userRegion.subscribe(value => {
|
|
||||||
|
|
||||||
if (usRegion.includes(value)) {
|
|
||||||
apiURL = import.meta.env.VITE_USEAST_API_URL;
|
|
||||||
} else {
|
|
||||||
apiURL = import.meta.env.VITE_EU_API_URL;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const load = async () => {
|
|
||||||
const getHealthcareSector = async () => {
|
const getHealthcareSector = async () => {
|
||||||
let output;
|
let output;
|
||||||
|
|
||||||
@ -27,6 +10,7 @@ export const load = async () => {
|
|||||||
if (cachedData) {
|
if (cachedData) {
|
||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
const {apiKey, apiURL} = await parent();
|
||||||
|
|
||||||
const postData = {'filterList': 'healthcare'}
|
const postData = {'filterList': 'healthcare'}
|
||||||
|
|
||||||
|
|||||||
@ -2,27 +2,31 @@
|
|||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from '$lib/store';
|
||||||
import { abbreviateNumber} from '$lib/utils';
|
import { abbreviateNumber} from '$lib/utils';
|
||||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let rawData = data?.getIndustrialsSector;
|
let rawData = data?.getIndustrialsSector;
|
||||||
let marketCapList = rawData?.slice(0,50);
|
let marketCapList = rawData?.slice(0,50);
|
||||||
|
|
||||||
|
|
||||||
async function infiniteHandler({ detail: { loaded, complete } })
|
async function handleScroll() {
|
||||||
{
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
|
if (isBottom && displayList?.length !== rawData?.length) {
|
||||||
|
const nextIndex = displayList?.length;
|
||||||
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
|
displayList = [...displayList, ...filteredNewResults];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
if (marketCapList?.length === rawData?.length) {
|
|
||||||
complete();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const nextIndex = marketCapList?.length;
|
|
||||||
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
|
|
||||||
marketCapList = [...marketCapList, ...newElements];
|
|
||||||
loaded();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||||
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||||
@ -42,118 +46,117 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-full max-w-4xl overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
|
|
||||||
A complete list of companies in the Industrials Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Industrials Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#09090B] shadow w-full rounded-lg">
|
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
||||||
|
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-3">
|
<div class="grid grid-cols-2 sm:grid-cols-4">
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
Stocks
|
Stocks
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Stocks"}
|
|
||||||
content={"The total number of companies who operates in this sector."}
|
|
||||||
id={"stocksInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Market Cap"}
|
title={"Stocks"}
|
||||||
content={"Combined market cap of all companies in this sector."}
|
content={"The total number of companies who operates in this sector."}
|
||||||
id={"marketCapModal"}
|
id={"stocksInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Market Cap
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Revenue
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profits
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profit Margin
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
<div class="stat">
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<div class="flex flex-row items-center">
|
||||||
Revenue
|
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
PE Ratio
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Revenue"}
|
title={"PE Ratio"}
|
||||||
content={"The total revenue of all companies in this sector."}
|
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
||||||
id={"revenueInfo"}
|
id={"peRatioInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -162,15 +165,15 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
|
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
|
<th class="text-white font-semibold text-[1rem]">Company</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
|
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
|
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -179,46 +182,38 @@
|
|||||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||||
|
|
||||||
|
|
||||||
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
|
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
{item?.symbol}
|
{item?.symbol}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||||
<div class="sm:hidden flex flex-row">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-blue-400 font-medium">{item?.symbol}</span>
|
|
||||||
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-end border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||||
{abbreviateNumber(item?.marketCap,true)}
|
{abbreviateNumber(item?.marketCap,true)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<div class="flex flex-row justify-end items-center">
|
<div class="flex flex-row justify-end items-center">
|
||||||
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
|
<span class="text-white ml-auto">${item.price?.toFixed(2)}</span>
|
||||||
<div class="flex flex-row mt-0.5 ml-auto">
|
<div class="flex flex-row mt-0.5 ml-auto">
|
||||||
{#if item.changesPercentage >=0}
|
{#if item.changesPercentage >=0}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
|
||||||
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
|
||||||
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -238,12 +233,10 @@
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,24 +1,9 @@
|
|||||||
import { userRegion, getCache, setCache } from '$lib/store';
|
import { getCache, setCache } from '$lib/store';
|
||||||
|
|
||||||
|
|
||||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
|
||||||
|
|
||||||
let apiURL;
|
|
||||||
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
|
|
||||||
|
|
||||||
|
|
||||||
userRegion.subscribe(value => {
|
|
||||||
|
|
||||||
if (usRegion.includes(value)) {
|
|
||||||
apiURL = import.meta.env.VITE_USEAST_API_URL;
|
|
||||||
} else {
|
|
||||||
apiURL = import.meta.env.VITE_EU_API_URL;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const load = async () => {
|
|
||||||
|
export const load = async ({parent}) => {
|
||||||
const getIndustrialsSector = async () => {
|
const getIndustrialsSector = async () => {
|
||||||
let output;
|
let output;
|
||||||
|
|
||||||
@ -28,6 +13,8 @@ export const load = async () => {
|
|||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
const {apiKey, apiURL} = await parent();
|
||||||
|
|
||||||
const postData = {'filterList': 'industrials'}
|
const postData = {'filterList': 'industrials'}
|
||||||
|
|
||||||
const response = await fetch(apiURL + '/filter-stock-list', {
|
const response = await fetch(apiURL + '/filter-stock-list', {
|
||||||
|
|||||||
@ -2,27 +2,31 @@
|
|||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from '$lib/store';
|
||||||
import { abbreviateNumber} from '$lib/utils';
|
import { abbreviateNumber} from '$lib/utils';
|
||||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let rawData = data?.getRealEstateSector;
|
let rawData = data?.getRealEstateSector;
|
||||||
let marketCapList = rawData?.slice(0,50);
|
let marketCapList = rawData?.slice(0,50);
|
||||||
|
|
||||||
|
|
||||||
async function infiniteHandler({ detail: { loaded, complete } })
|
async function handleScroll() {
|
||||||
{
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
|
if (isBottom && displayList?.length !== rawData?.length) {
|
||||||
|
const nextIndex = displayList?.length;
|
||||||
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
|
displayList = [...displayList, ...filteredNewResults];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
if (marketCapList?.length === rawData?.length) {
|
|
||||||
complete();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const nextIndex = marketCapList?.length;
|
|
||||||
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
|
|
||||||
marketCapList = [...marketCapList, ...newElements];
|
|
||||||
loaded();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||||
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||||
@ -42,118 +46,117 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-full max-w-4xl overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
|
|
||||||
A complete list of companies in the Real Estate Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Real Estate Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#09090B] shadow w-full rounded-lg">
|
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
||||||
|
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-3">
|
<div class="grid grid-cols-2 sm:grid-cols-4">
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
Stocks
|
Stocks
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Stocks"}
|
|
||||||
content={"The total number of companies who operates in this sector."}
|
|
||||||
id={"stocksInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Market Cap"}
|
title={"Stocks"}
|
||||||
content={"Combined market cap of all companies in this sector."}
|
content={"The total number of companies who operates in this sector."}
|
||||||
id={"marketCapModal"}
|
id={"stocksInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Market Cap
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Revenue
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profits
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profit Margin
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
<div class="stat">
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<div class="flex flex-row items-center">
|
||||||
Revenue
|
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
PE Ratio
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Revenue"}
|
title={"PE Ratio"}
|
||||||
content={"The total revenue of all companies in this sector."}
|
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
||||||
id={"revenueInfo"}
|
id={"peRatioInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -165,12 +168,12 @@
|
|||||||
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
|
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
|
<th class="text-white font-semibold text-[1rem]">Company</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
|
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
|
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -179,46 +182,38 @@
|
|||||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||||
|
|
||||||
|
|
||||||
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
|
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
{item?.symbol}
|
{item?.symbol}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||||
<div class="sm:hidden flex flex-row">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-blue-400 font-medium">{item?.symbol}</span>
|
|
||||||
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-end border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||||
{abbreviateNumber(item?.marketCap,true)}
|
{abbreviateNumber(item?.marketCap,true)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<div class="flex flex-row justify-end items-center">
|
<div class="flex flex-row justify-end items-center">
|
||||||
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
|
<span class="text-white ml-auto">${item.price?.toFixed(2)}</span>
|
||||||
<div class="flex flex-row mt-0.5 ml-auto">
|
<div class="flex flex-row mt-0.5 ml-auto">
|
||||||
{#if item.changesPercentage >=0}
|
{#if item.changesPercentage >=0}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
|
||||||
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
|
||||||
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -238,11 +233,10 @@
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,24 +1,7 @@
|
|||||||
import { userRegion, getCache, setCache } from '$lib/store';
|
import { getCache, setCache } from '$lib/store';
|
||||||
|
|
||||||
|
|
||||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
export const load = async ({parent}) => {
|
||||||
|
|
||||||
let apiURL;
|
|
||||||
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
|
|
||||||
|
|
||||||
|
|
||||||
userRegion.subscribe(value => {
|
|
||||||
|
|
||||||
if (usRegion.includes(value)) {
|
|
||||||
apiURL = import.meta.env.VITE_USEAST_API_URL;
|
|
||||||
} else {
|
|
||||||
apiURL = import.meta.env.VITE_EU_API_URL;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const load = async () => {
|
|
||||||
const getRealEstateSector = async () => {
|
const getRealEstateSector = async () => {
|
||||||
let output;
|
let output;
|
||||||
|
|
||||||
@ -28,6 +11,8 @@ export const load = async () => {
|
|||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
const {apiKey, apiURL} = await parent();
|
||||||
|
|
||||||
const postData = {'filterList': 'real-estate'}
|
const postData = {'filterList': 'real-estate'}
|
||||||
const response = await fetch(apiURL + '/filter-stock-list', {
|
const response = await fetch(apiURL + '/filter-stock-list', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
|
|||||||
@ -2,27 +2,31 @@
|
|||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from '$lib/store';
|
||||||
import { abbreviateNumber} from '$lib/utils';
|
import { abbreviateNumber} from '$lib/utils';
|
||||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let rawData = data?.getTechnologySector;
|
let rawData = data?.getTechnologySector;
|
||||||
let marketCapList = rawData?.slice(0,50);
|
let marketCapList = rawData?.slice(0,50);
|
||||||
|
|
||||||
|
|
||||||
async function infiniteHandler({ detail: { loaded, complete } })
|
async function handleScroll() {
|
||||||
{
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
|
if (isBottom && displayList?.length !== rawData?.length) {
|
||||||
|
const nextIndex = displayList?.length;
|
||||||
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
|
displayList = [...displayList, ...filteredNewResults];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
if (marketCapList?.length === rawData?.length) {
|
|
||||||
complete();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const nextIndex = marketCapList?.length;
|
|
||||||
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
|
|
||||||
marketCapList = [...marketCapList, ...newElements];
|
|
||||||
loaded();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||||
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||||
@ -42,118 +46,117 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-full max-w-4xl overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
|
|
||||||
A complete list of companies in the Technology Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Technology Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#09090B] shadow w-full rounded-lg">
|
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
||||||
|
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-3">
|
<div class="grid grid-cols-2 sm:grid-cols-4">
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
Stocks
|
Stocks
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Stocks"}
|
|
||||||
content={"The total number of companies who operates in this sector."}
|
|
||||||
id={"stocksInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Market Cap"}
|
title={"Stocks"}
|
||||||
content={"Combined market cap of all companies in this sector."}
|
content={"The total number of companies who operates in this sector."}
|
||||||
id={"marketCapModal"}
|
id={"stocksInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Market Cap
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Revenue
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profits
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profit Margin
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
<div class="stat">
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<div class="flex flex-row items-center">
|
||||||
Revenue
|
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
PE Ratio
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Revenue"}
|
title={"PE Ratio"}
|
||||||
content={"The total revenue of all companies in this sector."}
|
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
||||||
id={"revenueInfo"}
|
id={"peRatioInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -165,12 +168,12 @@
|
|||||||
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
|
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
|
<th class="text-white font-semibold text-[1rem]">Company</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
|
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
|
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -179,46 +182,38 @@
|
|||||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||||
|
|
||||||
|
|
||||||
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
|
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
{item?.symbol}
|
{item?.symbol}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||||
<div class="sm:hidden flex flex-row">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-blue-400 font-medium">{item?.symbol}</span>
|
|
||||||
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-end border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||||
{abbreviateNumber(item?.marketCap,true)}
|
{abbreviateNumber(item?.marketCap,true)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<div class="flex flex-row justify-end items-center">
|
<div class="flex flex-row justify-end items-center">
|
||||||
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
|
<span class="text-white ml-auto">${item.price?.toFixed(2)}</span>
|
||||||
<div class="flex flex-row mt-0.5 ml-auto">
|
<div class="flex flex-row mt-0.5 ml-auto">
|
||||||
{#if item.changesPercentage >=0}
|
{#if item.changesPercentage >=0}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
|
||||||
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
|
||||||
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -238,12 +233,10 @@
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -1,24 +1,8 @@
|
|||||||
import { userRegion, getCache, setCache } from '$lib/store';
|
import { getCache, setCache } from '$lib/store';
|
||||||
|
|
||||||
|
|
||||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
|
||||||
|
|
||||||
let apiURL;
|
|
||||||
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
|
|
||||||
|
|
||||||
|
|
||||||
userRegion.subscribe(value => {
|
|
||||||
|
|
||||||
if (usRegion.includes(value)) {
|
|
||||||
apiURL = import.meta.env.VITE_USEAST_API_URL;
|
|
||||||
} else {
|
|
||||||
apiURL = import.meta.env.VITE_EU_API_URL;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const load = async () => {
|
export const load = async ({parent}) => {
|
||||||
const getTechnologySector = async () => {
|
const getTechnologySector = async () => {
|
||||||
let output;
|
let output;
|
||||||
|
|
||||||
@ -28,6 +12,8 @@ export const load = async () => {
|
|||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
const {apiKey, apiURL} = await parent();
|
||||||
|
|
||||||
const postData = {'filterList': 'technology'}
|
const postData = {'filterList': 'technology'}
|
||||||
|
|
||||||
const response = await fetch(apiURL + '/filter-stock-list', {
|
const response = await fetch(apiURL + '/filter-stock-list', {
|
||||||
|
|||||||
@ -2,27 +2,31 @@
|
|||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { screenWidth } from '$lib/store';
|
import { screenWidth } from '$lib/store';
|
||||||
import { abbreviateNumber} from '$lib/utils';
|
import { abbreviateNumber} from '$lib/utils';
|
||||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let rawData = data?.getUtilitiesSector;
|
let rawData = data?.getUtilitiesSector;
|
||||||
let marketCapList = rawData?.slice(0,50);
|
let marketCapList = rawData?.slice(0,50);
|
||||||
|
|
||||||
|
|
||||||
async function infiniteHandler({ detail: { loaded, complete } })
|
async function handleScroll() {
|
||||||
{
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
|
if (isBottom && displayList?.length !== rawData?.length) {
|
||||||
|
const nextIndex = displayList?.length;
|
||||||
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
|
displayList = [...displayList, ...filteredNewResults];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
if (marketCapList?.length === rawData?.length) {
|
|
||||||
complete();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const nextIndex = marketCapList?.length;
|
|
||||||
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
|
|
||||||
marketCapList = [...marketCapList, ...newElements];
|
|
||||||
loaded();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||||
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||||
@ -42,118 +46,117 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-full max-w-4xl overflow-hidden m-auto">
|
<section class="w-full overflow-hidden m-auto">
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
<div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
|
||||||
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||||
|
|
||||||
A complete list of companies in the Utilities Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Utilities Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#09090B] shadow w-full rounded-lg">
|
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
||||||
|
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-3">
|
<div class="grid grid-cols-2 sm:grid-cols-4">
|
||||||
|
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
Stocks
|
Stocks
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Stocks"}
|
|
||||||
content={"The total number of companies who operates in this sector."}
|
|
||||||
id={"stocksInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Market Cap"}
|
title={"Stocks"}
|
||||||
content={"Combined market cap of all companies in this sector."}
|
content={"The total number of companies who operates in this sector."}
|
||||||
id={"marketCapModal"}
|
id={"stocksInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Market Cap
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Revenue
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profits
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
Profit Margin
|
||||||
|
</label>
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
<div class="stat">
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<div class="flex flex-row items-center">
|
||||||
Revenue
|
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
||||||
|
PE Ratio
|
||||||
</label>
|
</label>
|
||||||
<InfoModal
|
<InfoModal
|
||||||
title={"Revenue"}
|
title={"PE Ratio"}
|
||||||
content={"The total revenue of all companies in this sector."}
|
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
||||||
id={"revenueInfo"}
|
id={"peRatioInfo"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -165,12 +168,12 @@
|
|||||||
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
|
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
|
<th class="text-white font-semibold text-[1rem]">Company</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
|
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
|
||||||
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
|
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
|
||||||
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
|
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -179,46 +182,38 @@
|
|||||||
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||||
|
|
||||||
|
|
||||||
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
|
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
{item?.symbol}
|
{item?.symbol}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||||
<div class="sm:hidden flex flex-row">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-blue-400 font-medium">{item?.symbol}</span>
|
|
||||||
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-end border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
|
||||||
{abbreviateNumber(item?.marketCap,true)}
|
{abbreviateNumber(item?.marketCap,true)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
|
||||||
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
<td class="text-gray-200 border-b-[#09090B]">
|
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||||
<div class="flex flex-row justify-end items-center">
|
<div class="flex flex-row justify-end items-center">
|
||||||
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
|
<span class="text-white ml-auto">${item.price?.toFixed(2)}</span>
|
||||||
<div class="flex flex-row mt-0.5 ml-auto">
|
<div class="flex flex-row mt-0.5 ml-auto">
|
||||||
{#if item.changesPercentage >=0}
|
{#if item.changesPercentage >=0}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
|
||||||
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
|
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
|
||||||
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -238,10 +233,10 @@
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,24 +1,7 @@
|
|||||||
import { userRegion, getCache, setCache } from '$lib/store';
|
import { getCache, setCache } from '$lib/store';
|
||||||
|
|
||||||
|
|
||||||
const usRegion = ['cle1','iad1','pdx1','sfo1'];
|
export const load = async ({parent}) => {
|
||||||
|
|
||||||
let apiURL;
|
|
||||||
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
|
|
||||||
|
|
||||||
|
|
||||||
userRegion.subscribe(value => {
|
|
||||||
|
|
||||||
if (usRegion.includes(value)) {
|
|
||||||
apiURL = import.meta.env.VITE_USEAST_API_URL;
|
|
||||||
} else {
|
|
||||||
apiURL = import.meta.env.VITE_EU_API_URL;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const load = async () => {
|
|
||||||
const getUtilitiesSector = async () => {
|
const getUtilitiesSector = async () => {
|
||||||
let output;
|
let output;
|
||||||
|
|
||||||
@ -28,6 +11,8 @@ export const load = async () => {
|
|||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
const {apiKey, apiURL} = await parent();
|
||||||
|
|
||||||
const postData = {'filterList': 'utilities'}
|
const postData = {'filterList': 'utilities'}
|
||||||
|
|
||||||
const response = await fetch(apiURL + '/filter-stock-list', {
|
const response = await fetch(apiURL + '/filter-stock-list', {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user