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

fix lists

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-11 23:35:31 +02:00
parent f96790ec70
commit 9c2f81e462
16 changed files with 325 additions and 482 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/routes/list/canadian-stocks-us/+page.svelte
View File

@ -2,26 +2,30 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store'; import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils'; import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import { onMount } from 'svelte';
export let data; export let data;
let rawData = data?.getCanadianStocksUS; let rawData = data?.getCanadianStocksUS;
let marketCapList = rawData?.slice(0,50); let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } }) async function handleScroll() {
{ const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (marketCapList?.length === rawData?.length) { if (isBottom && marketCapList?.length !== rawData?.length) {
complete(); const nextIndex = marketCapList?.length;
} const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
else { marketCapList = [...marketCapList, ...filteredNewResults];
const nextIndex = marketCapList?.length; }
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
}
} }
onMount(async () => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0); let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0); let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0; let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
@ -39,11 +43,11 @@
} }
</script> </script>
<section class="w-full max-w-4xl overflow-hidden m-auto"> <section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"> <div class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg> <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
A complete list of the Canadian companies that are listed on the US stock market. A complete list of the Canadian companies that are listed on the US stock market.
</div> </div>
@ -76,7 +80,7 @@
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
@ -85,52 +89,46 @@
<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 table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead> <thead>
<tr class="border border-slate-800"> <tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th> <th class="text-white font-semibold text-[1rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th> <th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th> <th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th> <th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th> <th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th> <th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each marketCapList as item,index} {#each marketCapList as item}
<!-- row --> <!-- row -->
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]"> <td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol} {item?.symbol}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span> {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
</td> </td>
<td class="text-white font-medium text-end border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{abbreviateNumber(item?.marketCap,true)} {abbreviateNumber(item?.marketCap,true)}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'} {item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'} {item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<div class="flex flex-row justify-end items-center"> <div class="flex flex-row justify-end items-center">
<div class="flex flex-col"> <div class="flex flex-col">
@ -138,10 +136,10 @@
<div class="flex flex-row mt-0.5 ml-auto"> <div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0} {#if item.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg> <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} {: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> <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} {/if}
</div> </div>
</div> </div>
@ -161,8 +159,6 @@
</table> </table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div> </div>

23
src/routes/list/canadian-stocks-us/+page.ts
View File

@ -1,24 +1,9 @@
import { userRegion, getCache, setCache } from '$lib/store'; import { getCache, setCache } from '$lib/store';
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let apiURL;
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
userRegion.subscribe(value => {
if (usRegion.includes(value)) {
apiURL = import.meta.env.VITE_USEAST_API_URL;
} else {
apiURL = import.meta.env.VITE_EU_API_URL;
}
});
export const load = async () => {
export const load = async ({parent}) => {
const getCanadianStocksUS = async () => { const getCanadianStocksUS = async () => {
let output; let output;
@ -28,6 +13,8 @@ export const load = async () => {
output = cachedData; output = cachedData;
} else { } else {
const{ apiURL, apiKey} = await parent();
const postData = {'filterList': 'CA'} const postData = {'filterList': 'CA'}
const response = await fetch(apiURL + '/filter-stock-list', { const response = await fetch(apiURL + '/filter-stock-list', {

79
src/routes/list/chinese-stocks-us/+page.svelte
View File

@ -2,26 +2,30 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store'; import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils'; import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import { onMount } from 'svelte';
export let data; export let data;
let rawData = data?.getChineseStocksUS; let rawData = data?.getChineseStocksUS;
let marketCapList = rawData?.slice(0,50); let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } }) async function handleScroll() {
{ const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (marketCapList?.length === rawData?.length) { if (isBottom && marketCapList?.length !== rawData?.length) {
complete(); const nextIndex = marketCapList?.length;
} const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
else { marketCapList = [...marketCapList, ...filteredNewResults];
const nextIndex = marketCapList?.length; }
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
}
} }
onMount(async () => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0); let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0); let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0; let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
@ -39,10 +43,11 @@
} }
</script> </script>
<section class="w-full max-w-4xl overflow-hidden m-auto"> <section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
<div class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg> <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
A complete list of the Chinese companies that are listed on the US stock market. A complete list of the Chinese companies that are listed on the US stock market.
</div> </div>
@ -75,7 +80,7 @@
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
@ -84,52 +89,46 @@
<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 table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead> <thead>
<tr class="border border-slate-800"> <tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th> <th class="text-white font-semibold text-[1rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th> <th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th> <th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th> <th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th> <th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th> <th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each marketCapList as item,index} {#each marketCapList as item}
<!-- row --> <!-- row -->
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]"> <td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol} {item?.symbol}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span> {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
</td> </td>
<td class="text-white font-medium text-end border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{abbreviateNumber(item?.marketCap,true)} {abbreviateNumber(item?.marketCap,true)}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'} {item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'} {item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<div class="flex flex-row justify-end items-center"> <div class="flex flex-row justify-end items-center">
<div class="flex flex-col"> <div class="flex flex-col">
@ -137,10 +136,10 @@
<div class="flex flex-row mt-0.5 ml-auto"> <div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0} {#if item.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg> <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} {: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> <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} {/if}
</div> </div>
</div> </div>
@ -160,8 +159,6 @@
</table> </table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div> </div>

23
src/routes/list/chinese-stocks-us/+page.ts
View File

@ -1,24 +1,9 @@
import { userRegion, getCache, setCache } from '$lib/store'; import { getCache, setCache } from '$lib/store';
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let apiURL;
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
userRegion.subscribe(value => {
if (usRegion.includes(value)) {
apiURL = import.meta.env.VITE_USEAST_API_URL;
} else {
apiURL = import.meta.env.VITE_EU_API_URL;
}
});
export const load = async () => {
export const load = async ({parent}) => {
const getChineseStocksUS = async () => { const getChineseStocksUS = async () => {
let output; let output;
@ -28,6 +13,8 @@ export const load = async () => {
output = cachedData; output = cachedData;
} else { } else {
const{ apiURL, apiKey} = await parent();
const postData = {'filterList': 'CN'} const postData = {'filterList': 'CN'}
const response = await fetch(apiURL + '/filter-stock-list', { const response = await fetch(apiURL + '/filter-stock-list', {

78
src/routes/list/german-stocks-us/+page.svelte
View File

@ -2,26 +2,30 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store'; import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils'; import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import { onMount } from 'svelte';
export let data; export let data;
let rawData = data?.getGermanStocksUS; let rawData = data?.getGermanStocksUS;
let marketCapList = rawData?.slice(0,50); let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } }) async function handleScroll() {
{ const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (marketCapList?.length === rawData?.length) { if (isBottom && marketCapList?.length !== rawData?.length) {
complete(); const nextIndex = marketCapList?.length;
} const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
else { marketCapList = [...marketCapList, ...filteredNewResults];
const nextIndex = marketCapList?.length; }
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
}
} }
onMount(async () => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0); let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0); let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0; let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
@ -39,11 +43,11 @@
} }
</script> </script>
<section class="w-full max-w-4xl overflow-hidden m-auto"> <section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"> <div class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg> <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
A complete list of the German companies that are listed on the US stock market. A complete list of the German companies that are listed on the US stock market.
</div> </div>
@ -76,7 +80,7 @@
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
@ -85,52 +89,46 @@
<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 table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead> <thead>
<tr class="border border-slate-800"> <tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th> <th class="text-white font-semibold text-[1rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th> <th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th> <th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th> <th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th> <th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th> <th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each marketCapList as item,index} {#each marketCapList as item}
<!-- row --> <!-- row -->
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]"> <td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol} {item?.symbol}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span> {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
</td> </td>
<td class="text-white font-medium text-end border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{abbreviateNumber(item?.marketCap,true)} {abbreviateNumber(item?.marketCap,true)}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'} {item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'} {item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<div class="flex flex-row justify-end items-center"> <div class="flex flex-row justify-end items-center">
<div class="flex flex-col"> <div class="flex flex-col">
@ -138,10 +136,10 @@
<div class="flex flex-row mt-0.5 ml-auto"> <div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0} {#if item.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg> <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} {: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> <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} {/if}
</div> </div>
</div> </div>
@ -161,8 +159,6 @@
</table> </table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div> </div>

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

@ -1,24 +1,8 @@
import { userRegion, getCache, setCache } from '$lib/store'; import { getCache, setCache } from '$lib/store';
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let apiURL;
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
userRegion.subscribe(value => {
if (usRegion.includes(value)) {
apiURL = import.meta.env.VITE_USEAST_API_URL;
} else {
apiURL = import.meta.env.VITE_EU_API_URL;
}
});
export const load = async () => { export const load = async ({parent}) => {
const getGermanStocksUS = async () => { const getGermanStocksUS = async () => {
let output; let output;
@ -28,6 +12,8 @@ export const load = async () => {
output = cachedData; output = cachedData;
} else { } else {
const{ apiURL, apiKey} = await parent();
const postData = {'filterList': 'DE'} const postData = {'filterList': 'DE'}
const response = await fetch(apiURL + '/filter-stock-list', { const response = await fetch(apiURL + '/filter-stock-list', {

80
src/routes/list/indian-stocks-us/+page.svelte
View File

@ -2,26 +2,30 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store'; import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils'; import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import { onMount } from 'svelte';
export let data; export let data;
let rawData = data?.getIndianStocksUS; let rawData = data?.getIndianStocksUS;
let marketCapList = rawData?.slice(0,50); let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } }) async function handleScroll() {
{ const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (marketCapList?.length === rawData?.length) { if (isBottom && marketCapList?.length !== rawData?.length) {
complete(); const nextIndex = marketCapList?.length;
} const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
else { marketCapList = [...marketCapList, ...filteredNewResults];
const nextIndex = marketCapList?.length; }
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
}
} }
onMount(async () => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0); let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0); let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0; let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
@ -39,13 +43,13 @@
} }
</script> </script>
<section class="w-full max-w-4xl overflow-hidden m-auto"> <section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"> <div class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg> <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
A complete list of the Indian companies that are listed on the US stock market. A complete list of the Indian companies that are listed on the US stock market.
</div> </div>
@ -76,7 +80,7 @@
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
@ -85,52 +89,46 @@
<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 table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead> <thead>
<tr class="border border-slate-800"> <tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th> <th class="text-white font-semibold text-[1rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th> <th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th> <th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th> <th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th> <th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th> <th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each marketCapList as item,index} {#each marketCapList as item}
<!-- row --> <!-- row -->
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]"> <td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol} {item?.symbol}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span> {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
</td> </td>
<td class="text-white font-medium text-end border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{abbreviateNumber(item?.marketCap,true)} {abbreviateNumber(item?.marketCap,true)}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'} {item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'} {item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<div class="flex flex-row justify-end items-center"> <div class="flex flex-row justify-end items-center">
<div class="flex flex-col"> <div class="flex flex-col">
@ -138,10 +136,10 @@
<div class="flex flex-row mt-0.5 ml-auto"> <div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0} {#if item.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg> <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} {: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> <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} {/if}
</div> </div>
</div> </div>
@ -161,8 +159,6 @@
</table> </table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div> </div>

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

@ -1,24 +1,8 @@
import { userRegion, getCache, setCache } from '$lib/store'; import { getCache, setCache } from '$lib/store';
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let apiURL;
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
userRegion.subscribe(value => {
if (usRegion.includes(value)) {
apiURL = import.meta.env.VITE_USEAST_API_URL;
} else {
apiURL = import.meta.env.VITE_EU_API_URL;
}
});
export const load = async () => { export const load = async ({parent}) => {
const getIndianStocksUS = async () => { const getIndianStocksUS = async () => {
let output; let output;
@ -28,6 +12,8 @@ export const load = async () => {
output = cachedData; output = cachedData;
} else { } else {
const{ apiURL, apiKey} = await parent();
const postData = {'filterList': 'IN'} const postData = {'filterList': 'IN'}
const response = await fetch(apiURL + '/filter-stock-list', { const response = await fetch(apiURL + '/filter-stock-list', {

82
src/routes/list/israeli-stocks-us/+page.svelte
View File

@ -2,26 +2,30 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store'; import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils'; import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import { onMount } from 'svelte';
export let data; export let data;
let rawData = data?.getIsraeliStocksUS; let rawData = data?.getIsraeliStocksUS;
let marketCapList = rawData?.slice(0,50); let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } }) async function handleScroll() {
{ const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (marketCapList?.length === rawData?.length) { if (isBottom && marketCapList?.length !== rawData?.length) {
complete(); const nextIndex = marketCapList?.length;
} const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
else { marketCapList = [...marketCapList, ...filteredNewResults];
const nextIndex = marketCapList?.length; }
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
}
} }
onMount(async () => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0); let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0); let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0; let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
@ -39,13 +43,13 @@
} }
</script> </script>
<section class="w-full max-w-4xl overflow-hidden m-auto"> <section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"> <div class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg> <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
A complete list of the Israeli companies that are listed on the US stock market. A complete list of the Israeli companies that are listed on the US stock market.
</div> </div>
@ -76,7 +80,7 @@
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
@ -85,52 +89,46 @@
<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 table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead> <thead>
<tr class="border border-slate-800"> <tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th> <th class="text-white font-semibold text-[1rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th> <th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th> <th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th> <th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th> <th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th> <th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each marketCapList as item,index} {#each marketCapList as item}
<!-- row --> <!-- row -->
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]"> <td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol} {item?.symbol}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span> {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
</td> </td>
<td class="text-white font-medium text-end border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{abbreviateNumber(item?.marketCap,true)} {abbreviateNumber(item?.marketCap,true)}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'} {item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'} {item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<div class="flex flex-row justify-end items-center"> <div class="flex flex-row justify-end items-center">
<div class="flex flex-col"> <div class="flex flex-col">
@ -138,10 +136,10 @@
<div class="flex flex-row mt-0.5 ml-auto"> <div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0} {#if item.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg> <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} {: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> <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} {/if}
</div> </div>
</div> </div>
@ -161,8 +159,6 @@
</table> </table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div> </div>

20
src/routes/list/israeli-stocks-us/+page.ts
View File

@ -1,23 +1,9 @@
import { userRegion, getCache, setCache } from '$lib/store'; import { getCache, setCache } from '$lib/store';
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let apiURL;
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
userRegion.subscribe(value => { export const load = async ({parent}) => {
if (usRegion.includes(value)) {
apiURL = import.meta.env.VITE_USEAST_API_URL;
} else {
apiURL = import.meta.env.VITE_EU_API_URL;
}
});
export const load = async () => {
const getIsraeliStocksUS = async () => { const getIsraeliStocksUS = async () => {
let output; let output;
@ -27,6 +13,8 @@ export const load = async () => {
output = cachedData; output = cachedData;
} else { } else {
const{ apiURL, apiKey} = await parent();
const postData = {'filterList': 'IL'} const postData = {'filterList': 'IL'}
const response = await fetch(apiURL + '/filter-stock-list', { const response = await fetch(apiURL + '/filter-stock-list', {

79
src/routes/list/japanese-stocks-us/+page.svelte
View File

@ -2,26 +2,30 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store'; import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils'; import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import { onMount } from 'svelte';
export let data; export let data;
let rawData = data?.getJapaneseStocksUS; let rawData = data?.getJapaneseStocksUS;
let marketCapList = rawData?.slice(0,50); let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } }) async function handleScroll() {
{ const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (marketCapList?.length === rawData?.length) { if (isBottom && marketCapList?.length !== rawData?.length) {
complete(); const nextIndex = marketCapList?.length;
} const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
else { marketCapList = [...marketCapList, ...filteredNewResults];
const nextIndex = marketCapList?.length; }
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
}
} }
onMount(async () => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0); let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0); let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0; let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
@ -39,11 +43,11 @@
} }
</script> </script>
<section class="w-full max-w-4xl overflow-hidden m-auto"> <section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"> <div class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg> <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
A complete list of the Japanese companies that are listed on the US stock market. A complete list of the Japanese companies that are listed on the US stock market.
</div> </div>
@ -74,8 +78,9 @@
</div> </div>
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
@ -84,52 +89,46 @@
<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 table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead> <thead>
<tr class="border border-slate-800"> <tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th> <th class="text-white font-semibold text-[1rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th> <th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th> <th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th> <th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th> <th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th> <th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each marketCapList as item,index} {#each marketCapList as item}
<!-- row --> <!-- row -->
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]"> <td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol} {item?.symbol}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span> {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
</td> </td>
<td class="text-white font-medium text-end border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{abbreviateNumber(item?.marketCap,true)} {abbreviateNumber(item?.marketCap,true)}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'} {item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'} {item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<div class="flex flex-row justify-end items-center"> <div class="flex flex-row justify-end items-center">
<div class="flex flex-col"> <div class="flex flex-col">
@ -137,10 +136,10 @@
<div class="flex flex-row mt-0.5 ml-auto"> <div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0} {#if item.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg> <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} {: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> <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} {/if}
</div> </div>
</div> </div>
@ -160,8 +159,6 @@
</table> </table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div> </div>

21
src/routes/list/japanese-stocks-us/+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; export const load = async ({parent}) => {
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
userRegion.subscribe(value => {
if (usRegion.includes(value)) {
apiURL = import.meta.env.VITE_USEAST_API_URL;
} else {
apiURL = import.meta.env.VITE_EU_API_URL;
}
});
export const load = async () => {
const getJapaneseStocksUS = async () => { const getJapaneseStocksUS = async () => {
let output; let output;
@ -27,6 +12,8 @@ export const load = async () => {
output = cachedData; output = cachedData;
} else { } else {
const{ apiURL, apiKey} = await parent();
const postData = {'filterList': 'JP'} const postData = {'filterList': 'JP'}
const response = await fetch(apiURL + '/filter-stock-list', { const response = await fetch(apiURL + '/filter-stock-list', {

64
src/routes/list/magnificent-seven/+page.svelte
View File

@ -2,28 +2,12 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store'; import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils'; import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import InfoModal from '$lib/components/InfoModal.svelte'; import InfoModal from '$lib/components/InfoModal.svelte';
export let data; export let data;
let rawData = data?.getMagnificentSeven; let rawData = data?.getMagnificentSeven;
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();
}
}
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0; let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0; let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0; let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
@ -43,16 +27,16 @@
} }
</script> </script>
<section class="w-full max-w-4xl overflow-hidden m-auto"> <section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"> <div class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg> <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
The term "Magnificent 7" refers to a group of 7 well-known technological stocks that made large contributions to the market's overall performance. The term "Magnificent 7" refers to a group of 7 well-known technological stocks that made large contributions to the market's overall performance.
</div> </div>
<div class="stats stats-horizontal bg-[#09090B] w-full rounded-lg"> <div class="stats stats-horizontal bg-[#27272A] w-full rounded-lg">
<div class="grid grid-cols-2 sm:grid-cols-3"> <div class="grid grid-cols-2 sm:grid-cols-3">
@ -154,7 +138,7 @@
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
@ -166,49 +150,43 @@
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 "> <table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead> <thead>
<tr class="border border-slate-800"> <tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th> <th class="text-white font-semibold text-[1rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th> <th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th> <th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th> <th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th> <th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th> <th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each marketCapList as item,index} {#each rawData as item}
<!-- row --> <!-- row -->
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]"> <td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]">
{item?.symbol} {item?.symbol}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span> {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
</td> </td>
<td class="text-white font-medium text-end border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{abbreviateNumber(item?.marketCap,true)} {abbreviateNumber(item?.marketCap,true)}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'} {item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'} {item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<div class="flex flex-row justify-end items-center"> <div class="flex flex-row justify-end items-center">
<div class="flex flex-col"> <div class="flex flex-col">
@ -216,10 +194,10 @@
<div class="flex flex-row mt-0.5 ml-auto"> <div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0} {#if item.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg> <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} {: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> <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} {/if}
</div> </div>
</div> </div>
@ -239,8 +217,6 @@
</table> </table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div> </div>

21
src/routes/list/magnificent-seven/+page.ts
View File

@ -1,24 +1,8 @@
import { userRegion, getCache, setCache } from '$lib/store'; import {getCache, setCache } from '$lib/store';
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let apiURL;
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
userRegion.subscribe(value => {
if (usRegion.includes(value)) {
apiURL = import.meta.env.VITE_USEAST_API_URL;
} else {
apiURL = import.meta.env.VITE_EU_API_URL;
}
});
export const load = async () => { export const load = async ({parent}) => {
const getMagnificentSeven = async () => { const getMagnificentSeven = async () => {
let output; let output;
@ -28,6 +12,7 @@ export const load = async () => {
output = cachedData; output = cachedData;
} else { } else {
const{ apiURL, apiKey} = await parent();
const response = await fetch(apiURL + '/magnificent-seven', { const response = await fetch(apiURL + '/magnificent-seven', {
method: 'GET', method: 'GET',

78
src/routes/list/uk-stocks-us/+page.svelte
View File

@ -2,26 +2,30 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { screenWidth } from '$lib/store'; import { screenWidth } from '$lib/store';
import { abbreviateNumber} from '$lib/utils'; import { abbreviateNumber} from '$lib/utils';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import { onMount } from 'svelte';
export let data; export let data;
let rawData = data?.getUKStocksUS; let rawData = data?.getUKStocksUS;
let marketCapList = rawData?.slice(0,50); let marketCapList = rawData?.slice(0,50);
async function infiniteHandler({ detail: { loaded, complete } }) async function handleScroll() {
{ const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (marketCapList?.length === rawData?.length) { if (isBottom && marketCapList?.length !== rawData?.length) {
complete(); const nextIndex = marketCapList?.length;
} const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
else { marketCapList = [...marketCapList, ...filteredNewResults];
const nextIndex = marketCapList?.length; }
const newElements= rawData?.slice(nextIndex, nextIndex + 5);
marketCapList = [...marketCapList, ...newElements];
loaded();
}
} }
onMount(async () => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
})
let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0); let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0); let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0; let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
@ -39,11 +43,11 @@
} }
</script> </script>
<section class="w-full max-w-4xl overflow-hidden m-auto"> <section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"> <div class="w-full border border-gray-800 sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg> <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
A complete list of the UK companies that are listed on the US stock market. A complete list of the UK companies that are listed on the US stock market.
</div> </div>
@ -76,7 +80,7 @@
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
@ -85,52 +89,46 @@
<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 table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead> <thead>
<tr class="border border-slate-800"> <tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th> <th class="text-white font-semibold text-[1rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th> <th class="text-white font-semibold text-[1rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th> <th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th> <th class="text-white font-semibold text-center text-[1rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th> <th class="text-white font-semibold text-center text-[1rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th> <th class="text-white font-semibold text-[1rem] text-end">Price</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each marketCapList as item,index} {#each marketCapList as item}
<!-- row --> <!-- row -->
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]"> <td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol} {item?.symbol}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span> {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
</td> </td>
<td class="text-white font-medium text-end border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{abbreviateNumber(item?.marketCap,true)} {abbreviateNumber(item?.marketCap,true)}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'} {item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td> </td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'} {item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td> </td>
<td class="text-gray-200 border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
<div class="flex flex-row justify-end items-center"> <div class="flex flex-row justify-end items-center">
<div class="flex flex-col"> <div class="flex flex-col">
@ -138,10 +136,10 @@
<div class="flex flex-row mt-0.5 ml-auto"> <div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0} {#if item.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg> <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} {: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> <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} {/if}
</div> </div>
</div> </div>
@ -161,8 +159,6 @@
</table> </table>
<InfiniteLoading on:infinite={infiniteHandler} />
</div> </div>

21
src/routes/list/uk-stocks-us/+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; export const load = async ({parent}) => {
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
userRegion.subscribe(value => {
if (usRegion.includes(value)) {
apiURL = import.meta.env.VITE_USEAST_API_URL;
} else {
apiURL = import.meta.env.VITE_EU_API_URL;
}
});
export const load = async () => {
const getUKStocksUS = async () => { const getUKStocksUS = async () => {
let output; let output;
@ -27,6 +12,8 @@ export const load = async () => {
output = cachedData; output = cachedData;
} else { } else {
const{ apiURL, apiKey} = await parent();
const postData = {'filterList': 'UK'} const postData = {'filterList': 'UK'}
const response = await fetch(apiURL + '/filter-stock-list', { const response = await fetch(apiURL + '/filter-stock-list', {