AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-11 22:53:08 +01:00
parent 79c869b741
commit 4fedfadcf7
3 changed files with 325 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/lib/components/ETFSidecard.svelte
View File

@ -70,43 +70,43 @@
} }
</script> </script>
<div class="px-0.5 lg:px-0"> <div class="px-0.5 lg:px-0 text-muted dark:text-white">
<h2 class="mb-2 text-2xl text-white font-semibold"> <h2 class="mb-2 text-2xl font-semibold">
About {$etfTicker} About {$etfTicker}
</h2> </h2>
<p class="text-gray-200"> <p class="text-muted dark:text-gray-200">
{description} {description}
</p> </p>
<div <div
class="mt-3 grid grid-cols-2 gap-3 w-full border-b border-gray-600 lg:border-none pb-8 lg:pb-0" class="mt-3 grid grid-cols-2 gap-3 w-full border-b border-gray-300 dark:border-gray-600 lg:border-none pb-8 lg:pb-0"
> >
<div class="col-span-1 text-gray-200"> <div class="col-span-1 text-muted dark:text-gray-200">
<span class="block font-semibold">Asset Class</span> <span class="block font-semibold">Asset Class</span>
<span class=" text-white">{assetClass}</span> <span class=" ">{assetClass}</span>
</div> </div>
<div class="col-span-1 text-gray-200"> <div class="col-span-1 text-muted dark:text-gray-200">
<span class="block font-semibold">Ticker Symbol</span> <span class="block font-semibold">Ticker Symbol</span>
{$etfTicker} {$etfTicker}
</div> </div>
<div class="col-span-1 text-gray-200"> <div class="col-span-1 text-muted dark:text-gray-200">
<span class="block font-semibold">Inception Date</span> <span class="block font-semibold">Inception Date</span>
<span>{ipoDate}</span> <span>{ipoDate}</span>
</div> </div>
<div class="col-span-1 text-gray-200"> <div class="col-span-1 text-muted dark:text-gray-200">
<span class="block font-semibold">Provider</span> <span class="block font-semibold">Provider</span>
<a <a
href={`/etf/etf-providers/${provider}`} href={`/etf/etf-providers/${provider}`}
class="sm:hover:text-blue-400 text-white underline underline-offset-4" class="sm:hover:text-blue-400 underline underline-offset-4"
>{formatETFName(provider)}</a >{formatETFName(provider)}</a
> >
</div> </div>
<div class="col-span-1 whitespace-nowrap text-gray-200"> <div class="col-span-1 whitespace-nowrap text-muted dark:text-gray-200">
<span class="block font-semibold">Website</span> <span class="block font-semibold">Website</span>
<a <a
href={website} href={website}
class="sm:hover:text-blue-400 text-white underline underline-offset-4" class="sm:hover:text-blue-400 underline underline-offset-4"
target="_blank">Fund Home Page</a target="_blank">Fund Home Page</a
> >
</div> </div>
@ -114,18 +114,23 @@
</div> </div>
{#if topSectorList?.length !== 0} {#if topSectorList?.length !== 0}
<div class="space-y-3 pt-5 {topSectorList?.length !== 0 ? '' : 'hidden'}"> <div
class="space-y-3 pt-5 text-muted dark:text-white {topSectorList?.length !==
0
? ''
: 'hidden'}"
>
<div class="h-auto w-full"> <div class="h-auto w-full">
<!--Start Content--> <!--Start Content-->
<div class="w-auto lg:w-full flex flex-col m-auto"> <div class="w-auto lg:w-full flex flex-col m-auto">
<h2 class="mb-2 text-2xl text-white flex flex-row items-center"> <h2 class="mb-2 text-2xl flex flex-row items-center">
<span class="font-bold">Top Sectors</span> <span class="font-bold">Top Sectors</span>
</h2> </h2>
<div class="mt-2 w-full overflow-hidden"> <div class="mt-2 w-full overflow-hidden">
<table class="w-full text-white"> <table class="w-full">
<thead> <thead>
<tr class="border-y border-gray-800"> <tr class="border-y border-gray-300 dark:border-gray-800">
<th class="px-1 py-1.5 text-left xs:px-2">Sector</th> <th class="px-1 py-1.5 text-left xs:px-2">Sector</th>
<th class="px-1 py-1.5 text-right xs:px-2">Weight %</th> <th class="px-1 py-1.5 text-right xs:px-2">Weight %</th>
@ -134,13 +139,13 @@
<tbody> <tbody>
{#each topSectorList as item} {#each topSectorList as item}
{#if item?.weightPercentage > 0} {#if item?.weightPercentage > 0}
<tr class="text-white border-b border-[#27272A]"> <tr class=" border-b border-gray-300 dark:border-gray-800">
<td class="px-1 py-1.5 text-left xs:px-2"> <td class="px-1 py-1.5 text-left xs:px-2">
<a <a
href={sectorNavigation?.find( href={sectorNavigation?.find(
(listItem) => listItem?.title === item?.sector, (listItem) => listItem?.title === item?.sector,
)?.link} )?.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} {item?.sector}
</a> </a>
@ -158,7 +163,7 @@
<a <a
href={`/industry/sectors`} href={`/industry/sectors`}
class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100" class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
> >
All Sectors All Sectors
</a> </a>
@ -169,24 +174,25 @@
{#if topHoldingList?.length !== 0} {#if topHoldingList?.length !== 0}
<div <div
class="space-y-3 pt-8 sm:pt-5 {topHoldingList?.length !== 0 class="space-y-3 pt-8 sm:pt-5 text-muted dark:text-white {topHoldingList?.length !==
0
? '' ? ''
: 'hidden'}" : 'hidden'}"
> >
<div class="h-auto w-full"> <div class="h-auto w-full">
<!--Start Content--> <!--Start Content-->
<div class="w-auto lg:w-full flex flex-col m-auto"> <div class="w-auto lg:w-full flex flex-col m-auto">
<h2 class="mb-2 text-2xl text-white flex flex-row items-center"> <h2 class="mb-2 text-2xl flex flex-row items-center">
<span class="font-bold">Top 10 Holdings</span> <span class="font-bold">Top 10 Holdings</span>
<span class="text-white font-semibold ml-auto text-sm"> <span class=" font-semibold ml-auto text-sm">
{totalAssetPercentage}% of assets {totalAssetPercentage}% of assets
</span> </span>
</h2> </h2>
<div class="mt-2 w-full"> <div class="mt-2 w-full">
<table class="w-full text-white"> <table class="w-full">
<thead <thead
><tr class="border-y border-gray-800" ><tr class="border-y border-gray-300 dark:border-gray-800"
><th class="px-1 py-1.5 text-left xs:px-2">Name</th> ><th class="px-1 py-1.5 text-left xs:px-2">Name</th>
<th class="px-1 py-1.5 text-left xs:px-2">Symbol</th> <th class="px-1 py-1.5 text-left xs:px-2">Symbol</th>
<th class="px-1 py-1.5 text-right xs:px-2">Weight</th></tr <th class="px-1 py-1.5 text-right xs:px-2">Weight</th></tr
@ -196,8 +202,7 @@
{#each topHoldingList?.slice(0, 10) as item} {#each topHoldingList?.slice(0, 10) as item}
{#if item?.symbol !== null} {#if item?.symbol !== null}
<tr <tr
on:click={() => stockSelector(item?.symbol)} class="border-b border-gray-300 dark:border-gray-300 dark:border-gray-800"
class="cursor-pointer lg:hover:bg-[#245073] lg:hover:bg-opacity-[0.2] [#09090B] border-b border-[#27272A]"
> >
<td class="px-1 py-1.5 text-left xs:px-2"> <td class="px-1 py-1.5 text-left xs:px-2">
{#if typeof item?.name !== "undefined"} {#if typeof item?.name !== "undefined"}
@ -225,7 +230,7 @@
<a <a
href={`/etf/${$etfTicker}/holdings`} href={`/etf/${$etfTicker}/holdings`}
class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100" class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
> >
View More Holdings View More Holdings
</a> </a>
@ -236,25 +241,26 @@
{#if dividendHistoryList?.length !== 0} {#if dividendHistoryList?.length !== 0}
<div <div
class="space-y-3 pt-8 sm:pt-5 {(dividendHistoryList?.length ?? []) class="space-y-3 pt-8 sm:pt-5 text-muted dark:text-white {(
?.length !== 0 dividendHistoryList?.length ?? []
)?.length !== 0
? '' ? ''
: 'hidden'}" : 'hidden'}"
> >
<div class="h-auto w-full"> <div class="h-auto w-full">
<!--Start Content--> <!--Start Content-->
<div class="w-auto lg:w-full flex flex-col m-auto"> <div class="w-auto lg:w-full flex flex-col m-auto">
<h2 class="mb-2 text-2xl text-white flex flex-row items-center"> <h2 class="mb-2 text-2xl flex flex-row items-center">
<span class="font-bold">Dividends</span> <span class="font-bold">Dividends</span>
<span class="text-white font-semibold ml-auto text-sm"> <span class=" font-semibold ml-auto text-sm">
Dividend Yield {dividendYield ?? "0"}% Dividend Yield {dividendYield ?? "0"}%
</span> </span>
</h2> </h2>
<div class="mt-2 w-full"> <div class="mt-2 w-full">
<table class="w-full text-white"> <table class="w-full">
<thead <thead
><tr class="border-y border-gray-800" ><tr class="border-y border-gray-300 dark:border-gray-800"
><th class="px-1 py-1.5 text-left xs:px-2">Ex-Dividend</th> ><th class="px-1 py-1.5 text-left xs:px-2">Ex-Dividend</th>
<th class="px-1 py-1.5 text-left xs:px-2">Amount</th> <th class="px-1 py-1.5 text-left xs:px-2">Amount</th>
<th class="px-1 py-1.5 text-right xs:px-2">Payment Date</th></tr <th class="px-1 py-1.5 text-right xs:px-2">Payment Date</th></tr
@ -263,7 +269,7 @@
<tbody> <tbody>
{#each dividendHistoryList?.slice(0, 5) as item} {#each dividendHistoryList?.slice(0, 5) as item}
<tr class="text-white bg-default border-b border-[#27272A]"> <tr class="border-b border-gray-300 dark:border-gray-800">
<td class="px-1 py-1.5 text-left xs:px-2"> <td class="px-1 py-1.5 text-left xs:px-2">
{new Date(item?.date)?.toLocaleString("en-US", { {new Date(item?.date)?.toLocaleString("en-US", {
month: "short", month: "short",
@ -295,7 +301,7 @@
<a <a
href={`/etf/${$etfTicker}/dividends`} href={`/etf/${$etfTicker}/dividends`}
class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100" class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
> >
Full Dividend History Full Dividend History
</a> </a>

143
src/routes/etf/[tickerID]/+layout.svelte
View File

@ -36,7 +36,7 @@
let socket; let socket;
$etfTicker = data?.getParams; $etfTicker = data?.getParams;
$assetType = "etf"; $assetType = "stock";
$displayCompanyName = data?.companyName; $displayCompanyName = data?.companyName;
let isScrolled = false; let isScrolled = false;
@ -44,6 +44,9 @@
let userWatchList = data?.getUserWatchlist ?? []; let userWatchList = data?.getUserWatchlist ?? [];
let isTickerIncluded = false; let isTickerIncluded = false;
//let userPortfolio = data?.getUserPortfolio ?? [];
//let holdingShares = 0;
//let availableCash = 0;
let displaySection = ""; let displaySection = "";
let displayLegend = {}; let displayLegend = {};
@ -70,14 +73,20 @@
options: "/options", options: "/options",
"dark-pool": "/dark-pool", "dark-pool": "/dark-pool",
dividends: "/dividends", dividends: "/dividends",
holdings: "/holdings", statistics: "/statistics",
metrics: "metrics",
forecast: "/forecast",
financials: "/financials",
history: "/history", history: "/history",
profile: "/profile",
}; };
if (state !== "overview" && sectionMap[state]) { if (state !== "overview" && sectionMap[state]) {
displaySection = state; displaySection = state;
//goto(`/stocks/${$etfTicker}${sectionMap[state]}`);
} else { } else {
displaySection = "overview"; displaySection = "overview";
//goto(`/stocks/${$etfTicker}/`);
} }
} }
@ -328,6 +337,7 @@
}; };
} }
} }
$: isTickerIncluded = userWatchList?.some( $: isTickerIncluded = userWatchList?.some(
(item) => item.user === data?.user?.id && item.ticker?.includes($etfTicker), (item) => item.user === data?.user?.id && item.ticker?.includes($etfTicker),
); );
@ -335,7 +345,7 @@
$: charNumber = $screenWidth < 640 ? 25 : 40; $: charNumber = $screenWidth < 640 ? 25 : 40;
$: { $: {
if ($etfTicker && $page.url.pathname === `/etf/${$etfTicker}`) { if ($etfTicker && $page.url.pathname === `/stocks/${$etfTicker}`) {
displaySection = "overview"; displaySection = "overview";
} }
} }
@ -344,12 +354,16 @@
if ($page?.url?.pathname) { if ($page?.url?.pathname) {
const parts = $page?.url?.pathname?.split("/"); const parts = $page?.url?.pathname?.split("/");
const sectionMap = { const sectionMap = {
holdings: "holdings", statistics: "statistics",
financials: "financials",
options: "options", options: "options",
"dark-pool": "dark-pool", "dark-pool": "dark-pool",
metrics: "metrics",
insider: "insider", insider: "insider",
dividends: "dividends", dividends: "dividends",
forecast: "forecast",
history: "history", history: "history",
profile: "profile",
}; };
displaySection = displaySection =
sectionMap[ sectionMap[
@ -364,24 +378,23 @@
<svelte:window bind:scrollY={y} /> <svelte:window bind:scrollY={y} />
<body <body
class="w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden" class="text-muted dark:text-white w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
> >
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="mt-5 flex flex-col w-full relative w-full"> <div class="mt-5 flex flex-col w-full relative w-full sm:max-w-[1250px]">
<main class="grow w-full"> <main class="grow w-full">
<section class="w-full"> <section class="">
<div class="w-full"> <div class="w-full">
<div class="sm:flex sm:justify-start w-full sm:max-w-[1250px]"> <div class="sm:flex sm:justify-start w-full">
<!--Start Mobile Navbar--> <!--Start Mobile Navbar-->
<div class="fixed top-0 left-0 right-0 z-20 sm:hidden">
<div class="navbar w-full px-4 py-2">
<div <div
class="{isScrolled class="fixed top-0 left-0 right-0 z-20 sm:hidden {isScrolled
? 'border-b border-gray-600 ease-in' ? 'border-b border-gray-300 dark:border-gray-800 ease-in shadow'
: 'ease-out'} m-auto w-full" : 'ease-out'} m-auto w-full"
> >
<div class="navbar h-full w-full px-4 bg-white dark:bg-default">
<div <div
class="flex-1 shrink-0 flex flex-row items-center justify-between -mt-2" class="flex-1 shrink-0 flex flex-row items-center justify-between"
> >
<a <a
href={/^\/(stocks|etf|index)/.test($previousPage || "") href={/^\/(stocks|etf|index)/.test($previousPage || "")
@ -394,7 +407,7 @@
viewBox="0 0 1024 1024" viewBox="0 0 1024 1024"
><g transform="rotate(-90 512 512)" ><g transform="rotate(-90 512 512)"
><path ><path
fill="white" fill={$mode === "light" ? "#2C6288" : "white"}
d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z" d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z"
/></g /></g
></svg ></svg
@ -406,10 +419,10 @@
? "hidden" ? "hidden"
: "flex flex-col items-center ml-6 transition-transform ease-in"} : "flex flex-col items-center ml-6 transition-transform ease-in"}
> >
<span class="text-white text-xs font-semibold"> <span class=" text-xs font-semibold">
{$etfTicker} {$etfTicker}
</span> </span>
<span class="text-white text-sm"> <span class=" text-sm">
{#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0} {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
{$currentPortfolioPrice} {$currentPortfolioPrice}
{:else} {:else}
@ -426,7 +439,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="none" fill="none"
stroke="white" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="1.5" stroke-width="1.5"
@ -440,14 +453,16 @@
<label <label
class="mr-4" class="mr-4"
on:click={() => on:click={() =>
shareContent("https://stocknear.com/etf/" + $etfTicker)} shareContent(
"https://stocknear.com/stocks/" + $etfTicker,
)}
> >
<svg <svg
class="w-6 h-6 inline-block" class="w-6 h-6 inline-block"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
stroke="#fff" stroke="currentColor"
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
id="SVGRepo_tracerCarrier" id="SVGRepo_tracerCarrier"
stroke-linecap="round" stroke-linecap="round"
@ -455,7 +470,7 @@
></g><g id="SVGRepo_iconCarrier"> ></g><g id="SVGRepo_iconCarrier">
<path <path
d="M20.3359 3.22136L3.87333 8.70889C3.56801 8.81066 3.55033 9.23586 3.84614 9.36263L9.89655 11.9557C9.96078 11.9832 10.0347 11.9752 10.0916 11.9346L16.0235 7.69749C16.2073 7.56618 16.4338 7.79266 16.3025 7.97648L12.0654 13.9084C12.0248 13.9653 12.0168 14.0392 12.0443 14.1034L14.6374 20.1539C14.7641 20.4497 15.1893 20.432 15.2911 20.1267L20.7786 3.66408C20.8698 3.39046 20.6095 3.13015 20.3359 3.22136Z" d="M20.3359 3.22136L3.87333 8.70889C3.56801 8.81066 3.55033 9.23586 3.84614 9.36263L9.89655 11.9557C9.96078 11.9832 10.0347 11.9752 10.0916 11.9346L16.0235 7.69749C16.2073 7.56618 16.4338 7.79266 16.3025 7.97648L12.0654 13.9084C12.0248 13.9653 12.0168 14.0392 12.0443 14.1034L14.6374 20.1539C14.7641 20.4497 15.1893 20.432 15.2911 20.1267L20.7786 3.66408C20.8698 3.39046 20.6095 3.13015 20.3359 3.22136Z"
fill="#fff" fill={$mode === "light" ? "#2C6288" : "white"}
></path> ></path>
</g></svg </g></svg
> >
@ -477,7 +492,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="#fff" fill={$mode === "light" ? "#2C6288" : "white"}
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
/></svg /></svg
> >
@ -487,7 +502,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="white" fill={$mode === "light" ? "#2C6288" : "white"}
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >
@ -504,7 +519,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="#fff" fill={$mode === "light" ? "#2C6288" : "white"}
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
/></svg /></svg
> >
@ -514,7 +529,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="white" fill={$mode === "light" ? "#2C6288" : "white"}
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >
@ -523,16 +538,13 @@
{/if} {/if}
</div> </div>
{:else} {:else}
<label <label for="userLogin" class="cursor-pointer shrink-0 mr-4">
for="userLogin"
class="cursor-pointer shrink-0 text-white mr-4"
>
<svg <svg
class="w-6 h-6 inline-block" class="w-6 h-6 inline-block"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="white" fill={$mode === "light" ? "#2C6288" : "white"}
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >
@ -552,7 +564,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
><g ><g
fill="none" fill="none"
stroke="white" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="1.5" stroke-width="1.5"
@ -568,7 +580,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!--End Mobile Navbar--> <!--End Mobile Navbar-->
<div class="pt-14 sm:pt-0 w-full px-3 sm:px-0 lg:pr-3"> <div class="pt-14 sm:pt-0 w-full px-3 sm:px-0 lg:pr-3">
@ -602,7 +613,9 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="#fff" fill={$mode === "light"
? "#2C6288"
: "white"}
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
/></svg /></svg
> >
@ -612,7 +625,9 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="white" fill={$mode === "light"
? "#2C6288"
: "white"}
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >
@ -634,7 +649,9 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="#fff" fill={$mode === "light"
? "#2C6288"
: "white"}
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
/></svg /></svg
> >
@ -644,7 +661,9 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="white" fill={$mode === "light"
? "#2C6288"
: "white"}
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >
@ -659,14 +678,14 @@
> >
<label <label
for="userLogin" for="userLogin"
class="cursor-pointer shrink-0 text-white" class="cursor-pointer shrink-0"
> >
<svg <svg
class="w-7 h-7 inline-block" class="w-7 h-7 inline-block"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="white" fill={$mode === "light" ? "#2C6288" : "white"}
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"
/></svg /></svg
> >
@ -683,7 +702,7 @@
<label <label
on:click={() => ($openPriceAlert = true)} on:click={() => ($openPriceAlert = true)}
for={data?.user ? "priceAlertModal" : "userLogin"} for={data?.user ? "priceAlertModal" : "userLogin"}
class="cursor-pointer shrink-0 text-white" class="cursor-pointer shrink-0"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -691,7 +710,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
><g ><g
fill="none" fill="none"
stroke="white" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="1.5" stroke-width="1.5"
@ -718,9 +737,7 @@
<div <div
class="flex flex-row justify-between items-center w-full sm:-mt-[50px] mb-5 sm:mb-10" class="flex flex-row justify-between items-center w-full sm:-mt-[50px] mb-5 sm:mb-10"
> >
<h1 <h1 class="text-2xl lg:text-3xl font-bold">
class="text-2xl lg:text-3xl font-bold text-white"
>
{$displayCompanyName?.length > charNumber {$displayCompanyName?.length > charNumber
? $displayCompanyName?.slice(0, charNumber) + ? $displayCompanyName?.slice(0, charNumber) +
"..." "..."
@ -732,7 +749,7 @@
</div> </div>
<div <div
class="-mt-5 sm:-mt-8 mb-5 flex flex-row items-end space-x-2 xs:space-x-3 sm:space-x-5 text-white" class="-mt-5 sm:-mt-8 mb-5 flex flex-row items-end space-x-2 xs:space-x-3 sm:space-x-5"
> >
<div class="w-full max-w-[50%] whitespace-nowrap"> <div class="w-full max-w-[50%] whitespace-nowrap">
<div <div
@ -754,14 +771,14 @@
<span <span
class={displayLegend?.change >= 0 class={displayLegend?.change >= 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"} : "text-red-600 dark:text-[#FF2F1F]"}
> >
{displayLegend?.change} {displayLegend?.change}
</span> </span>
<span <span
class={displayLegend?.changesPercentage >= 0 class={displayLegend?.changesPercentage >= 0
? "text-[#00FC50]" ? "text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"} : "text-red-600 dark:text-[#FF2F1F]"}
> >
({displayLegend?.changesPercentage}%) ({displayLegend?.changesPercentage}%)
</span> </span>
@ -790,12 +807,12 @@
class="border-l border-default pl-3 bp:pl-5" class="border-l border-default pl-3 bp:pl-5"
> >
<div <div
class="block text-2xl sm:text-[1.7rem] font-semibold leading-5 text-faded sm:inline" class="block text-2xl sm:text-[1.7rem] font-semibold leading-5 sm:inline"
> >
{prePostData?.price?.toFixed(2)} {prePostData?.price?.toFixed(2)}
</div> </div>
<div <div
class="mt-1.5 block text-sm xs: sm:mt-0 sm:inline sm:text-lg {prePostData?.changesPercentage >= class="mt-1.5 block text-sm sm:mt-0 sm:inline sm:text-lg {prePostData?.changesPercentage >=
0 0
? "before:content-['+'] text-green-600 dark:text-[#00FC50]" ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'}" : 'text-red-600 dark:text-[#FF2F1F]'}"
@ -868,8 +885,8 @@
on:click={() => changeSection("overview")} on:click={() => changeSection("overview")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'overview' 'overview'
? 'text-white bg-secondary font-semibold' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : '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 Overview
</a> </a>
@ -879,8 +896,8 @@
on:click={() => changeSection("holdings")} on:click={() => changeSection("holdings")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'holdings' 'holdings'
? 'text-white bg-secondary font-semibold' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : '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 Holdings
</a> </a>
@ -890,8 +907,8 @@
on:click={() => changeSection("dark-pool")} on:click={() => changeSection("dark-pool")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'dark-pool' 'dark-pool'
? 'text-white bg-secondary font-semibold' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : '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 Dark Pool
</a> </a>
@ -900,8 +917,8 @@
on:click={() => changeSection("options")} on:click={() => changeSection("options")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'options' 'options'
? 'text-white bg-secondary font-semibold' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : '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 Options
</a> </a>
@ -911,8 +928,8 @@
on:click={() => changeSection("insider")} on:click={() => changeSection("insider")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'insider' 'insider'
? 'text-white bg-secondary font-semibold' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : '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 Insider
</a> </a>
@ -921,8 +938,8 @@
on:click={() => changeSection("dividends")} on:click={() => changeSection("dividends")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'dividends' 'dividends'
? 'text-white bg-secondary font-semibold' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : '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 Dividends
</a> </a>
@ -931,8 +948,8 @@
on:click={() => changeSection("history")} on:click={() => changeSection("history")}
class="p-2 px-5 cursor-pointer {displaySection === class="p-2 px-5 cursor-pointer {displaySection ===
'history' 'history'
? 'text-white bg-secondary font-semibold' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-secondary font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : '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 History
</a> </a>
@ -961,7 +978,7 @@
<!--End Login Modal--> <!--End Login Modal-->
<!--Start SellTrade Modal--> <!--Start SellTrade Modal-->
<PriceAlert {data} ticker={$etfTicker} assetType="etf" /> <PriceAlert {data} ticker={$etfTicker} assetType="stock" />
<!--Start Add Watchlist Modal--> <!--Start Add Watchlist Modal-->
<input type="checkbox" id="addWatchListModal" class="modal-toggle" /> <input type="checkbox" id="addWatchListModal" class="modal-toggle" />

98
src/routes/etf/[tickerID]/+page.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import highcharts from "$lib/highcharts.ts"; import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher";
import { import {
getCache, getCache,
@ -83,13 +84,17 @@
? data?.getStockQuote?.changesPercentage < 0 ? data?.getStockQuote?.changesPercentage < 0
: change < 0; : change < 0;
const lineColor = isNegative ? "#CC261A" : "#00FC50"; const lineColor = isNegative
? "#CC261A"
: $mode === "light"
? "#047857"
: "#00FC50";
const fillColorStart = isNegative const fillColorStart = isNegative
? "rgba(204, 38, 26, 0.3)" ? "rgba(204, 38, 26, 0.3)"
: "rgba(0, 252, 80, 0.3)"; : "rgb(4, 120, 87, 0.3)"; //"rgba(0, 252, 80, 0.3)";
const fillColorEnd = isNegative const fillColorEnd = isNegative
? "rgba(204, 38, 26, 0.004)" ? "rgba(204, 38, 26, 0.004)"
: "rgba(0, 252, 80, 0.004)"; : "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)";
const baseDate = const baseDate =
rawData && rawData?.length ? new Date(rawData?.at(0)?.time) : new Date(); rawData && rawData?.length ? new Date(rawData?.at(0)?.time) : new Date();
@ -112,8 +117,9 @@
const options = { const options = {
chart: { chart: {
backgroundColor: "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360, height: 360,
animation: false,
events: { events: {
// Add touch event handling to hide tooltip on mobile // Add touch event handling to hide tooltip on mobile
load: function () { load: function () {
@ -148,7 +154,7 @@
borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
borderWidth: 1, borderWidth: 1,
style: { style: {
color: "#fff", color: $mode === "light" ? "black" : "white",
fontSize: "16px", fontSize: "16px",
padding: "10px", padding: "10px",
}, },
@ -182,11 +188,11 @@
// Loop through each point in the shared tooltip // Loop through each point in the shared tooltip
this.points?.forEach((point) => { this.points?.forEach((point) => {
tooltipContent += `<span class="text-white text-[1rem] font-[501]">${point.series.name}: ${point.y}</span><br>`; tooltipContent += `<span class=" text-[1rem] font-[501]">${point.series.name}: ${point.y}</span><br>`;
}); });
// Append the formatted date at the end // Append the formatted date at the end
tooltipContent += `<span class="text-white m-auto text-black text-sm font-normal">${formattedDate}</span><br>`; tooltipContent += `<span class=" m-auto text-black text-sm font-normal">${formattedDate}</span><br>`;
return tooltipContent; return tooltipContent;
}, },
@ -199,12 +205,12 @@
tickLength: 0, tickLength: 0,
categories: displayData === "1D" ? null : dateList, categories: displayData === "1D" ? null : dateList,
crosshair: { crosshair: {
color: "#fff", color: $mode === "light" ? "black" : "white",
width: 1, width: 1,
dashStyle: "Solid", dashStyle: "Solid",
}, },
labels: { labels: {
style: { color: "#fff" }, style: { color: $mode === "light" ? "black" : "white" },
distance: 20, distance: 20,
formatter: function () { formatter: function () {
const date = new Date(this?.value); const date = new Date(this?.value);
@ -249,10 +255,10 @@
startOnTick: false, startOnTick: false,
endOnTick: false, endOnTick: false,
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
title: { text: null }, title: { text: null },
labels: { labels: {
style: { color: "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },
opposite: true, opposite: true,
// Add a dashed plot line at the previous close value // Add a dashed plot line at the previous close value
@ -634,7 +640,7 @@
} }
$: { $: {
if ($etfTicker) { if ($etfTicker || $mode) {
// add a check to see if running on client-side // add a check to see if running on client-side
shouldUpdatePriceChart.set(false); shouldUpdatePriceChart.set(false);
oneDayPrice = []; oneDayPrice = [];
@ -656,7 +662,7 @@
description={`Get a real-time ${data?.companyName} (${$etfTicker}) stock chart, price quote with breaking news, financials, statistics, charts and more.`} description={`Get a real-time ${data?.companyName} (${$etfTicker}) stock chart, price quote with breaking news, financials, statistics, charts and more.`}
/> />
<section class="bg-default min-h-screen pb-40 overflow-hidden w-full"> <section class="text-muted dark: min-h-screen pb-40 overflow-hidden w-full">
<div class="w-full m-auto overflow-hidden"> <div class="w-full m-auto overflow-hidden">
<div <div
class="md:flex md:justify-between md:divide-x md:divide-slate-800 w-full" class="md:flex md:justify-between md:divide-x md:divide-slate-800 w-full"
@ -670,7 +676,7 @@
<div class="sm:pl-7 mt-4 mb-5 lg:flex lg:flex-row lg:gap-x-4 w-full"> <div class="sm:pl-7 mt-4 mb-5 lg:flex lg:flex-row lg:gap-x-4 w-full">
{#if dataMapping[displayData]?.length === 0} {#if dataMapping[displayData]?.length === 0}
<div <div
class="order-1 lg:order-5 m-auto grow overflow-hidden border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b" class="order-1 lg:order-5 m-auto grow overflow-hidden border-gray-300 dark:border-gray-300 dark:border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
> >
<div class="flex items-center justify-between py-1 sm:pt-0.5"> <div class="flex items-center justify-between py-1 sm:pt-0.5">
<div class="hide-scroll overflow-x-auto"> <div class="hide-scroll overflow-x-auto">
@ -685,8 +691,9 @@
> >
<span <span
class="block {displayData === interval class="block {displayData === interval
? 'text-white' ? 'text-muted dark:'
: 'text-gray-400'}">{interval}</span : 'text-muted dark:text-gray-400'}"
>{interval}</span
> >
<div <div
class="{displayData === interval class="{displayData === interval
@ -699,13 +706,11 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="h-[250px] sm:h-[350px]"> <div class="h-[360px]">
<div <div
class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-800 p-6 text-center md:p-12" class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-300 dark:border-gray-300 dark:border-gray-800 p-6 text-center md:p-12"
>
<div
class="mb-4 text-white text-[1rem] sm:text-xl font-semibold"
> >
<div class="mb-4 text-[1rem] sm:text-xl font-semibold">
No {displayData} chart data available No {displayData} chart data available
</div> </div>
</div> </div>
@ -713,7 +718,7 @@
</div> </div>
{:else} {:else}
<div <div
class="order-1 lg:order-5 grow overflow-hidden border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b" class="order-1 lg:order-5 grow overflow-hidden border-gray-300 dark:border-gray-300 dark:border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
> >
<div class="flex items-center justify-between py-1 sm:pt-0.5"> <div class="flex items-center justify-between py-1 sm:pt-0.5">
<div class="hide-scroll overflow-x-auto"> <div class="hide-scroll overflow-x-auto">
@ -728,13 +733,14 @@
> >
<span <span
class="block {displayData === interval class="block {displayData === interval
? 'text-white' ? 'text-muted dark:text-white'
: 'text-gray-400'}">{interval}</span : 'text-muted dark:text-gray-400'}"
>{interval}</span
> >
<div <div
class="{displayData === interval class="{displayData === interval
? `bg-[${displayLegend?.graphChange < 0 ? '#FF2F1F' : '#00FC50'}] ` ? `bg-[${displayLegend?.graphChange < 0 ? '#FF2F1F' : '#00FC50'}] `
: 'bg-default'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full" : 'bg-white dark:bg-default'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
/> />
</button> </button>
</li> </li>
@ -752,7 +758,7 @@
{displayLegend?.graphChange ?? {displayLegend?.graphChange ??
data?.getStockQuote?.changesPercentage?.toFixed(2)}% data?.getStockQuote?.changesPercentage?.toFixed(2)}%
</span> </span>
<span class="hidden text-gray-200 sm:block" <span class="hidden text-muted dark:text-gray-200 sm:block"
>({displayData})</span >({displayData})</span
> >
</div> </div>
@ -779,14 +785,12 @@
{/if} {/if}
<div <div
class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4" class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4 text-muted dark:text-white"
>
<table
class="w-[50%] text-sm text-white sm:text-[1rem] lg:min-w-[250px]"
> >
<table class="w-[50%] text-sm sm:text-[1rem] lg:min-w-[250px]">
<tbody <tbody
><tr ><tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Bid</td >Bid</td
@ -799,7 +803,7 @@
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Market Cap</td >Market Cap</td
@ -810,7 +814,7 @@
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>AUM</td >AUM</td
@ -823,7 +827,7 @@
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>NAV</td >NAV</td
@ -837,7 +841,7 @@
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>EPS (ttm)</td >EPS (ttm)</td
@ -850,7 +854,7 @@
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>PE Ratio (ttm)</td >PE Ratio (ttm)</td
@ -864,7 +868,7 @@
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Shares Out >Shares Out
@ -879,7 +883,7 @@
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Inception Date</td >Inception Date</td
@ -901,10 +905,10 @@
> >
</tbody> </tbody>
</table> </table>
<table class="w-[50%] text-sm text-white lg:min-w-[250px]"> <table class="w-[50%] text-sm lg:min-w-[250px]">
<tbody <tbody
><tr ><tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Ask</td >Ask</td
@ -917,7 +921,7 @@
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Volume</td >Volume</td
@ -928,7 +932,7 @@
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Open</td >Open</td
@ -939,7 +943,7 @@
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Previous Close</td >Previous Close</td
@ -950,7 +954,7 @@
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Day's Range</td >Day's Range</td
@ -963,7 +967,7 @@
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>52-Week Range</td >52-Week Range</td
@ -977,7 +981,7 @@
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Holdings >Holdings
@ -990,7 +994,7 @@
></tr ></tr
> >
<tr <tr
class="flex flex-col border-b border-gray-800 py-1 sm:table-row sm:py-0" class="flex flex-col border-b border-gray-300 dark:border-gray-800 py-1 sm:table-row sm:py-0"
><td ><td
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm" class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
>Expense Ratio</td >Expense Ratio</td