diff --git a/src/lib/components/Infobox.svelte b/src/lib/components/Infobox.svelte new file mode 100644 index 00000000..c12f6a03 --- /dev/null +++ b/src/lib/components/Infobox.svelte @@ -0,0 +1,27 @@ + + +
+ +
+
+
+ {@html text} +
+
+
+
\ No newline at end of file diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte index 9e1e23fe..c942b132 100644 --- a/src/routes/stocks/[tickerID]/dividends/+page.svelte +++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte @@ -11,6 +11,7 @@ import { LineChart, BarChart } from "echarts/charts"; import { GridComponent, TooltipComponent } from "echarts/components"; import { CanvasRenderer } from "echarts/renderers"; + import Infobox from "$lib/components/Infobox.svelte"; use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer]); export let data; @@ -118,6 +119,57 @@ optionsDividend = await plotDividend(); isLoaded = true; }); + +function generateDividendInfoHTML() { + const history = rawData?.history || []; + + if (history.length !== 0) { + if (!dateDistance) { + const formattedExDividendDate = new Date(exDividendDate).toLocaleString('en-US', { + month: 'short', + day: 'numeric', + year: 'numeric' + }); + + const payoutFrequencyText = + payoutFrequency === 4 + ? '3 months' + : payoutFrequency === 2 + ? '6 months' + : payoutFrequency === 1 + ? '12 months' + : 'n/a'; + + return ` + + ${$displayCompanyName} has an annual dividend of $${annualDividend} per share, with a forward yield of ${dividendYield}%. + The dividend is paid every ${payoutFrequencyText} and the last ex-dividend date was ${formattedExDividendDate}. + + `; + } else { + const latestDividendDate = new Date(history.at(0)?.date).toLocaleString('en-US', { + month: 'short', + day: 'numeric', + year: 'numeric' + }); + + return ` + + ${$displayCompanyName} issued its most recent dividend on ${latestDividendDate}. + Since then, the company has not distributed any further dividends for over 12 months. + + `; + } + } else { + return ` + + No dividend history available for ${$displayCompanyName}. + + `; + } +} + +const htmlOutput = generateDividendInfoHTML(); @@ -169,55 +221,7 @@ Dividends -
- - - {#if rawData?.history?.length !== 0} - {#if !dateDistance} - {$displayCompanyName} has an annual dividend of ${annualDividend} - per share, with a forward yield of - {dividendYield}%. The dividend is paid every - {payoutFrequency === 4 - ? "3 months" - : payoutFrequency === 2 - ? "6 months" - : payoutFrequency === 1 - ? "12 months" - : "n/a"} - and the last ex-dividend date was - {new Date(exDividendDate)?.toLocaleString("en-US", { - month: "short", - day: "numeric", - year: "numeric", - daySuffix: "2-digit", - })} - {:else} - {$displayCompanyName} issued its most recent dividend on - {new Date(rawData?.history?.at(0)?.date)?.toLocaleString( - "en-US", - { - month: "short", - day: "numeric", - year: "numeric", - daySuffix: "2-digit", - }, - )}. Since then, the company has not distributed any further - dividends for over 12 months. - {/if} - {:else} - No dividend history available for {$displayCompanyName}. - {/if} -
+ {#if rawData?.history?.length !== 0} diff --git a/src/routes/stocks/[tickerID]/financials/+page.svelte b/src/routes/stocks/[tickerID]/financials/+page.svelte index 9c86fbc9..4d3fecae 100644 --- a/src/routes/stocks/[tickerID]/financials/+page.svelte +++ b/src/routes/stocks/[tickerID]/financials/+page.svelte @@ -17,6 +17,7 @@ import { LineChart, BarChart } from "echarts/charts"; import { GridComponent, TooltipComponent } from "echarts/components"; import { CanvasRenderer } from "echarts/renderers"; + import Infobox from "$lib/components/Infobox.svelte"; use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]); export let data; @@ -388,6 +389,36 @@ } } } + + function generateStatementInfoHTML() { + if ($coolMode) { + const statementText = statementConfig?.find( + (item) => item?.propertyName === displayStatement + )?.text; + + return `${statementText || ''}`; + } else if (income?.length > 0) { + return ` + + Get detailed income statement breakdowns, uncovering revenue, expenses, and much more. + + `; + } else { + return ` + + No financial data available for ${$displayCompanyName}. + + `; + } +} + +let htmlOutput = null; +$: { + if($coolMode || displayStatement) { + htmlOutput = generateStatementInfoHTML() + + } +} @@ -447,31 +478,7 @@
-
- - - {#if $coolMode} - {statementConfig?.find( - (item) => item?.propertyName === displayStatement, - )?.text} - - {:else if income?.length > 0} - Get detailed income statement breakdowns, uncovering revenue, - expenses, and much more. - {:else} - No financial data available for {$displayCompanyName} - {/if} -
+ {#if income?.length > 0}
@@ -611,7 +618,7 @@
-
- - - {#if $coolMode} - {statementConfig?.find( - (item) => item?.propertyName === displayStatement, - )?.text} - {:else if balanceSheet?.length > 0} - Get detailed breakdowns of the balance-sheet with total debts, - total investments, and much more. - {:else} - No financial data available for {$displayCompanyName} - {/if} -
+ {#if balanceSheet?.length > 0}
@@ -668,7 +677,7 @@