From 241f2f628aaaf84b5180af7bdab8bbcaad03a63d Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Mon, 10 Mar 2025 17:11:47 +0100 Subject: [PATCH] update market cap page --- src/lib/components/Infobox.svelte | 5 +- src/routes/market-mover/active/+layout.svelte | 24 +- .../market-mover/afterhours/+layout.svelte | 8 +- src/routes/market-mover/losers/+layout.svelte | 24 +- .../market-mover/premarket/+layout.svelte | 8 +- .../stocks/[tickerID]/forecast/+layout.svelte | 12 +- .../[tickerID]/statistics/+layout.svelte | 22 +- .../stocks/[tickerID]/statistics/+page.svelte | 428 +++++++++++------- .../statistics/market-cap/+layout.svelte | 30 +- .../statistics/market-cap/+page.svelte | 135 +++--- 10 files changed, 384 insertions(+), 312 deletions(-) diff --git a/src/lib/components/Infobox.svelte b/src/lib/components/Infobox.svelte index cf0577ff..5db88860 100644 --- a/src/lib/components/Infobox.svelte +++ b/src/lib/components/Infobox.svelte @@ -1,14 +1,15 @@
@@ -53,8 +53,8 @@ href={`/stocks/${$stockTicker}/statistics`} on:click={() => changeSubSection("overview")} class="p-2 px-5 cursor-pointer {displaySubSection === 'overview' - ? 'text-white bg-primary/90' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold' + : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}" > Overview @@ -63,8 +63,8 @@ href={`/stocks/${$stockTicker}/statistics/market-cap`} on:click={() => changeSubSection("market-cap")} class="p-2 px-5 cursor-pointer {displaySubSection === 'market-cap' - ? 'text-white bg-primary/90' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold' + : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}" > Market Cap @@ -73,8 +73,8 @@ href={`/stocks/${$stockTicker}/statistics/revenue`} on:click={() => changeSubSection("revenue")} class="p-2 px-5 cursor-pointer {displaySubSection === 'revenue' - ? 'text-white bg-primary/90' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold' + : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}" > Revenue @@ -84,8 +84,8 @@ on:click={() => changeSubSection("price-reaction")} class="p-2 px-5 cursor-pointer {displaySubSection === 'price-reaction' - ? 'text-white bg-primary/90' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold' + : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}" > Price Reaction @@ -95,8 +95,8 @@ on:click={() => changeSubSection("fail-to-deliver")} class="p-2 px-5 cursor-pointer {displaySubSection === 'fail-to-deliver' - ? 'text-white bg-primary/90' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold' + : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}" > Fail-to-Deliver diff --git a/src/routes/stocks/[tickerID]/statistics/+page.svelte b/src/routes/stocks/[tickerID]/statistics/+page.svelte index 4967b5e7..1259d005 100644 --- a/src/routes/stocks/[tickerID]/statistics/+page.svelte +++ b/src/routes/stocks/[tickerID]/statistics/+page.svelte @@ -30,7 +30,7 @@ description={`Detailed statistics for ${$displayCompanyName} (${$stockTicker}) stock, including valuation, metrics, financial numbers, share information and more.`} /> -
+
{#if Object?.keys(rawData)?.length > 0} @@ -45,12 +45,8 @@
-

- Share Statistics -

-

+

Share Statistics

+

{companyName} has {abbreviateNumber( rawData?.sharesOutStanding, false, @@ -58,9 +54,12 @@ shares outstanding. The number of shares has increased by {rawData?.sharesYoY}% in one year.

- +
@@ -69,21 +68,24 @@ title="3,194,640,415" >{abbreviateNumber(rawData?.sharesOutStanding, false)} - - - @@ -93,7 +95,8 @@ "percent", )} - @@ -103,7 +106,8 @@ >{abbreviateNumber(rawData?.floatShares, false)} - @@ -112,7 +116,8 @@ title="2,777,647,654" >{abbreviateNumber(rawData?.failToDeliver, false)} - @@ -129,21 +134,22 @@
Shares Outstanding
Shares Change (YoY) {checkValue(rawData?.sharesYoY, "percent")}
Shares Change (QoQ) {checkValue(rawData?.sharesQoQ, "percent")}
Owned by Institutions (%)
Shares Floating
Failed to Deliver (FTD) Shares
FTD / Avg. Volume
-

+

Short Selling Information

-

+

The latest short interest is {abbreviateNumber( rawData?.sharesShort, false, )}, so {rawData?.shortOutStandingPercent}% of the outstanding shares have been sold short.

- +
@@ -152,21 +158,24 @@ title="74,332,630" >{abbreviateNumber(rawData?.sharesShort, false)} - - - @@ -178,12 +187,8 @@
Short Interest
Short % of Shares Out {rawData?.shortOutStandingPercent}%
Short % of Float {rawData?.shortFloatPercent}%
Short Ratio (days to cover)
-

- Valuation Ratios -

-

+

Valuation Ratios

+

The PE ratio is {rawData?.priceEarningsRatio} and the forward PE ratio is {rawData?.forwardPE}. {rawData?.priceEarningsToGrowthRatio !== null @@ -192,51 +197,60 @@ : ""}

- +
- - - - - - @@ -250,18 +264,16 @@
PE Ratio {rawData?.priceEarningsRatio}
Forward PE {rawData?.forwardPE ?? "n/a"}
PS Ratio {rawData?.priceToSalesRatio}
Forward PS {rawData?.forwardPS}
PB Ratio {rawData?.priceToBookRatio}
P/FCF Ratio {rawData?.priceToFreeCashFlowsRatio}
PEG Ratio
Financial Ratio History
-

+

Enterprise Valuation

-

+

{#if rawData?.enterpriseValue !== null} {$displayCompanyName} has an Enterprise Value (EV) of {abbreviateNumber( rawData?.enterpriseValue, @@ -271,37 +283,44 @@ Currently the Enterprise Value (EV) is not available for {$displayCompanyName}. {/if}

- +
- - - - @@ -313,39 +332,41 @@
EV / Earnings {rawData?.evEarnings ?? "n/a"}
EV / Sales {rawData?.evSales ?? "n/a"}
EV / EBITDA {rawData?.evEBITDA ?? "n/a"}
EV / EBIT {rawData?.evEBIT ?? "n/a"}
EV / FCF
-

- Financial Position -

-

+

Financial Position

+

The company has a current ratio of {rawData?.currentRatio}, with a Debt / Equity ratio of {rawData?.debtEquityRatio}.

- +
- - - @@ -355,14 +376,16 @@ false, )} - - @@ -374,39 +397,43 @@
Current Ratio {rawData?.currentRatio}
Quick Ratio {rawData?.quickRatio}
Debt / Equity {rawData?.debtEquityRatio}
Total Debt / Capitalization
Cash Flow / Debt {rawData?.cashFlowToDebtRatio}
Interest Coverage
-

