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

fix lists layout

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-12 13:24:40 +02:00
parent 72855c6d88
commit 761992ada2
26 changed files with 1358 additions and 1606 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/routes/list/basic-materials-sector/+page.svelte
View File

@ -2,27 +2,31 @@
import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import InfoModal from '$lib/components/InfoModal.svelte';
import { onMount } from 'svelte';
export let data;
let rawData = data?.getBasicMaterialsSector;
let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } })
{
if (marketCapList?.length === rawData?.length) {
complete();
}
else {
const nextIndex = marketCapList?.length;
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
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);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
@ -42,17 +46,17 @@
}
</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">
<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>
<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>
A complete list of companies in the Basic Materials Sector that are publicly traded on the US stock exchange.
</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="flex flex-row items-center">
@ -152,7 +156,7 @@
<!-- 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 ">
<thead>
<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-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">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-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">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]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr>
</thead>
<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">
<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}
</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>
<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 class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</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)}
</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) : '-'}
</td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td>
<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) : '-'}
</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-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">
{#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] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
{: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] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>
@ -236,12 +232,11 @@
</tbody>
</table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
</section>

22
src/routes/list/basic-materials-sector/+page.ts
View File

@ -1,24 +1,8 @@
import { userRegion, 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;
}
});
import { getCache, setCache } from '$lib/store';
export const load = async () => {
export const load = async ({parent}) => {
const getBasicMaterialsSector = async () => {
let output;
@ -28,6 +12,8 @@ export const load = async () => {
output = cachedData;
} else {
const {apiKey, apiURL} = await parent();
const postData = {'filterList': 'basic-materials'};
const response = await fetch(apiURL + '/filter-stock-list', {

4
src/routes/list/bitcoin-etfs/+page.svelte
View File

@ -29,13 +29,13 @@ $: {
<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>
A list of all Bitcoin ETFs available for trading on the US stock market, offering investors exposure to the cryptocurrency's price.
</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-title text-sm sm:text-lg font-semibold text-white">Total ETFs</div>

23
src/routes/list/bitcoin-etfs/+page.ts
View File

@ -1,24 +1,9 @@
import { userRegion, 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;
}
});
import { getCache, setCache } from '$lib/store';
export const load = async () => {
export const load = async ({parent}) => {
const getETFBitcoinList = async () => {
let output;
@ -27,6 +12,8 @@ export const load = async () => {
if (cachedData) {
output = cachedData;
} else {
const {apiKey, apiURL} = await parent();
const response = await fetch(apiURL + '/etf-bitcoin-list', {
method: 'GET',

271
src/routes/list/communication-services-sector/+page.svelte
View File

@ -2,27 +2,31 @@
import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import InfoModal from '$lib/components/InfoModal.svelte';
import { onMount } from 'svelte';
export let data;
let rawData = data?.getCommunicationServicesSector;
let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } })
{
if (marketCapList?.length === rawData?.length) {
complete();
}
else {
const nextIndex = marketCapList?.length;
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
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);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
@ -42,118 +46,117 @@
}
</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>
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="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
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
<div class="grid grid-cols-2 sm:grid-cols-4">
<div class="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
Stocks
</label>
<InfoModal
title={"Market Cap"}
content={"Combined market cap of all companies in this sector."}
id={"marketCapModal"}
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>
<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 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
<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={"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 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>
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>
<!-- 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 ">
<thead>
<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-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">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-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">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]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr>
</thead>
<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">
<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}
</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>
<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 class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</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)}
</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) : '-'}
</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) : '-'}
</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-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">
{#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] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
{: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] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>
@ -237,9 +232,11 @@
</tbody>
</table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
</div>
</section>
</section>

22
src/routes/list/communication-services-sector/+page.ts
View File

@ -1,24 +1,7 @@
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 getCommunicationServicesSector = async () => {
let output;
@ -27,6 +10,7 @@ export const load = async () => {
if (cachedData) {
output = cachedData;
} else {
const {apiKey, apiURL} = await parent();
const postData = {'filterList': 'communication-services'};

267
src/routes/list/consumer-cyclical-sector/+page.svelte
View File

@ -2,27 +2,31 @@
import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import InfoModal from '$lib/components/InfoModal.svelte';
import { onMount } from 'svelte';
export let data;
let rawData = data?.getConsumerCyclicalSector;
let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } })
{
if (marketCapList?.length === rawData?.length) {
complete();
}
else {
const nextIndex = marketCapList?.length;
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
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);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
@ -42,118 +46,117 @@
}
</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>
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="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
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
<div class="grid grid-cols-2 sm:grid-cols-4">
<div class="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
Stocks
</label>
<InfoModal
title={"Market Cap"}
content={"Combined market cap of all companies in this sector."}
id={"marketCapModal"}
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>
<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 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
<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={"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 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>
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>
<!-- 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 ">
<thead>
<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-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">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-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">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]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr>
</thead>
<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">
<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}
</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>
<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 class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</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)}
</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) : '-'}
</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) : '-'}
</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-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">
{#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] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
{: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] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>
@ -236,12 +232,11 @@
</tbody>
</table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
</section>

22
src/routes/list/consumer-cyclical-sector/+page.ts
View File

@ -1,24 +1,8 @@
import { userRegion, 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;
}
});
import {getCache, setCache } from '$lib/store';
export const load = async () => {
export const load = async ({parent}) => {
const getConsumerCyclicalSector = async () => {
let output;
@ -27,7 +11,7 @@ export const load = async () => {
if (cachedData) {
output = cachedData;
} else {
const {apiKey, apiURL} = await parent();
const postData = {'filterList': 'consumer-cyclical'}
const response = await fetch(apiURL + '/filter-stock-list', {

272
src/routes/list/consumer-defensive-sector/+page.svelte
View File

@ -2,27 +2,31 @@
import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import InfoModal from '$lib/components/InfoModal.svelte';
import { onMount } from 'svelte';
export let data;
let rawData = data?.getConsumerDefensiveSector;
let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } })
{
if (marketCapList?.length === rawData?.length) {
complete();
}
else {
const nextIndex = marketCapList?.length;
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
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);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
@ -42,118 +46,117 @@
}
</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>
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="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
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
<div class="grid grid-cols-2 sm:grid-cols-4">
<div class="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
Stocks
</label>
<InfoModal
title={"Market Cap"}
content={"Combined market cap of all companies in this sector."}
id={"marketCapModal"}
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>
<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 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
<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={"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 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>
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>
<!-- 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 ">
<thead>
<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-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">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-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">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]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr>
</thead>
<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">
<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}
</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>
<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 class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</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)}
</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) : '-'}
</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) : '-'}
</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-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">
{#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] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
{: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] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>
@ -237,8 +232,11 @@
</tbody>
</table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
</section>
</div>
</section>

23
src/routes/list/consumer-defensive-sector/+page.ts
View File

@ -1,24 +1,9 @@
import { userRegion, 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;
}
});
import { getCache, setCache } from '$lib/store';
export const load = async () => {
export const load = async ({parent}) => {
const getConsumerDefensiveSector = async () => {
let output;
@ -28,6 +13,8 @@ export const load = async () => {
output = cachedData;
} else {
const {apiKey, apiURL} = await parent();
const postData = {'filterList': 'consumer-defensive'};
const response = await fetch(apiURL + '/filter-stock-list', {

70
src/routes/list/delisted-stocks/+page.svelte
View File

@ -1,26 +1,28 @@
<script lang='ts'>
import { screenWidth } from '$lib/store';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import { onMount } from 'svelte';
export let data;
let rawData = data?.getDelistedStocks;
let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } })
{
if (marketCapList?.length === rawData?.length) {
complete();
}
else {
const nextIndex = marketCapList?.length;
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
async function handleScroll() {
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (isBottom && marketCapList?.length !== rawData?.length) {
const nextIndex = marketCapList?.length;
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
marketCapList = [...marketCapList, ...filteredNewResults];
}
}
}
onMount(async () => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
})
let charNumber = 40;
$: {
@ -34,17 +36,17 @@ $: {
}
</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>
A list of companies delisted from the exchange and no longer publicly traded.
</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-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
@ -66,7 +68,7 @@ $: {
<!-- 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>
<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-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">IPO</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">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]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-[1rem]">IPO</th>
<th class="text-white font-semibold text-center text-[1rem]">Exchange</th>
<th class="text-white font-semibold text-[1rem] text-end">Delisted</th>
</tr>
</thead>
<tbody>
{#each marketCapList as item,index}
<!-- row -->
<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}
</td>
<td class="text-gray-200 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>
<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 class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.companyName?.length > charNumber ? item?.companyName?.slice(0,charNumber) + "..." : item?.companyName}
</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' })}
</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}
</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' })}
</td>
@ -128,8 +124,6 @@ $: {
</table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>

22
src/routes/list/delisted-stocks/+page.ts
View File

@ -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;
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 getDelistedStocks = async () => {
let output;
@ -27,7 +12,8 @@ export const load = async () => {
output = cachedData;
} else {
const {apiKey, apiURL} = await parent();
const response = await fetch(apiURL + '/delisted-companies', {
method: 'GET',
headers: {

274
src/routes/list/energy-sector/+page.svelte
View File

@ -2,27 +2,31 @@
import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import InfoModal from '$lib/components/InfoModal.svelte';
import { onMount } from 'svelte';
export let data;
let rawData = data?.getEnergySector;
let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } })
{
if (marketCapList?.length === rawData?.length) {
complete();
}
else {
const nextIndex = marketCapList?.length;
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
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);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
@ -42,118 +46,117 @@
}
</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>
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="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
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
<div class="grid grid-cols-2 sm:grid-cols-4">
<div class="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
Stocks
</label>
<InfoModal
title={"Market Cap"}
content={"Combined market cap of all companies in this sector."}
id={"marketCapModal"}
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>
<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 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
<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={"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 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>
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>
<!-- 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>
<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-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">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-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">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]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr>
</thead>
<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">
<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}
</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>
<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 class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</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)}
</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) : '-'}
</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) : '-'}
</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-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">
{#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] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
{: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] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>
@ -237,8 +232,11 @@
</tbody>
</table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
</section>
</div>
</section>

23
src/routes/list/energy-sector/+page.ts
View File

@ -1,24 +1,7 @@
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 getEnergySector = async () => {
let output;
@ -28,6 +11,8 @@ export const load = async () => {
output = cachedData;
} else {
const {apiKey, apiURL} = await parent();
const postData = {'filterList': 'energy'}
const response = await fetch(apiURL + '/filter-stock-list', {

80
src/routes/list/financial-sector/+page.svelte
View File

@ -2,27 +2,31 @@
import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import InfoModal from '$lib/components/InfoModal.svelte';
import { onMount } from 'svelte';
export let data;
let rawData = data?.getFinancialSector;
let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } })
{
if (marketCapList?.length === rawData?.length) {
complete();
}
else {
const nextIndex = marketCapList?.length;
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
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);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 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">
<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>
A complete list of companies in the Financial Sector that are publicly traded on the US stock exchange.
</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">
@ -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 ">
<thead>
<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-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">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-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">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]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr>
</thead>
<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">
<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}
</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>
<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 class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</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)}
</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) : '-'}
</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) : '-'}
</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-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">
{#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] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
{: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] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>
@ -236,9 +232,7 @@
</tbody>
</table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>

22
src/routes/list/financial-sector/+page.ts
View File

@ -1,24 +1,8 @@
import { userRegion, 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;
}
});
import { getCache, setCache } from '$lib/store';
export const load = async () => {
export const load = async ({parent}) => {
const getFinancialSector = async () => {
let output;
@ -28,6 +12,8 @@ export const load = async () => {
output = cachedData;
} else {
const {apiKey, apiURL} = await parent();
const postData = {'filterList': 'financial'}
const response = await fetch(apiURL + '/filter-stock-list', {

268
src/routes/list/healthcare-sector/+page.svelte
View File

@ -2,27 +2,31 @@
import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import InfoModal from '$lib/components/InfoModal.svelte';
import { onMount } from 'svelte';
export let data;
let rawData = data?.getHealthcareSector;
let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } })
{
if (marketCapList?.length === rawData?.length) {
complete();
}
else {
const nextIndex = marketCapList?.length;
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
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);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
@ -42,134 +46,134 @@
}
</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>
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="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
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
<div class="grid grid-cols-2 sm:grid-cols-4">
<div class="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
Stocks
</label>
<InfoModal
title={"Market Cap"}
content={"Combined market cap of all companies in this sector."}
id={"marketCapModal"}
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>
<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 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
<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={"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 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>
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>
<!-- 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">
<!-- Content area -->
<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>
<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-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">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-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">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]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr>
</thead>
<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">
<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}
</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>
<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 class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</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)}
</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) : '-'}
</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) : '-'}
</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-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">
{#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] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
{: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] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>
@ -234,11 +230,9 @@
{/each}
</tbody>
</table>
</table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>

22
src/routes/list/healthcare-sector/+page.ts
View File

@ -1,24 +1,7 @@
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 getHealthcareSector = async () => {
let output;
@ -27,6 +10,7 @@ export const load = async () => {
if (cachedData) {
output = cachedData;
} else {
const {apiKey, apiURL} = await parent();
const postData = {'filterList': 'healthcare'}

269
src/routes/list/industrials-sector/+page.svelte
View File

@ -2,27 +2,31 @@
import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import InfoModal from '$lib/components/InfoModal.svelte';
import { onMount } from 'svelte';
export let data;
let rawData = data?.getIndustrialsSector;
let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } })
{
if (marketCapList?.length === rawData?.length) {
complete();
}
else {
const nextIndex = marketCapList?.length;
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
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);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
@ -42,118 +46,117 @@
}
</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>
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="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
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
<div class="grid grid-cols-2 sm:grid-cols-4">
<div class="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
Stocks
</label>
<InfoModal
title={"Market Cap"}
content={"Combined market cap of all companies in this sector."}
id={"marketCapModal"}
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>
<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 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
<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={"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 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>
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>
<!-- 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>
<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-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">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-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">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]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr>
</thead>
<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">
<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}
</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>
<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 class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</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)}
</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) : '-'}
</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) : '-'}
</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-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">
{#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] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
{: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] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>
@ -237,13 +232,11 @@
</tbody>
</table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
</section>
</section>

23
src/routes/list/industrials-sector/+page.ts
View File

@ -1,24 +1,9 @@
import { userRegion, 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;
}
});
import { getCache, setCache } from '$lib/store';
export const load = async () => {
export const load = async ({parent}) => {
const getIndustrialsSector = async () => {
let output;
@ -28,6 +13,8 @@ export const load = async () => {
output = cachedData;
} else {
const {apiKey, apiURL} = await parent();
const postData = {'filterList': 'industrials'}
const response = await fetch(apiURL + '/filter-stock-list', {

268
src/routes/list/real-estate-sector/+page.svelte
View File

@ -2,27 +2,31 @@
import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import InfoModal from '$lib/components/InfoModal.svelte';
import { onMount } from 'svelte';
export let data;
let rawData = data?.getRealEstateSector;
let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } })
{
if (marketCapList?.length === rawData?.length) {
complete();
}
else {
const nextIndex = marketCapList?.length;
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
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);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
@ -42,118 +46,117 @@
}
</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>
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="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
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
<div class="grid grid-cols-2 sm:grid-cols-4">
<div class="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
Stocks
</label>
<InfoModal
title={"Market Cap"}
content={"Combined market cap of all companies in this sector."}
id={"marketCapModal"}
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>
<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 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
<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={"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 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>
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>
<!-- 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 ">
<thead>
<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-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">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-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">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]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr>
</thead>
<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">
<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}
</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>
<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 class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</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)}
</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) : '-'}
</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) : '-'}
</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-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">
{#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] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
{: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] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>
@ -237,12 +232,11 @@
</tbody>
</table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
</section>
</section>

23
src/routes/list/real-estate-sector/+page.ts
View File

@ -1,24 +1,7 @@
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 getRealEstateSector = async () => {
let output;
@ -28,6 +11,8 @@ export const load = async () => {
output = cachedData;
} else {
const {apiKey, apiURL} = await parent();
const postData = {'filterList': 'real-estate'}
const response = await fetch(apiURL + '/filter-stock-list', {
method: 'POST',

267
src/routes/list/technology-sector/+page.svelte
View File

@ -2,27 +2,31 @@
import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import InfoModal from '$lib/components/InfoModal.svelte';
import { onMount } from 'svelte';
export let data;
let rawData = data?.getTechnologySector;
let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } })
{
if (marketCapList?.length === rawData?.length) {
complete();
}
else {
const nextIndex = marketCapList?.length;
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
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);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
@ -42,118 +46,117 @@
}
</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>
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="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
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
<div class="grid grid-cols-2 sm:grid-cols-4">
<div class="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
Stocks
</label>
<InfoModal
title={"Market Cap"}
content={"Combined market cap of all companies in this sector."}
id={"marketCapModal"}
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>
<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 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
<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={"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 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>
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>
<!-- 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 ">
<thead>
<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-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">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-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">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]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr>
</thead>
<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">
<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}
</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>
<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 class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</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)}
</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) : '-'}
</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) : '-'}
</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-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">
{#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] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
{: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] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>
@ -237,13 +232,11 @@
</tbody>
</table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
</section>
</section>

22
src/routes/list/technology-sector/+page.ts
View File

@ -1,24 +1,8 @@
import { userRegion, 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;
}
});
import { getCache, setCache } from '$lib/store';
export const load = async () => {
export const load = async ({parent}) => {
const getTechnologySector = async () => {
let output;
@ -28,6 +12,8 @@ export const load = async () => {
output = cachedData;
} else {
const {apiKey, apiURL} = await parent();
const postData = {'filterList': 'technology'}
const response = await fetch(apiURL + '/filter-stock-list', {

269
src/routes/list/utilities-sector/+page.svelte
View File

@ -2,27 +2,31 @@
import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import InfoModal from '$lib/components/InfoModal.svelte';
import { onMount } from 'svelte';
export let data;
let rawData = data?.getUtilitiesSector;
let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } })
{
if (marketCapList?.length === rawData?.length) {
complete();
}
else {
const nextIndex = marketCapList?.length;
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
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);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
@ -42,118 +46,117 @@
}
</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>
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="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
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
<div class="grid grid-cols-2 sm:grid-cols-4">
<div class="stat">
<div class="flex flex-row items-center">
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
Stocks
</label>
<InfoModal
title={"Market Cap"}
content={"Combined market cap of all companies in this sector."}
id={"marketCapModal"}
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>
<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 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
<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={"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 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>
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>
<!-- 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 ">
<thead>
<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-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">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-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">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]">Symbol</th>
<th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr>
</thead>
<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">
<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}
</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>
<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 class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</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)}
</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) : '-'}
</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) : '-'}
</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-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">
{#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] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06]">+{item.changesPercentage?.toFixed(2)}%</span>
{: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] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F]">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>
@ -237,11 +232,11 @@
</tbody>
</table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
</section>
</section>

23
src/routes/list/utilities-sector/+page.ts
View File

@ -1,24 +1,7 @@
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 getUtilitiesSector = async () => {
let output;
@ -28,6 +11,8 @@ export const load = async () => {
output = cachedData;
} else {
const {apiKey, apiURL} = await parent();
const postData = {'filterList': 'utilities'}
const response = await fetch(apiURL + '/filter-stock-list', {