refactor code
This commit is contained in:
MuslemRahimi
parent
3f1ac5ef40
commit
be62e9f6d6
@ -1,8 +1,7 @@
|
||||
<script lang='ts'>
|
||||
import { screenWidth, numberOfUnreadNotification } from '$lib/store';
|
||||
<script lang="ts">
|
||||
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from "svelte";
|
||||
|
||||
export let data;
|
||||
|
||||
@ -18,58 +17,59 @@ let companyName = analystStats?.companyName;
|
||||
let totalRatings = analystStats?.totalRatings;
|
||||
let successRate = analystStats?.successRate;
|
||||
let avgReturn = analystStats?.avgReturn;
|
||||
let numOfAnalysts = new Intl.NumberFormat("en", {minimumFractionDigits: 0,maximumFractionDigits: 0}).format(analystStats?.numOfAnalysts);
|
||||
let numOfAnalysts = new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(analystStats?.numOfAnalysts);
|
||||
let numOfStocks = analystStats?.numOfStocks;
|
||||
|
||||
|
||||
|
||||
function sectorSelector(sector) {
|
||||
let path;
|
||||
switch (sector) {
|
||||
case 'Financials':
|
||||
case "Financials":
|
||||
path = "financial-sector";
|
||||
break;
|
||||
case 'Healthcare':
|
||||
case "Healthcare":
|
||||
path = "healthcare-sector";
|
||||
break;
|
||||
case 'Information Technology':
|
||||
case "Information Technology":
|
||||
path = "technology-sector";
|
||||
break;
|
||||
case 'Technology':
|
||||
case "Technology":
|
||||
path = "technology-sector";
|
||||
break;
|
||||
case 'Financial Services':
|
||||
case "Financial Services":
|
||||
path = "financial-sector";
|
||||
break;
|
||||
case 'Industrials':
|
||||
case "Industrials":
|
||||
path = "industrials-sector";
|
||||
break;
|
||||
case 'Energy':
|
||||
case "Energy":
|
||||
path = "energy-sector";
|
||||
break;
|
||||
case 'Utilities':
|
||||
case "Utilities":
|
||||
path = "utilities-sector";
|
||||
break;
|
||||
case 'Consumer Cyclical':
|
||||
case "Consumer Cyclical":
|
||||
path = "consumer-cyclical-sector";
|
||||
break;
|
||||
case 'Real Estate':
|
||||
case "Real Estate":
|
||||
path = "real-estate-sector";
|
||||
break;
|
||||
case 'Basic Materials':
|
||||
case "Basic Materials":
|
||||
path = "basic-materials-sector";
|
||||
break;
|
||||
case 'Communication Services':
|
||||
case "Communication Services":
|
||||
path = "communication-services-sector";
|
||||
break;
|
||||
case 'Consumer Defensive':
|
||||
case "Consumer Defensive":
|
||||
path = "consumer-defensive-sector";
|
||||
break;
|
||||
default:
|
||||
// Handle default case if needed
|
||||
break;
|
||||
}
|
||||
return path
|
||||
return path;
|
||||
}
|
||||
|
||||
async function handleScroll() {
|
||||
@ -82,47 +82,56 @@ async function handleScroll() {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMount(async () => {
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
$: charNumber = $screenWidth < 640 ? 20 : 40;
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Top Wall Street Stock Analysts · stocknear
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Top
|
||||
Wall Street Stock Analysts · stocknear
|
||||
</title>
|
||||
<meta name="description" content={`A list of the top Wall Street stock analysts, ranked by their success rate and average return per rating.`} />
|
||||
<meta
|
||||
name="description"
|
||||
content={`A list of the top Wall Street stock analysts, ranked by their success rate and average return per rating.`}
|
||||
/>
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`Top Wall Street Stock Analysts · stocknear`}/>
|
||||
<meta property="og:description" content={`A list of the top Wall Street stock analysts, ranked by their success rate and average return per rating.`} />
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`Top Wall Street Stock Analysts · stocknear`}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`A list of the top Wall Street stock analysts, ranked by their success rate and average return per rating.`}
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={`Top Wall Street Stock Analysts · stocknear`}/>
|
||||
<meta name="twitter:description" content={`A list of the top Wall Street stock analysts, ranked by their success rate and average return per rating.`} />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content={`Top Wall Street Stock Analysts · stocknear`}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`A list of the top Wall Street stock analysts, ranked by their success rate and average return per rating.`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
|
||||
|
||||
<section
|
||||
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
|
||||
>
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
@ -131,30 +140,57 @@ $: charNumber = $screenWidth < 640 ? 20 : 40;
|
||||
</div>
|
||||
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
||||
|
||||
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
|
||||
|
||||
<div class="w-full m-auto mt-12">
|
||||
|
||||
<div class="flex flex-row items-center -ml-10 sm:ml-0 justify-center sm:justify-start ">
|
||||
<svg class="w-16 h-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#D4D4D4" d="M16 8a5 5 0 1 0 5 5a5 5 0 0 0-5-5"/><path fill="#D4D4D4" d="M16 2a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2m7.993 22.926A5.002 5.002 0 0 0 19 20h-6a5.002 5.002 0 0 0-4.992 4.926a12 12 0 1 1 15.985 0"/></svg>
|
||||
<div
|
||||
class="flex flex-row items-center -ml-10 sm:ml-0 justify-center sm:justify-start"
|
||||
>
|
||||
<svg
|
||||
class="w-16 h-16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
><path
|
||||
fill="#D4D4D4"
|
||||
d="M16 8a5 5 0 1 0 5 5a5 5 0 0 0-5-5"
|
||||
/><path
|
||||
fill="#D4D4D4"
|
||||
d="M16 2a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2m7.993 22.926A5.002 5.002 0 0 0 19 20h-6a5.002 5.002 0 0 0-4.992 4.926a12 12 0 1 1 15.985 0"
|
||||
/></svg
|
||||
>
|
||||
<div class="ml-3 flex flex-col items-start">
|
||||
<div class="text-xl font-bold text-gray-200">{analystName}</div>
|
||||
<div class="text-[1rem] text-gray-200">Analyst at {companyName}</div>
|
||||
<div class="text-[1rem] text-gray-200">
|
||||
Analyst at {companyName}
|
||||
</div>
|
||||
<div class="flex flex-row items-center mt-1">
|
||||
{#each Array.from({ length: 5 }) as _, i}
|
||||
{#if i < Math.floor(analystScore)}
|
||||
<svg class="w-5 h-5 text-[#FBCE3C]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
|
||||
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
|
||||
<svg
|
||||
class="w-5 h-5 text-[#FBCE3C]"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 22 20"
|
||||
>
|
||||
<path
|
||||
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
|
||||
/>
|
||||
</svg>
|
||||
{:else}
|
||||
<svg class="w-5 h-5 text-gray-300 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
|
||||
<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
|
||||
<svg
|
||||
class="w-5 h-5 text-gray-300 dark:text-gray-500"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 22 20"
|
||||
>
|
||||
<path
|
||||
d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
{/each}
|
||||
@ -167,77 +203,101 @@ $: charNumber = $screenWidth < 640 ? 20 : 40;
|
||||
</div>
|
||||
|
||||
<div class="p-2 sm:p-0">
|
||||
<div class="stats stats-horizontal bg-[#09090B] w-full rounded-none sm:rounded-lg mt-12 mb-5">
|
||||
|
||||
<div
|
||||
class="stats stats-horizontal bg-[#09090B] w-full rounded-none sm:rounded-lg mt-12 mb-5"
|
||||
>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4">
|
||||
|
||||
|
||||
<div class="stat">
|
||||
<div class="text-2xl font-bold text-gray-200"># {rank}</div>
|
||||
<div class="text-gray-200 text-sm">Out of {numOfAnalysts} analysts</div>
|
||||
<div class="text-gray-200 text-sm">
|
||||
Out of {numOfAnalysts} analysts
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="text-2xl font-bold text-gray-200">{totalRatings}</div>
|
||||
<div class="text-2xl font-bold text-gray-200">
|
||||
{totalRatings}
|
||||
</div>
|
||||
<div class="text-gray-200 text-sm">Total Ratings</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="text-2xl font-bold {successRate >= 0 ? 'text-[#36D984]' : 'text-[#EF4444]' }">{successRate >= 0 ? '+' : ''}{successRate?.toFixed(2)}%</div>
|
||||
<div
|
||||
class="text-2xl font-bold {successRate >= 0
|
||||
? 'text-[#36D984]'
|
||||
: 'text-[#EF4444]'}"
|
||||
>
|
||||
{successRate >= 0 ? "+" : ""}{successRate?.toFixed(2)}%
|
||||
</div>
|
||||
<div class="text-gray-200 text-sm">Success Rate</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="text-2xl font-bold {avgReturn >= 0 ? 'text-[#36D984]' : 'text-[#EF4444]' }">{avgReturn >= 0 ? '+' : ''}{avgReturn?.toFixed(2)}%</div>
|
||||
<div
|
||||
class="text-2xl font-bold {avgReturn >= 0
|
||||
? 'text-[#36D984]'
|
||||
: 'text-[#EF4444]'}"
|
||||
>
|
||||
{avgReturn >= 0 ? "+" : ""}{avgReturn?.toFixed(2)}%
|
||||
</div>
|
||||
<div class="text-gray-200 text-sm">Avg Return</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-2 sm:p-0 mb-10">
|
||||
<div class="text-white p-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
|
||||
<div
|
||||
class="text-white p-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="text-gray-300 font-bold text-lg smtext-xl">
|
||||
Main Sectors:
|
||||
</span>
|
||||
|
||||
<div class="mt-5 mb-3 flex flex-wrap gap-3 flex-row items-center">
|
||||
<div
|
||||
class="mt-5 mb-3 flex flex-wrap gap-3 flex-row items-center"
|
||||
>
|
||||
{#each data?.getAnalystStats?.mainSectors as sector}
|
||||
<a href={"/list/"+sectorSelector(sector)} class="cursor-pointer w-fit bg-[#404040] bg-opacity-[0.5] sm:hover:bg-opacity-[0.6] px-3 sm:px-4 py-2 text-sm sm:text-[1rem] font-medium rounded-lg sm:hover:text-white text-blue-400">
|
||||
<a
|
||||
href={"/list/" + sectorSelector(sector)}
|
||||
class="cursor-pointer w-fit bg-[#404040] bg-opacity-[0.5] sm:hover:bg-opacity-[0.6] px-3 sm:px-4 py-2 text-sm sm:text-[1rem] font-medium rounded-lg sm:hover:text-white text-blue-400"
|
||||
>
|
||||
{sector}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<span class="p-3 text-[#F5F5F5] font-bold text-2xl">
|
||||
{numOfStocks} Stocks
|
||||
</span>
|
||||
|
||||
<div class="w-screen sm:w-full m-auto mt-10">
|
||||
|
||||
<div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll">
|
||||
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
|
||||
<div
|
||||
class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll"
|
||||
>
|
||||
<table
|
||||
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
|
||||
>
|
||||
<thead>
|
||||
<tr class="bg-[#09090B]">
|
||||
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
|
||||
<th
|
||||
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
|
||||
>
|
||||
Stock
|
||||
</th>
|
||||
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
|
||||
<th
|
||||
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
|
||||
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
|
||||
<th
|
||||
class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"
|
||||
>
|
||||
Price Target
|
||||
</th>
|
||||
<th class="text-white font-semibold text-end text-[1rem]">
|
||||
@ -247,40 +307,54 @@ $: charNumber = $screenWidth < 640 ? 20 : 40;
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each stockList as item, index}
|
||||
|
||||
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]">
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-start whitespace-nowrap">
|
||||
{#if index >= 5 && data?.user?.tier !== 'Pro'}
|
||||
<tr
|
||||
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]"
|
||||
>
|
||||
<td
|
||||
class="text-sm sm:text-[1rem] text-start whitespace-nowrap"
|
||||
>
|
||||
{#if index >= 5 && data?.user?.tier !== "Pro"}
|
||||
<a class="block relative" href="/pricing">
|
||||
<span class="text-base font-semibold text-blue-link blur group-hover:blur-[6px]">
|
||||
<span
|
||||
class="text-base font-semibold text-blue-link blur group-hover:blur-[6px]"
|
||||
>
|
||||
XXXX
|
||||
</span>
|
||||
|
||||
<div class="ml-px max-w-[130px] truncate text-sm text-default blur group-hover:blur-[6px] lg:max-w-[150px]">
|
||||
<div
|
||||
class="ml-px max-w-[130px] truncate text-sm text-default blur group-hover:blur-[6px] lg:max-w-[150px]"
|
||||
>
|
||||
XXXXXXXXXXXXXXXX
|
||||
</div>
|
||||
|
||||
<div class="absolute top-3 flex items-center">
|
||||
<svg class="size-5 text-[#FBCE3C]"
|
||||
<svg
|
||||
class="size-5 text-[#FBCE3C]"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
style="max-width: 40px;">
|
||||
<path fill-rule="evenodd"
|
||||
style="max-width: 40px;"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
||||
clip-rule="evenodd">
|
||||
clip-rule="evenodd"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
|
||||
<span class="ml-1 font-semibold text-muted group-hover:text-default">
|
||||
<span
|
||||
class="ml-1 font-semibold text-muted group-hover:text-default"
|
||||
>
|
||||
Upgrade
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div class="flex flex-col items-start">
|
||||
<a href={`/stocks/${item?.ticker}`}
|
||||
class="sm:hover:text-white text-blue-400 text-sm sm:text-[1rem]">
|
||||
<a
|
||||
href={`/stocks/${item?.ticker}`}
|
||||
class="sm:hover:text-white text-blue-400 text-sm sm:text-[1rem]"
|
||||
>
|
||||
{item?.ticker}
|
||||
</a>
|
||||
<span class="text-white">
|
||||
@ -292,54 +366,92 @@ $: charNumber = $screenWidth < 640 ? 20 : 40;
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-start whitespace-nowrap">
|
||||
<td
|
||||
class="text-sm sm:text-[1rem] text-start whitespace-nowrap"
|
||||
>
|
||||
<div class="flex flex-col sm:flex-row items-start">
|
||||
<span class="font-medium text-white mr-1">{item?.action_company}:</span>
|
||||
<span class="font-medium {['Strong Buy', 'Buy']?.includes(item?.rating_current) ? 'text-[#37C97D]' : item?.rating_current === 'Hold' ? 'text-[#FF7070]' : ['Strong Sell','Sell']?.includes(item?.rating_current) ? 'text-[#FF2F1F]' : 'text-gray-300'}">
|
||||
<span class="font-medium text-white mr-1"
|
||||
>{item?.action_company}:</span
|
||||
>
|
||||
<span
|
||||
class="font-medium {[
|
||||
'Strong Buy',
|
||||
'Buy',
|
||||
]?.includes(item?.rating_current)
|
||||
? 'text-[#37C97D]'
|
||||
: item?.rating_current === 'Hold'
|
||||
? 'text-[#FF7070]'
|
||||
: ['Strong Sell', 'Sell']?.includes(
|
||||
item?.rating_current,
|
||||
)
|
||||
? 'text-[#FF2F1F]'
|
||||
: 'text-gray-300'}"
|
||||
>
|
||||
{item?.rating_current}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<div class="flex flex-row items-center justify-end">
|
||||
{#if Math?.ceil(item?.adjusted_pt_prior) !== 0}
|
||||
<span class="text-gray-100 font-normal">${Math?.ceil(item?.adjusted_pt_prior)}</span>
|
||||
<svg class="w-3 h-3 ml-1 mr-1 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 12h16m0 0l-6-6m6 6l-6 6"/></svg>
|
||||
<span class="text-white font-semibold">${Math?.ceil(item?.adjusted_pt_current)}</span>
|
||||
<span class="text-gray-100 font-normal"
|
||||
>${Math?.ceil(item?.adjusted_pt_prior)}</span
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 ml-1 mr-1 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="none"
|
||||
stroke="white"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M4 12h16m0 0l-6-6m6 6l-6 6"
|
||||
/></svg
|
||||
>
|
||||
<span class="text-white font-semibold"
|
||||
>${Math?.ceil(item?.adjusted_pt_current)}</span
|
||||
>
|
||||
{:else if Math?.ceil(item?.adjusted_pt_current) !== 0}
|
||||
<span class="text-white font-semibold">${Math?.ceil(item?.adjusted_pt_current)}</span>
|
||||
<span class="text-white font-semibold"
|
||||
>${Math?.ceil(item?.adjusted_pt_current)}</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{new Date(item?.date).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
<td
|
||||
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
{new Date(item?.date).toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
|
||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
||||
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
|
||||
<div
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/pricing"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription 🔥
|
||||
@ -349,12 +461,17 @@ $: charNumber = $screenWidth < 640 ? 20 : 40;
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/analysts"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Top Analyst 📊
|
||||
@ -364,11 +481,16 @@ $: charNumber = $screenWidth < 640 ? 20 : 40;
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div on:click={() => goto('/analysts/top-stocks')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/analysts/top-stocks"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Top Stocks Picks ⭐
|
||||
@ -378,19 +500,10 @@ $: charNumber = $screenWidth < 640 ? 20 : 40;
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -1,95 +1,116 @@
|
||||
<script lang='ts'>
|
||||
import { numberOfUnreadNotification } from '$lib/store';
|
||||
import { page } from '$app/stores';
|
||||
import logo from '$lib/images/provider_logo.png';
|
||||
import { formatETFName } from '$lib/utils';
|
||||
<script lang="ts">
|
||||
import { numberOfUnreadNotification } from "$lib/store";
|
||||
import { page } from "$app/stores";
|
||||
import logo from "$lib/images/provider_logo.png";
|
||||
import { formatETFName } from "$lib/utils";
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
|
||||
export let data;
|
||||
let currentPath = '';
|
||||
let currentPath = "";
|
||||
|
||||
$: {
|
||||
if($page?.url?.pathname?.startsWith('/etf/etf-providers'))
|
||||
{
|
||||
const parts = $page?.url?.pathname.split('/');
|
||||
if ($page?.url?.pathname?.startsWith("/etf/etf-providers")) {
|
||||
const parts = $page?.url?.pathname.split("/");
|
||||
if (parts?.[3]?.length !== 0) {
|
||||
currentPath = formatETFName(parts[3]) ?? '';
|
||||
console.log(currentPath)
|
||||
}
|
||||
else {
|
||||
currentPath = '';
|
||||
currentPath = formatETFName(parts[3]) ?? "";
|
||||
console.log(currentPath);
|
||||
} else {
|
||||
currentPath = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<svelte:head>
|
||||
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Largest ETF Providers by Assets Under Management · stocknear</title>
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Largest
|
||||
ETF Providers by Assets Under Management · stocknear</title
|
||||
>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<meta name="description" content="A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market.">
|
||||
<meta
|
||||
name="description"
|
||||
content="A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market."
|
||||
/>
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content="Largest ETF Providers by Assets Under Management · stocknear"/>
|
||||
<meta property="og:description" content="A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market.">
|
||||
<meta
|
||||
property="og:title"
|
||||
content="Largest ETF Providers by Assets Under Management · stocknear"
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Largest ETF Providers by Assets Under Management · stocknear"/>
|
||||
<meta name="twitter:description" content="A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market.">
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content="Largest ETF Providers by Assets Under Management · stocknear"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market."
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
<section
|
||||
class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40"
|
||||
>
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs mb-2 ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li><a href="/etf/etf-providers" class="text-gray-300">ETF Providers</a></li>
|
||||
<li>
|
||||
<a href="/etf/etf-providers" class="text-gray-300">ETF Providers</a>
|
||||
</li>
|
||||
{#if currentPath?.length !== 0 && typeof currentPath !== undefined}
|
||||
<li class="text-gray-300">{currentPath}</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
||||
|
||||
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div
|
||||
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
|
||||
>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
<div>
|
||||
<div class="flex flex-row justify-center items-center">
|
||||
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
|
||||
<h1
|
||||
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
|
||||
>
|
||||
ETF Providers
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center ">
|
||||
Companies issue and manage ETFs actively traded on the U.S. stock market.
|
||||
<span
|
||||
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
|
||||
>
|
||||
Companies issue and manage ETFs actively traded on the U.S.
|
||||
stock market.
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
|
||||
<!-- Start Column -->
|
||||
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
|
||||
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<div
|
||||
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
|
||||
>
|
||||
<svg
|
||||
class="w-40 -my-5"
|
||||
viewBox="0 0 200 200"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="5" result="glow" />
|
||||
@ -99,94 +120,90 @@
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
|
||||
<path
|
||||
fill="#1E40AF"
|
||||
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
|
||||
transform="translate(100 100)"
|
||||
filter="url(#glow)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
||||
<div class="z-1 absolute top-4">
|
||||
<img class="w-32 ml-4" src={logo} alt="logo" loading="lazy">
|
||||
<img class="w-32 ml-4" src={logo} alt="logo" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="w-full m-auto mb-10 bg-[#09090B] overflow-hidden">
|
||||
|
||||
|
||||
<div class="w-full flex flex-col justify-center items-center">
|
||||
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
|
||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
||||
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
|
||||
<div
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/pricing"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription
|
||||
Pro Subscription 🔥
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools.
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/analysts"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Wallstreet Analyst
|
||||
Top Analyst 📊
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings.
|
||||
Get the latest top Wall Street analyst ratings
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/politicians"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Congress Trading
|
||||
Congress Trading 🇺🇸
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Congress trading insights.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,121 +1,130 @@
|
||||
<script lang='ts'>
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import { abbreviateNumber, formatETFName} from '$lib/utils';
|
||||
import { numberOfUnreadNotification } from '$lib/store';
|
||||
<script lang="ts">
|
||||
import { abbreviateNumber, formatETFName } from "$lib/utils";
|
||||
import { numberOfUnreadNotification } from "$lib/store";
|
||||
|
||||
export let data;
|
||||
let etfProviderList = data?.getAllETFProviders;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<svelte:head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Largest ETF Providers by Assets Under Management · stocknear
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Largest
|
||||
ETF Providers by Assets Under Management · stocknear
|
||||
</title>
|
||||
|
||||
<meta name="description" content={`A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market.`}>
|
||||
<meta
|
||||
name="description"
|
||||
content={`A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market.`}
|
||||
/>
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`Largest ETF Providers by Assets Under Management · stocknear`}/>
|
||||
<meta property="og:description" content={`A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market.`} />
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`Largest ETF Providers by Assets Under Management · stocknear`}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market.`}
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={`Largest ETF Providers by Assets Under Management · stocknear`}/>
|
||||
<meta name="twitter:description" content={`A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market.`} />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content={`Largest ETF Providers by Assets Under Management · stocknear`}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market.`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
|
||||
|
||||
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<div
|
||||
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 sm:mr-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#a474f6"
|
||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||
/></svg
|
||||
>
|
||||
|
||||
|
||||
<div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4">
|
||||
<svg class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||
|
||||
Every Exchange-Traded Fund (ETF) is managed by a specific company. Below is a list of companies offering actively traded ETFs on the U.S. stock market.
|
||||
|
||||
Every Exchange-Traded Fund (ETF) is managed by a specific company. Below is
|
||||
a list of companies offering actively traded ETFs on the U.S. stock market.
|
||||
</div>
|
||||
|
||||
<!-- Page wrapper -->
|
||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||
|
||||
|
||||
|
||||
<!-- Content area -->
|
||||
<div class="w-full overflow-x-scroll">
|
||||
|
||||
|
||||
|
||||
<table class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||
<table
|
||||
class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
|
||||
>
|
||||
<thead>
|
||||
<tr class="border border-slate-800">
|
||||
<th class="text-slate-200 font-semibold text-[1rem]">Provider Name</th>
|
||||
<th class="text-slate-200 font-semibold text-center text-[1rem]">Total Assets</th>
|
||||
<th class="text-slate-200 font-semibold text-[1rem] text-end">Funds</th>
|
||||
<th class="text-slate-200 font-semibold text-[1rem] text-end">Avg. Cost</th>
|
||||
<th class="text-slate-200 font-semibold text-[1rem] text-end">Avg. Holdings</th>
|
||||
<th class="text-white font-semibold text-sm">Provider Name</th>
|
||||
<th class="text-white font-semibold text-end text-sm"
|
||||
>Total Assets</th
|
||||
>
|
||||
<th class="text-white font-semibold text-sm text-end">Funds</th>
|
||||
<th class="text-white font-semibold text-sm text-end">Avg. Cost</th>
|
||||
<th class="text-white font-semibold text-sm text-end"
|
||||
>Avg. Holdings</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each etfProviderList as item, index}
|
||||
<!-- row -->
|
||||
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
|
||||
|
||||
|
||||
<td class="text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]">
|
||||
<a href={"/etf/etf-providers/"+item?.etfProvider} class="sm:hover:text-white text-blue-400">
|
||||
<tr
|
||||
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
|
||||
>
|
||||
<td
|
||||
class="text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]"
|
||||
>
|
||||
<a
|
||||
href={"/etf/etf-providers/" + item?.etfProvider}
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
>
|
||||
{formatETFName(item?.etfProvider)}
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end sm:text-center">
|
||||
{abbreviateNumber(item?.totalAssets, true)}
|
||||
<td
|
||||
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end"
|
||||
>
|
||||
{abbreviateNumber(item?.totalAssets)}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
|
||||
<td
|
||||
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
||||
>
|
||||
{item?.funds}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
|
||||
<td
|
||||
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
||||
>
|
||||
{item?.avgExpenseRatio}%
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
|
||||
<td
|
||||
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
||||
>
|
||||
{item?.avgHoldings}
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<script lang='ts'>
|
||||
import { goto } from '$app/navigation';
|
||||
import { abbreviateNumber, formatETFName} from '$lib/utils';
|
||||
import { screenWidth, numberOfUnreadNotification } from '$lib/store';
|
||||
import { onMount } from 'svelte';
|
||||
<script lang="ts">
|
||||
import { abbreviateNumber, formatETFName } from "$lib/utils";
|
||||
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getETFProviderData;
|
||||
@ -10,13 +9,14 @@
|
||||
|
||||
let etfProviderName = formatETFName(data?.getProviderName);
|
||||
|
||||
const totalAssets = rawData?.reduce((total, item) => total + item?.totalAssets, 0);
|
||||
|
||||
const avgExpenseRatio = rawData?.reduce(
|
||||
(total, item) => total + item?.expenseRatio || 0,
|
||||
0
|
||||
) / rawData?.length;
|
||||
const totalAssets = rawData?.reduce(
|
||||
(total, item) => total + item?.totalAssets,
|
||||
0,
|
||||
);
|
||||
|
||||
const avgExpenseRatio =
|
||||
rawData?.reduce((total, item) => total + item?.expenseRatio || 0, 0) /
|
||||
rawData?.length;
|
||||
|
||||
async function handleScroll() {
|
||||
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||
@ -29,145 +29,175 @@
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
$: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {etfProviderData?.length} {etfProviderName} ETFs - A Complete List · stocknear
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||
{etfProviderData?.length}
|
||||
{etfProviderName} ETFs - A Complete List · stocknear
|
||||
</title>
|
||||
<meta name="description" content={``} />
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`${etfProviderName} (${etfProviderData?.length}) ETFs - A Complete List`}/>
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`${etfProviderName} (${etfProviderData?.length}) ETFs - A Complete List`}
|
||||
/>
|
||||
<meta property="og:description" content={``} />
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={`${etfProviderName} (${etfProviderData?.length}) ETFs - A Complete List`}/>
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content={`${etfProviderName} (${etfProviderData?.length}) ETFs - A Complete List`}
|
||||
/>
|
||||
<meta name="twitter:description" content={``} />
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
|
||||
|
||||
{#if rawData?.length !== 0}
|
||||
<div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4">
|
||||
<svg class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
|
||||
|
||||
{etfProviderName} has {rawData?.length} ETFs listed with a total of {abbreviateNumber(totalAssets,true)}
|
||||
in assets under management.
|
||||
The funds have an average expense ratio of {avgExpenseRatio?.toFixed(2)}%.
|
||||
<div
|
||||
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 sm:mr-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#a474f6"
|
||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||
/></svg
|
||||
>
|
||||
|
||||
{etfProviderName} has {rawData?.length} ETFs listed with a total of {abbreviateNumber(
|
||||
totalAssets,
|
||||
true,
|
||||
)}
|
||||
in assets under management. The funds have an average expense ratio of {avgExpenseRatio?.toFixed(
|
||||
2,
|
||||
)}%.
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="stats stats-horizontal bg-[#27272A] shadow w-full rounded-none sm:rounded-lg overflow-hidden">
|
||||
|
||||
<div
|
||||
class="stats stats-horizontal bg-[#27272A] shadow w-full rounded-none sm:rounded-lg overflow-hidden"
|
||||
>
|
||||
<div class="stat">
|
||||
<div class="stat-title text-white text-sm sm:text-lg font-semibold">Listed Funds</div>
|
||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
||||
<div class="stat-title text-white text-sm sm:text-lg font-semibold">
|
||||
Listed Funds
|
||||
</div>
|
||||
<div class="stat-value text-lg font-semibold text-white">
|
||||
{rawData?.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-title text-white text-sm sm:text-lg font-semibold">Total Assets</div>
|
||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalAssets,true)}</div>
|
||||
<div class="stat-title text-white text-sm sm:text-lg font-semibold">
|
||||
Total Assets
|
||||
</div>
|
||||
<div class="stat-value text-lg font-semibold text-white">
|
||||
{abbreviateNumber(totalAssets)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-title text-white text-sm sm:text-lg font-semibold">Average Cost</div>
|
||||
<div class="stat-value text-lg font-semibold text-white">{avgExpenseRatio?.toFixed(2)}%</div>
|
||||
<div class="stat-title text-white text-sm sm:text-lg font-semibold">
|
||||
Average Cost
|
||||
</div>
|
||||
<div class="stat-value text-lg font-semibold text-white">
|
||||
{avgExpenseRatio?.toFixed(2)}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{#if rawData?.length !== 0}
|
||||
|
||||
<!-- Page wrapper -->
|
||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||
<!-- Content area -->
|
||||
<div class="w-full overflow-x-scroll pt-5">
|
||||
|
||||
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
|
||||
<table
|
||||
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
|
||||
>
|
||||
<thead>
|
||||
<tr class="border border-slate-800">
|
||||
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||
<th class="text-white font-semibold text-[1rem]">Fund Name</th>
|
||||
<th class="text-white font-semibold text-center text-[1rem]">Total Assets</th>
|
||||
<th class="text-white font-semibold text-[1rem] text-end">Holdings</th>
|
||||
<th class="text-white font-semibold text-[1rem] text-end">Expense Ratio</th>
|
||||
<th class="text-white font-semibold text-sm">Symbol</th>
|
||||
<th class="text-white font-semibold text-sm">Fund Name</th>
|
||||
<th class="text-white font-semibold text-end text-sm"
|
||||
>Total Assets</th
|
||||
>
|
||||
<th class="text-white font-semibold text-sm text-end">Holdings</th
|
||||
>
|
||||
<th class="text-white font-semibold text-sm text-end"
|
||||
>Expense Ratio</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each etfProviderData as item,index}
|
||||
{#each etfProviderData as item}
|
||||
<!-- row -->
|
||||
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
|
||||
|
||||
<td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||
<a href={"/etf/"+item?.symbol} class="sm:hover:text-white text-blue-400">
|
||||
<tr
|
||||
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
|
||||
>
|
||||
<td
|
||||
class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||
>
|
||||
<a
|
||||
href={"/etf/" + item?.symbol}
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
>
|
||||
{item?.symbol}
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
|
||||
<td
|
||||
class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
{item?.name?.length > charNumber
|
||||
? item?.name?.slice(0, charNumber) + "..."
|
||||
: item?.name}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium border-b-[#09090B] text-end sm:text-center text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{abbreviateNumber(item?.totalAssets, true)}
|
||||
<td
|
||||
class="text-white font-medium border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
{abbreviateNumber(item?.totalAssets)}
|
||||
</td>
|
||||
|
||||
<td class="text-white font-medium text-end border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
<td
|
||||
class="text-white font-medium text-end border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
{item?.numberOfHoldings}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-white font-medium text-end border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
<td
|
||||
class="text-white font-medium text-end border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
{item?.expenseRatio}%
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{:else}
|
||||
<div class="mt-10 w-full flex justify-center items-center m-auto text-2xl font-bold text-gray-300">
|
||||
<div
|
||||
class="mt-10 w-full flex justify-center items-center m-auto text-2xl font-bold text-gray-300"
|
||||
>
|
||||
No data Available
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,41 +1,51 @@
|
||||
<script lang='ts'>
|
||||
import { goto } from '$app/navigation';
|
||||
import { numberOfUnreadNotification, screenWidth } from '$lib/store';
|
||||
import { abbreviateNumber } from '$lib/utils';
|
||||
import logo from '$lib/images/new_launcher_logo.png';
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import { numberOfUnreadNotification, screenWidth } from "$lib/store";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import logo from "$lib/images/new_launcher_logo.png";
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
|
||||
export let data;
|
||||
|
||||
let etfData = data?.getETFNewLaunches;
|
||||
|
||||
$: charNumber = $screenWidth < 640 ? 30 : 40
|
||||
$: charNumber = $screenWidth < 640 ? 30 : 40;
|
||||
</script>
|
||||
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} 100 Newest ETFs · stocknear
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} 100
|
||||
Newest ETFs · stocknear
|
||||
</title>
|
||||
<meta name="description" content={`A list of the 100 most recently launched ETFs on the US stock market, sorted by the inception date.`} />
|
||||
<meta
|
||||
name="description"
|
||||
content={`A list of the 100 most recently launched ETFs on the US stock market, sorted by the inception date.`}
|
||||
/>
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`100 Newest ETFs · stocknear`} />
|
||||
<meta property="og:description" content={`A list of the 100 most recently launched ETFs on the US stock market, sorted by the inception date.`} />
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`A list of the 100 most recently launched ETFs on the US stock market, sorted by the inception date.`}
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
<!-- Twitter specific meta tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={`100 Newest ETFs · stocknear`} />
|
||||
<meta name="twitter:description" content={`A list of the 100 most recently launched ETFs on the US stock market, sorted by the inception date.`} />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`A list of the 100 most recently launched ETFs on the US stock market, sorted by the inception date.`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
|
||||
|
||||
<section
|
||||
class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40"
|
||||
>
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
@ -44,25 +54,28 @@ $: charNumber = $screenWidth < 640 ? 30 : 40
|
||||
</div>
|
||||
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
||||
|
||||
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div
|
||||
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
|
||||
>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
<div>
|
||||
<div class="flex flex-row justify-center items-center">
|
||||
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
|
||||
<h1
|
||||
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
|
||||
>
|
||||
New ETFs
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center ">
|
||||
<span
|
||||
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
|
||||
>
|
||||
Collection of all new launches of ETFs
|
||||
</span>
|
||||
<!--
|
||||
@ -73,13 +86,18 @@ $: charNumber = $screenWidth < 640 ? 30 : 40
|
||||
<svg class="w-6 h-6 inline-block ml-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="#B46266" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="#B46266" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="#B46266" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g></svg>
|
||||
</label>
|
||||
-->
|
||||
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
|
||||
<!-- Start Column -->
|
||||
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
|
||||
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<div
|
||||
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
|
||||
>
|
||||
<svg
|
||||
class="w-40 -my-5"
|
||||
viewBox="0 0 200 200"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="5" result="glow" />
|
||||
@ -89,30 +107,27 @@ $: charNumber = $screenWidth < 640 ? 30 : 40
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
|
||||
<path
|
||||
fill="#1E40AF"
|
||||
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
|
||||
transform="translate(100 100)"
|
||||
filter="url(#glow)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
||||
<div class="z-1 absolute top-0">
|
||||
<img class="w-28 ml-4" src={logo} alt="logo" loading="lazy">
|
||||
<img class="w-28 ml-4" src={logo} alt="logo" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="w-full mt-5 m-auto mb-10 bg-[#09090B] pl-3 pr-3 overflow-hidden">
|
||||
|
||||
|
||||
<div
|
||||
class="w-full mt-5 m-auto mb-10 bg-[#09090B] pl-3 pr-3 overflow-hidden"
|
||||
>
|
||||
<!--Start Top Winners/Losers-->
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
|
||||
<div class="ml-4 text-start w-full text-white mb-2">
|
||||
<span class="font-bold text-2xl">
|
||||
{etfData?.length} ETFs
|
||||
@ -122,113 +137,149 @@ $: charNumber = $screenWidth < 640 ? 30 : 40
|
||||
<div class="border-b mt-2 border-gray-800 w-full mb-4" />
|
||||
|
||||
<div class="w-full overflow-x-scroll">
|
||||
<table class="mt-5 table table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto overflow-hidden">
|
||||
<table
|
||||
class="mt-5 table table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto overflow-hidden"
|
||||
>
|
||||
<thead>
|
||||
<tr class="border-b border-[#27272A]">
|
||||
<th class="text-white font-semibold text-[1rem]">Inception</th>
|
||||
<th class="text-white font-semibold text-[1rem]">Symbol</th>
|
||||
<th class="text-white font-semibold text-[1rem] ">Fund Name</th>
|
||||
<th class="text-white font-semibold text-end text-[1rem] ">Holdings</th>
|
||||
<th class="text-white font-semibold text-end text-[1rem] ">Total Assets</th>
|
||||
<th class="text-white font-semibold text-[1rem]"
|
||||
>Inception</th
|
||||
>
|
||||
<th class="text-white font-semibold text-[1rem]"
|
||||
>Symbol</th
|
||||
>
|
||||
<th class="text-white font-semibold text-[1rem]"
|
||||
>Fund Name</th
|
||||
>
|
||||
<th class="text-white font-semibold text-end text-[1rem]"
|
||||
>Holdings</th
|
||||
>
|
||||
<th class="text-white font-semibold text-end text-[1rem]"
|
||||
>Total Assets</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each etfData as item, index}
|
||||
<tr on:click={() => goto("/etf/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||
{new Date(item?.inceptionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
<tr
|
||||
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
|
||||
>
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||
>
|
||||
{new Date(item?.inceptionDate)?.toLocaleString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
},
|
||||
)}
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
||||
<td
|
||||
class="text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||
>
|
||||
<a
|
||||
href={"/etf/" + item?.symbol}
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
>
|
||||
{item?.symbol}
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] ">
|
||||
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + '...' : item?.name}
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||
>
|
||||
{item?.name?.length > charNumber
|
||||
? item?.name?.slice(0, charNumber) + "..."
|
||||
: item?.name}
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end ">
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end"
|
||||
>
|
||||
{item?.numberOfHoldings}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end">
|
||||
{(item?.totalAssets !== 0 && item?.totalAssets !== null) ? abbreviateNumber(item?.totalAssets,true) : '-'}
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end"
|
||||
>
|
||||
{item?.totalAssets !== 0 && item?.totalAssets !== null
|
||||
? abbreviateNumber(item?.totalAssets, true)
|
||||
: "-"}
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
|
||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
||||
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
|
||||
<div
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/pricing"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription
|
||||
Pro Subscription 🔥
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools.
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/analysts"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Wallstreet Analyst
|
||||
Top Analyst 📊
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings.
|
||||
Get the latest top Wall Street analyst ratings
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/politicians"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Congress Trading
|
||||
Congress Trading 🇺🇸
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Congress trading insights.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||
import logo from "$lib/images/top_winner_logo.png";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
@ -576,30 +575,32 @@
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
|
||||
<div
|
||||
on:click={() => goto("/pricing")}
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<div
|
||||
<a
|
||||
href={"/pricing"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription
|
||||
Pro Subscription 🔥
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools.
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
on:click={() => goto("/analysts")}
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<a
|
||||
href={"/analysts"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Top Analyst 📊
|
||||
@ -609,14 +610,16 @@
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings.
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
on:click={() => goto("/politicians")}
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<a
|
||||
href={"/politicians"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Congress Trading 🇺🇸
|
||||
@ -626,7 +629,7 @@
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Congress trading insights.
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@ -1,40 +1,31 @@
|
||||
<script lang='ts'>
|
||||
import logo from '$lib/images/news_logo.png'
|
||||
import ScrollToTop from '$lib/components/ScrollToTop.svelte';
|
||||
<script lang="ts">
|
||||
import logo from "$lib/images/news_logo.png";
|
||||
import ScrollToTop from "$lib/components/ScrollToTop.svelte";
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from "$app/navigation";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
export let data;
|
||||
|
||||
|
||||
function handleMode(i) {
|
||||
activeIdx = i;
|
||||
if(activeIdx === 0) {
|
||||
goto("/market-news")
|
||||
} else if (activeIdx === 1) {
|
||||
goto("/market-news/general")
|
||||
}
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
title: "Stock",
|
||||
path: "/market-news",
|
||||
},
|
||||
{
|
||||
title: "General",
|
||||
path: "/market-news/general",
|
||||
},
|
||||
];
|
||||
|
||||
let activeIdx = 0;
|
||||
|
||||
// Subscribe to the $page store to reactively update the activeIdx based on the URL
|
||||
$: if ($page.url.pathname === '/market-news') {
|
||||
$: if ($page.url.pathname === "/market-news") {
|
||||
activeIdx = 0;
|
||||
} else if ($page.url.pathname.startsWith('/market-news/general')) {
|
||||
} else if ($page.url.pathname.startsWith("/market-news/general")) {
|
||||
activeIdx = 1;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- HEADER FOR BETTER SEO -->
|
||||
@ -43,11 +34,9 @@ let activeIdx = 0;
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
</svelte:head>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
|
||||
|
||||
<section
|
||||
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
|
||||
>
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
@ -56,36 +45,42 @@ let activeIdx = 0;
|
||||
</div>
|
||||
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
||||
|
||||
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
|
||||
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
|
||||
<div
|
||||
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
|
||||
>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||
|
||||
<!-- Start Column -->
|
||||
<div>
|
||||
<div class="flex flex-row justify-center items-center">
|
||||
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
|
||||
<h1
|
||||
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
|
||||
>
|
||||
Market News
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center ">
|
||||
<span
|
||||
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
|
||||
>
|
||||
Flush your stock worries away with our website's latest news!
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
|
||||
<!-- Start Column -->
|
||||
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
|
||||
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<div
|
||||
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
|
||||
>
|
||||
<svg
|
||||
class="w-40 -my-5"
|
||||
viewBox="0 0 200 200"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="5" result="glow" />
|
||||
@ -95,60 +90,61 @@ let activeIdx = 0;
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
|
||||
<path
|
||||
fill="#1E40AF"
|
||||
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
|
||||
transform="translate(100 100)"
|
||||
filter="url(#glow)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
||||
<div class="z-1 absolute top-1 right-10">
|
||||
<img class="w-24 mr-1" src={logo} alt="logo" loading="lazy">
|
||||
<img class="w-24 mr-1" src={logo} alt="logo" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Column -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bg-[#313131] w-52 sm:w-fit relative m-auto sm:m-0 sm:mr-auto flex sm:flex-wrap items-center justify-center rounded-lg p-1 -mt-3">
|
||||
<div
|
||||
class="bg-[#313131] w-52 sm:w-fit relative m-auto sm:m-0 sm:mr-auto flex sm:flex-wrap items-center justify-center rounded-lg p-1 -mt-3"
|
||||
>
|
||||
{#each tabs as item, i}
|
||||
<button
|
||||
on:click={() => handleMode(i)}
|
||||
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
|
||||
<a
|
||||
href={item?.path}
|
||||
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx ===
|
||||
i
|
||||
? 'z-0'
|
||||
: ''} "
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<div
|
||||
class="absolute inset-0 rounded-lg bg-purple-600"
|
||||
></div>
|
||||
<div class="absolute inset-0 rounded-lg bg-purple-600"></div>
|
||||
{/if}
|
||||
<span class="relative text-[1rem] sm:text-lg block font-semibold duration-200 text-white">
|
||||
<span
|
||||
class="relative text-[1rem] sm:text-lg block font-semibold duration-200 text-white"
|
||||
>
|
||||
{item.title}
|
||||
</span>
|
||||
</button>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="border-b mt-5 border-slate-700" />
|
||||
|
||||
<slot />
|
||||
|
||||
<ScrollToTop />
|
||||
|
||||
</main>
|
||||
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
|
||||
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
|
||||
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
|
||||
<div
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/pricing"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription 🔥
|
||||
@ -158,12 +154,17 @@ let activeIdx = 0;
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools.
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div on:click={() => goto('/earnings-calendar')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/earnings-calendar"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Earnings Calendar 🌟
|
||||
@ -173,11 +174,16 @@ let activeIdx = 0;
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest Earnings of companies
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div on:click={() => goto('/dividends-calendar')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/dividends-calendar"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Dividend Calendar 💸
|
||||
@ -187,11 +193,16 @@ let activeIdx = 0;
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Stay updated on upcoming Dividends in the stock market.
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div on:click={() => goto('/economic-calendar')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
||||
<div
|
||||
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href={"/economic-calendar"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Economic Events 🌍
|
||||
@ -201,21 +212,10 @@ let activeIdx = 0;
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Stay updated on upcoming Economic Events worldwide.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -665,7 +665,7 @@
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription
|
||||
Pro Subscription 🔥
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
@ -685,12 +685,12 @@
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Wallstreet Analyst
|
||||
Top Analyst 📊
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest top Wall Street analyst ratings.
|
||||
Get the latest top Wall Street analyst ratings
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
@ -704,7 +704,7 @@
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Congress Trading
|
||||
Congress Trading 🇺🇸
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
@ -718,612 +718,3 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--Start Rows-->
|
||||
<input type="checkbox" id="rowList" class="modal-toggle" />
|
||||
|
||||
<dialog id="rowList" class="modal modal-bottom sm:modal-middle">
|
||||
<label
|
||||
id="rowList"
|
||||
for="rowList"
|
||||
class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.05] sm:bg-[#000] sm:bg-opacity-[0.5]"
|
||||
></label>
|
||||
|
||||
<div
|
||||
class="modal-box w-full bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800"
|
||||
>
|
||||
<h3 class="text-white text-2xl font-bold">Rows</h3>
|
||||
|
||||
<label
|
||||
for="rowList"
|
||||
class="sm:hidden cursor-pointer absolute right-5 top-2 bg-[#000] sm:bg-[#09090B] text-[1.8rem] text-white"
|
||||
>
|
||||
✕
|
||||
</label>
|
||||
|
||||
<div class="text-white mt-10">
|
||||
<div
|
||||
class="flex flex-col items-center w-full max-w-3xl bg-[#000] sm:bg-[#09090B]"
|
||||
>
|
||||
{#each rowList as rows}
|
||||
<label
|
||||
on:click={() => changeRows(rows)}
|
||||
for="rowList"
|
||||
class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
|
||||
>
|
||||
<div
|
||||
class="flex flex-row items-center w-full bg-[#09090B] bg-opacity-[0.7] sm:bg-opacity-[1.0] sm:bg-[#303030] p-3 rounded-lg {rows ===
|
||||
displayRows
|
||||
? 'ring-2 ring-[#04E000]'
|
||||
: ''}"
|
||||
>
|
||||
<div class="flex flex-col items-center w-full">
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
{rows} Rows
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="rounded-full w-8 h-8 relative border border-[#737373]"
|
||||
>
|
||||
{#if rows === displayRows}
|
||||
<svg
|
||||
class="w-full h-full rounded-full"
|
||||
viewBox="0 0 48 48"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="#000000"
|
||||
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<title>ic_fluent_checkmark_circle_48_filled</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g
|
||||
id="🔍-Product-Icons"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<g
|
||||
id="ic_fluent_checkmark_circle_48_filled"
|
||||
fill="#04E000"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<path
|
||||
d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z"
|
||||
id="🎨-Color"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g></svg
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<!--End Rows-->
|
||||
|
||||
<!--Start Export -->
|
||||
<input type="checkbox" id="exportDataModal" class="modal-toggle" />
|
||||
<dialog id="exportDataModal" class="modal modal-bottom sm:modal-middle">
|
||||
<label
|
||||
id="exportDataModal"
|
||||
for="exportDataModal"
|
||||
class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.02] sm:bg-[#000] sm:bg-opacity-[0.5]"
|
||||
></label>
|
||||
|
||||
<div
|
||||
class="modal-box w-full bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800"
|
||||
>
|
||||
<label
|
||||
for="exportDataModal"
|
||||
class="cursor-pointer absolute right-5 top-2 bg-[#000] sm:bg-[#09090B] text-[1.8rem] text-white"
|
||||
>
|
||||
✕
|
||||
</label>
|
||||
|
||||
<div class="text-white">
|
||||
<h3 class="font-medium text-lg sm:text-xl mb-10">Export</h3>
|
||||
|
||||
<div
|
||||
class="flex flex-col items-center w-full max-w-3xl bg-[#000] sm:bg-[#09090B]"
|
||||
>
|
||||
<label
|
||||
for="exportDataModal"
|
||||
on:click={() => exportData("excel")}
|
||||
class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
|
||||
>
|
||||
<div
|
||||
class="flex flex-row items-center w-full bg-[#09090B] bg-opacity-[0.7] sm:bg-opacity-[1.0] sm:bg-[#303030] p-3 rounded-lg ring-2 ring-[#04E000]"
|
||||
>
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
Export to Excel
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label
|
||||
for="exportDataModal"
|
||||
on:click={() => exportData("csv")}
|
||||
class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
|
||||
>
|
||||
<div
|
||||
class="flex flex-row items-center w-full bg-[#09090B] bg-opacity-[0.7] sm:bg-opacity-[1.0] sm:bg-[#303030] p-3 rounded-lg ring-2 ring-[#04E000]"
|
||||
>
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
Export to CSV
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<!--End Export-->
|
||||
|
||||
{#if $screenWidth >= 640}
|
||||
<!--Start View All List-->
|
||||
<input type="checkbox" id="filterList" class="modal-toggle" />
|
||||
|
||||
<dialog id="filterList" class="modal modal-bottom sm:modal-middle">
|
||||
<label
|
||||
id="filterList"
|
||||
for="filterList"
|
||||
class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
|
||||
></label>
|
||||
|
||||
<div
|
||||
class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800 max-h-[600px] overflow-y-scroll"
|
||||
>
|
||||
<label
|
||||
for="filterList"
|
||||
class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white"
|
||||
>
|
||||
✕
|
||||
</label>
|
||||
|
||||
<div class="text-white mt-5 pb-5">
|
||||
<div class="flex flex-col items-center justify-start">
|
||||
<!--Start Political Party-->
|
||||
<div class="grid grid-cols-2 mt-4 w-full ml-auto mt-4">
|
||||
<div class="mb-4 mr-auto">
|
||||
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
|
||||
Political Party
|
||||
</h2>
|
||||
<ul class="space-y-1">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label
|
||||
on:click|stopPropagation={(event) =>
|
||||
handleFilter(event, "Democratic")}
|
||||
class="cursor-pointer flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
|
||||
>
|
||||
<input
|
||||
checked={filterList?.includes("Democratic")}
|
||||
type="checkbox"
|
||||
class="cursor-pointer bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
|
||||
/>
|
||||
<label class="text-white text-md cursor-pointer"
|
||||
>Democratic</label
|
||||
>
|
||||
</label>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label
|
||||
on:click|stopPropagation={(event) =>
|
||||
handleFilter(event, "Republican")}
|
||||
class="cursor-pointer flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
|
||||
>
|
||||
<input
|
||||
checked={filterList?.includes("Republican")}
|
||||
type="checkbox"
|
||||
class="cursor-pointer bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
|
||||
/>
|
||||
<label class="text-white text-md cursor-pointer"
|
||||
>Republican</label
|
||||
>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Column 2 -->
|
||||
<div class="mt-11">
|
||||
<ul class="space-y-1">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label
|
||||
on:click|stopPropagation={(event) =>
|
||||
handleFilter(event, "Other")}
|
||||
class="cursor-pointer flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
|
||||
>
|
||||
<input
|
||||
checked={filterList?.includes("Other")}
|
||||
type="checkbox"
|
||||
class="cursor-pointer bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
|
||||
/>
|
||||
<label class="text-white text-md cursor-pointer"
|
||||
>Other</label
|
||||
>
|
||||
</label>
|
||||
</li>
|
||||
<!-- ...other list items -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Political Party-->
|
||||
|
||||
<!--Start Transaction Type-->
|
||||
<div class="grid grid-cols-2 w-full ml-auto mt-4">
|
||||
<div class="mb-4 mr-auto">
|
||||
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
|
||||
Transaction Type
|
||||
</h2>
|
||||
<ul class="space-y-1">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label
|
||||
on:click|stopPropagation={(event) =>
|
||||
handleFilter(event, "Bought")}
|
||||
class="cursor-pointer flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
|
||||
>
|
||||
<input
|
||||
checked={filterList?.includes("Bought")}
|
||||
type="checkbox"
|
||||
class="cursor-pointer bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
|
||||
/>
|
||||
<label class="text-white text-md cursor-pointer"
|
||||
>Bought</label
|
||||
>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Column 2 -->
|
||||
<div class="mt-11">
|
||||
<ul class="space-y-1">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label
|
||||
on:click|stopPropagation={(event) =>
|
||||
handleFilter(event, "Sold")}
|
||||
class="cursor-pointer flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
|
||||
>
|
||||
<input
|
||||
checked={filterList?.includes("Sold")}
|
||||
type="checkbox"
|
||||
class="cursor-pointer bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
|
||||
/>
|
||||
<label class="text-white text-md cursor-pointer">Sold</label
|
||||
>
|
||||
</label>
|
||||
</li>
|
||||
<!-- ...other list items -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End Transaction Type-->
|
||||
|
||||
<!--Start Trade Size-->
|
||||
<!--
|
||||
<div class="grid grid-cols-2 w-full ml-auto mt-4">
|
||||
<div class="mb-4 mr-auto">
|
||||
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">Trade Size</h2>
|
||||
<ul class="space-y-1 ">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label for="upTo15K" on:click|stopPropagation={(event) => handleFilter(event, '$1,001 - $15,000')} class="cursor-pointer flex w-full items-center space-x-2 py-1.5 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="upTo15K" checked={filterList?.includes('$1,001 - $15,000')} type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<span class="text-white text-md">$1K-$15K</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label for="upTo50K" class="cursor-pointer flex w-full items-center space-x-2 py-1.5 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="upTo50K" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<span class="text-white text-md">$15K-$50K</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label for="upTo100K" class="cursor-pointer flex w-full items-center space-x-2 py-1.5 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="upTo100K" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<span class="text-white text-md">$50K-$100K</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label for="upTo250K" class="cursor-pointer flex w-full items-center space-x-2 py-1.5 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="upTo250K" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<span class="text-white text-md">$100K-$250K</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
-- Column 2 -
|
||||
<div class="mt-10">
|
||||
<ul class="space-y-1 ">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label for="upTo500K" class="cursor-pointer flex w-full items-center space-x-2 py-1.5 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="upTo500K" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<span class="text-white text-md">$100K-$500K</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label for="from250KTo500K" class="cursor-pointer flex w-full items-center space-x-2 py-1.5 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="from250KTo500K" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<span class="text-white text-md">$250K-$500K</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label for="from500KTo1M" class="cursor-pointer flex w-full items-center space-x-2 py-1.5 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="from500KTo1M" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<span class="text-white text-md">$500K-$1M</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label for="over1M" class="cursor-pointer flex w-full items-center space-x-2 py-1.5 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="over1M" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<span class="text-white text-md">Over $1M</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<!--End Trade Size-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<!--End View All List-->
|
||||
{:else}
|
||||
<div class="drawer drawer-end z-40 overflow-hidden w-screen">
|
||||
<input id="filterList" type="checkbox" class="drawer-toggle" />
|
||||
<div class="drawer-side overflow-y-scroll overflow-hidden">
|
||||
<div
|
||||
class="bg-[#000] min-h-screen w-screen pb-20 overflow-y-scroll overflow-hidden"
|
||||
>
|
||||
<label for="filterList" class="absolute left-6 top-6">
|
||||
<svg
|
||||
class="w-6 h-6 inline-block mb-0.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#fff"
|
||||
d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
|
||||
/></svg
|
||||
>
|
||||
</label>
|
||||
|
||||
<div class="w-screen overflow-y-scroll">
|
||||
<div class="space-y-3 sm:pt-5">
|
||||
<div class="bg-[#000] h-auto w-screen">
|
||||
<!--Start Header-->
|
||||
<div
|
||||
class="bg-[#000] w-full p-1 flex flex-col items-center pb-10 h-auto"
|
||||
>
|
||||
<h2
|
||||
class="text-center m-auto text-[1.1rem] font-medium text-white mt-5"
|
||||
>
|
||||
Filter List
|
||||
</h2>
|
||||
</div>
|
||||
<!--End Header-->
|
||||
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<!--Start Political Party-->
|
||||
<div class="grid grid-cols-2 mt-4 w-11/12 ml-auto mt-4">
|
||||
<div class="mb-4 mr-auto">
|
||||
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
|
||||
Political Party
|
||||
</h2>
|
||||
<ul class="space-y-1">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label
|
||||
on:click|stopPropagation={(event) =>
|
||||
handleFilter(event, "Democratic")}
|
||||
class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
|
||||
>
|
||||
<input
|
||||
checked={filterList?.includes("Democratic")}
|
||||
type="checkbox"
|
||||
class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
|
||||
/>
|
||||
<label class="text-white text-md">Democratic</label>
|
||||
</label>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label
|
||||
on:click|stopPropagation={(event) =>
|
||||
handleFilter(event, "Republican")}
|
||||
class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
|
||||
>
|
||||
<input
|
||||
checked={filterList?.includes("Republican")}
|
||||
type="checkbox"
|
||||
class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
|
||||
/>
|
||||
<label class="text-white text-md">Republican</label>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Column 2 -->
|
||||
<div class="mt-10">
|
||||
<ul class="space-y-1">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label
|
||||
on:click|stopPropagation={(event) =>
|
||||
handleFilter(event, "Other")}
|
||||
class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
|
||||
>
|
||||
<input
|
||||
checked={filterList?.includes("Other")}
|
||||
type="checkbox"
|
||||
class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
|
||||
/>
|
||||
<span class="text-white text-md">Other</span>
|
||||
</label>
|
||||
</li>
|
||||
<!-- ...other list items -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Political Party-->
|
||||
|
||||
<!--Start Transaction Type-->
|
||||
<div class="grid grid-cols-2 w-11/12 ml-auto mt-4">
|
||||
<div class="mb-4 mr-auto">
|
||||
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
|
||||
Transaction Type
|
||||
</h2>
|
||||
<ul class="space-y-1">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label
|
||||
on:click|stopPropagation={(event) =>
|
||||
handleFilter(event, "Bought")}
|
||||
class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
|
||||
>
|
||||
<input
|
||||
checked={filterList?.includes("Bought")}
|
||||
type="checkbox"
|
||||
class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
|
||||
/>
|
||||
<label class="text-white text-md">Bought</label>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Column 2 -->
|
||||
<div class="mt-10">
|
||||
<ul class="space-y-1">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<label
|
||||
on:click|stopPropagation={(event) =>
|
||||
handleFilter(event, "Sold")}
|
||||
class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
|
||||
>
|
||||
<input
|
||||
checked={filterList?.includes("Sold")}
|
||||
type="checkbox"
|
||||
class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
|
||||
/>
|
||||
<label class="text-white text-md">Sold</label>
|
||||
</label>
|
||||
</li>
|
||||
<!-- ...other list items -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End Transaction Type-->
|
||||
|
||||
<!--Start Trade Size-->
|
||||
<!--
|
||||
<div class="grid grid-cols-2 w-11/12 ml-auto mt-4">
|
||||
<div class="mb-4 mr-auto">
|
||||
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">Trade Size</h2>
|
||||
<ul class="space-y-1 ">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<div class="flex w-full items-center space-x-2 py-1.5 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="marketCap" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<label for="marketCap" class="text-white text-md">$1K-$15K</label>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<div class="flex w-full items-center space-x-2 py-1.5 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="marketCap" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<label for="marketCap" class="text-white text-md">$15K-$50K</label>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<div class="flex w-full items-center space-x-2 py-1.5 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="marketCap" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<label for="marketCap" class="text-white text-md">$50K-$100K</label>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<div class="flex w-full items-center space-x-2 py-1.5 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="marketCap" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<label for="marketCap" class="text-white text-md">$100K-$250K</label>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
-- Column 2 --
|
||||
<div class="mt-10">
|
||||
<ul class="space-y-1 ">
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<div class="flex w-full items-center space-x-2 py-1.5 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="marketCap" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<label for="marketCap" class="text-white text-md">$100K-$500K</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<div class="flex w-full items-center space-x-2 py-1.5 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="marketCap" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<label for="marketCap" class="text-white text-md">$250K-$500K</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<div class="flex w-full items-center space-x-2 py-1.5 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="marketCap" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<label for="marketCap" class="text-white text-md">$500K-$1M</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-2 cursor-pointer">
|
||||
<div class="flex w-full items-center space-x-2 py-1.5 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]">
|
||||
<input id="marketCap" type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
|
||||
<label for="marketCap" class="text-white text-md">Over $1M</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<!--End Trade Size-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.republican-striped {
|
||||
background-image: repeating-linear-gradient(
|
||||
-45deg,
|
||||
#98272b,
|
||||
#98272b 10px,
|
||||
#840412 10px,
|
||||
#840412 20px
|
||||
);
|
||||
}
|
||||
|
||||
.democratic-striped {
|
||||
background-image: repeating-linear-gradient(
|
||||
-45deg,
|
||||
#295ac7,
|
||||
#295ac7 10px,
|
||||
#164d9d 10px,
|
||||
#164d9d 20px
|
||||
);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,9 +18,11 @@
|
||||
const tabs = [
|
||||
{
|
||||
title: "Stocks",
|
||||
path: "/watchlist/stocks",
|
||||
},
|
||||
{
|
||||
title: "Options",
|
||||
path: "/watchlist/options",
|
||||
},
|
||||
];
|
||||
|
||||
@ -124,8 +126,7 @@
|
||||
>
|
||||
{#each tabs as item, i}
|
||||
<a
|
||||
href={i === 0 ? "/watchlist/stocks" : "/watchlist/options"}
|
||||
on:click={() => handleMode(i)}
|
||||
href={item?.path}
|
||||
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx ===
|
||||
i
|
||||
? 'z-0'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user