+

Financial Efficiency

-

+

Return on equity (ROE) is {rawData?.returnOnEquity}% and return on capital (ROIC) is {rawData?.returnOnInvestedCapital}%.

- +
- - - @@ -415,7 +442,8 @@ "en-US", )} - @@ -424,7 +452,8 @@ "en-US", )} - @@ -433,14 +462,16 @@ title="140,473" >{rawData?.employees?.toLocaleString("en-US")} - - @@ -454,17 +485,21 @@
Return on Equity (ROE) {rawData?.returnOnEquity}%
Return on Assets (ROA) {rawData?.returnOnAssets}%
Return on Capital (ROIC) {rawData?.returnOnInvestedCapital}%
Revenue Per Employee
Profits Per Employee
Employee Count
Asset Turnover {rawData?.assetTurnover}
Inventory Turnover
-

Taxes

- +

Taxes

+
- @@ -478,56 +513,62 @@
-

+

Stock Price Statistics

-

+

The stock price has increased by {rawData?.change1Y}% in the last 52 weeks. The beta is {rawData?.beta}, so {companyName}'s price volatility has been {rawData?.beta > 0 ? "higher" : "lower"} than the market average.

-
Income Tax {abbreviateNumber(rawData?.incomeTaxExpense, false)}
Effective Tax Rate
+
- - - - - @@ -540,12 +581,8 @@
-

