diff --git a/src/lib/components/ETFSidecard.svelte b/src/lib/components/ETFSidecard.svelte index af9bbb6a..fbeb4d85 100644 --- a/src/lib/components/ETFSidecard.svelte +++ b/src/lib/components/ETFSidecard.svelte @@ -70,43 +70,43 @@ } -
-

+
+

About {$etfTicker}

-

+

{description}

-
+
Asset Class - {assetClass} + {assetClass}
-
+
Ticker Symbol {$etfTicker}
-
+
Inception Date {ipoDate}
-
+
Provider {formatETFName(provider)}
-
+
Website Fund Home Page
@@ -114,18 +114,23 @@
{#if topSectorList?.length !== 0} -
+
-

+

Top Sectors

- +
- + @@ -134,13 +139,13 @@ {#each topSectorList as item} {#if item?.weightPercentage > 0} - +
Sector Weight %
listItem?.title === item?.sector, )?.link} - class="sm:hover:underline sm:hover:underline-offset-4 text-white truncate" + class="sm:hover:underline sm:hover:underline-offset-4 truncate" > {item?.sector} @@ -158,7 +163,7 @@ All Sectors @@ -169,24 +174,25 @@ {#if topHoldingList?.length !== 0}
-

+

Top 10 Holdings - + {totalAssetPercentage}% of assets

- +
stockSelector(item?.symbol)} - class="cursor-pointer lg:hover:bg-[#245073] lg:hover:bg-opacity-[0.2] [#09090B] border-b border-[#27272A]" + class="border-b border-gray-300 dark:border-gray-300 dark:border-gray-800" >
Name Symbol Weight
{#if typeof item?.name !== "undefined"} @@ -225,7 +230,7 @@ View More Holdings @@ -236,25 +241,26 @@ {#if dividendHistoryList?.length !== 0}
-

+

Dividends - + Dividend Yield {dividendYield ?? "0"}%

- +
{#each dividendHistoryList?.slice(0, 5) as item} - +
Ex-Dividend Amount Payment Date
{new Date(item?.date)?.toLocaleString("en-US", { month: "short", @@ -295,7 +301,7 @@ Full Dividend History diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte index 1aa9d6be..6004583d 100644 --- a/src/routes/etf/[tickerID]/+layout.svelte +++ b/src/routes/etf/[tickerID]/+layout.svelte @@ -36,7 +36,7 @@ let socket; $etfTicker = data?.getParams; - $assetType = "etf"; + $assetType = "stock"; $displayCompanyName = data?.companyName; let isScrolled = false; @@ -44,6 +44,9 @@ let userWatchList = data?.getUserWatchlist ?? []; let isTickerIncluded = false; + //let userPortfolio = data?.getUserPortfolio ?? []; + //let holdingShares = 0; + //let availableCash = 0; let displaySection = ""; let displayLegend = {}; @@ -70,14 +73,20 @@ options: "/options", "dark-pool": "/dark-pool", dividends: "/dividends", - holdings: "/holdings", + statistics: "/statistics", + metrics: "metrics", + forecast: "/forecast", + financials: "/financials", history: "/history", + profile: "/profile", }; if (state !== "overview" && sectionMap[state]) { displaySection = state; + //goto(`/stocks/${$etfTicker}${sectionMap[state]}`); } else { displaySection = "overview"; + //goto(`/stocks/${$etfTicker}/`); } } @@ -328,6 +337,7 @@ }; } } + $: isTickerIncluded = userWatchList?.some( (item) => item.user === data?.user?.id && item.ticker?.includes($etfTicker), ); @@ -335,7 +345,7 @@ $: charNumber = $screenWidth < 640 ? 25 : 40; $: { - if ($etfTicker && $page.url.pathname === `/etf/${$etfTicker}`) { + if ($etfTicker && $page.url.pathname === `/stocks/${$etfTicker}`) { displaySection = "overview"; } } @@ -344,12 +354,16 @@ if ($page?.url?.pathname) { const parts = $page?.url?.pathname?.split("/"); const sectionMap = { - holdings: "holdings", + statistics: "statistics", + financials: "financials", options: "options", "dark-pool": "dark-pool", + metrics: "metrics", insider: "insider", dividends: "dividends", + forecast: "forecast", history: "history", + profile: "profile", }; displaySection = sectionMap[ @@ -364,208 +378,205 @@ -
+
-
+
-
+
-
-
+
+
-
- - - + -
+ + {$etfTicker} + + + {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0} + {$currentPortfolioPrice} + {:else} + {data?.getStockQuote?.price} + {/if} + +
+ + + + + + + + + + + + {#if data?.user} +
+ {#if userWatchList?.length !== 0} + + {:else if userWatchList?.length === 0} + + {/if}
- - -
+ +
@@ -602,7 +613,9 @@ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" > @@ -612,7 +625,9 @@ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" > @@ -634,7 +649,9 @@ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" > @@ -644,7 +661,9 @@ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" > @@ -659,14 +678,14 @@ >
= 0 ? "before:content-['+'] text-green-600 dark:text-[#00FC50]" - : "text-[#FF2F1F]"} + : "text-red-600 dark:text-[#FF2F1F]"} > {displayLegend?.change} = 0 - ? "text-[#00FC50]" - : "text-[#FF2F1F]"} + ? "text-green-600 dark:text-[#00FC50]" + : "text-red-600 dark:text-[#FF2F1F]"} > ({displayLegend?.changesPercentage}%) @@ -790,12 +807,12 @@ class="border-l border-default pl-3 bp:pl-5" >
{prePostData?.price?.toFixed(2)}
= 0 ? "before:content-['+'] text-green-600 dark:text-[#00FC50]" : 'text-red-600 dark:text-[#FF2F1F]'}" @@ -868,8 +885,8 @@ on:click={() => changeSection("overview")} class="p-2 px-5 cursor-pointer {displaySection === 'overview' - ? 'text-white bg-secondary font-semibold' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' + : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" > Overview @@ -879,8 +896,8 @@ on:click={() => changeSection("holdings")} class="p-2 px-5 cursor-pointer {displaySection === 'holdings' - ? 'text-white bg-secondary font-semibold' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' + : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" > Holdings @@ -890,8 +907,8 @@ on:click={() => changeSection("dark-pool")} class="p-2 px-5 cursor-pointer {displaySection === 'dark-pool' - ? 'text-white bg-secondary font-semibold' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' + : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" > Dark Pool @@ -900,8 +917,8 @@ on:click={() => changeSection("options")} class="p-2 px-5 cursor-pointer {displaySection === 'options' - ? 'text-white bg-secondary font-semibold' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' + : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" > Options @@ -911,8 +928,8 @@ on:click={() => changeSection("insider")} class="p-2 px-5 cursor-pointer {displaySection === 'insider' - ? 'text-white bg-secondary font-semibold' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' + : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" > Insider @@ -921,8 +938,8 @@ on:click={() => changeSection("dividends")} class="p-2 px-5 cursor-pointer {displaySection === 'dividends' - ? 'text-white bg-secondary font-semibold' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' + : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" > Dividends @@ -931,8 +948,8 @@ on:click={() => changeSection("history")} class="p-2 px-5 cursor-pointer {displaySection === 'history' - ? 'text-white bg-secondary font-semibold' - : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" + ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold' + : 'text-blue-700 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-secondary'}" > History @@ -961,7 +978,7 @@ - + diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte index b46ce040..b2c38cea 100644 --- a/src/routes/etf/[tickerID]/+page.svelte +++ b/src/routes/etf/[tickerID]/+page.svelte @@ -1,5 +1,6 @@