From 28858235c147237f8c0550d611f4181513c8aa46 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Thu, 20 Feb 2025 18:14:18 +0100 Subject: [PATCH] ui fix market cap page --- .../[tickerID]/statistics/+layout.svelte | 13 + .../statistics/market-cap/+page.svelte | 102 +-- .../statistics/revenue/+layout.server.ts | 28 + .../statistics/revenue/+layout.svelte | 177 ++++ .../statistics/revenue/+page.server.ts | 29 + .../statistics/revenue/+page.svelte | 768 ++++++++++++++++++ 6 files changed, 1068 insertions(+), 49 deletions(-) create mode 100644 src/routes/stocks/[tickerID]/statistics/revenue/+layout.server.ts create mode 100644 src/routes/stocks/[tickerID]/statistics/revenue/+layout.svelte create mode 100644 src/routes/stocks/[tickerID]/statistics/revenue/+page.server.ts create mode 100644 src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte diff --git a/src/routes/stocks/[tickerID]/statistics/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/+layout.svelte index 89ab44fe..b9fa573a 100644 --- a/src/routes/stocks/[tickerID]/statistics/+layout.svelte +++ b/src/routes/stocks/[tickerID]/statistics/+layout.svelte @@ -7,6 +7,7 @@ function changeSubSection(state) { const subSectionMap = { "market-cap": "/statistics/market-cap", + revenue: "/statistics/revenue", "price-reaction": "/statistics/price-reaction", "fail-to-deliver": "/statistics/fail-to-deliver", }; @@ -23,6 +24,7 @@ const parts = $page?.url?.pathname.split("/"); const sectionMap = { "market-cap": "market-cap", + revenue: "revenue", "price-reaction": "price-reaction", "fail-to-deliver": "fail-to-deliver", }; @@ -66,6 +68,17 @@ > Market Cap + + changeSubSection("revenue")} + class="p-2 px-5 cursor-pointer {displaySubSection === 'revenue' + ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]' + : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}" + > + Revenue + + changeSubSection("price-reaction")} diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte index af12ccf4..b9cbedb1 100644 --- a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte +++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte @@ -410,7 +410,7 @@ {#if rawData?.length !== 0} -
+
-

- Market Cap History -

-
+

+ Market Cap History +

+
- {#each tabs as item, i} - {#if data?.user?.tier !== "Pro" && i > 0} - - {:else} - - {/if} - {/each} + + {item.title} + + + + {:else} + + {/if} + {/each} +
diff --git a/src/routes/stocks/[tickerID]/statistics/revenue/+layout.server.ts b/src/routes/stocks/[tickerID]/statistics/revenue/+layout.server.ts new file mode 100644 index 00000000..49c34a91 --- /dev/null +++ b/src/routes/stocks/[tickerID]/statistics/revenue/+layout.server.ts @@ -0,0 +1,28 @@ +export const load = async ({ locals, params }) => { + + const getSimilarStocks = async () => { + const { apiKey, apiURL } = locals; + const postData = { + ticker: params.tickerID, + }; + + // make the POST request to the endpoint + const response = await fetch(apiURL + "/similar-stocks", { + 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 { + getSimilarStocks: await getSimilarStocks(), + }; +}; diff --git a/src/routes/stocks/[tickerID]/statistics/revenue/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/revenue/+layout.svelte new file mode 100644 index 00000000..661ba734 --- /dev/null +++ b/src/routes/stocks/[tickerID]/statistics/revenue/+layout.svelte @@ -0,0 +1,177 @@ + + +
+
+
+
+
+ +
+ + +
+
+
+
diff --git a/src/routes/stocks/[tickerID]/statistics/revenue/+page.server.ts b/src/routes/stocks/[tickerID]/statistics/revenue/+page.server.ts new file mode 100644 index 00000000..af090b24 --- /dev/null +++ b/src/routes/stocks/[tickerID]/statistics/revenue/+page.server.ts @@ -0,0 +1,29 @@ +export const load = async ({ locals, params }) => { + const getHistoricalMarketCap = async () => { + const { apiKey, apiURL } = locals; + const postData = { + ticker: params.tickerID, + }; + + // make the POST request to the endpoint + const response = await fetch(apiURL + "/historical-market-cap", { + 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 { + getHistoricalMarketCap: await getHistoricalMarketCap(), + }; +}; diff --git a/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte b/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte new file mode 100644 index 00000000..af12ccf4 --- /dev/null +++ b/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte @@ -0,0 +1,768 @@ + + + + +
+
+
+
+
+
+

Market Cap

+
+ + {#if rawData?.length !== 0} +
+ 0 + ? "increased" + : changePercentageYearAgo < 0 + ? "decreased" + : "unchanged" + } by ${abbreviateNumber( + changePercentageYearAgo?.toFixed(2), + )}% in one year.`} + /> + +
+
+
+ Market Cap + ● +
+
+ + {abbreviateNumber(data?.getStockQuote?.marketCap)} +
+
+ +
+
+ Category + ● +
+
+ {#if capCategory} + + {capCategory.name} + + {:else} + n/a + {/if} +
+
+ +
+
+ 1-Year Change + ● +
+
+ {changePercentageYearAgo > 100 + ? "> 100" + : changePercentageYearAgo?.toFixed(1)}% +
+ + {changePercentageYearAgo >= 0 ? "Positive" : "Negative"} + Trend + +
+
+
+
+ +
+

+ Historical Chart +

+
+
+ + + + + + + Select time frame + + + + changeStatement("1M")} + class="cursor-pointer hover:bg-primary" + > + 1 Month + + changeStatement("6M")} + class="cursor-pointer hover:bg-primary" + > + 6 Months + + changeStatement("1Y")} + class="cursor-pointer hover:bg-primary" + > + 1 Year + + changeStatement("3Y")} + class="cursor-pointer hover:bg-primary" + > + 3 Years + + changeStatement("5Y")} + class="cursor-pointer hover:bg-primary" + > + 5 Years + + changeStatement("10Y")} + class="cursor-pointer hover:bg-primary" + > + 10 Years + + changeStatement("Max")} + class="cursor-pointer hover:bg-primary" + > + Max + + + + +
+ +
+
+ +
+ +
+ +

+ Market Cap History +

+ +
+
+ {#each tabs as item, i} + {#if data?.user?.tier !== "Pro" && i > 0} + + {:else} + + {/if} + {/each} +
+
+ +
+ + + + + + + + + + {#each tableList as item, index} + + + + + + + + + {/each} + +
DateMarket Cap% Change
+ {item?.date} + + {@html abbreviateNumber(item?.marketCap, false, true)} + + {#if index + 1 - tableList?.length === 0} + - + {:else if item?.marketCap - tableList[index + 1]?.marketCap > 0} + + +{( + ((item?.marketCap - + tableList[index + 1]?.marketCap) / + item?.marketCap) * + 100 + )?.toFixed(2)}% + + {:else if item?.marketCap - tableList[index + 1]?.marketCap < 0} + + -{( + Math?.abs( + (tableList[index + 1]?.marketCap - + item?.marketCap) / + item?.marketCap, + ) * 100 + )?.toFixed(2)}% + + {:else} + - + {/if} +
+
+
+ {:else} + + {/if} +
+
+
+
+
+ +