- Income Statement -

-

+

Income Statement

+

{#if rawData?.revenue !== null && rawData?.revenue !== 0} In the last 12 months, {companyName} had revenue of {abbreviateNumber( rawData?.revenue, @@ -555,9 +592,12 @@ in profits. Earnings per share was {rawData?.eps}. {/if}

-
Beta {rawData?.beta}
52-Week Price Change {rawData?.change1Y}%
50-Day Moving Average {rawData?.sma50}
200-Day Moving Average {rawData?.sma200}
Relative Strength Index (RSI) {rawData?.rsi}
Average Volume (20 Days)
+
@@ -566,35 +606,40 @@ ? abbreviateNumber(rawData?.revenue, false) : "n/a"} - - - - - @@ -603,7 +648,8 @@ ? abbreviateNumber(rawData?.ebit, false) : "n/a"} - @@ -615,18 +661,14 @@
Revenue
Gross Profit {abbreviateNumber(rawData?.grossProfit, false)}
Operating Income {abbreviateNumber(rawData?.operatingIncome, false)}
Net Income {abbreviateNumber(rawData?.netIncome, false)}
EBITDA {abbreviateNumber(rawData?.ebitda, false)}
EBIT
Earnings Per Share (EPS)
Full Income Statement
-

- Balance Sheet -

-

+

Balance Sheet

+

The company has {abbreviateNumber( rawData?.cashAndCashEquivalents, false, @@ -636,9 +678,12 @@ false, )}.

- +
@@ -648,14 +693,16 @@ false, )} - - @@ -667,21 +714,24 @@ false, )} - - - @@ -693,18 +743,14 @@
Cash & Cash Equivalents
Total Debt {abbreviateNumber(rawData?.totalDebt, false)}
Net Cash
Retained Earnings {abbreviateNumber(rawData?.retainedEarnings, false)}
Total Assets {abbreviateNumber(rawData?.totalAssets, false)}
Working Capital
Full Balance Sheet
-

- Cash Flow -

-

+

Cash Flow

+

In the last 12 months, operating cash flow was {abbreviateNumber( rawData?.operatingCashFlow, false, @@ -717,16 +763,20 @@ false, )}.

- +
- @@ -736,14 +786,16 @@ false, )} - - @@ -755,16 +807,14 @@
Operating Cash Flow {abbreviateNumber(rawData?.operatingCashFlow, false)}
Capital Expenditures
Free Cash Flow {abbreviateNumber(rawData?.freeCashFlow, false)}
FCF Per Share
Full Cash Flow Statement
-

Margins

-

+

Margins

+

{#if rawData?.grossProfitMargin !== 0 && rawData?.grossProfitMargin !== null} Gross margin is {checkValue( rawData?.grossProfitMargin, @@ -775,9 +825,12 @@ )}% and {checkValue(rawData?.netProfitMargin, "int")}%. {/if}

- +
@@ -787,7 +840,8 @@ ? checkValue(rawData?.grossProfitMargin, "int") + "%" : "n/a"} - @@ -798,7 +852,8 @@ "%" : "n/a"} - @@ -808,7 +863,8 @@ ? checkValue(rawData?.pretaxProfitMargin, "int") + "%" : "n/a"} - @@ -818,7 +874,8 @@ ? checkValue(rawData?.netProfitMargin, "int") + "%" : "n/a"} - @@ -828,7 +885,8 @@ ? checkValue(rawData?.ebitdaMargin, "int") + "%" : "n/a"} - @@ -838,7 +896,8 @@ ? checkValue(rawData?.ebitMargin, "int") + "%" : "n/a"} - @@ -858,11 +917,11 @@ class="flex flex-col space-y-5 xs:space-y-6 lg:space-y-8 w-full max-w-[360px]" >
-

