refactor code
This commit is contained in:
MuslemRahimi
parent
3f1ac5ef40
commit
be62e9f6d6
@ -1,396 +1,509 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import { screenWidth, numberOfUnreadNotification } from '$lib/store';
|
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from "svelte";
|
||||||
import { goto } from '$app/navigation';
|
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let analystStats = data?.getAnalystStats;
|
let analystStats = data?.getAnalystStats;
|
||||||
|
|
||||||
let rawData = data?.getAnalystStats?.ratingsList;
|
let rawData = data?.getAnalystStats?.ratingsList;
|
||||||
let stockList = rawData?.slice(0,20) ?? [];
|
let stockList = rawData?.slice(0, 20) ?? [];
|
||||||
|
|
||||||
let analystScore = analystStats?.analystScore;
|
|
||||||
let rank = analystStats?.rank;
|
|
||||||
let analystName = analystStats?.analystName;
|
|
||||||
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 numOfStocks = analystStats?.numOfStocks;
|
|
||||||
|
|
||||||
|
let analystScore = analystStats?.analystScore;
|
||||||
|
let rank = analystStats?.rank;
|
||||||
|
let analystName = analystStats?.analystName;
|
||||||
|
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 numOfStocks = analystStats?.numOfStocks;
|
||||||
|
|
||||||
|
function sectorSelector(sector) {
|
||||||
function sectorSelector(sector) {
|
|
||||||
let path;
|
let path;
|
||||||
switch(sector) {
|
switch (sector) {
|
||||||
case 'Financials':
|
case "Financials":
|
||||||
path = "financial-sector";
|
path = "financial-sector";
|
||||||
break;
|
break;
|
||||||
case 'Healthcare':
|
case "Healthcare":
|
||||||
path = "healthcare-sector";
|
path = "healthcare-sector";
|
||||||
break;
|
break;
|
||||||
case 'Information Technology':
|
case "Information Technology":
|
||||||
path = "technology-sector";
|
path = "technology-sector";
|
||||||
break;
|
break;
|
||||||
case 'Technology':
|
case "Technology":
|
||||||
path = "technology-sector";
|
path = "technology-sector";
|
||||||
break;
|
break;
|
||||||
case 'Financial Services':
|
case "Financial Services":
|
||||||
path = "financial-sector";
|
path = "financial-sector";
|
||||||
break;
|
break;
|
||||||
case 'Industrials':
|
case "Industrials":
|
||||||
path = "industrials-sector";
|
path = "industrials-sector";
|
||||||
break;
|
break;
|
||||||
case 'Energy':
|
case "Energy":
|
||||||
path = "energy-sector";
|
path = "energy-sector";
|
||||||
break;
|
break;
|
||||||
case 'Utilities':
|
case "Utilities":
|
||||||
path = "utilities-sector";
|
path = "utilities-sector";
|
||||||
break;
|
break;
|
||||||
case 'Consumer Cyclical':
|
case "Consumer Cyclical":
|
||||||
path = "consumer-cyclical-sector";
|
path = "consumer-cyclical-sector";
|
||||||
break;
|
break;
|
||||||
case 'Real Estate':
|
case "Real Estate":
|
||||||
path = "real-estate-sector";
|
path = "real-estate-sector";
|
||||||
break;
|
break;
|
||||||
case 'Basic Materials':
|
case "Basic Materials":
|
||||||
path = "basic-materials-sector";
|
path = "basic-materials-sector";
|
||||||
break;
|
break;
|
||||||
case 'Communication Services':
|
case "Communication Services":
|
||||||
path = "communication-services-sector";
|
path = "communication-services-sector";
|
||||||
break;
|
break;
|
||||||
case 'Consumer Defensive':
|
case "Consumer Defensive":
|
||||||
path = "consumer-defensive-sector";
|
path = "consumer-defensive-sector";
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
// Handle default case if needed
|
// Handle default case if needed
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
return path
|
return path;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleScroll() {
|
async function handleScroll() {
|
||||||
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
if (isBottom && stockList?.length !== rawData?.length) {
|
if (isBottom && stockList?.length !== rawData?.length) {
|
||||||
const nextIndex = stockList?.length;
|
const nextIndex = stockList?.length;
|
||||||
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
stockList = [...stockList, ...filteredNewResults];
|
stockList = [...stockList, ...filteredNewResults];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("scroll", handleScroll);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
onMount(async () => {
|
$: charNumber = $screenWidth < 640 ? 20 : 40;
|
||||||
|
</script>
|
||||||
|
|
||||||
window.addEventListener('scroll', handleScroll);
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('scroll', handleScroll);
|
|
||||||
};
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
$: charNumber = $screenWidth < 640 ? 20 : 40;
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<title>
|
<title>
|
||||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Top Wall Street Stock Analysts · stocknear
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Top
|
||||||
</title>
|
Wall Street Stock Analysts · stocknear
|
||||||
<meta name="description" content={`A list of the top Wall Street stock analysts, ranked by their success rate and average return per rating.`} />
|
</title>
|
||||||
|
<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 -->
|
<!-- Other meta tags -->
|
||||||
<meta property="og:title" content={`Top Wall Street Stock Analysts · stocknear`}/>
|
<meta
|
||||||
<meta property="og:description" content={`A list of the top Wall Street stock analysts, ranked by their success rate and average return per rating.`} />
|
property="og:title"
|
||||||
<meta property="og:type" content="website"/>
|
content={`Top Wall Street Stock Analysts · stocknear`}
|
||||||
<!-- Add more Open Graph meta tags as needed -->
|
/>
|
||||||
|
<meta
|
||||||
<!-- Twitter specific meta tags -->
|
property="og:description"
|
||||||
<meta name="twitter:card" content="summary_large_image"/>
|
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.`} />
|
<meta property="og:type" content="website" />
|
||||||
<!-- Add more Twitter meta tags as needed -->
|
<!-- 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.`}
|
||||||
|
/>
|
||||||
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
</svelte:head>
|
</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"
|
||||||
|
>
|
||||||
|
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||||
|
<ul>
|
||||||
|
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||||
|
<li class="text-gray-300">Top Analyst Stocks</li>
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
<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="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="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>
|
||||||
|
{: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>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
|
||||||
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
|
<span class="ml-1 text-sm sm:text-[1rem] text-gray-400">
|
||||||
|
({analystScore})
|
||||||
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
</span>
|
||||||
<ul>
|
</div>
|
||||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
</div>
|
||||||
<li class="text-gray-300">Top Analyst Stocks</li>
|
</div>
|
||||||
</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="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="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>
|
||||||
|
|
||||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
<div class="stat">
|
||||||
|
<div class="text-2xl font-bold text-gray-200">
|
||||||
|
{totalRatings}
|
||||||
<div class="w-full m-auto mt-12">
|
</div>
|
||||||
|
<div class="text-gray-200 text-sm">Total Ratings</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center -ml-10 sm:ml-0 justify-center sm:justify-start ">
|
<div class="stat">
|
||||||
<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
|
||||||
<div class="ml-3 flex flex-col items-start">
|
class="text-2xl font-bold {successRate >= 0
|
||||||
<div class="text-xl font-bold text-gray-200">{analystName}</div>
|
? 'text-[#36D984]'
|
||||||
<div class="text-[1rem] text-gray-200">Analyst at {companyName}</div>
|
: 'text-[#EF4444]'}"
|
||||||
<div class="flex flex-row items-center mt-1">
|
>
|
||||||
{#each Array.from({ length: 5 }) as _, i}
|
{successRate >= 0 ? "+" : ""}{successRate?.toFixed(2)}%
|
||||||
{#if i < Math.floor(analystScore)}
|
</div>
|
||||||
<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">
|
<div class="text-gray-200 text-sm">Success Rate</div>
|
||||||
<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"/>
|
</div>
|
||||||
</svg>
|
|
||||||
{:else}
|
<div class="stat">
|
||||||
<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">
|
<div
|
||||||
<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"/>
|
class="text-2xl font-bold {avgReturn >= 0
|
||||||
</svg>
|
? 'text-[#36D984]'
|
||||||
{/if}
|
: 'text-[#EF4444]'}"
|
||||||
{/each}
|
>
|
||||||
|
{avgReturn >= 0 ? "+" : ""}{avgReturn?.toFixed(2)}%
|
||||||
<span class="ml-1 text-sm sm:text-[1rem] text-gray-400">
|
</div>
|
||||||
({analystScore})
|
<div class="text-gray-200 text-sm">Avg Return</div>
|
||||||
</span>
|
</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="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"
|
||||||
|
>
|
||||||
|
{#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"
|
||||||
|
>
|
||||||
|
{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"
|
||||||
|
>
|
||||||
|
<thead>
|
||||||
|
<tr class="bg-[#09090B]">
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
Action
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<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]">
|
||||||
|
Date
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</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"}
|
||||||
|
<a class="block relative" href="/pricing">
|
||||||
|
<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]"
|
||||||
|
>
|
||||||
|
XXXXXXXXXXXXXXXX
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-2 sm:p-0">
|
<div class="absolute top-3 flex items-center">
|
||||||
<div class="stats stats-horizontal bg-[#09090B] w-full rounded-none sm:rounded-lg mt-12 mb-5">
|
<svg
|
||||||
|
class="size-5 text-[#FBCE3C]"
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-4">
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
style="max-width: 40px;"
|
||||||
<div class="stat">
|
>
|
||||||
<div class="text-2xl font-bold text-gray-200"># {rank}</div>
|
<path
|
||||||
<div class="text-gray-200 text-sm">Out of {numOfAnalysts} analysts</div>
|
fill-rule="evenodd"
|
||||||
</div>
|
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"
|
||||||
<div class="stat">
|
>
|
||||||
<div class="text-2xl font-bold text-gray-200">{totalRatings}</div>
|
</path>
|
||||||
<div class="text-gray-200 text-sm">Total Ratings</div>
|
</svg>
|
||||||
</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-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-gray-200 text-sm">Avg Return</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-2 sm:p-0 mb-10">
|
<span
|
||||||
<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]">
|
class="ml-1 font-semibold text-muted group-hover:text-default"
|
||||||
<div class="flex flex-col items-start">
|
>
|
||||||
<span class="text-gray-300 font-bold text-lg smtext-xl">
|
Upgrade
|
||||||
Main Sectors:
|
</span>
|
||||||
</span>
|
</div>
|
||||||
|
|
||||||
<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">
|
|
||||||
{sector}
|
|
||||||
</a>
|
</a>
|
||||||
{/each}
|
{:else}
|
||||||
</div>
|
<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]"
|
||||||
|
>
|
||||||
|
{item?.ticker}
|
||||||
|
</a>
|
||||||
|
<span class="text-white">
|
||||||
|
{item?.name?.length > charNumber
|
||||||
|
? item?.name?.slice(0, charNumber) + "..."
|
||||||
|
: item?.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
|
||||||
</div>
|
<td
|
||||||
</div>
|
class="text-sm sm:text-[1rem] text-start whitespace-nowrap"
|
||||||
</div>
|
>
|
||||||
|
<div class="flex flex-col sm:flex-row items-start">
|
||||||
|
<span class="font-medium text-white mr-1"
|
||||||
|
>{item?.action_company}:</span
|
||||||
<span class="p-3 text-[#F5F5F5] font-bold text-2xl">
|
>
|
||||||
{numOfStocks} Stocks
|
<span
|
||||||
</span>
|
class="font-medium {[
|
||||||
|
'Strong Buy',
|
||||||
<div class="w-screen sm:w-full m-auto mt-10">
|
'Buy',
|
||||||
|
]?.includes(item?.rating_current)
|
||||||
<div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll">
|
? 'text-[#37C97D]'
|
||||||
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
|
: item?.rating_current === 'Hold'
|
||||||
<thead>
|
? 'text-[#FF7070]'
|
||||||
<tr class="bg-[#09090B]">
|
: ['Strong Sell', 'Sell']?.includes(
|
||||||
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
|
item?.rating_current,
|
||||||
Stock
|
)
|
||||||
</th>
|
? 'text-[#FF2F1F]'
|
||||||
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
|
: 'text-gray-300'}"
|
||||||
Action
|
>
|
||||||
</th>
|
{item?.rating_current}
|
||||||
|
</span>
|
||||||
<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]">
|
|
||||||
Date
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</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'}
|
|
||||||
<a class="block relative" href="/pricing">
|
|
||||||
<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]">
|
|
||||||
XXXXXXXXXXXXXXXX
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="absolute top-3 flex items-center">
|
|
||||||
<svg class="size-5 text-[#FBCE3C]"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
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">
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<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]">
|
|
||||||
{item?.ticker}
|
|
||||||
</a>
|
|
||||||
<span class="text-white">
|
|
||||||
{item?.name?.length > charNumber
|
|
||||||
? item?.name?.slice(0, charNumber) + "..."
|
|
||||||
: item?.name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<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'}">
|
|
||||||
{item?.rating_current}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
{:else if Math?.ceil(item?.adjusted_pt_current) !== 0}
|
|
||||||
<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>
|
|
||||||
|
|
||||||
</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">
|
|
||||||
<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 🔥
|
|
||||||
</h2>
|
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
|
||||||
</div>
|
</div>
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
</td>
|
||||||
Upgrade now for unlimited access to all data and tools
|
|
||||||
</span>
|
<td
|
||||||
</div>
|
class="text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||||
</div>
|
>
|
||||||
{/if}
|
<div class="flex flex-row items-center justify-end">
|
||||||
|
{#if Math?.ceil(item?.adjusted_pt_prior) !== 0}
|
||||||
<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">
|
<span class="text-gray-100 font-normal"
|
||||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
>${Math?.ceil(item?.adjusted_pt_prior)}</span
|
||||||
<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">
|
<svg
|
||||||
Top Analyst 📊
|
class="w-3 h-3 ml-1 mr-1 inline-block"
|
||||||
</h2>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
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
|
||||||
|
>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
</td>
|
||||||
Get the latest top Wall Street analyst ratings
|
|
||||||
</span>
|
<td
|
||||||
</div>
|
class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap"
|
||||||
</div>
|
>
|
||||||
|
{new Date(item?.date).toLocaleString("en-US", {
|
||||||
<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">
|
month: "short",
|
||||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
day: "numeric",
|
||||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
year: "numeric",
|
||||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
daySuffix: "2-digit",
|
||||||
Top Stocks Picks ⭐
|
})}
|
||||||
</h2>
|
</td>
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
</tr>
|
||||||
</div>
|
{/each}
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
</tbody>
|
||||||
Get the latest top Wall Street analyst ratings.
|
</table>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
</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
|
||||||
|
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 🔥
|
||||||
|
</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>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<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 📊
|
||||||
|
</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
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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 ⭐
|
||||||
|
</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.
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,192 +1,209 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import { numberOfUnreadNotification } from '$lib/store';
|
import { numberOfUnreadNotification } from "$lib/store";
|
||||||
import { page } from '$app/stores';
|
import { page } from "$app/stores";
|
||||||
import logo from '$lib/images/provider_logo.png';
|
import logo from "$lib/images/provider_logo.png";
|
||||||
import { formatETFName } from '$lib/utils';
|
import { formatETFName } from "$lib/utils";
|
||||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let currentPath = '';
|
let currentPath = "";
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if($page?.url?.pathname?.startsWith('/etf/etf-providers'))
|
if ($page?.url?.pathname?.startsWith("/etf/etf-providers")) {
|
||||||
{
|
const parts = $page?.url?.pathname.split("/");
|
||||||
const parts = $page?.url?.pathname.split('/');
|
if (parts?.[3]?.length !== 0) {
|
||||||
if (parts?.[3]?.length !== 0) {
|
currentPath = formatETFName(parts[3]) ?? "";
|
||||||
currentPath = formatETFName(parts[3]) ?? '';
|
console.log(currentPath);
|
||||||
console.log(currentPath)
|
} else {
|
||||||
}
|
currentPath = "";
|
||||||
else {
|
}
|
||||||
currentPath = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<svelte:head>
|
<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 charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<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 -->
|
<!-- Other meta tags -->
|
||||||
<meta property="og:title" content="Largest ETF Providers by Assets Under Management · stocknear"/>
|
<meta
|
||||||
<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.">
|
property="og:title"
|
||||||
<meta property="og:type" content="website"/>
|
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 -->
|
<!-- Add more Open Graph meta tags as needed -->
|
||||||
|
|
||||||
<!-- Twitter specific meta tags -->
|
<!-- Twitter specific meta tags -->
|
||||||
<meta name="twitter:card" content="summary_large_image"/>
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:title" content="Largest ETF Providers by Assets Under Management · stocknear"/>
|
<meta
|
||||||
<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.">
|
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 -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<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>
|
|
||||||
{#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">
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
{#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"
|
||||||
|
>
|
||||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||||
|
<div
|
||||||
<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">
|
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">
|
<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"
|
||||||
|
>
|
||||||
|
ETF Providers
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Start Column -->
|
<span
|
||||||
<div>
|
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
|
||||||
<div class="flex flex-row justify-center items-center">
|
>
|
||||||
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
|
Companies issue and manage ETFs actively traded on the U.S.
|
||||||
ETF Providers
|
stock market.
|
||||||
</h1>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- End Column -->
|
||||||
|
|
||||||
<span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center ">
|
<!-- Start Column -->
|
||||||
Companies issue and manage ETFs actively traded on the U.S. stock market.
|
<div
|
||||||
</span>
|
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" />
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="glow" />
|
||||||
|
<feMergeNode in="SourceGraphic" />
|
||||||
|
</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)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="z-1 absolute top-4">
|
||||||
</div>
|
<img class="w-32 ml-4" src={logo} alt="logo" loading="lazy" />
|
||||||
<!-- End Column -->
|
</div>
|
||||||
|
</div>
|
||||||
<!-- Start Column -->
|
<!-- End Column -->
|
||||||
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
|
</div>
|
||||||
<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"/>
|
|
||||||
<feMerge>
|
|
||||||
<feMergeNode in="glow"/>
|
|
||||||
<feMergeNode in="SourceGraphic"/>
|
|
||||||
</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)" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="z-1 absolute top-4">
|
|
||||||
<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">
|
|
||||||
<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
|
|
||||||
</h2>
|
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
|
||||||
</div>
|
</div>
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
|
||||||
Upgrade now for unlimited access to all data and tools.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</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-full m-auto mb-10 bg-[#09090B] overflow-hidden">
|
||||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
<div class="w-full flex flex-col justify-center items-center">
|
||||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
<slot />
|
||||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
</div>
|
||||||
Wallstreet Analyst
|
|
||||||
</h2>
|
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
|
||||||
</div>
|
</div>
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
</main>
|
||||||
Get the latest top Wall Street analyst ratings.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</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">
|
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||||
<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 flex justify-between items-center p-3 mt-3">
|
<div
|
||||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
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"
|
||||||
Congress Trading
|
>
|
||||||
</h2>
|
<a
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
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 🔥
|
||||||
|
</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>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<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 📊
|
||||||
|
</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
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
|
||||||
Get the latest top Congress trading insights.
|
<div
|
||||||
</span>
|
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 🇺🇸
|
||||||
|
</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>
|
||||||
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,121 +1,130 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import { goto } from '$app/navigation';
|
import { abbreviateNumber, formatETFName } from "$lib/utils";
|
||||||
|
import { numberOfUnreadNotification } from "$lib/store";
|
||||||
import { abbreviateNumber, formatETFName} from '$lib/utils';
|
|
||||||
import { numberOfUnreadNotification } from '$lib/store';
|
|
||||||
|
|
||||||
export let data;
|
|
||||||
let etfProviderList = data?.getAllETFProviders;
|
|
||||||
|
|
||||||
|
|
||||||
|
export let data;
|
||||||
|
let etfProviderList = data?.getAllETFProviders;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<title>
|
<title>
|
||||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Largest ETF Providers by Assets Under Management · stocknear
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Largest
|
||||||
|
ETF Providers by Assets Under Management · stocknear
|
||||||
</title>
|
</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 -->
|
<!-- Other meta tags -->
|
||||||
<meta property="og:title" content={`Largest ETF Providers by Assets Under Management · stocknear`}/>
|
<meta
|
||||||
<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.`} />
|
property="og:title"
|
||||||
<meta property="og:type" content="website"/>
|
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 -->
|
<!-- Add more Open Graph meta tags as needed -->
|
||||||
|
|
||||||
<!-- Twitter specific meta tags -->
|
<!-- Twitter specific meta tags -->
|
||||||
<meta name="twitter:card" content="summary_large_image"/>
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:title" content={`Largest ETF Providers by Assets Under Management · stocknear`}/>
|
<meta
|
||||||
<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.`} />
|
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 -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
|
|
||||||
</svelte:head>
|
</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
|
||||||
|
>
|
||||||
|
|
||||||
<section class="w-full overflow-hidden m-auto">
|
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>
|
||||||
<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.
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Page wrapper -->
|
|
||||||
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
|
||||||
|
|
||||||
|
<!-- Page wrapper -->
|
||||||
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
<!-- Content area -->
|
<!-- Content area -->
|
||||||
<div class="w-full overflow-x-scroll">
|
<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>
|
||||||
<thead>
|
<tr class="border border-slate-800">
|
||||||
<tr class="border border-slate-800">
|
<th class="text-white font-semibold text-sm">Provider Name</th>
|
||||||
<th class="text-slate-200 font-semibold text-[1rem]">Provider Name</th>
|
<th class="text-white font-semibold text-end text-sm"
|
||||||
<th class="text-slate-200 font-semibold text-center text-[1rem]">Total Assets</th>
|
>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-white font-semibold text-sm text-end">Funds</th>
|
||||||
<th class="text-slate-200 font-semibold text-[1rem] text-end">Avg. Holdings</th>
|
<th class="text-white font-semibold text-sm text-end">Avg. Cost</th>
|
||||||
</tr>
|
<th class="text-white font-semibold text-sm text-end"
|
||||||
</thead>
|
>Avg. Holdings</th
|
||||||
<tbody>
|
>
|
||||||
{#each etfProviderList as item,index}
|
</tr>
|
||||||
<!-- row -->
|
</thead>
|
||||||
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
|
<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"
|
||||||
|
>
|
||||||
|
{formatETFName(item?.etfProvider)}
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
|
||||||
<td class="text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]">
|
<td
|
||||||
<a href={"/etf/etf-providers/"+item?.etfProvider} class="sm:hover:text-white text-blue-400">
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end"
|
||||||
{formatETFName(item?.etfProvider)}
|
>
|
||||||
</a>
|
{abbreviateNumber(item?.totalAssets)}
|
||||||
</td>
|
</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>
|
|
||||||
|
|
||||||
<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]">
|
|
||||||
{item?.avgExpenseRatio}%
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
|
<td
|
||||||
{item?.avgHoldings}
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
||||||
</td>
|
>
|
||||||
|
{item?.funds}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
{/each}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
<td
|
||||||
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
{item?.avgExpenseRatio}%
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
</div>
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
{item?.avgHoldings}
|
||||||
|
</td>
|
||||||
</section>
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|||||||
@ -1,173 +1,203 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import { goto } from '$app/navigation';
|
import { abbreviateNumber, formatETFName } from "$lib/utils";
|
||||||
import { abbreviateNumber, formatETFName} from '$lib/utils';
|
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||||
import { screenWidth, numberOfUnreadNotification } from '$lib/store';
|
import { onMount } from "svelte";
|
||||||
import { onMount } from 'svelte';
|
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let rawData = data?.getETFProviderData;
|
let rawData = data?.getETFProviderData;
|
||||||
let etfProviderData = rawData?.slice(0,50);
|
let etfProviderData = rawData?.slice(0, 50);
|
||||||
|
|
||||||
let etfProviderName = formatETFName(data?.getProviderName);
|
let etfProviderName = formatETFName(data?.getProviderName);
|
||||||
|
|
||||||
const totalAssets = rawData?.reduce((total, item) => total + item?.totalAssets, 0);
|
const totalAssets = rawData?.reduce(
|
||||||
|
(total, item) => total + item?.totalAssets,
|
||||||
const avgExpenseRatio = rawData?.reduce(
|
0,
|
||||||
(total, item) => total + item?.expenseRatio || 0,
|
);
|
||||||
0
|
|
||||||
) / rawData?.length;
|
|
||||||
|
|
||||||
|
|
||||||
async function handleScroll() {
|
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
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
if (isBottom && etfProviderData?.length !== rawData?.length) {
|
if (isBottom && etfProviderData?.length !== rawData?.length) {
|
||||||
const nextIndex = etfProviderData?.length;
|
const nextIndex = etfProviderData?.length;
|
||||||
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
|
||||||
etfProviderData = [...etfProviderData, ...filteredNewResults];
|
etfProviderData = [...etfProviderData, ...filteredNewResults];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
window.addEventListener('scroll', handleScroll);
|
window.addEventListener("scroll", handleScroll);
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('scroll', handleScroll);
|
window.removeEventListener("scroll", handleScroll);
|
||||||
};
|
};
|
||||||
})
|
});
|
||||||
|
|
||||||
|
|
||||||
$:charNumber = $screenWidth < 640 ? 20 : 30;
|
|
||||||
|
|
||||||
|
|
||||||
|
$: charNumber = $screenWidth < 640 ? 20 : 30;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<title>
|
<title>
|
||||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {etfProviderData?.length} {etfProviderName} ETFs - A Complete List · stocknear
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||||
|
{etfProviderData?.length}
|
||||||
|
{etfProviderName} ETFs - A Complete List · stocknear
|
||||||
</title>
|
</title>
|
||||||
<meta name="description" content={``} />
|
<meta name="description" content={``} />
|
||||||
|
|
||||||
<!-- Other meta tags -->
|
<!-- 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:description" content={``} />
|
||||||
<meta property="og:type" content="website"/>
|
<meta property="og:type" content="website" />
|
||||||
<!-- Add more Open Graph meta tags as needed -->
|
<!-- Add more Open Graph meta tags as needed -->
|
||||||
|
|
||||||
<!-- Twitter specific meta tags -->
|
<!-- Twitter specific meta tags -->
|
||||||
<meta name="twitter:card" content="summary_large_image"/>
|
<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={``} />
|
<meta name="twitter:description" content={``} />
|
||||||
<!-- Add more Twitter meta tags as needed -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
|
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
|
|
||||||
<section class="w-full overflow-hidden m-auto">
|
<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
|
||||||
|
>
|
||||||
|
|
||||||
{#if rawData?.length !== 0}
|
{etfProviderName} has {rawData?.length} ETFs listed with a total of {abbreviateNumber(
|
||||||
<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">
|
totalAssets,
|
||||||
<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>
|
true,
|
||||||
|
)}
|
||||||
{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(
|
||||||
in assets under management.
|
2,
|
||||||
The funds have an average expense ratio of {avgExpenseRatio?.toFixed(2)}%.
|
)}%.
|
||||||
|
</div>
|
||||||
</div>
|
{/if}
|
||||||
{/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">
|
||||||
<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">
|
||||||
</div>
|
Listed Funds
|
||||||
|
</div>
|
||||||
<div class="stat">
|
<div class="stat-value text-lg font-semibold text-white">
|
||||||
<div class="stat-title text-white text-sm sm:text-lg font-semibold">Total Assets</div>
|
{rawData?.length}
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalAssets,true)}</div>
|
</div>
|
||||||
</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>
|
|
||||||
|
|
||||||
</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 ">
|
|
||||||
<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>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{#each etfProviderData as item,index}
|
|
||||||
<!-- 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">
|
|
||||||
{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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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">
|
|
||||||
{item?.expenseRatio}%
|
|
||||||
</td>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
{/each}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
|
|
||||||
</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)}
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
{:else}
|
{#if rawData?.length !== 0}
|
||||||
<div class="mt-10 w-full flex justify-center items-center m-auto text-2xl font-bold text-gray-300">
|
<!-- Page wrapper -->
|
||||||
No data Available
|
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
|
||||||
</div>
|
<!-- Content area -->
|
||||||
{/if}
|
<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"
|
||||||
|
>
|
||||||
|
<thead>
|
||||||
|
<tr class="border border-slate-800">
|
||||||
|
<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}
|
||||||
|
<!-- 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"
|
||||||
|
>
|
||||||
|
{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>
|
||||||
|
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
{item?.numberOfHoldings}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
No data Available
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,71 +1,84 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from "$app/navigation";
|
||||||
import { numberOfUnreadNotification, screenWidth } from '$lib/store';
|
import { numberOfUnreadNotification, screenWidth } from "$lib/store";
|
||||||
import { abbreviateNumber } from '$lib/utils';
|
import { abbreviateNumber } from "$lib/utils";
|
||||||
import logo from '$lib/images/new_launcher_logo.png';
|
import logo from "$lib/images/new_launcher_logo.png";
|
||||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let etfData = data?.getETFNewLaunches;
|
let etfData = data?.getETFNewLaunches;
|
||||||
|
|
||||||
$: charNumber = $screenWidth < 640 ? 30 : 40
|
$: charNumber = $screenWidth < 640 ? 30 : 40;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<title>
|
<title>
|
||||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} 100 Newest ETFs · stocknear
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} 100
|
||||||
</title>
|
Newest ETFs · stocknear
|
||||||
<meta name="description" content={`A list of the 100 most recently launched ETFs on the US stock market, sorted by the inception date.`} />
|
</title>
|
||||||
|
<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 -->
|
<!-- Other meta tags -->
|
||||||
<meta property="og:title" content={`100 Newest ETFs · stocknear`}/>
|
<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
|
||||||
<meta property="og:type" content="website"/>
|
property="og:description"
|
||||||
<!-- Add more Open Graph meta tags as needed -->
|
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 -->
|
<!-- Twitter specific meta tags -->
|
||||||
<meta name="twitter:card" content="summary_large_image"/>
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:title" content={`100 Newest ETFs · stocknear`}/>
|
<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
|
||||||
<!-- Add more Twitter meta tags as needed -->
|
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>
|
</svelte:head>
|
||||||
|
|
||||||
<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>
|
|
||||||
<li><a class="text-gray-300">New Launches of ETFs</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full overflow-hidden m-auto mt-5">
|
<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>
|
||||||
|
<li><a class="text-gray-300">New Launches of ETFs</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
|
<div class="w-full overflow-hidden m-auto mt-5">
|
||||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
<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"
|
||||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
>
|
||||||
|
<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
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
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"
|
||||||
|
>
|
||||||
<!-- Start Column -->
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||||
<div>
|
<!-- Start Column -->
|
||||||
<div class="flex flex-row justify-center items-center">
|
<div>
|
||||||
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
|
<div class="flex flex-row justify-center items-center">
|
||||||
New ETFs
|
<h1
|
||||||
</h1>
|
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
|
||||||
</div>
|
>
|
||||||
|
New ETFs
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center ">
|
<span
|
||||||
Collection of all new launches of ETFs
|
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
|
||||||
</span>
|
>
|
||||||
<!--
|
Collection of all new launches of ETFs
|
||||||
|
</span>
|
||||||
|
<!--
|
||||||
<label for="marketMoverInfo" class="cursor-pointer flex justify-center items-center mt-2">
|
<label for="marketMoverInfo" class="cursor-pointer flex justify-center items-center mt-2">
|
||||||
<span class="text-white text-md font-medium">
|
<span class="text-white text-md font-medium">
|
||||||
Learn more
|
Learn more
|
||||||
@ -73,162 +86,200 @@ $: 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>
|
<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>
|
</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"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<filter id="glow">
|
||||||
|
<feGaussianBlur stdDeviation="5" result="glow" />
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="glow" />
|
||||||
|
<feMergeNode in="SourceGraphic" />
|
||||||
|
</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)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="z-1 absolute top-0">
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<!--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
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<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
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#each etfData as item, index}
|
||||||
|
<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-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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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
|
||||||
|
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 🔥
|
||||||
|
</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>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<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 📊
|
||||||
|
</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
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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 🇺🇸
|
||||||
|
</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>
|
||||||
|
</aside>
|
||||||
</div>
|
</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">
|
|
||||||
<defs>
|
|
||||||
<filter id="glow">
|
|
||||||
<feGaussianBlur stdDeviation="5" result="glow"/>
|
|
||||||
<feMerge>
|
|
||||||
<feMergeNode in="glow"/>
|
|
||||||
<feMergeNode in="SourceGraphic"/>
|
|
||||||
</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)" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="z-1 absolute top-0">
|
|
||||||
<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">
|
|
||||||
|
|
||||||
|
|
||||||
<!--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
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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">
|
|
||||||
<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>
|
|
||||||
</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' })}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
|
|
||||||
<td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
|
||||||
{item?.symbol}
|
|
||||||
</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>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</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">
|
|
||||||
<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
|
|
||||||
</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>
|
|
||||||
</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 flex justify-between items-center p-3 mt-3">
|
|
||||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
|
||||||
Wallstreet 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.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</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 flex justify-between items-center p-3 mt-3">
|
|
||||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -1,5 +1,4 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { goto } from "$app/navigation";
|
|
||||||
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
|
||||||
import logo from "$lib/images/top_winner_logo.png";
|
import logo from "$lib/images/top_winner_logo.png";
|
||||||
import { abbreviateNumber } from "$lib/utils";
|
import { abbreviateNumber } from "$lib/utils";
|
||||||
@ -576,30 +575,32 @@
|
|||||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||||
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
|
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
|
||||||
<div
|
<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"
|
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"
|
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">
|
<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">
|
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||||
Pro Subscription
|
Pro Subscription 🔥
|
||||||
</h2>
|
</h2>
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||||
</div>
|
</div>
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
<span class="text-white p-3 ml-3 mr-3">
|
||||||
Upgrade now for unlimited access to all data and tools.
|
Upgrade now for unlimited access to all data and tools.
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div
|
<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"
|
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">
|
<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">
|
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||||
Top Analyst 📊
|
Top Analyst 📊
|
||||||
@ -609,14 +610,16 @@
|
|||||||
<span class="text-white p-3 ml-3 mr-3">
|
<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>
|
</span>
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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"
|
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">
|
<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">
|
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||||
Congress Trading 🇺🇸
|
Congress Trading 🇺🇸
|
||||||
@ -626,7 +629,7 @@
|
|||||||
<span class="text-white p-3 ml-3 mr-3">
|
<span class="text-white p-3 ml-3 mr-3">
|
||||||
Get the latest top Congress trading insights.
|
Get the latest top Congress trading insights.
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,40 +1,31 @@
|
|||||||
<script lang='ts'>
|
<script lang="ts">
|
||||||
import logo from '$lib/images/news_logo.png'
|
import logo from "$lib/images/news_logo.png";
|
||||||
import ScrollToTop from '$lib/components/ScrollToTop.svelte';
|
import ScrollToTop from "$lib/components/ScrollToTop.svelte";
|
||||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from "$app/navigation";
|
||||||
import { page } from '$app/stores';
|
import { page } from "$app/stores";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
|
|
||||||
function handleMode(i) {
|
|
||||||
activeIdx = i;
|
|
||||||
if(activeIdx === 0) {
|
|
||||||
goto("/market-news")
|
|
||||||
} else if (activeIdx === 1) {
|
|
||||||
goto("/market-news/general")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{
|
{
|
||||||
title: "Stock",
|
title: "Stock",
|
||||||
},
|
path: "/market-news",
|
||||||
{
|
},
|
||||||
title: "General",
|
{
|
||||||
},
|
title: "General",
|
||||||
];
|
path: "/market-news/general",
|
||||||
|
},
|
||||||
let activeIdx = 0;
|
];
|
||||||
|
|
||||||
|
let activeIdx = 0;
|
||||||
|
|
||||||
// Subscribe to the $page store to reactively update the activeIdx based on the URL
|
// 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;
|
activeIdx = 0;
|
||||||
} else if ($page.url.pathname.startsWith('/market-news/general')) {
|
} else if ($page.url.pathname.startsWith("/market-news/general")) {
|
||||||
activeIdx = 1;
|
activeIdx = 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- HEADER FOR BETTER SEO -->
|
<!-- HEADER FOR BETTER SEO -->
|
||||||
@ -43,179 +34,188 @@ let activeIdx = 0;
|
|||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
</svelte:head>
|
</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">
|
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||||
<li class="text-gray-300">Market News</li>
|
<li class="text-gray-300">Market News</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-full overflow-hidden m-auto mt-5">
|
<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="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
|
<div
|
||||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||||
|
>
|
||||||
|
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||||
<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">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
|
||||||
|
<!-- Start Column -->
|
||||||
<!-- Start Column -->
|
<div>
|
||||||
<div>
|
<div class="flex flex-row justify-center items-center">
|
||||||
<div class="flex flex-row justify-center items-center">
|
<h1
|
||||||
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
|
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
|
||||||
Market News
|
>
|
||||||
</h1>
|
Market News
|
||||||
</div>
|
</h1>
|
||||||
|
|
||||||
<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">
|
|
||||||
<defs>
|
|
||||||
<filter id="glow">
|
|
||||||
<feGaussianBlur stdDeviation="5" result="glow"/>
|
|
||||||
<feMerge>
|
|
||||||
<feMergeNode in="glow"/>
|
|
||||||
<feMergeNode in="SourceGraphic"/>
|
|
||||||
</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)" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="z-1 absolute top-1 right-10">
|
|
||||||
<img class="w-24 mr-1" src={logo} alt="logo" loading="lazy">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- End Column -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<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>
|
</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"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<filter id="glow">
|
||||||
|
<feGaussianBlur stdDeviation="5" result="glow" />
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="glow" />
|
||||||
|
<feMergeNode in="SourceGraphic" />
|
||||||
|
</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)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
<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="z-1 absolute top-1 right-10">
|
||||||
{#each tabs as item, i}
|
<img class="w-24 mr-1" src={logo} alt="logo" loading="lazy" />
|
||||||
<button
|
|
||||||
on:click={() => handleMode(i)}
|
|
||||||
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>
|
|
||||||
{/if}
|
|
||||||
<span class="relative text-[1rem] sm:text-lg block font-semibold duration-200 text-white">
|
|
||||||
{item.title}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
{/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">
|
|
||||||
<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 🔥
|
|
||||||
</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>
|
|
||||||
</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 flex justify-between items-center p-3 mt-3">
|
|
||||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
|
||||||
Earnings Calendar 🌟
|
|
||||||
</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 Earnings of companies
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Column -->
|
||||||
</div>
|
</div>
|
||||||
|
</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
|
||||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
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="w-full flex justify-between items-center p-3 mt-3">
|
>
|
||||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
{#each tabs as item, i}
|
||||||
Dividend Calendar 💸
|
<a
|
||||||
</h2>
|
href={item?.path}
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx ===
|
||||||
</div>
|
i
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
? 'z-0'
|
||||||
Stay updated on upcoming Dividends in the stock market.
|
: ''} "
|
||||||
</span>
|
>
|
||||||
</div>
|
{#if activeIdx === i}
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
</span>
|
||||||
|
</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
|
||||||
|
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 🔥
|
||||||
|
</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>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<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 🌟
|
||||||
|
</h2>
|
||||||
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||||
</div>
|
</div>
|
||||||
|
<span class="text-white p-3 ml-3 mr-3">
|
||||||
|
Get the latest Earnings of companies
|
||||||
|
</span>
|
||||||
|
</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
|
||||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
|
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-full flex justify-between items-center p-3 mt-3">
|
>
|
||||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
<a
|
||||||
Economic Events 🌍
|
href={"/dividends-calendar"}
|
||||||
</h2>
|
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
|
>
|
||||||
</div>
|
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||||
Stay updated on upcoming Economic Events worldwide.
|
Dividend Calendar 💸
|
||||||
</span>
|
</h2>
|
||||||
</div>
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||||
</div>
|
</div>
|
||||||
|
<span class="text-white p-3 ml-3 mr-3">
|
||||||
|
Stay updated on upcoming Dividends in the stock market.
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
</aside>
|
<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 🌍
|
||||||
|
</h2>
|
||||||
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||||
|
</div>
|
||||||
|
<span class="text-white p-3 ml-3 mr-3">
|
||||||
|
Stay updated on upcoming Economic Events worldwide.
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -665,7 +665,7 @@
|
|||||||
>
|
>
|
||||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
<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">
|
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||||
Pro Subscription
|
Pro Subscription 🔥
|
||||||
</h2>
|
</h2>
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||||
</div>
|
</div>
|
||||||
@ -685,12 +685,12 @@
|
|||||||
>
|
>
|
||||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
<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">
|
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||||
Wallstreet Analyst
|
Top Analyst 📊
|
||||||
</h2>
|
</h2>
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||||
</div>
|
</div>
|
||||||
<span class="text-white p-3 ml-3 mr-3">
|
<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>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -704,7 +704,7 @@
|
|||||||
>
|
>
|
||||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
<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">
|
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||||
Congress Trading
|
Congress Trading 🇺🇸
|
||||||
</h2>
|
</h2>
|
||||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||||
</div>
|
</div>
|
||||||
@ -718,612 +718,3 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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 = [
|
const tabs = [
|
||||||
{
|
{
|
||||||
title: "Stocks",
|
title: "Stocks",
|
||||||
|
path: "/watchlist/stocks",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Options",
|
title: "Options",
|
||||||
|
path: "/watchlist/options",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -124,8 +126,7 @@
|
|||||||
>
|
>
|
||||||
{#each tabs as item, i}
|
{#each tabs as item, i}
|
||||||
<a
|
<a
|
||||||
href={i === 0 ? "/watchlist/stocks" : "/watchlist/options"}
|
href={item?.path}
|
||||||
on:click={() => handleMode(i)}
|
|
||||||
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx ===
|
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx ===
|
||||||
i
|
i
|
||||||
? 'z-0'
|
? 'z-0'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user