From 89ae8e8e62edfa109e5cc15a996351ac2f41ca55 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Wed, 25 Dec 2024 00:28:53 +0100 Subject: [PATCH] update etf page --- src/lib/components/Searchbar.svelte | 11 +- src/routes/etf/[tickerID]/+layout.svelte | 20 ++-- .../etf/[tickerID]/dividends/+layout.svelte | 59 ++++------ .../etf/[tickerID]/dividends/+page.svelte | 109 ++++++++++-------- .../etf/[tickerID]/holdings/+page.svelte | 53 ++++----- .../etf/[tickerID]/insider/+layout.svelte | 2 +- .../etf/[tickerID]/insider/+page.svelte | 4 +- 7 files changed, 124 insertions(+), 134 deletions(-) diff --git a/src/lib/components/Searchbar.svelte b/src/lib/components/Searchbar.svelte index 43f77ffc..eeaba88b 100644 --- a/src/lib/components/Searchbar.svelte +++ b/src/lib/components/Searchbar.svelte @@ -201,17 +201,11 @@ if (event.ctrlKey && event.key === "k") { const keyboardSearch = document.getElementById("combobox-input"); keyboardSearch?.dispatchEvent(new MouseEvent("click")); + inputValue = ""; event.preventDefault(); } }; - const handleEscape = (event) => { - if (event.key === "Escape") { - // Escape key is pressed, close the modal - searchBarModalChecked = false; - } - }; - function saveRecentTicker() { try { // Save the version along with the rules @@ -233,10 +227,8 @@ } window.addEventListener("keydown", handleControlK); - window.addEventListener("keydown", handleEscape); return () => { window.removeEventListener("keydown", handleControlK); - window.removeEventListener("keydown", handleEscape); }; }); @@ -319,6 +311,7 @@ (inputValue = "")} class="grow rounded-sm border border-gray-600 py-2 pl-9 text-[1rem] placeholder-gray-400 focus:border-default focus:shadow-lg focus:outline-none focus:ring-0 tiny:pl-8 xs:pl-10 text-white md:py-2 w-full bg-secondary focus:bg-secondary" placeholder="Company or stock symbol..." aria-label="Company or stock symbol..." diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte index 4d4904cb..2d257d9d 100644 --- a/src/routes/etf/[tickerID]/+layout.svelte +++ b/src/routes/etf/[tickerID]/+layout.svelte @@ -676,8 +676,8 @@ on:click={() => changeSection("overview")} class="p-2 px-5 cursor-pointer {displaySection === 'overview' - ? '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]'}" + ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]' + : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}" > Overview @@ -686,8 +686,8 @@ on:click={() => changeSection("holdings")} class="p-2 px-5 cursor-pointer {displaySection === 'holdings' - ? '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]'}" + ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]' + : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}" > Holdings @@ -697,8 +697,8 @@ on:click={() => changeSection("options")} class="p-2 px-5 cursor-pointer {displaySection === 'options' - ? '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]'}" + ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]' + : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}" > Options @@ -707,8 +707,8 @@ on:click={() => changeSection("insider")} class="p-2 px-5 cursor-pointer {displaySection === 'insider' - ? '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]'}" + ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]' + : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}" > Insider @@ -717,8 +717,8 @@ on:click={() => changeSection("dividends")} class="p-2 px-5 cursor-pointer {displaySection === 'dividends' - ? '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]'}" + ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]' + : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}" > Dividends diff --git a/src/routes/etf/[tickerID]/dividends/+layout.svelte b/src/routes/etf/[tickerID]/dividends/+layout.svelte index 1dab400b..8fbe004b 100644 --- a/src/routes/etf/[tickerID]/dividends/+layout.svelte +++ b/src/routes/etf/[tickerID]/dividends/+layout.svelte @@ -1,11 +1,11 @@
@@ -40,44 +40,29 @@ {/if} - {#if similarStocks?.length > 0} + {#if newsList?.length !== 0}
-

Related Stocks

- - - - - {#each similarStocks?.slice(0, 8) as item} - +

+ {$etfTicker} News +

+
    + {#each newsList?.slice(0, 10) as item} +
  • + {formatDate(item?.publishedDate)} · + {item?.title} -
- + - {item?.site} + {/each} - -
CompanyDividend Yield
{item?.symbol}{item?.dividendYield !== null && - item?.dividendYield !== undefined - ? item?.dividendYield + "%" - : "n/a"}
+ +
{/if} diff --git a/src/routes/etf/[tickerID]/dividends/+page.svelte b/src/routes/etf/[tickerID]/dividends/+page.svelte index 49360424..a26942e2 100644 --- a/src/routes/etf/[tickerID]/dividends/+page.svelte +++ b/src/routes/etf/[tickerID]/dividends/+page.svelte @@ -11,6 +11,8 @@ 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; @@ -112,6 +114,63 @@ 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(); @@ -163,55 +222,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/etf/[tickerID]/holdings/+page.svelte b/src/routes/etf/[tickerID]/holdings/+page.svelte index 01ee98dd..2fed3591 100644 --- a/src/routes/etf/[tickerID]/holdings/+page.svelte +++ b/src/routes/etf/[tickerID]/holdings/+page.svelte @@ -6,6 +6,7 @@ } from "$lib/store"; import { formatString } from "$lib/utils"; import Table from "$lib/components/Table/Table.svelte"; + import Infobox from "$lib/components/Infobox.svelte"; export let data; let rawData = data?.getETFHoldings?.holdings; @@ -32,6 +33,28 @@ { name: "% Weight", rule: "weightPercentage", type: "percent" }, { name: "Shares", rule: "sharesNumber", type: "int" }, ]; + + function generateStatementInfoHTML() { + if (rawData?.length > 0) { + return ` + + The ${$displayCompanyName} holds ${rawData?.length} different assets + and the largest one in the portfolio is ${formatString( + rawData?.at(0)?.name, + )}, making up ${rawData?.at(0)?.weightPercentage?.toFixed(2)}% of + the total. + + `; + } else { + return ` + + No financial data available for ${$displayCompanyName}. + + `; + } + } + + let htmlOutput = generateStatementInfoHTML(); @@ -72,37 +95,15 @@
-
-
-
- - - {#if rawData?.length !== 0} - The {$displayCompanyName} holds {rawData?.length} different assets - and the largest one in the portfolio is {formatString( - rawData?.at(0)?.name, - )}, making up {rawData?.at(0)?.weightPercentage?.toFixed(2)}% of - the total. - {:else} - No information available for {$displayCompanyName}. - {/if} -
+
+
+
{#if rawData?.length !== 0} diff --git a/src/routes/etf/[tickerID]/insider/+layout.svelte b/src/routes/etf/[tickerID]/insider/+layout.svelte index 2817c6d0..b8951a47 100644 --- a/src/routes/etf/[tickerID]/insider/+layout.svelte +++ b/src/routes/etf/[tickerID]/insider/+layout.svelte @@ -42,7 +42,7 @@ {#if newsList?.length !== 0}

diff --git a/src/routes/etf/[tickerID]/insider/+page.svelte b/src/routes/etf/[tickerID]/insider/+page.svelte index 920587cb..162c3148 100644 --- a/src/routes/etf/[tickerID]/insider/+page.svelte +++ b/src/routes/etf/[tickerID]/insider/+page.svelte @@ -165,7 +165,7 @@ >