refactor stock list page

This commit is contained in:
MuslemRahimi 2024-11-23 23:18:44 +01:00
parent 7af34469f4
commit 749acfef7c
13 changed files with 576 additions and 537 deletions

View File

@ -380,6 +380,7 @@
score: "AI Score", score: "AI Score",
researchAndDevelopmentExpenses: "R&D", researchAndDevelopmentExpenses: "R&D",
counter: "Ratings Count", counter: "Ratings Count",
rsi: "RSI",
// Add more key-label mappings here as needed // Add more key-label mappings here as needed
}; };

View File

@ -166,6 +166,22 @@
title: "All Active REITs on the US Stock Market", title: "All Active REITs on the US Stock Market",
link: "/list/reit-stocks", link: "/list/reit-stocks",
}, },
{
title: "FAANG Companies",
link: "/list/faang",
},
{
title: "Actively Traded Penny Stocks",
link: "/list/penny-stocks",
},
{
title: "Oversold Stocks",
link: "/list/oversold-stocks",
},
{
title: "Overbought Stocks",
link: "/list/overbought-stocks",
},
]; ];
navigation = [...navigationIndustry, ...navigation]; navigation = [...navigationIndustry, ...navigation];

View File

@ -1,554 +1,302 @@
<!--Start Market Cap Group--> <!--Start Market Cap Group-->
<div class="container mx-auto pt-3 pl-2"> <div class="text-white">
<div class="grid grid-cols-1 sm:grid-cols-2"> <h2 class="mb-2 text-xl font-bold">Market Cap Groups</h2>
<!-- Column 1 --> <ul
<div class="mb-4"> class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3"> >
Market Cap Groups <li>
</h2> <a
<ul class="list-disc space-y-4 sm:space-y-1 pl-5"> class="text-blue-400 sm:hover:text-white"
<li class="mb-2 cursor-pointer"> href="/list/market-cap/mega-cap-stocks">Mega-Cap Stocks</a
<a >
href="/list/market-cap/mega-cap-stocks" </li>
class="sm:hover:text-white text-blue-400 text-lg">Mega-Cap Stocks</a <li>
> <a
</li> class="text-blue-400 sm:hover:text-white"
<li class="mb-2 cursor-pointer"> href="/list/market-cap/large-cap-stocks">Large-Cap Stocks</a
<a >
href="/list/market-cap/large-cap-stocks" </li>
class="sm:hover:text-white text-blue-400 text-lg" <li>
>Large-Cap Stocks</a <a
> class="text-blue-400 sm:hover:text-white"
</li> href="/list/market-cap/mid-cap-stocks">Mid-Cap Stocks</a
<li class="mb-2 cursor-pointer"> >
<a </li>
href="/list/market-cap/mid-cap-stocks" <li class="">
class="sm:hover:text-white text-blue-400 text-lg">Mid-Cap Stocks</a <a
> class="text-blue-400 sm:hover:text-white"
</li> href="/list/market-cap/small-cap-stocks">Small-Cap Stocks</a
>
<li class="mb-2 cursor-pointer sm:hidden"> </li>
<a <li class="">
href="/list/market-cap/small-cap-stocks" <a
class="sm:hover:text-white text-blue-400 text-lg" class="text-blue-400 sm:hover:text-white"
>Small-Cap Stocks</a href="/list/market-cap/micro-cap-stocks">Micro-Cap Stocks</a
> >
</li> </li>
<li class="mb-2 cursor-pointer sm:hidden"> <li class="">
<a <a
href="/list/market-cap/micro-cap-stocks" class="text-blue-400 sm:hover:text-white"
class="sm:hover:text-white text-blue-400 text-lg" href="/list/market-cap/nano-cap-stocks">Nano-Cap Stocks</a
>Micro-Cap Stocks</a >
> </li>
</li> </ul>
<li class="mb-2 cursor-pointer sm:hidden">
<a
href="/list/market-cap/nano-cap-stocks"
class="sm:hover:text-white text-blue-400 text-lg">Nano-Cap Stocks</a
>
</li>
</ul>
</div>
<!-- Column 2 -->
<div class="mt-10 hidden sm:block">
<ul class="list-disc space-y-1 pl-5">
<li class="mb-2 cursor-pointer">
<a
href="/list/market-cap/small-cap-stocks"
class="sm:hover:text-white text-blue-400 text-lg"
>Small-Cap Stocks</a
>
</li>
<li class="mb-2 cursor-pointer">
<a
href="/list/market-cap/micro-cap-stocks"
class="sm:hover:text-white text-blue-400 text-lg"
>Micro-Cap Stocks</a
>
</li>
<li class="mb-2 cursor-pointer">
<a
href="/list/market-cap/nano-cap-stocks"
class="sm:hover:text-white text-blue-400 text-lg">Nano-Cap Stocks</a
>
</li>
<!-- ...other list items -->
</ul>
</div>
</div>
</div> </div>
<!--End Market Cap Group--> <!--End Market Cap Group-->
<!--Start Exchange Group--> <div class="text-white">
<h2 class="mb-2 text-xl font-bold pt-10">Exchange Groups</h2>
<div class="container mx-auto pt-10 pl-4"> <ul
<div class="grid grid-cols-1 sm:grid-cols-2"> class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
<div class="mb-4"> >
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3"> <li>
Exchange Groups <a class="text-blue-400 sm:hover:text-white" href="/list/exchange/nasdaq"
</h2> >Listed on NASDAQ</a
<ul class="list-disc space-y-1 pl-3"> >
<li class="mb-2 cursor-pointer"> </li>
<a <li>
href="/list/exchange/nasdaq" <a class="text-blue-400 sm:hover:text-white" href="/list/exchange/nyse"
class="sm:hover:text-white text-blue-400 text-lg" >Listed on NYSE</a
>Listed on NASDAQ</a >
> </li>
</li> <li>
<li class="mb-2 cursor-pointer"> <a class="text-blue-400 sm:hover:text-white" href="/list/exchange/amex"
<a >Listed on AMEX</a
href="/list/exchange/nyse" >
class="sm:hover:text-white text-blue-400 text-lg">Listed on NYSE</a </li>
> </ul>
</li>
<li class="mb-2 cursor-pointer sm:hidden">
<a
href="/list/exchange/amex"
class="sm:hover:text-white text-blue-400 text-lg">Listed on AMEX</a
>
</li>
</ul>
</div>
<!-- Column 2 -->
<div class="mt-10 hidden sm:block">
<ul class="list-disc space-y-1 pl-5">
<li class="mb-2 cursor-pointer">
<a
href="/list/exchange/amex"
class="sm:hover:text-white text-blue-400 text-lg">Listed on AMEX</a
>
</li>
<!-- ...other list items -->
</ul>
</div>
</div>
</div> </div>
<!--End Exchange Group-->
<!--Start Index Group--> <!--Start Index Group-->
<div class="container mx-auto pt-10 pl-4"> <div class="text-white">
<div class="grid grid-cols-1 sm:grid-cols-2"> <h2 class="mb-2 text-xl font-bold pt-10">Index Groups</h2>
<div class="mb-4"> <ul
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3"> class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
Index Groups >
</h2> <li>
<ul class="list-disc space-y-1 pl-3"> <a class="text-blue-400 sm:hover:text-white" href="/list/index/dowjones"
<li class="mb-2 cursor-pointer"> >Listed on Dow Jones</a
<a >
href="/list/index/dowjones" </li>
class="sm:hover:text-white text-blue-400 text-lg" <li>
> <a class="text-blue-400 sm:hover:text-white" href="/list/index/nasdaq100"
Listed on Dow Jones >Listed on NASDAQ 100</a
</a> >
</li> </li>
<li class="mb-2 cursor-pointer"> <li>
<a <a class="text-blue-400 sm:hover:text-white" href="/list/index/sp500"
href="/list/index/nasdaq100" >Listed on S&P 500</a
class="sm:hover:text-white text-blue-400 text-lg" >
> </li>
Listed on NASDAQ 100 </ul>
</a>
</li>
<li class="mb-2 cursor-pointer sm:hidden">
<a
href="/list/index/sp500"
class="sm:hover:text-white text-blue-400 text-lg"
>
Listed on S&P 500
</a>
</li>
</ul>
</div>
<!-- Column 2 -->
<div class="mt-10 hidden sm:block">
<ul class="list-disc space-y-1 pl-5">
<li class="mb-2 cursor-pointer">
<a
href="/list/index/sp500"
class="sm:hover:text-white text-blue-400 text-lg"
>
Listed on S&P 500
</a>
</li>
<!-- ...other list items -->
</ul>
</div>
</div>
</div> </div>
<!--End Index Group--> <!--End Index Group-->
<!--Start Other Lists-->
<div class="text-white">
<h2 class="mb-2 text-xl font-bold pt-10">Other Lists</h2>
<ul
class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
>
<li>
<a class="text-blue-400 sm:hover:text-white" href="/list/faang">FAANG</a>
</li>
<li>
<a
class="text-blue-400 sm:hover:text-white"
href="/list/magnificent-seven">Magnificent Seven</a
>
</li>
<li>
<a
class="text-blue-400 sm:hover:text-white"
href="/list/dividend/dividend-kings">Dividend Kings</a
>
</li>
<li>
<a
class="text-blue-400 sm:hover:text-white"
href="/list/dividend/dividend-aristocrats">Dividend Aristocrats</a
>
</li>
<li>
<a class="text-blue-400 sm:hover:text-white" href="/list/penny-stocks"
>Penny Stocks</a
>
</li>
<li>
<a class="text-blue-400 sm:hover:text-white" href="/list/oversold-stocks/"
>Oversold Stocks</a
>
</li>
<li>
<a
class="text-blue-400 sm:hover:text-white"
href="/list/overbought-stocks/">Overbought Stocks</a
>
</li>
<li>
<a class="text-blue-400 sm:hover:text-white" href="/list/reit-stocks"
>All REITs</a
>
</li>
</ul>
</div>
<!--End Other Lists-->
<!--Start Non-US Stocks Listed on US Exchanges--> <!--Start Non-US Stocks Listed on US Exchanges-->
<div class="text-white">
<div class="container mx-auto pt-10 pl-4"> <h2 class="mb-2 text-xl font-bold pt-10">
<div class="grid grid-cols-1 sm:grid-cols-2"> Non-US Stocks Listed on US Exchanges
<div class="mb-4"> </h2>
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3"> <ul
Non-US Stocks Listed on US Exchangess class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
</h2> >
<ul class="list-disc space-y-1 pl-3"> <li>
<li class="mb-2 cursor-pointer"> <a class="text-blue-400 sm:hover:text-white" href="/list/country/ca"
<a >Canada</a
href="/list/country/ca" >
class="sm:hover:text-white text-blue-400 text-lg" </li>
> <li>
Canada <a class="text-blue-400 sm:hover:text-white" href="/list/country/cn"
</a> >China</a
</li> >
<li class="mb-2 cursor-pointer"> </li>
<a <li>
href="/list/country/cn" <a class="text-blue-400 sm:hover:text-white" href="/list/country/in"
class="sm:hover:text-white text-blue-400 text-lg" >India</a
> >
China </li>
</a> <li>
</li> <a class="text-blue-400 sm:hover:text-white" href="/list/country/jp"
<li class="mb-2 cursor-pointer"> >Japan</a
<a >
href="/list/country/in" </li>
class="sm:hover:text-white text-blue-400 text-lg" <li>
> <a class="text-blue-400 sm:hover:text-white" href="/list/country/de"
India >Germany</a
</a> >
</li> </li>
<li class="mb-2 cursor-pointer"> <li>
<a <a class="text-blue-400 sm:hover:text-white" href="/list/country/il"
href="/list/country/jp" >Israel</a
class="sm:hover:text-white text-blue-400 text-lg" >
> </li>
Japan <li>
</a> <a class="text-blue-400 sm:hover:text-white" href="/list/country/gb"
</li> >United Kingdom</a
>
<li class="mb-2 cursor-pointer sm:hidden"> </li>
<a </ul>
href="/list/country/de"
class="sm:hover:text-white text-blue-400 text-lg"
>
Germany
</a>
</li>
<li class="mb-2 cursor-pointer sm:hidden">
<a
href="/list/country/il"
class="sm:hover:text-white text-blue-400 text-lg"
>
Israel
</a>
</li>
<li class="mb-2 cursor-pointer sm:hidden">
<a
href="/list/country/gb"
class="sm:hover:text-white text-blue-400 text-lg"
>
United Kingdom
</a>
</li>
</ul>
</div>
<div class="mt-[75px] hidden sm:block">
<ul class="list-disc space-y-1 pl-5">
<li class="mb-2 cursor-pointer">
<a
href="/list/country/de"
class="sm:hover:text-white text-blue-400 text-lg"
>
Germany
</a>
</li>
<li class="mb-2 cursor-pointer">
<a
href="/list/country/il"
class="sm:hover:text-white text-blue-400 text-lg"
>
Israel
</a>
</li>
<li class="mb-2 cursor-pointer">
<a
href="/list/country/gb"
class="sm:hover:text-white text-blue-400 text-lg"
>
United Kingdom
</a>
</li>
</ul>
</div>
</div>
</div> </div>
<!--End Non-US Stocks Listed on US Exchanges--> <!--End Non-US Stocks Listed on US Exchanges-->
<!--Start Sector Group--> <!--Start Sector Group-->
<div class="container mx-auto pt-10 pl-4"> <div class="text-white">
<div class="grid grid-cols-1 sm:grid-cols-2"> <h2 class="mb-2 text-xl font-bold pt-10">Sector Groups</h2>
<div class="mb-4"> <ul
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3"> class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
Sector Groups >
</h2> <li>
<ul class="list-disc space-y-1 pl-3"> <a class="text-blue-400 sm:hover:text-white" href="/list/sector/financial"
<li class="mb-2 cursor-pointer"> >Financials</a
<a >
href="/list/sector/financial" </li>
class="sm:hover:text-white text-blue-400 text-lg" <li>
> <a
Financials class="text-blue-400 sm:hover:text-white"
</a> href="/list/sector/healthcare">Healthcare</a
</li> >
<li class="mb-2 cursor-pointer"> </li>
<a <li>
href="/list/sector/healthcare" <a
class="sm:hover:text-white text-blue-400 text-lg" class="text-blue-400 sm:hover:text-white"
> href="/list/sector/technology">Technology</a
Healthcare >
</a> </li>
</li> <li>
<li class="mb-2 cursor-pointer"> <a
<a class="text-blue-400 sm:hover:text-white"
href="/list/sector/technology" href="/list/sector/industrials">Industrials</a
class="sm:hover:text-white text-blue-400 text-lg" >
> </li>
Technology <li>
</a> <a class="text-blue-400 sm:hover:text-white" href="/list/sector/energy"
</li> >Energy</a
<li class="mb-2 cursor-pointer"> >
<a </li>
href="/list/sector/industrials" <li>
class="sm:hover:text-white text-blue-400 text-lg" <a class="text-blue-400 sm:hover:text-white" href="/list/sector/utilities"
> >Utilities</a
Industrials >
</a> </li>
</li> <li>
<li class="mb-2 cursor-pointer"> <a
<a class="text-blue-400 sm:hover:text-white"
href="/list/sector/energy" href="/list/sector/consumer-cyclical">Consumer Cyclical</a
class="sm:hover:text-white text-blue-400 text-lg" >
> </li>
Energy <li>
</a> <a
</li> class="text-blue-400 sm:hover:text-white"
<li class="mb-2 cursor-pointer"> href="/list/sector/real-estate">Real Estate</a
<a >
href="/list/sector/utilities" </li>
class="sm:hover:text-white text-blue-400 text-lg" <li>
> <a
Utilities class="text-blue-400 sm:hover:text-white"
</a> href="/list/sector/basic-materials">Basic Materials</a
</li> >
</li>
<li class="mb-2 cursor-pointer sm:hidden"> <li>
<a <a
href="/list/sector/consumer-cyclical" class="text-blue-400 sm:hover:text-white"
class="sm:hover:text-white text-blue-400 text-lg" href="/list/sector/communication-services">Communication Services</a
> >
Consumer Cyclical </li>
</a> <li>
</li> <a
<li class="mb-2 cursor-pointer sm:hidden"> class="text-blue-400 sm:hover:text-white"
<a href="/list/sector/consumer-defensive">Consumer Defensive</a
href="/list/sector/real-estate" >
class="sm:hover:text-white text-blue-400 text-lg" </li>
> </ul>
Real Estate
</a>
</li>
<li class="mb-2 cursor-pointer sm:hidden">
<a
href="/list/sector/basic-materials"
class="sm:hover:text-white text-blue-400 text-lg"
>
Basic Materials
</a>
</li>
<li class="mb-2 cursor-pointer sm:hidden">
<a
href="/list/sector/communication-services"
class="sm:hover:text-white text-blue-400 text-lg"
>
Communication Services
</a>
</li>
<li class="mb-2 cursor-pointer sm:hidden">
<a
href="/list/sector/consumer-defensive"
class="sm:hover:text-white text-blue-400 text-lg"
>
Consumer Defensive
</a>
</li>
</ul>
</div>
<!-- Column 2 -->
<div class="mt-11 hidden sm:block">
<ul class="list-disc space-y-1 pl-5">
<li class="mb-2 cursor-pointer">
<a
href="/list/sector/consumer-cyclical"
class="sm:hover:text-white text-blue-400 text-lg"
>
Consumer Cyclical
</a>
</li>
<li class="mb-2 cursor-pointer">
<a
href="/list/sector/real-estate"
class="sm:hover:text-white text-blue-400 text-lg"
>
Real Estate
</a>
</li>
<li class="mb-2 cursor-pointer">
<a
href="/list/sector/basic-materials"
class="sm:hover:text-white text-blue-400 text-lg"
>
Basic Materials
</a>
</li>
<li class="mb-2 cursor-pointer">
<a
href="/list/sector/communication-services"
class="sm:hover:text-white text-blue-400 text-lg"
>
Communication Services
</a>
</li>
<li class="mb-2 cursor-pointer">
<a
href="/list/sector/consumer-defensive"
class="sm:hover:text-white text-blue-400 text-lg"
>
Consumer Defensive
</a>
</li>
<!-- ...other list items -->
</ul>
</div>
</div>
</div> </div>
<!--End Sector Group--> <!--End Sector Group-->
<!--Start ETF Lists--> <!--Start ETF Lists-->
<div class="container mx-auto pt-10 pl-4"> <div class="text-white">
<div class="grid grid-cols-1 sm:grid-cols-2"> <h2 class="mb-2 text-xl font-bold pt-10">ETF Lists</h2>
<div class="mb-4"> <ul
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">ETF Lists</h2> class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-lg"
<ul class="list-disc space-y-1 pl-3"> >
<li class="mb-2 cursor-pointer"> <li>
<a <a class="text-blue-400 sm:hover:text-white" href="/etf/new-launches"
href="/etf/new-launches" >New Launches</a
class="sm:hover:text-white text-blue-400 text-lg" >
> </li>
New Launches <li>
</a> <a class="text-blue-400 sm:hover:text-white" href="/etf/etf-providers"
</li> >ETF Providers</a
<li class="mb-2 cursor-pointer"> >
<a </li>
href="/etf/etf-providers" <li>
class="sm:hover:text-white text-blue-400 text-lg" <a class="text-blue-400 sm:hover:text-white" href="/list/bitcoin-etfs"
> >Bitcoin ETFs</a
ETF Providers >
</a> </li>
</li> </ul>
<li class="mb-2 cursor-pointer sm:hidden">
<a
href="/list/bitcoin-etfs"
class="sm:hover:text-white text-blue-400 text-lg"
>
Bitcoin ETFs
</a>
</li>
</ul>
</div>
<!-- Column 2 -->
<div class="mt-11 hidden sm:block">
<ul class="list-disc space-y-1 pl-5">
<li class="mb-2 cursor-pointer">
<a
href="/list/bitcoin-etfs"
class="sm:hover:text-white text-blue-400 text-lg"
>
Bitcoin ETFs
</a>
</li>
<!-- ...other list items -->
</ul>
</div>
</div>
</div> </div>
<!--End ETF Lists--> <!--End ETF Lists-->
<!--Start Other Lists-->
<div class="container mx-auto pt-10 pl-4">
<div class="grid grid-cols-1 sm:grid-cols-2">
<div class="mb-4">
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">Other Lists</h2>
<ul class="list-disc space-y-1 pl-3">
<li class="mb-2 cursor-pointer">
<a
href="/list/magnificent-seven"
class="sm:hover:text-white text-blue-400 text-lg"
>
Magnificent Seven
</a>
</li>
<li class="mb-2 cursor-pointer">
<a
href="/list/dividend/dividend-kings"
class="sm:hover:text-white text-blue-400 text-lg"
>
Dividend Kings
</a>
</li>
<li class="mb-2 cursor-pointer">
<a
href="/list/dividend/dividend-aristocrats"
class="sm:hover:text-white text-blue-400 text-lg"
>
Dividend Aristocrats
</a>
</li>
<li class="mb-2 cursor-pointer sm:hidden">
<a
href="/list/reit-stocks"
class="sm:hover:text-white text-blue-400 text-lg"
>
All REITs
</a>
</li>
</ul>
</div>
<!-- Column 2 -->
<div class="mt-10 hidden sm:block">
<ul class="list-disc space-y-1 pl-5">
<li class="mb-2 cursor-pointer">
<a
href="/list/reit-stocks"
class="sm:hover:text-white text-blue-400 text-lg"
>
All REITs
</a>
</li>
<!-- ...other list items -->
</ul>
</div>
</div>
</div>
<!--End Other Lists-->

