ui fix
This commit is contained in:
MuslemRahimi
parent
79c869b741
commit
4fedfadcf7
@ -70,43 +70,43 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="px-0.5 lg:px-0">
|
||||
<h2 class="mb-2 text-2xl text-white font-semibold">
|
||||
<div class="px-0.5 lg:px-0 text-muted dark:text-white">
|
||||
<h2 class="mb-2 text-2xl font-semibold">
|
||||
About {$etfTicker}
|
||||
</h2>
|
||||
<p class="text-gray-200">
|
||||
<p class="text-muted dark:text-gray-200">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
<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=" text-white">{assetClass}</span>
|
||||
<span class=" ">{assetClass}</span>
|
||||
</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>
|
||||
{$etfTicker}
|
||||
</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>{ipoDate}</span>
|
||||
</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>
|
||||
<a
|
||||
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
|
||||
>
|
||||
</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>
|
||||
<a
|
||||
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
|
||||
>
|
||||
</div>
|
||||
@ -114,18 +114,23 @@
|
||||
</div>
|
||||
|
||||
{#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">
|
||||
<!--Start Content-->
|
||||
<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>
|
||||
</h2>
|
||||
|
||||
<div class="mt-2 w-full overflow-hidden">
|
||||
<table class="w-full text-white">
|
||||
<table class="w-full">
|
||||
<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-right xs:px-2">Weight %</th>
|
||||
@ -134,13 +139,13 @@
|
||||
<tbody>
|
||||
{#each topSectorList as item}
|
||||
{#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">
|
||||
<a
|
||||
href={sectorNavigation?.find(
|
||||
(listItem) => 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}
|
||||
</a>
|
||||
@ -158,7 +163,7 @@
|
||||
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
@ -169,24 +174,25 @@
|
||||
|
||||
{#if topHoldingList?.length !== 0}
|
||||
<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'}"
|
||||
>
|
||||
<div class="h-auto w-full">
|
||||
<!--Start Content-->
|
||||
<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="text-white font-semibold ml-auto text-sm">
|
||||
<span class=" font-semibold ml-auto text-sm">
|
||||
{totalAssetPercentage}% of assets
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div class="mt-2 w-full">
|
||||
<table class="w-full text-white">
|
||||
<table class="w-full">
|
||||
<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">Symbol</th>
|
||||
<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}
|
||||
{#if item?.symbol !== null}
|
||||
<tr
|
||||
on:click={() => 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"
|
||||
>
|
||||
<td class="px-1 py-1.5 text-left xs:px-2">
|
||||
{#if typeof item?.name !== "undefined"}
|
||||
@ -225,7 +230,7 @@
|
||||
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
@ -236,25 +241,26 @@
|
||||
|
||||
{#if dividendHistoryList?.length !== 0}
|
||||
<div
|
||||
class="space-y-3 pt-8 sm:pt-5 {(dividendHistoryList?.length ?? [])
|
||||
?.length !== 0
|
||||
class="space-y-3 pt-8 sm:pt-5 text-muted dark:text-white {(
|
||||
dividendHistoryList?.length ?? []
|
||||
)?.length !== 0
|
||||
? ''
|
||||
: 'hidden'}"
|
||||
>
|
||||
<div class="h-auto w-full">
|
||||
<!--Start Content-->
|
||||
<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="text-white font-semibold ml-auto text-sm">
|
||||
<span class=" font-semibold ml-auto text-sm">
|
||||
Dividend Yield {dividendYield ?? "0"}%
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div class="mt-2 w-full">
|
||||
<table class="w-full text-white">
|
||||
<table class="w-full">
|
||||
<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">Amount</th>
|
||||
<th class="px-1 py-1.5 text-right xs:px-2">Payment Date</th></tr
|
||||
@ -263,7 +269,7 @@
|
||||
|
||||
<tbody>
|
||||
{#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">
|
||||
{new Date(item?.date)?.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
@ -295,7 +301,7 @@
|
||||
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
|
||||
@ -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 @@
|
||||
<svelte:window bind:scrollY={y} />
|
||||
|
||||
<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 -->
|
||||
<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">
|
||||
<section class="w-full">
|
||||
<section class="">
|
||||
<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-->
|
||||
<div class="fixed top-0 left-0 right-0 z-20 sm:hidden">
|
||||
<div class="navbar w-full px-4 py-2">
|
||||
<div
|
||||
class="fixed top-0 left-0 right-0 z-20 sm:hidden {isScrolled
|
||||
? 'border-b border-gray-300 dark:border-gray-800 ease-in shadow'
|
||||
: 'ease-out'} m-auto w-full"
|
||||
>
|
||||
<div class="navbar h-full w-full px-4 bg-white dark:bg-default">
|
||||
<div
|
||||
class="{isScrolled
|
||||
? 'border-b border-gray-600 ease-in'
|
||||
: 'ease-out'} m-auto w-full"
|
||||
class="flex-1 shrink-0 flex flex-row items-center justify-between"
|
||||
>
|
||||
<div
|
||||
class="flex-1 shrink-0 flex flex-row items-center justify-between -mt-2"
|
||||
<a
|
||||
href={/^\/(stocks|etf|index)/.test($previousPage || "")
|
||||
? "/"
|
||||
: $previousPage || "/"}
|
||||
>
|
||||
<a
|
||||
href={/^\/(stocks|etf|index)/.test($previousPage || "")
|
||||
? "/"
|
||||
: $previousPage || "/"}
|
||||
<svg
|
||||
class="w-5 h-5 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1024 1024"
|
||||
><g transform="rotate(-90 512 512)"
|
||||
><path
|
||||
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"
|
||||
/></g
|
||||
></svg
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1024 1024"
|
||||
><g transform="rotate(-90 512 512)"
|
||||
><path
|
||||
fill="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"
|
||||
/></g
|
||||
></svg
|
||||
>
|
||||
</a>
|
||||
</a>
|
||||
|
||||
<div
|
||||
class={!isScrolled
|
||||
? "hidden"
|
||||
: "flex flex-col items-center ml-6 transition-transform ease-in"}
|
||||
<div
|
||||
class={!isScrolled
|
||||
? "hidden"
|
||||
: "flex flex-col items-center ml-6 transition-transform ease-in"}
|
||||
>
|
||||
<span class=" text-xs font-semibold">
|
||||
{$etfTicker}
|
||||
</span>
|
||||
<span class=" text-sm">
|
||||
{#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
|
||||
{$currentPortfolioPrice}
|
||||
{:else}
|
||||
{data?.getStockQuote?.price}
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--Start Search Button-->
|
||||
<label class="ml-auto mr-4" for="searchBarModal">
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"
|
||||
/></svg
|
||||
>
|
||||
<span class="text-white text-xs font-semibold">
|
||||
{$etfTicker}
|
||||
</span>
|
||||
<span class="text-white text-sm">
|
||||
{#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
|
||||
{$currentPortfolioPrice}
|
||||
{:else}
|
||||
{data?.getStockQuote?.price}
|
||||
{/if}
|
||||
</span>
|
||||
</label>
|
||||
<!--End Search Button-->
|
||||
|
||||
<!--Start Share Button-->
|
||||
<label
|
||||
class="mr-4"
|
||||
on:click={() =>
|
||||
shareContent(
|
||||
"https://stocknear.com/stocks/" + $etfTicker,
|
||||
)}
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke="currentColor"
|
||||
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<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"
|
||||
fill={$mode === "light" ? "#2C6288" : "white"}
|
||||
></path>
|
||||
</g></svg
|
||||
>
|
||||
</label>
|
||||
<!--End Share Button-->
|
||||
|
||||
<!--Start Watchlist-->
|
||||
|
||||
{#if data?.user}
|
||||
<div class="flex flex-col mr-4">
|
||||
{#if userWatchList?.length !== 0}
|
||||
<label
|
||||
for="addWatchListModal"
|
||||
class="cursor-pointer shrink-0"
|
||||
>
|
||||
{#if isTickerIncluded}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
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"
|
||||
/></svg
|
||||
>
|
||||
{:else}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
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"
|
||||
/></svg
|
||||
>
|
||||
{/if}
|
||||
</label>
|
||||
{:else if userWatchList?.length === 0}
|
||||
<label
|
||||
on:click={() => toggleUserWatchlist("firstList")}
|
||||
class="cursor-pointer shrink-0"
|
||||
>
|
||||
{#if isTickerIncluded}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
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"
|
||||
/></svg
|
||||
>
|
||||
{:else}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
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"
|
||||
/></svg
|
||||
>
|
||||
{/if}
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!--Start Search Button-->
|
||||
<label class="ml-auto mr-4" for="searchBarModal">
|
||||
{:else}
|
||||
<label for="userLogin" class="cursor-pointer shrink-0 mr-4">
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="none"
|
||||
stroke="white"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314"
|
||||
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"
|
||||
/></svg
|
||||
>
|
||||
</label>
|
||||
<!--End Search Button-->
|
||||
{/if}
|
||||
<!--End Watchlist-->
|
||||
|
||||
<!--Start Share Button-->
|
||||
<label
|
||||
class="mr-4"
|
||||
on:click={() =>
|
||||
shareContent("https://stocknear.com/etf/" + $etfTicker)}
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
viewBox="0 0 24 24"
|
||||
<!--Start Price Alert-->
|
||||
<label
|
||||
on:click={() => ($openPriceAlert = true)}
|
||||
for={data?.user ? "priceAlertModal" : "userLogin"}
|
||||
class="mr-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-7 h-7 inline-block mt-1"
|
||||
viewBox="0 0 24 24"
|
||||
><g
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke="#fff"
|
||||
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<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"
|
||||
fill="#fff"
|
||||
></path>
|
||||
</g></svg
|
||||
>
|
||||
</label>
|
||||
<!--End Share Button-->
|
||||
|
||||
<!--Start Watchlist-->
|
||||
|
||||
{#if data?.user}
|
||||
<div class="flex flex-col mr-4">
|
||||
{#if userWatchList?.length !== 0}
|
||||
<label
|
||||
for="addWatchListModal"
|
||||
class="cursor-pointer shrink-0"
|
||||
>
|
||||
{#if isTickerIncluded}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
{:else}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="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"
|
||||
/></svg
|
||||
>
|
||||
{/if}
|
||||
</label>
|
||||
{:else if userWatchList?.length === 0}
|
||||
<label
|
||||
on:click={() => toggleUserWatchlist("firstList")}
|
||||
class="cursor-pointer shrink-0"
|
||||
>
|
||||
{#if isTickerIncluded}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="#fff"
|
||||
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
|
||||
>
|
||||
{:else}
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="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"
|
||||
/></svg
|
||||
>
|
||||
{/if}
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<label
|
||||
for="userLogin"
|
||||
class="cursor-pointer shrink-0 text-white mr-4"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><path
|
||||
fill="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"
|
||||
/></svg
|
||||
>
|
||||
</label>
|
||||
{/if}
|
||||
<!--End Watchlist-->
|
||||
|
||||
<!--Start Price Alert-->
|
||||
<label
|
||||
on:click={() => ($openPriceAlert = true)}
|
||||
for={data?.user ? "priceAlertModal" : "userLogin"}
|
||||
class="mr-2"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
><path d="M3 5.231L6.15 3M21 5.231L17.85 3" /><circle
|
||||
cx="12"
|
||||
cy="13"
|
||||
r="8"
|
||||
/><path d="M9.5 13h5M12 10.5v5" /></g
|
||||
></svg
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-7 h-7 inline-block mt-1"
|
||||
viewBox="0 0 24 24"
|
||||
><g
|
||||
fill="none"
|
||||
stroke="white"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
><path d="M3 5.231L6.15 3M21 5.231L17.85 3" /><circle
|
||||
cx="12"
|
||||
cy="13"
|
||||
r="8"
|
||||
/><path d="M9.5 13h5M12 10.5v5" /></g
|
||||
></svg
|
||||
>
|
||||
</label>
|
||||
<!--End Price Alert -->
|
||||
</div>
|
||||
</label>
|
||||
<!--End Price Alert -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -602,7 +613,9 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><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"
|
||||
/></svg
|
||||
>
|
||||
@ -612,7 +625,9 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><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"
|
||||
/></svg
|
||||
>
|
||||
@ -634,7 +649,9 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><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"
|
||||
/></svg
|
||||
>
|
||||
@ -644,7 +661,9 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><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"
|
||||
/></svg
|
||||
>
|
||||
@ -659,14 +678,14 @@
|
||||
>
|
||||
<label
|
||||
for="userLogin"
|
||||
class="cursor-pointer shrink-0 text-white"
|
||||
class="cursor-pointer shrink-0"
|
||||
>
|
||||
<svg
|
||||
class="w-7 h-7 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><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"
|
||||
/></svg
|
||||
>
|
||||
@ -683,7 +702,7 @@
|
||||
<label
|
||||
on:click={() => ($openPriceAlert = true)}
|
||||
for={data?.user ? "priceAlertModal" : "userLogin"}
|
||||
class="cursor-pointer shrink-0 text-white"
|
||||
class="cursor-pointer shrink-0"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -691,7 +710,7 @@
|
||||
viewBox="0 0 24 24"
|
||||
><g
|
||||
fill="none"
|
||||
stroke="white"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
@ -718,9 +737,7 @@
|
||||
<div
|
||||
class="flex flex-row justify-between items-center w-full sm:-mt-[50px] mb-5 sm:mb-10"
|
||||
>
|
||||
<h1
|
||||
class="text-2xl lg:text-3xl font-bold text-white"
|
||||
>
|
||||
<h1 class="text-2xl lg:text-3xl font-bold">
|
||||
{$displayCompanyName?.length > charNumber
|
||||
? $displayCompanyName?.slice(0, charNumber) +
|
||||
"..."
|
||||
@ -732,7 +749,7 @@
|
||||
</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
|
||||
@ -754,14 +771,14 @@
|
||||
<span
|
||||
class={displayLegend?.change >= 0
|
||||
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
|
||||
: "text-[#FF2F1F]"}
|
||||
: "text-red-600 dark:text-[#FF2F1F]"}
|
||||
>
|
||||
{displayLegend?.change}
|
||||
</span>
|
||||
<span
|
||||
class={displayLegend?.changesPercentage >= 0
|
||||
? "text-[#00FC50]"
|
||||
: "text-[#FF2F1F]"}
|
||||
? "text-green-600 dark:text-[#00FC50]"
|
||||
: "text-red-600 dark:text-[#FF2F1F]"}
|
||||
>
|
||||
({displayLegend?.changesPercentage}%)
|
||||
</span>
|
||||
@ -790,12 +807,12 @@
|
||||
class="border-l border-default pl-3 bp:pl-5"
|
||||
>
|
||||
<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)}
|
||||
</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
|
||||
? "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
|
||||
</a>
|
||||
@ -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
|
||||
</a>
|
||||
@ -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
|
||||
</a>
|
||||
@ -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
|
||||
</a>
|
||||
@ -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
|
||||
</a>
|
||||
@ -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
|
||||
</a>
|
||||
@ -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
|
||||
</a>
|
||||
@ -961,7 +978,7 @@
|
||||
<!--End Login Modal-->
|
||||
|
||||
<!--Start SellTrade Modal-->
|
||||
<PriceAlert {data} ticker={$etfTicker} assetType="etf" />
|
||||
<PriceAlert {data} ticker={$etfTicker} assetType="stock" />
|
||||
|
||||
<!--Start Add Watchlist Modal-->
|
||||
<input type="checkbox" id="addWatchListModal" class="modal-toggle" />
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import highcharts from "$lib/highcharts.ts";
|
||||
import { mode } from "mode-watcher";
|
||||
|
||||
import {
|
||||
getCache,
|
||||
@ -83,13 +84,17 @@
|
||||
? data?.getStockQuote?.changesPercentage < 0
|
||||
: change < 0;
|
||||
|
||||
const lineColor = isNegative ? "#CC261A" : "#00FC50";
|
||||
const lineColor = isNegative
|
||||
? "#CC261A"
|
||||
: $mode === "light"
|
||||
? "#047857"
|
||||
: "#00FC50";
|
||||
const fillColorStart = isNegative
|
||||
? "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
|
||||
? "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 =
|
||||
rawData && rawData?.length ? new Date(rawData?.at(0)?.time) : new Date();
|
||||
@ -112,8 +117,9 @@
|
||||
|
||||
const options = {
|
||||
chart: {
|
||||
backgroundColor: "#09090B",
|
||||
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
height: 360,
|
||||
animation: false,
|
||||
events: {
|
||||
// Add touch event handling to hide tooltip on mobile
|
||||
load: function () {
|
||||
@ -148,7 +154,7 @@
|
||||
borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
|
||||
borderWidth: 1,
|
||||
style: {
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
fontSize: "16px",
|
||||
padding: "10px",
|
||||
},
|
||||
@ -182,11 +188,11 @@
|
||||
|
||||
// Loop through each point in the shared tooltip
|
||||
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
|
||||
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;
|
||||
},
|
||||
@ -199,12 +205,12 @@
|
||||
tickLength: 0,
|
||||
categories: displayData === "1D" ? null : dateList,
|
||||
crosshair: {
|
||||
color: "#fff",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
width: 1,
|
||||
dashStyle: "Solid",
|
||||
},
|
||||
labels: {
|
||||
style: { color: "#fff" },
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
distance: 20,
|
||||
formatter: function () {
|
||||
const date = new Date(this?.value);
|
||||
@ -249,10 +255,10 @@
|
||||
startOnTick: false,
|
||||
endOnTick: false,
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
|
||||
title: { text: null },
|
||||
labels: {
|
||||
style: { color: "white" },
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
},
|
||||
opposite: true,
|
||||
// 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
|
||||
shouldUpdatePriceChart.set(false);
|
||||
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.`}
|
||||
/>
|
||||
|
||||
<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="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">
|
||||
{#if dataMapping[displayData]?.length === 0}
|
||||
<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="hide-scroll overflow-x-auto">
|
||||
@ -685,8 +691,9 @@
|
||||
>
|
||||
<span
|
||||
class="block {displayData === interval
|
||||
? 'text-white'
|
||||
: 'text-gray-400'}">{interval}</span
|
||||
? 'text-muted dark:'
|
||||
: 'text-muted dark:text-gray-400'}"
|
||||
>{interval}</span
|
||||
>
|
||||
<div
|
||||
class="{displayData === interval
|
||||
@ -699,13 +706,11 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-[250px] sm:h-[350px]">
|
||||
<div class="h-[360px]">
|
||||
<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
|
||||
</div>
|
||||
</div>
|
||||
@ -713,7 +718,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<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="hide-scroll overflow-x-auto">
|
||||
@ -728,13 +733,14 @@
|
||||
>
|
||||
<span
|
||||
class="block {displayData === interval
|
||||
? 'text-white'
|
||||
: 'text-gray-400'}">{interval}</span
|
||||
? 'text-muted dark:text-white'
|
||||
: 'text-muted dark:text-gray-400'}"
|
||||
>{interval}</span
|
||||
>
|
||||
<div
|
||||
class="{displayData === interval
|
||||
? `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>
|
||||
</li>
|
||||
@ -752,7 +758,7 @@
|
||||
{displayLegend?.graphChange ??
|
||||
data?.getStockQuote?.changesPercentage?.toFixed(2)}%
|
||||
</span>
|
||||
<span class="hidden text-gray-200 sm:block"
|
||||
<span class="hidden text-muted dark:text-gray-200 sm:block"
|
||||
>({displayData})</span
|
||||
>
|
||||
</div>
|
||||
@ -779,14 +785,12 @@
|
||||
{/if}
|
||||
|
||||
<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
|
||||
><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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>Bid</td
|
||||
@ -799,7 +803,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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>Market Cap</td
|
||||
@ -810,7 +814,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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>AUM</td
|
||||
@ -823,7 +827,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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>NAV</td
|
||||
@ -837,7 +841,7 @@
|
||||
>
|
||||
|
||||
<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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>EPS (ttm)</td
|
||||
@ -850,7 +854,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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>PE Ratio (ttm)</td
|
||||
@ -864,7 +868,7 @@
|
||||
>
|
||||
|
||||
<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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>Shares Out
|
||||
@ -879,7 +883,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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>Inception Date</td
|
||||
@ -901,10 +905,10 @@
|
||||
>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="w-[50%] text-sm text-white lg:min-w-[250px]">
|
||||
<table class="w-[50%] text-sm lg:min-w-[250px]">
|
||||
<tbody
|
||||
><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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>Ask</td
|
||||
@ -917,7 +921,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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>Volume</td
|
||||
@ -928,7 +932,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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>Open</td
|
||||
@ -939,7 +943,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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>Previous Close</td
|
||||
@ -950,7 +954,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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>Day's Range</td
|
||||
@ -963,7 +967,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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>52-Week Range</td
|
||||
@ -977,7 +981,7 @@
|
||||
>
|
||||
|
||||
<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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>Holdings
|
||||
@ -990,7 +994,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
|
||||
class="whitespace-nowrap px-0.5 py-[1px] xs:px-1 sm:py-2 text-sm"
|
||||
>Expense Ratio</td
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user