From a7af1333767ee2c266d773c91747003d4e0b99f6 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Sun, 27 Oct 2024 19:41:32 +0100 Subject: [PATCH] redesign stock page --- src/routes/+layout.svelte | 2 - src/routes/stocks/[tickerID]/+layout.svelte | 12 +- src/routes/stocks/[tickerID]/+page.svelte | 751 ++++++++++++++++-- .../[tickerID]/financials/+layout.svelte | 4 +- .../stocks/[tickerID]/financials/+page.svelte | 4 +- .../financials/balance-sheet/+page.svelte | 6 +- .../financials/cash-flow/+page.svelte | 4 +- .../[tickerID]/financials/ratios/+page.svelte | 4 +- .../stocks/[tickerID]/forecast/+layout.svelte | 4 +- .../[tickerID]/statistics/+layout.svelte | 4 +- .../stocks/[tickerID]/statistics/+page.svelte | 2 +- .../statistics/employees/+layout.svelte | 80 ++ .../statistics/employees/+page.svelte | 50 +- .../statistics/market-cap/+layout.svelte | 82 ++ src/routes/watchlist/+layout.svelte | 16 +- 15 files changed, 881 insertions(+), 144 deletions(-) create mode 100644 src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte create mode 100644 src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 7ea09411..0b17cfca 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -115,7 +115,6 @@ } $: hideFooter = - $page.url.pathname.startsWith("/dark-pool-flow") || $page.url.pathname.startsWith("/options-flow") || $page.url.pathname.startsWith("/options-zero-dte") || $page.url.pathname.startsWith("/login") || @@ -129,7 +128,6 @@ $page.url.pathname.startsWith("/portfolio") || $page.url.pathname.startsWith("/hedge-funds") || $page.url.pathname.startsWith("/watchlist") || - $page.url.pathname.startsWith("/stocks") || $page.url.pathname.startsWith("/community") || $page.url.pathname.startsWith("/stock-screener") || $page.url.pathname.startsWith("/price-alert"); diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte index aad30188..a37debe4 100644 --- a/src/routes/stocks/[tickerID]/+layout.svelte +++ b/src/routes/stocks/[tickerID]/+layout.svelte @@ -347,10 +347,10 @@ function handleTypeOfTrade(state:string) -
+
@@ -554,14 +554,12 @@ function handleTypeOfTrade(state:string)
-
+
-
+
@@ -897,7 +895,7 @@ function handleTypeOfTrade(state:string)
diff --git a/src/routes/stocks/[tickerID]/financials/+layout.svelte b/src/routes/stocks/[tickerID]/financials/+layout.svelte index 74a55990..7c11a360 100644 --- a/src/routes/stocks/[tickerID]/financials/+layout.svelte +++ b/src/routes/stocks/[tickerID]/financials/+layout.svelte @@ -43,9 +43,7 @@ } -
+
diff --git a/src/routes/stocks/[tickerID]/financials/+page.svelte b/src/routes/stocks/[tickerID]/financials/+page.svelte index 70099dbb..5b0f02d4 100644 --- a/src/routes/stocks/[tickerID]/financials/+page.svelte +++ b/src/routes/stocks/[tickerID]/financials/+page.svelte @@ -369,9 +369,7 @@ /> -
+
-
+
-
+
diff --git a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte index d9efe927..1a00b3fc 100644 --- a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte +++ b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte @@ -395,9 +395,7 @@ -
+
-
+
Return on Assets (ROA) {#each ratios as item} - {(item?.returnOnAssets * 100)?.toFixed(2)}% {/each} diff --git a/src/routes/stocks/[tickerID]/forecast/+layout.svelte b/src/routes/stocks/[tickerID]/forecast/+layout.svelte index 35a76ccc..61443f10 100644 --- a/src/routes/stocks/[tickerID]/forecast/+layout.svelte +++ b/src/routes/stocks/[tickerID]/forecast/+layout.svelte @@ -57,9 +57,7 @@ }); -
+
diff --git a/src/routes/stocks/[tickerID]/statistics/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/+layout.svelte index 7fcc52f8..4ad742e4 100644 --- a/src/routes/stocks/[tickerID]/statistics/+layout.svelte +++ b/src/routes/stocks/[tickerID]/statistics/+layout.svelte @@ -39,9 +39,7 @@ } -
+
diff --git a/src/routes/stocks/[tickerID]/statistics/+page.svelte b/src/routes/stocks/[tickerID]/statistics/+page.svelte index 4070e549..ad96901b 100644 --- a/src/routes/stocks/[tickerID]/statistics/+page.svelte +++ b/src/routes/stocks/[tickerID]/statistics/+page.svelte @@ -59,7 +59,7 @@
{#if Object?.keys(rawData)?.length !== 0}
+ import ArrowLogo from "lucide-svelte/icons/move-up-right"; + + export let data; + + +
+
+
+
+
+ +
+ + +
+
+
+
diff --git a/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte b/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte index 713c777d..877e4364 100644 --- a/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte +++ b/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte @@ -39,20 +39,15 @@ }); } - function selectSortingMethod(state: string) { - sortBy = state; - } - function plotTotal() { let dateList = []; let employeeList = []; - let growthList = []; for (let i = 0; i < employeeHistory?.length; i++) { const current = employeeHistory[i]?.employeeCount; //const previousDividend = i === 0 ? 0 : employeeHistory[i - 1]?.dividend; - dateList?.push(employeeHistory[i]?.filingDate); + dateList?.push(employeeHistory[i]?.filingDate?.slice(0, 4)); employeeList?.push(current); //const growthRate = ( (currentDividend - previousDividend) / previousDividend ) ; @@ -74,6 +69,10 @@ type: "category", axisLabel: { color: "#fff", + interval: 0, // Show all labels + rotate: 45, // Rotate labels for better readability + fontSize: 12, // Adjust font size if needed + margin: 10, }, }, yAxis: [ @@ -93,7 +92,6 @@ name: "Total Employees", data: employeeList, type: "bar", - barWidth: "80%", smooth: true, }, ], @@ -112,9 +110,8 @@ for (let i = 0; i < employeeHistory?.length; i++) { const current = employeeHistory[i]?.employeeCount; const previous = i === 0 ? 0 : employeeHistory[i - 1]?.employeeCount; - const change = current - previous; - dateList?.push(employeeHistory[i]?.filingDate); + dateList?.push(employeeHistory[i]?.filingDate?.slice(0, 4)); changeList?.push(change); } @@ -132,6 +129,9 @@ type: "category", axisLabel: { color: "#fff", + interval: 0, // Show all labels + rotate: 45, // Rotate labels for better readability + fontSize: 12, // Adjust font size if needed }, }, yAxis: [ @@ -140,7 +140,6 @@ splitLine: { show: false, // Disable x-axis grid lines }, - axisLabel: { show: false, // Hide y-axis labels }, @@ -154,7 +153,6 @@ barWidth: "80%", smooth: true, itemStyle: { - // Define colors based on positive/negative values color: function (params) { return params.data >= 0 ? "#22C55E" : "#F71F4F"; }, @@ -184,7 +182,7 @@ growthList?.push(0); // Pushing null if the growth calculation is not possible } - dateList?.push(employeeHistory[i]?.filingDate); + dateList?.push(employeeHistory[i]?.filingDate?.slice(0, 4)); } const options = { @@ -201,6 +199,10 @@ type: "category", axisLabel: { color: "#fff", + interval: 0, // Show all labels + rotate: 45, // Rotate labels for better readability + fontSize: 12, // Adjust font size if needed + margin: 10, }, }, yAxis: [ @@ -588,22 +590,22 @@ Date Employees Change Growth @@ -630,16 +632,20 @@ - {abbreviateNumber( - item?.employeeCount - - historyList[index + 1]?.employeeCount, - )} + {#if Number(item?.employeeCount - historyList[index + 1]?.employeeCount)} + {new Intl.NumberFormat("en")?.format( + item?.employeeCount - + historyList[index + 1]?.employeeCount, + )} + {:else} + - + {/if} {#if index + 1 - historyList?.length === 0} - 0.00% + - {:else if item?.employeeCount - historyList[index + 1]?.employeeCount > 0} +{( @@ -659,7 +665,7 @@ )?.toFixed(2)}% {:else} - 0.00% + - {/if} diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte new file mode 100644 index 00000000..d88f86c4 --- /dev/null +++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte @@ -0,0 +1,82 @@ + + +
+
+
+
+
+ +
+ + +
+
+
+
diff --git a/src/routes/watchlist/+layout.svelte b/src/routes/watchlist/+layout.svelte index a8140420..824c9600 100644 --- a/src/routes/watchlist/+layout.svelte +++ b/src/routes/watchlist/+layout.svelte @@ -1,20 +1,10 @@