From 749acfef7c234f451ff6a2e6f390d9f1dd6cb438 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Sat, 23 Nov 2024 23:18:44 +0100 Subject: [PATCH] refactor stock list page --- src/lib/components/Table/Table.svelte | 1 + src/routes/list/+layout.svelte | 16 + src/routes/list/+page.svelte | 800 ++++++------------ src/routes/list/faang/+page.server.ts | 23 + src/routes/list/faang/+page.svelte | 70 ++ .../list/magnificent-seven/+page.server.ts | 11 +- .../list/magnificent-seven/+page.svelte | 6 - .../list/overbought-stocks/+page.server.ts | 26 + .../list/overbought-stocks/+page.svelte | 36 + .../list/oversold-stocks/+page.server.ts | 26 + src/routes/list/oversold-stocks/+page.svelte | 37 + src/routes/list/penny-stocks/+page.server.ts | 26 + src/routes/list/penny-stocks/+page.svelte | 35 + 13 files changed, 576 insertions(+), 537 deletions(-) create mode 100644 src/routes/list/faang/+page.server.ts create mode 100644 src/routes/list/faang/+page.svelte create mode 100644 src/routes/list/overbought-stocks/+page.server.ts create mode 100644 src/routes/list/overbought-stocks/+page.svelte create mode 100644 src/routes/list/oversold-stocks/+page.server.ts create mode 100644 src/routes/list/oversold-stocks/+page.svelte create mode 100644 src/routes/list/penny-stocks/+page.server.ts create mode 100644 src/routes/list/penny-stocks/+page.svelte diff --git a/src/lib/components/Table/Table.svelte b/src/lib/components/Table/Table.svelte index a5d13fac..97063a13 100644 --- a/src/lib/components/Table/Table.svelte +++ b/src/lib/components/Table/Table.svelte @@ -380,6 +380,7 @@ score: "AI Score", researchAndDevelopmentExpenses: "R&D", counter: "Ratings Count", + rsi: "RSI", // Add more key-label mappings here as needed }; diff --git a/src/routes/list/+layout.svelte b/src/routes/list/+layout.svelte index b244b55a..bbc979f8 100644 --- a/src/routes/list/+layout.svelte +++ b/src/routes/list/+layout.svelte @@ -166,6 +166,22 @@ title: "All Active REITs on the US Stock Market", 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]; diff --git a/src/routes/list/+page.svelte b/src/routes/list/+page.svelte index b3af167c..04f1f899 100644 --- a/src/routes/list/+page.svelte +++ b/src/routes/list/+page.svelte @@ -1,554 +1,302 @@ -
-
- -
-

- Market Cap Groups -

- -
- - - -
+
+

Market Cap Groups

+
- - -
-
-
-

- Exchange Groups -

- -
- - - -
+
+

Exchange Groups

+
- - -
-
-
-

- Index Groups -

- -
- - - -
+
+

Index Groups

+
+ + +
+

Other Lists

+ +
+ + + - -
-
-
-

- Non-US Stocks Listed on US Exchangess -

- -
- - -
+
+

+ Non-US Stocks Listed on US Exchanges +

+
-
-
-
-

- Sector Groups -

- -
- - - -
+
+

Sector Groups

+
+ -
-
-
-

ETF Lists

- -
- - - -
+
+

ETF Lists

+
- - - -
-
-
-

Other Lists

- -
- - - -
-
- - diff --git a/src/routes/list/faang/+page.server.ts b/src/routes/list/faang/+page.server.ts new file mode 100644 index 00000000..27d1cf09 --- /dev/null +++ b/src/routes/list/faang/+page.server.ts @@ -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(), + }; +}; diff --git a/src/routes/list/faang/+page.svelte b/src/routes/list/faang/+page.svelte new file mode 100644 index 00000000..286af889 --- /dev/null +++ b/src/routes/list/faang/+page.svelte @@ -0,0 +1,70 @@ + + +
+
+ + + 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. +
+ +
+
+
+
Total Stocks
+
+ {new Intl.NumberFormat("en")?.format(rawData?.length)} +
+
+
+
+
+
Total Market Cap
+
+ {abbreviateNumber(totalMarketCap)} +
+
+
+
+
+
Total Revenue
+
+ {abbreviateNumber(totalRevenue)} +
+
+
+
+ + + diff --git a/src/routes/list/magnificent-seven/+page.server.ts b/src/routes/list/magnificent-seven/+page.server.ts index 9e1ddeb5..79f5aec8 100644 --- a/src/routes/list/magnificent-seven/+page.server.ts +++ b/src/routes/list/magnificent-seven/+page.server.ts @@ -1,14 +1,15 @@ export const load = async ({ locals }) => { - const getMagnificentSeven = async () => { - const { apiURL, apiKey } = locals; - - const response = await fetch(apiURL + "/magnificent-seven", { - method: "GET", + const { apiKey, apiURL } = locals; + const postData = {'filterList': 'magnificent-seven'} + // 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(); diff --git a/src/routes/list/magnificent-seven/+page.svelte b/src/routes/list/magnificent-seven/+page.svelte index 573d1bc5..ed90bdd8 100644 --- a/src/routes/list/magnificent-seven/+page.svelte +++ b/src/routes/list/magnificent-seven/+page.svelte @@ -9,12 +9,6 @@ rawData?.reduce((total, stock) => total + stock?.marketCap, 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 avgPERatio = ( - (rawData?.reduce((total, stock) => total + stock?.pe, 0) ?? 0) / - rawData?.length - )?.toFixed(2);
diff --git a/src/routes/list/overbought-stocks/+page.server.ts b/src/routes/list/overbought-stocks/+page.server.ts new file mode 100644 index 00000000..bac5030e --- /dev/null +++ b/src/routes/list/overbought-stocks/+page.server.ts @@ -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(), + }; +}; diff --git a/src/routes/list/overbought-stocks/+page.svelte b/src/routes/list/overbought-stocks/+page.svelte new file mode 100644 index 00000000..1306434a --- /dev/null +++ b/src/routes/list/overbought-stocks/+page.svelte @@ -0,0 +1,36 @@ + + +
+
+ + + 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. +
+ + +
+ diff --git a/src/routes/list/oversold-stocks/+page.server.ts b/src/routes/list/oversold-stocks/+page.server.ts new file mode 100644 index 00000000..7340592c --- /dev/null +++ b/src/routes/list/oversold-stocks/+page.server.ts @@ -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(), + }; +}; diff --git a/src/routes/list/oversold-stocks/+page.svelte b/src/routes/list/oversold-stocks/+page.svelte new file mode 100644 index 00000000..48e1c341 --- /dev/null +++ b/src/routes/list/oversold-stocks/+page.svelte @@ -0,0 +1,37 @@ + + +
+
+ + + 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. +
+ + +
+ diff --git a/src/routes/list/penny-stocks/+page.server.ts b/src/routes/list/penny-stocks/+page.server.ts new file mode 100644 index 00000000..602de3cf --- /dev/null +++ b/src/routes/list/penny-stocks/+page.server.ts @@ -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(), + }; +}; diff --git a/src/routes/list/penny-stocks/+page.svelte b/src/routes/list/penny-stocks/+page.svelte new file mode 100644 index 00000000..f22897f7 --- /dev/null +++ b/src/routes/list/penny-stocks/+page.svelte @@ -0,0 +1,35 @@ + + +
+
+ + + 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. +
+ + +
+