View File

@ -0,0 +1,23 @@
export const load = async ({ locals }) => {
const getFAANG = async () => {
const { apiKey, apiURL } = locals;
const postData = {'filterList': 'faang'}
// make the POST request to the endpoint
const response = await fetch(apiURL + "/list-category", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData)
});
const output = await response.json();
return output;
};
// Make sure to return a promise
return {
getFAANG: await getFAANG(),
};
};

View File

@ -0,0 +1,70 @@
<script lang="ts">
import { abbreviateNumber } from "$lib/utils";
import Table from "$lib/components/Table/Table.svelte";
export let data;
let rawData = data?.getFAANG;
let totalMarketCap =
rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
let totalRevenue =
rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
</script>
<section class="w-full overflow-hidden m-auto">
<div
class="w-full border border-gray-600 sm:flex sm:flex-row sm:items-center m-auto text-white bg-[#09090B] sm:rounded-md 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="#fff"
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 "FAANG" stocks refer to five major U.S. tech companies: Meta (formerly
Facebook), Amazon, Apple, Netflix, and Alphabet (Google). Originally
popularized by Jim Cramer as "FANG," the list did not initially include
Apple.
</div>
<div
class="mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
>
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
<div class="flex items-center justify-between sm:block">
<div class="text-sm font-normal text-white">Total Stocks</div>
<div
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
>
{new Intl.NumberFormat("en")?.format(rawData?.length)}
</div>
</div>
</div>
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
<div class="flex items-center justify-between sm:block">
<div class="text-sm font-normal text-white">Total Market Cap</div>
<div
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
>
{abbreviateNumber(totalMarketCap)}
</div>
</div>
</div>
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
<div class="flex items-center justify-between sm:block">
<div class="text-sm font-normal text-white">Total Revenue</div>
<div
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
>
{abbreviateNumber(totalRevenue)}
</div>
</div>
</div>
</div>
<Table {data} {rawData} />
</section>