+

Dividends & Yields

{#if rawData?.annualDividend !== null && rawData?.dividendYield !== null} {$stockTicker} pays an annual dividend of ${rawData?.annualDividend}, @@ -871,9 +930,12 @@ {$stockTicker} does not appear to pay any dividends at this time. {/if}

-
Gross Margin
Operating Margin
Pretax Margin
Profit Margin
EBITDA Margin
EBIT Margin
FCF Margin
+
@@ -882,7 +944,8 @@ ? "$" + rawData?.annualDividend?.toFixed(2) : "n/a"} - @@ -891,7 +954,8 @@ ? rawData?.dividendYield + "%" : "n/a"} - @@ -900,7 +964,8 @@ ? rawData?.dividendGrowth + "%" : "n/a"} - @@ -911,7 +976,8 @@ ? rawData?.payoutRatio + "%" : "n/a"} - @@ -920,7 +986,8 @@ ? rawData?.earningsYield + "%" : "n/a"} - @@ -936,17 +1003,15 @@
Dividend Per Share
Dividend Yield
Dividend Growth (YoY)
Payout Ratio
Earnings Yield
FCF Yield
Dividend Details
-

- Analyst Forecast -

+

Analyst Forecast

{#if rawData?.priceTarget && rawData?.upside && rawData?.analystRating} @@ -958,9 +1023,12 @@ Currently there are no analyst rating for {$stockTicker}. {/if}

- +
@@ -971,7 +1039,8 @@ ? "$" + rawData?.priceTarget : "n/a"} - @@ -982,7 +1051,8 @@ ? rawData?.upside + "%" : "n/a"} - @@ -990,7 +1060,8 @@ class="px-[5px] py-1.5 text-right xs:px-2.5 xs:py-2" title="Strong Buy">{rawData?.analystRating ?? "n/a"} - @@ -1003,18 +1074,16 @@
Price Target
Price Target Difference
Analyst Consensus
Analyst Count
Stock Forecasts
{#if rawData?.lastStockSplit && rawData?.splitType && rawData?.splitRatio}
-

- Stock Splits -

+

Stock Splits

The last stock split was on {new Date( @@ -1028,9 +1097,12 @@ {rawData?.splitType} split with a ratio of {rawData?.splitRatio}.

- +
@@ -1047,7 +1119,8 @@ }, )} - @@ -1055,7 +1128,8 @@ class="px-[5px] py-1.5 text-right xs:px-2.5 xs:py-2" title="Forward">{rawData?.splitType} - @@ -1068,10 +1142,13 @@ {/if}
-

Scores

-
Last Split Date
Split Type
Split Ratio
+

Scores

+
@@ -1079,7 +1156,8 @@ class="px-[5px] py-1.5 text-right xs:px-2.5 xs:py-2" title="n/a">{rawData?.altmanZScore} - diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte index c4cab963..18f2983e 100644 --- a/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte +++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte @@ -83,20 +83,18 @@
Altman Z-Score
Piotroski F-Score
- + 0} @@ -172,7 +170,7 @@
{capCategory?.name} Rankings diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte index a9a6e664..442791fa 100644 --- a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte +++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte @@ -8,6 +8,7 @@ //import * as XLSX from 'xlsx'; import { goto } from "$app/navigation"; import highcharts from "$lib/highcharts.ts"; + import { mode } from "mode-watcher"; export let data; @@ -188,7 +189,6 @@ tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date)); } - let config = plotData(); tableList = filterEndOfYearDates(rawData); tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date)); changePercentageYearAgo = computeYearOverYearChange(rawData); @@ -196,7 +196,7 @@ async function changeStatement(state) { timePeriod = state; - config = await plotData(); + config = plotData(); } function filterDataByTimePeriod(rawData, timePeriod) { @@ -257,14 +257,14 @@ enabled: false, }, chart: { - backgroundColor: "#09090B", - plotBackgroundColor: "#09090B", + backgroundColor: $mode === "light" ? "#fff" : "#09090B", + plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B", height: 360, // Set the maximum height for the chart }, title: { text: `