View File

@ -1,14 +1,15 @@
export const load = async ({ locals }) => { export const load = async ({ locals }) => {
const getMagnificentSeven = async () => { const getMagnificentSeven = async () => {
const { apiURL, apiKey } = locals; const { apiKey, apiURL } = locals;
const postData = {'filterList': 'magnificent-seven'}
const response = await fetch(apiURL + "/magnificent-seven", { // make the POST request to the endpoint
method: "GET", const response = await fetch(apiURL + "/list-category", {
method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-API-KEY": apiKey, "X-API-KEY": apiKey,
}, },
body: JSON.stringify(postData)
}); });
const output = await response.json(); const output = await response.json();

View File

@ -9,12 +9,6 @@
rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0; rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
let totalRevenue = let totalRevenue =
rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0; rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
let totalProfits =
rawData?.reduce((total, stock) => total + stock?.netIncome, 0) ?? 0;
let avgPERatio = (
(rawData?.reduce((total, stock) => total + stock?.pe, 0) ?? 0) /
rawData?.length
)?.toFixed(2);
</script> </script>
<section class="w-full overflow-hidden m-auto"> <section class="w-full overflow-hidden m-auto">

View File

@ -0,0 +1,26 @@
export const load = async ({ locals, setHeaders }) => {
const getOverBoughtStocks = async () => {
const { apiKey, apiURL } = locals;
const postData = { filterList: 'overbought-stocks' };
const response = await fetch(apiURL + "/list-category", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
const output = await response.json();
setHeaders({ "cache-control": "public, max-age=60*5" });
return output;
};
// Make sure to return a promise
return {
getOverBoughtStocks: await getOverBoughtStocks(),
};
};

View File

@ -0,0 +1,36 @@
<script lang="ts">
import Table from "$lib/components/Table/Table.svelte";
export let data;
const defaultList = [
{ name: "RSI", rule: "rsi" },
{ name: "Price", rule: "price" },
{ name: "% Change", rule: "changesPercentage" },
{ name: "Market Cap", rule: "marketCap" },
];
</script>
<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 border border-gray-800 sm:rounded-md 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="#fff"
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 stocks that are "overbought" according to the Relative Strength
Index (RSI), which is an indicator often used in technical analysis. An RSI
of over 70 on a daily chart is generally used to determine that an asset is
overbought and indicates that the stock may soon reverse to the downside.
</div>
<!-- Page wrapper -->
<Table {data} rawData={data?.getOverBoughtStocks} {defaultList} />
</section>

View File

@ -0,0 +1,26 @@
export const load = async ({ locals, setHeaders }) => {
const getOverSoldStocks = async () => {
const { apiKey, apiURL } = locals;
const postData = { filterList: 'oversold-stocks' };
const response = await fetch(apiURL + "/list-category", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
const output = await response.json();
setHeaders({ "cache-control": "public, max-age=60*5" });
return output;
};
// Make sure to return a promise
return {
getOverSoldStocks: await getOverSoldStocks(),
};
};

View File

@ -0,0 +1,37 @@
<script lang="ts">
import Table from "$lib/components/Table/Table.svelte";
export let data;
const defaultList = [
{ name: "RSI", rule: "rsi" },
{ name: "Price", rule: "price" },
{ name: "% Change", rule: "changesPercentage" },
{ name: "Market Cap", rule: "marketCap" },
];
</script>
<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 border border-gray-800 sm:rounded-md 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="#fff"
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 stocks that are "oversold" according to the Relative Strength
Index (RSI), which is an indicator often used in technical analysis. An RSI
of under 30 on a daily chart is generally used to determine that an asset is
oversold and indicates that the stock may soon bounce back from the oversold
conditions. See also the list of overbought stocks.
</div>
<!-- Page wrapper -->
<Table {data} rawData={data?.getOverSoldStocks} {defaultList} />
</section>

View File

@ -0,0 +1,26 @@
export const load = async ({ locals, setHeaders }) => {
const getPennyStocks = async () => {
const { apiKey, apiURL } = locals;
const postData = { filterList: 'penny-stocks' };
const response = await fetch(apiURL + "/list-category", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
const output = await response.json();
setHeaders({ "cache-control": "public, max-age=60*5" });
return output;
};
// Make sure to return a promise
return {
getPennyStocks: await getPennyStocks(),
};
};

View File

@ -0,0 +1,35 @@
<script lang="ts">
import Table from "$lib/components/Table/Table.svelte";
export let data;
const defaultList = [
{ name: "Market Cap", rule: "marketCap" },
{ name: "Price", rule: "price" },
{ name: "% Change", rule: "changesPercentage" },
{ name: "Volume", rule: "volume" },
];
</script>
<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 border border-gray-800 sm:rounded-md 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="#fff"
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 actively traded penny stocks, which are generally defined as
stocks with a price below $5 per share. It is filtered to only show stocks
with volume over 10K.
</div>
<!-- Page wrapper -->
<Table {data} rawData={data?.getPennyStocks} {defaultList} />
</section>