${$stockTicker} Market Cap

`, style: { - color: "white", + color: $mode === "light" ? "black" : "white", // Using inline CSS for margin-top and margin-bottom }, useHTML: true, // Enable HTML to apply custom class styling @@ -274,13 +274,13 @@ endOnTick: false, categories: filteredData?.dates, crosshair: { - color: "#fff", // Set the color of the crosshair line + color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line width: 1, // Adjust the line width as needed dashStyle: "Solid", }, labels: { style: { - color: "#fff", + color: $mode === "light" ? "black" : "white", }, distance: 20, // Increases space between label and axis formatter: function () { @@ -306,9 +306,9 @@ }, yAxis: { gridLineWidth: 1, - gridLineColor: "#111827", + gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827", labels: { - style: { color: "white" }, + style: { color: $mode === "light" ? "black" : "white" }, }, title: { text: null }, opposite: true, @@ -327,7 +327,7 @@ borderRadius: 4, formatter: function () { // Format the x value to display time in hh:mm format - let tooltipContent = `${new Date( + let tooltipContent = `${new Date( this?.x, ).toLocaleDateString("en-US", { year: "numeric", @@ -337,8 +337,8 @@ // Loop through each point in the shared tooltip this.points.forEach((point) => { - tooltipContent += `${point.series.name}: - ${abbreviateNumber( + tooltipContent += `${point.series.name}: + ${abbreviateNumber( point.y, )}
`; }); @@ -365,7 +365,7 @@ name: "Mkt Cap", type: "area", data: filteredData?.marketCapList, - color: "#fff", + color: $mode === "light" ? "blue" : "white", lineWidth: 1, marker: { enabled: false, @@ -417,6 +417,13 @@ } }; + let config = null; + + $: { + if ($mode) { + config = plotData(); + } + } $: capCategory = getMarketCapCategory(data?.getStockQuote?.marketCap); @@ -425,7 +432,7 @@ description={`Historical Market Cap of ${$displayCompanyName}.`} /> -
+
-

+

{removeCompanyStrings($displayCompanyName)} Market Cap

@@ -463,31 +470,29 @@ class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6 mt-3" >
-
+
Market Cap - ●
- + {abbreviateNumber(data?.getStockQuote?.marketCap)}
-
+
Category - ●
- {#if capCategory} {capCategory.name} @@ -500,14 +505,13 @@
-
+
1-Year Change - ●
- {changePercentageYearAgo > 100 ? "> 100" : changePercentageYearAgo?.toFixed(1)}% {changePercentageYearAgo >= 0 ? "Positive" : "Negative"} Trend @@ -533,9 +537,7 @@
-

+

Market Cap Chart

@@ -547,9 +549,9 @@
-

+

Market Cap History

@@ -659,7 +661,7 @@ class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto" >
{#each tabs as item, i} {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0} @@ -697,7 +699,7 @@ class="relative text-sm block font-semibold whitespace-nowrap {activeIdx === i ? 'text-black' - : 'text-white'}" + : ''}" > {item.title} @@ -710,30 +712,23 @@
Company Market Cap
{item?.name}
- + - - - Date + + {#each tableList as item, index} -
DateMarket Cap% ChangeMarket Cap% Change
+ {new Date(item?.date)?.toLocaleDateString("en-US", { day: "2-digit", // Include day number month: "short", // Display short month name @@ -742,18 +737,18 @@ {@html abbreviateNumber(item?.marketCap, false, true)} {#if index === tableList?.length - 1} n/a {:else if item?.marketCap > tableList[index + 1]?.marketCap} - + +{( ((item?.marketCap - tableList[index + 1]?.marketCap) / @@ -762,7 +757,7 @@ )?.toFixed(2)}% {:else if item?.marketCap < tableList[index + 1]?.marketCap} - + -{( Math.abs( (item?.marketCap -