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

refactor code

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-24 23:07:05 +02:00
parent 37cbd599ff
commit 3f1ac5ef40
13 changed files with 4129 additions and 3114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/routes/analysts/+page.svelte
View File

@ -1,12 +1,10 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { numberOfUnreadNotification } from "$lib/store";
import { numberOfUnreadNotification } from '$lib/store'; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import { sortTableData } from '$lib/utils'; import ArrowLogo from "lucide-svelte/icons/move-up-right";
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte'; import TableHeader from "$lib/components/Table/TableHeader.svelte";
import ArrowLogo from 'lucide-svelte/icons/move-up-right';
import TableHeader from '$lib/components/Table/TableHeader.svelte';
import { onMount } from 'svelte'; import { onMount } from "svelte";
export let data; export let data;
@ -28,28 +26,28 @@
onMount(async () => { onMount(async () => {
isLoaded = true; isLoaded = true;
window.addEventListener('scroll', handleScroll); window.addEventListener("scroll", handleScroll);
return () => { return () => {
window.removeEventListener('scroll', handleScroll); window.removeEventListener("scroll", handleScroll);
}; };
}); });
let columns = [ let columns = [
{ key: 'rank', label: 'Rank', align: 'left' }, { key: "rank", label: "Rank", align: "left" },
{ key: 'analystName', label: 'Analyst', align: 'left' }, { key: "analystName", label: "Analyst", align: "left" },
{ key: 'successRate', label: 'Success Rate', align: 'right' }, { key: "successRate", label: "Success Rate", align: "right" },
{ key: 'avgReturn', label: 'Avg. Return', align: 'right' }, { key: "avgReturn", label: "Avg. Return", align: "right" },
{ key: 'totalRatings', label: 'Total Ratings', align: 'right' }, { key: "totalRatings", label: "Total Ratings", align: "right" },
{ key: 'lastRating', label: 'Last Rating', align: 'right' }, { key: "lastRating", label: "Last Rating", align: "right" },
]; ];
let sortOrders = { let sortOrders = {
rank: { order: 'none', type: 'number' }, rank: { order: "none", type: "number" },
analystName: { order: 'none', type: 'string' }, analystName: { order: "none", type: "string" },
successRate: { order: 'none', type: 'number' }, successRate: { order: "none", type: "number" },
avgReturn: { order: 'none', type: 'number' }, avgReturn: { order: "none", type: "number" },
totalRatings: { order: 'none', type: 'number' }, totalRatings: { order: "none", type: "number" },
lastRating: { order: 'none', type: 'date' }, lastRating: { order: "none", type: "date" },
}; };
const sortData = (key) => { const sortData = (key) => {
@ -57,12 +55,12 @@
let finalList = []; let finalList = [];
for (const k in sortOrders) { for (const k in sortOrders) {
if (k !== key) { if (k !== key) {
sortOrders[k].order = 'none'; sortOrders[k].order = "none";
} }
} }
// Cycle through 'none', 'asc', 'desc' for the clicked key // Cycle through 'none', 'asc', 'desc' for the clicked key
const orderCycle = ['none', 'asc', 'desc']; const orderCycle = ["none", "asc", "desc"];
const originalData = rawData?.slice(0, 40); const originalData = rawData?.slice(0, 40);
const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order); const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
sortOrders[key].order = sortOrders[key].order =
@ -70,7 +68,7 @@
const sortOrder = sortOrders[key].order; const sortOrder = sortOrders[key].order;
// Reset to original data when 'none' and stop further sorting // Reset to original data when 'none' and stop further sorting
if (sortOrder === 'none') { if (sortOrder === "none") {
analytRatingList = [...originalData]; // Reset to original data (spread to avoid mutation) analytRatingList = [...originalData]; // Reset to original data (spread to avoid mutation)
return; return;
} }
@ -81,24 +79,24 @@
let valueA, valueB; let valueA, valueB;
switch (type) { switch (type) {
case 'date': case "date":
valueA = new Date(a[key]); valueA = new Date(a[key]);
valueB = new Date(b[key]); valueB = new Date(b[key]);
break; break;
case 'string': case "string":
valueA = a[key].toUpperCase(); valueA = a[key].toUpperCase();
valueB = b[key].toUpperCase(); valueB = b[key].toUpperCase();
return sortOrder === 'asc' return sortOrder === "asc"
? valueA.localeCompare(valueB) ? valueA.localeCompare(valueB)
: valueB.localeCompare(valueA); : valueB.localeCompare(valueA);
case 'number': case "number":
default: default:
valueA = parseFloat(a[key]); valueA = parseFloat(a[key]);
valueB = parseFloat(b[key]); valueB = parseFloat(b[key]);
break; break;
} }
if (sortOrder === 'asc') { if (sortOrder === "asc") {
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0; return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
} else { } else {
return valueA > valueB ? -1 : valueA < valueB ? 1 : 0; return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
@ -114,7 +112,7 @@
<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 {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Top
Wall Street Stock Analysts · stocknear Wall Street Stock Analysts · stocknear
</title> </title>
<meta <meta
@ -214,7 +212,7 @@
<div class="z-1 absolute top-4"> <div class="z-1 absolute top-4">
<img <img
class="w-36 ml-2" class="w-36 ml-2"
src={cloudFrontUrl + '/assets/analyst_logo.png'} src={cloudFrontUrl + "/assets/analyst_logo.png"}
alt="logo" alt="logo"
loading="lazy" loading="lazy"
/> />
@ -255,7 +253,7 @@
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<a <a
href={'/analysts/' + item?.analystId} href={"/analysts/" + item?.analystId}
class="sm:hover:text-white text-blue-400 font-medium" class="sm:hover:text-white text-blue-400 font-medium"
>{item?.analystName} >{item?.analystName}
</a> </a>
@ -339,15 +337,15 @@
> >
{item?.lastRating !== null {item?.lastRating !== null
? new Date(item?.lastRating)?.toLocaleString( ? new Date(item?.lastRating)?.toLocaleString(
'en-US', "en-US",
{ {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric', year: "numeric",
daySuffix: '2-digit', daySuffix: "2-digit",
}, },
) )
: 'n/a'} : "n/a"}
</td> </td>
</tr> </tr>
{/each} {/each}
@ -375,12 +373,12 @@
</div> </div>
</main> </main>
<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">
@ -392,15 +390,17 @@
<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/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" 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/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"> <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 Stocks Picks ⭐ Top Stocks Picks ⭐
@ -410,14 +410,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('/most-shorted-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" 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={"/most-shorted-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"> <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 Shorted Stocks 🍋 Top Shorted Stocks 🍋
@ -427,7 +429,7 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Never miss out another short squeeze Never miss out another short squeeze
</span> </span>
</div> </a>
</div> </div>
</aside> </aside>
</div> </div>

346
src/routes/analysts/top-stocks/+page.svelte
View File

@ -1,22 +1,19 @@
<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 UpgradeToPro from '$lib/components/UpgradeToPro.svelte'; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import { onMount } from 'svelte'; import { onMount } from "svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
import TableHeader from '$lib/components/Table/TableHeader.svelte'; import TableHeader from "$lib/components/Table/TableHeader.svelte";
export let data; export let data;
let isLoaded = false; let isLoaded = false;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let rawData = data?.getTopAnalystStocks; let rawData = data?.getTopAnalystStocks;
let analytRatingList = rawData?.slice(0,50) ?? []; let analytRatingList = rawData?.slice(0, 50) ?? [];
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
@ -28,36 +25,34 @@
} }
} }
onMount(async () => { onMount(async () => {
isLoaded = true;
isLoaded = true; window.addEventListener("scroll", handleScroll);
window.addEventListener('scroll', handleScroll);
return () => { return () => {
window.removeEventListener('scroll', handleScroll); window.removeEventListener("scroll", handleScroll);
}; };
}) });
let columns = [ let columns = [
{ key: 'rank', label: 'Rank', align: 'left' }, { key: "rank", label: "Rank", align: "left" },
{ key: 'ticker', label: 'Symbol', align: 'left' }, { key: "ticker", label: "Symbol", align: "left" },
{ key: 'name', label: 'Name', align: 'left' }, { key: "name", label: "Name", align: "left" },
{ key: 'counter', label: 'Ratings Count', align: 'right' }, { key: "counter", label: "Ratings Count", align: "right" },
{ key: 'priceTarget', label: 'Price Target', align: 'right' }, { key: "priceTarget", label: "Price Target", align: "right" },
{ key: 'price', label: 'Current Price', align: 'right' }, { key: "price", label: "Current Price", align: "right" },
{ key: 'marketCap', label: 'Market Cap', align: 'right' }, { key: "marketCap", label: "Market Cap", align: "right" },
{ key: 'upside', label: 'Upside', align: 'right' }, { key: "upside", label: "Upside", align: "right" },
]; ];
let sortOrders = { let sortOrders = {
rank: { order: 'none', type: 'number' }, rank: { order: "none", type: "number" },
ticker: { order: 'none', type: 'string' }, ticker: { order: "none", type: "string" },
name: { order: 'none', type: 'string' }, name: { order: "none", type: "string" },
counter: { order: 'none', type: 'number' }, counter: { order: "none", type: "number" },
priceTarget: { order: 'none', type: 'number' }, priceTarget: { order: "none", type: "number" },
price: { order: 'none', type: 'number' }, price: { order: "none", type: "number" },
marketCap: { order: 'none', type: 'number' }, marketCap: { order: "none", type: "number" },
upside: { order: 'none', type: 'number' }, upside: { order: "none", type: "number" },
}; };
const sortData = (key) => { const sortData = (key) => {
@ -65,12 +60,12 @@ window.addEventListener('scroll', handleScroll);
let finalList = []; let finalList = [];
for (const k in sortOrders) { for (const k in sortOrders) {
if (k !== key) { if (k !== key) {
sortOrders[k].order = 'none'; sortOrders[k].order = "none";
} }
} }
// Cycle through 'none', 'asc', 'desc' for the clicked key // Cycle through 'none', 'asc', 'desc' for the clicked key
const orderCycle = ['none', 'asc', 'desc']; const orderCycle = ["none", "asc", "desc"];
const originalData = rawData?.slice(0, 40); const originalData = rawData?.slice(0, 40);
const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order); const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
sortOrders[key].order = sortOrders[key].order =
@ -78,7 +73,7 @@ window.addEventListener('scroll', handleScroll);
const sortOrder = sortOrders[key].order; const sortOrder = sortOrders[key].order;
// Reset to original data when 'none' and stop further sorting // Reset to original data when 'none' and stop further sorting
if (sortOrder === 'none') { if (sortOrder === "none") {
analytRatingList = [...originalData]; // Reset to original data (spread to avoid mutation) analytRatingList = [...originalData]; // Reset to original data (spread to avoid mutation)
return; return;
} }
@ -89,24 +84,24 @@ window.addEventListener('scroll', handleScroll);
let valueA, valueB; let valueA, valueB;
switch (type) { switch (type) {
case 'date': case "date":
valueA = new Date(a[key]); valueA = new Date(a[key]);
valueB = new Date(b[key]); valueB = new Date(b[key]);
break; break;
case 'string': case "string":
valueA = a[key].toUpperCase(); valueA = a[key].toUpperCase();
valueB = b[key].toUpperCase(); valueB = b[key].toUpperCase();
return sortOrder === 'asc' return sortOrder === "asc"
? valueA.localeCompare(valueB) ? valueA.localeCompare(valueB)
: valueB.localeCompare(valueA); : valueB.localeCompare(valueA);
case 'number': case "number":
default: default:
valueA = parseFloat(a[key]); valueA = parseFloat(a[key]);
valueB = parseFloat(b[key]); valueB = parseFloat(b[key]);
break; break;
} }
if (sortOrder === 'asc') { if (sortOrder === "asc") {
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0; return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
} else { } else {
return valueA > valueB ? -1 : valueA < valueB ? 1 : 0; return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
@ -118,38 +113,45 @@ window.addEventListener('scroll', handleScroll);
}; };
$: charNumber = $screenWidth < 640 ? 30 : 20; $: charNumber = $screenWidth < 640 ? 30 : 20;
</script>
<svelte:head>
</script>
<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 100 Strong Buy Stocks · stocknear {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Top
100 Strong Buy Stocks · stocknear
</title> </title>
<meta name="description" content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`} /> <meta
name="description"
content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`}
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`Top 100 Strong Buy Stocks · stocknear`}/> <meta property="og:title" content={`Top 100 Strong Buy Stocks · stocknear`} />
<meta property="og:description" content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`} /> <meta
<meta property="og:type" content="website"/> property="og:description"
content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`}
/>
<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={`Top 100 Strong Buy Stocks · stocknear`}/> <meta
<meta name="twitter:description" content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`} /> name="twitter:title"
content={`Top 100 Strong Buy Stocks · stocknear`}
/>
<meta
name="twitter:description"
content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`}
/>
<!-- 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-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>
@ -158,193 +160,259 @@ window.addEventListener('scroll', handleScroll);
</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
<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 --> <!-- Start Column -->
<div> <div>
<div class="flex flex-row 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"> <h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
Top Stocks Top Stocks
</h1> </h1>
</div> </div>
<span class="text-white text-md font-medium text-center flex justify-center items-center "> <span
class="text-white text-md font-medium text-center flex justify-center items-center"
>
Uncover 'Strong Buy' stocks from 5-star Wall Street analysts Uncover 'Strong Buy' stocks from 5-star Wall Street analysts
</span> </span>
</div> </div>
<!-- End Column --> <!-- End Column -->
<!-- Start Column --> <!-- Start 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"> 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> <defs>
<filter id="glow"> <filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow"/> <feGaussianBlur stdDeviation="5" result="glow" />
<feMerge> <feMerge>
<feMergeNode in="glow"/> <feMergeNode in="glow" />
<feMergeNode in="SourceGraphic"/> <feMergeNode in="SourceGraphic" />
</feMerge> </feMerge>
</filter> </filter>
</defs> </defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" /> <path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg> </svg>
<div class="z-1 absolute top-0"> <div class="z-1 absolute top-0">
<img class="w-28 ml-6" src={cloudFrontUrl+'/assets/wsb_diamond_hands_logo.png'} alt="logo" loading="lazy"> <img
class="w-28 ml-6"
src={cloudFrontUrl + "/assets/wsb_diamond_hands_logo.png"}
alt="logo"
loading="lazy"
/>
</div> </div>
</div> </div>
<!-- End Column --> <!-- End Column -->
</div> </div>
</div> </div>
<div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] border border-gray-800 sm:rounded-lg h-auto p-5 "> <div
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" 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> class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] border border-gray-800 sm:rounded-lg h-auto p-5"
Strong Buy stocks by top-rated analysts with a star rating of 4 or above, known for their exceptional accuracy and returns. Stocks are ranked based on the volume of analyst ratings. >
<svg
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
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
>
Strong Buy stocks by top-rated analysts with a star rating of 4 or above,
known for their exceptional accuracy and returns. Stocks are ranked based
on the volume of analyst ratings.
</div> </div>
<div class="w-screen sm:w-full m-auto mt-10"> <div class="w-screen sm:w-full m-auto mt-10">
{#if isLoaded} {#if isLoaded}
<div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden"> <div
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"> class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden"
>
<table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
>
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
</thead> </thead>
<tbody> <tbody>
{#each analytRatingList as item, index} {#each analytRatingList as item, index}
<tr
<tr class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === rawData?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}"> class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white text-center"> 1 ===
rawData?.length && data?.user?.tier !== 'Pro'
? 'opacity-[0.1]'
: ''}"
>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white text-center"
>
{item?.rank} {item?.rank}
</td> </td>
<td class="text-sm sm:text-[1rem] whitespace-nowrap text-start"> <td
<a href={"/stocks/"+item?.ticker} class="sm:hover:text-white text-blue-400"> class="text-sm sm:text-[1rem] whitespace-nowrap text-start"
>
<a
href={"/stocks/" + item?.ticker}
class="sm:hover:text-white text-blue-400"
>
{item?.ticker} {item?.ticker}
</a> </a>
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start"> <td
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name} class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start"
>
{item?.name?.length > charNumber
? item?.name?.slice(0, charNumber) + "..."
: item?.name}
</td> </td>
<td
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"> class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{item?.counter} {item?.counter}
</td> </td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"> <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{item?.priceTarget?.toFixed(2)} {item?.priceTarget?.toFixed(2)}
</td> </td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"> <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{item?.price?.toFixed(2)} {item?.price?.toFixed(2)}
</td> </td>
<td class="text-end font-medium text-white text-sm sm:text-[1rem] whitespace-nowrap"> <td
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap) : '-'} class="text-end font-medium text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.marketCap !== null
? abbreviateNumber(item?.marketCap)
: "-"}
</td> </td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"> <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{#if Number(item?.upside) >= 0} {#if Number(item?.upside) >= 0}
<span class="text-[#37C97D]">+{Number(item?.upside)?.toFixed(2)}%</span> <span class="text-[#37C97D]"
>+{Number(item?.upside)?.toFixed(2)}%</span
>
{:else} {:else}
<span class="text-[#B84242]">{Number(item?.upside)?.toFixed(2)}%</span> <span class="text-[#B84242]"
>{Number(item?.upside)?.toFixed(2)}%</span
>
{/if} {/if}
</td> </td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
<UpgradeToPro data={data} title="Get stock forecasts from Wall Street's highest rated professionals"/> <UpgradeToPro
{data}
title="Get stock forecasts from Wall Street's highest rated professionals"
/>
{:else} {:else}
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> <label
<span class="loading loading-spinner loading-md text-gray-400"></span> class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span
class="loading loading-spinner loading-md text-gray-400"
></span>
</label> </label>
</div> </div>
</div> </div>
{/if} {/if}
</div> </div>
</main> </main>
<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 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> >
<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"> <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 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
<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"
>
<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 📊
</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>
</div> </a>
</div> </div>
<div on:click={() => goto('/most-shorted-stocks')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"> <div
<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"
>
<a
href={"/most-shorted-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"> <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 Shorted Stocks 🍋 Top Shorted Stocks 🍋
</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">
Never miss out another short squeeze Never miss out another short squeeze
</span> </span>
</a>
</div> </div>
</div>
</aside> </aside>
</div> </div>
</div> </div>
</div> </div>
</section>
</section>

349
src/routes/corporate-lobbying-tracker/+page.svelte
View File

@ -1,36 +1,30 @@
<script lang='ts'> <script lang="ts">
import { goto } from '$app/navigation'; import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import { numberOfUnreadNotification, screenWidth } from '$lib/store'; import InfiniteLoading from "$lib/components/InfiniteLoading.svelte";
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import { onMount } from "svelte";
import { onMount } from 'svelte'; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
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 cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let isLoaded = false; let isLoaded = false;
let rawData = [] let rawData = [];
let displayList = []; let displayList = [];
let order = 'highToLow'; let order = "highToLow";
const sortByAmount = (tickerList) => { const sortByAmount = (tickerList) => {
return tickerList?.sort(function(a, b) { return tickerList?.sort(function (a, b) {
if(order === 'highToLow') if (order === "highToLow") {
{
return b?.amount - a?.amount; return b?.amount - a?.amount;
} } else {
else {
return a?.amount - b?.amount; return a?.amount - b?.amount;
} }
}); });
} };
async function infiniteHandler({ detail: { loaded, complete } }) async function infiniteHandler({ detail: { loaded, complete } }) {
{
if (displayList?.length === rawData?.length) { if (displayList?.length === rawData?.length) {
complete(); complete();
} else { } else {
@ -45,68 +39,74 @@
const date = new Date(dateString); const date = new Date(dateString);
const year = date.getFullYear(); const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-based const month = (date.getMonth() + 1).toString().padStart(2, "0"); // Months are zero-based
const day = date.getDate().toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, "0");
const hours = date.getHours() % 12 || 12; // Convert to 12-hour format const hours = date.getHours() % 12 || 12; // Convert to 12-hour format
const minutes = date.getMinutes().toString().padStart(2, '0'); const minutes = date.getMinutes().toString().padStart(2, "0");
const ampm = date.getHours() >= 12 ? 'PM' : 'AM'; const ampm = date.getHours() >= 12 ? "PM" : "AM";
return `${year}/${month}/${day} ${hours}:${minutes} ${ampm}`; return `${year}/${month}/${day} ${hours}:${minutes} ${ampm}`;
} }
onMount(() => { onMount(() => {
rawData = data?.getCorporateLobbyingTracker ?? []; rawData = data?.getCorporateLobbyingTracker ?? [];
displayList = rawData?.slice(0,50) ?? [] displayList = rawData?.slice(0, 50) ?? [];
isLoaded = true; isLoaded = true;
}) });
function changeOrder(state: string) {
if (state === "highToLow") {
function changeOrder(state:string) { order = "lowToHigh";
if (state === 'highToLow') } else {
{ order = "highToLow";
order = 'lowToHigh';
}
else {
order = 'highToLow';
} }
displayList = sortByAmount(rawData)?.slice(0,50); displayList = sortByAmount(rawData)?.slice(0, 50);
}
} $: charNumber = $screenWidth < 640 ? 15 : 20;
</script>
<svelte:head>
$: charNumber = $screenWidth < 640 ? 15 : 20;
</script>
<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})` : ''} Latest Lobbiyng Disclosure Tracker · stocknear {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Latest
Lobbiyng Disclosure Tracker · stocknear
</title> </title>
<meta name="description" content={`Track the latest senate lobbying spending of US companies.`} /> <meta
name="description"
content={`Track the latest senate lobbying spending of US companies.`}
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`Latest Lobbiyng Disclosure Tracker · stocknear`}/> <meta
<meta property="og:description" content={`Track the latest senate lobbying spending of US companies.`} /> property="og:title"
<meta property="og:type" content="website"/> content={`Latest Lobbiyng Disclosure Tracker · stocknear`}
/>
<meta
property="og:description"
content={`Track the latest senate lobbying spending of US companies.`}
/>
<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={`Latest Lobbiyng Disclosure Tracker · stocknear`}/> <meta
<meta name="twitter:description" content={`Track the latest senate lobbying spending of US companies.`} /> name="twitter:title"
content={`Latest Lobbiyng Disclosure Tracker · stocknear`}
/>
<meta
name="twitter:description"
content={`Track the latest senate lobbying spending of US companies.`}
/>
<!-- 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-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>
@ -115,114 +115,165 @@ $: charNumber = $screenWidth < 640 ? 15 : 20;
</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
<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 --> <!-- Start Column -->
<div> <div>
<div class="flex flex-row 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"> <h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
Lobbying Tracker Lobbying Tracker
</h1> </h1>
</div> </div>
<span class="text-white text-md font-medium text-center flex justify-center items-center "> <span
class="text-white text-md font-medium text-center flex justify-center items-center"
>
Track the latest lobbying spendings of US stock companies Track the latest lobbying spendings of US stock companies
</span> </span>
</div> </div>
<!-- End Column --> <!-- End Column -->
<!-- Start Column --> <!-- Start 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"> 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> <defs>
<filter id="glow"> <filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow"/> <feGaussianBlur stdDeviation="5" result="glow" />
<feMerge> <feMerge>
<feMergeNode in="glow"/> <feMergeNode in="glow" />
<feMergeNode in="SourceGraphic"/> <feMergeNode in="SourceGraphic" />
</feMerge> </feMerge>
</filter> </filter>
</defs> </defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" /> <path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg> </svg>
<div class="z-1 absolute top-4"> <div class="z-1 absolute top-4">
<img class="w-fit" src={cloudFrontUrl+'/assets/lobbying_logo.png'} alt="logo" loading="lazy"> <img
class="w-fit"
src={cloudFrontUrl + "/assets/lobbying_logo.png"}
alt="logo"
loading="lazy"
/>
</div> </div>
</div> </div>
<!-- End Column --> <!-- End Column -->
</div> </div>
</div> </div>
{#if isLoaded} {#if isLoaded}
<div
class="w-screen sm:w-full flex flex-row items-start mt-20 sm:mt-10"
>
<div class="w-screen sm:w-full flex flex-row items-start mt-20 sm:mt-10"> <div
class="w-screen sm:w-full rounded-none sm:rounded-lg mb-4 overflow-x-scroll lg:overflow-hidden"
>
<div class="w-screen sm:w-full rounded-none sm:rounded-lg mb-4 overflow-x-scroll lg:overflow-hidden"> <table
<table class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"> class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
>
<thead> <thead>
<tr class="bg-[#09090B] border-b border-[#27272A]"> <tr class="bg-[#09090B] border-b border-[#27272A]">
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"> <th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
>
Date Date
</th> </th>
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"> <th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
>
Symbol Symbol
</th> </th>
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"> <th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
>
Name Name
</th> </th>
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"> <th
class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"
>
Sector Sector
</th> </th>
<th on:click={() => { changeOrder(order); }} class="cursor-pointer text-end bg-[#09090B] text-white text-[1rem] font-semibold"> <th
on:click={() => {
changeOrder(order);
}}
class="cursor-pointer text-end bg-[#09090B] text-white text-[1rem] font-semibold"
>
Amount Amount
<svg class="w-5 h-5 inline-block {order === 'highToLow' ? '' : 'rotate-180'}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg> <svg
class="w-5 h-5 inline-block {order === 'highToLow'
? ''
: 'rotate-180'}"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
><path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path></svg
>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each displayList as item, index} {#each displayList as item, index}
<tr
<tr class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === displayList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}"> class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
1 ===
displayList?.length && data?.user?.tier !== 'Pro'
<td class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap"> ? 'opacity-[0.1]'
: ''}"
>
<td
class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap"
>
{formatDate(item?.date)} {formatDate(item?.date)}
</td> </td>
<td class="text-blue-400 text-sm sm:text-[1rem] text-start"> <td
<a href={"/stocks/"+item?.ticker} class="sm:hover:text-white text-blue-400"> class="text-blue-400 text-sm sm:text-[1rem] text-start"
>
<a
href={"/stocks/" + item?.ticker}
class="sm:hover:text-white text-blue-400"
>
{item?.ticker} {item?.ticker}
</a> </a>
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start"> <td
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name} class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start"
>
{item?.name?.length > charNumber
? item?.name?.slice(0, charNumber) + "..."
: item?.name}
</td> </td>
<td
class="text-end text-sm sm:text-[1rem] font-medium text-white whitespace-nowrap"
<td class="text-end text-sm sm:text-[1rem] font-medium text-white whitespace-nowrap"> >
{item?.sector} {item?.sector}
</td> </td>
@ -232,90 +283,92 @@ $: charNumber = $screenWidth < 640 ? 15 : 20;
maximumFractionDigits: 0, maximumFractionDigits: 0,
}).format(item?.amount)} }).format(item?.amount)}
</td> </td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
<InfiniteLoading on:infinite={infiniteHandler} /> <InfiniteLoading on:infinite={infiniteHandler} />
</div> </div>
<UpgradeToPro data={data} title="Get the latest lobbying spendings in realtime of US stock companies"/> <UpgradeToPro
{data}
title="Get the latest lobbying spendings in realtime of US stock companies"
/>
{:else} {:else}
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> <label
<span class="loading loading-spinner loading-md text-gray-400"></span> class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span class="loading loading-spinner loading-md text-gray-400"
></span>
</label> </label>
</div> </div>
</div> </div>
{/if} {/if}
</main> </main>
<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 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> >
<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"> <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 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
<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"
>
<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">
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>
</div> </a>
</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
<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"
>
<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 🇺🇸
</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 Congress trading insights. Get the latest top Congress trading insights.
</span> </span>
</a>
</div> </div>
</div>
</aside> </aside>
</div> </div>
</div> </div>
</div> </div>
</section>
</section>

25
src/routes/cramer-tracker/+page.svelte
View File

@ -1,9 +1,7 @@
<script lang="ts"> <script lang="ts">
import { goto } from "$app/navigation";
import { numberOfUnreadNotification, screenWidth } from "$lib/store"; import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import { onMount } from "svelte"; import { onMount } from "svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
import * as Card from "$lib/components/shadcn/card/index.ts";
export let data; export let data;
@ -12,7 +10,6 @@
let isLoaded = false; let isLoaded = false;
let rawData = data?.getCramerTracker ?? []; let rawData = data?.getCramerTracker ?? [];
let displayList = rawData?.slice(0, 50) ?? []; let displayList = rawData?.slice(0, 50) ?? [];
let cumulativeList = [];
let winRate; let winRate;
function sectorSelector(sector) { function sectorSelector(sector) {
@ -421,10 +418,10 @@
<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">
@ -436,15 +433,17 @@
<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("/reddit-tracker")}
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={"/reddit-tracker"}
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">
Reddit Tracker 🚀 Reddit Tracker 🚀
@ -454,14 +453,16 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest trends of r/Wallstreetbets Get the latest trends of r/Wallstreetbets
</span> </span>
</div> </a>
</div> </div>
<div <div
on:click={() => goto("/sentiment-tracker")}
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={"/sentiment-tracker"}
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">
Sentiment Tracker <svg Sentiment Tracker <svg
@ -491,7 +492,7 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Follow the daily trends of retail investors Follow the daily trends of retail investors
</span> </span>
</div> </a>
</div> </div>
</aside> </aside>
</div> </div>

25
src/routes/dividends-calendar/+page.svelte
View File

@ -9,7 +9,6 @@
} from "date-fns"; } from "date-fns";
import { screenWidth, numberOfUnreadNotification } from "$lib/store"; import { screenWidth, numberOfUnreadNotification } from "$lib/store";
import dividendsLogo from "$lib/images/dividends_calendar_logo.png"; import dividendsLogo from "$lib/images/dividends_calendar_logo.png";
import { goto } from "$app/navigation";
import { abbreviateNumber } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
@ -582,30 +581,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("/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" 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={"/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"> <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">
Earnings Calendar 🌟 Earnings Calendar 🌟
@ -615,14 +616,16 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Get the latest Earnings of companies Get the latest Earnings of companies
</span> </span>
</div> </a>
</div> </div>
<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" 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={"/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"> <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">
Economic Events 🌍 Economic Events 🌍
@ -632,7 +635,7 @@
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Stay updated on upcoming Economic Events worldwide. Stay updated on upcoming Economic Events worldwide.
</span> </span>
</div> </a>
</div> </div>
</aside> </aside>
</div> </div>

662
src/routes/earnings-calendar/+page.svelte
View File

@ -1,16 +1,19 @@
<script lang="ts"> <script lang="ts">
import {
import { format, startOfWeek, addDays, addWeeks, subWeeks, differenceInWeeks } from 'date-fns' format,
import { screenWidth, numberOfUnreadNotification } from '$lib/store'; startOfWeek,
import { goto } from '$app/navigation'; addDays,
import { abbreviateNumber } from '$lib/utils'; addWeeks,
subWeeks,
differenceInWeeks,
} from "date-fns";
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
import { abbreviateNumber } 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 cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let currentWeek = startOfWeek(new Date(), { weekStartsOn: 1 }); let currentWeek = startOfWeek(new Date(), { weekStartsOn: 1 });
let earningsCalendar = data?.getEarningsCalendar; let earningsCalendar = data?.getEarningsCalendar;
const maxWeeksChange = 4; // Maximum allowed week change const maxWeeksChange = 4; // Maximum allowed week change
@ -19,16 +22,21 @@
const today = new Date(); const today = new Date();
let formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 }); let formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 });
let formattedTuesday = format( addDays(formattedMonday, 1), "EEE, MMM d"); let formattedTuesday = format(addDays(formattedMonday, 1), "EEE, MMM d");
let formattedWednesday = format( addDays(formattedMonday, 2), "EEE, MMM d"); let formattedWednesday = format(addDays(formattedMonday, 2), "EEE, MMM d");
let formattedThursday = format( addDays(formattedMonday, 3), "EEE, MMM d"); let formattedThursday = format(addDays(formattedMonday, 3), "EEE, MMM d");
let formattedFriday = format( addDays(formattedMonday, 4), "EEE, MMM d"); let formattedFriday = format(addDays(formattedMonday, 4), "EEE, MMM d");
formattedMonday = format( formattedMonday, "EEE, MMM d"); formattedMonday = format(formattedMonday, "EEE, MMM d");
let formattedWeekday = [formattedMonday, formattedTuesday,formattedWednesday, formattedThursday, formattedFriday]; let formattedWeekday = [
formattedMonday,
formattedTuesday,
formattedWednesday,
formattedThursday,
formattedFriday,
];
let weekday = []; let weekday = [];
let startDate = startOfWeek(currentWeek, { weekStartsOn: 1 }); let startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
let endDate = addDays(startDate, 4); let endDate = addDays(startDate, 4);
let formattedStartDate = format(startDate, "yyyy-MM-dd"); let formattedStartDate = format(startDate, "yyyy-MM-dd");
@ -56,62 +64,66 @@
}, },
]; ];
let currentDate = new Date(); let currentDate = new Date();
let currentWeekday = Math.min((currentDate.getDay() + 6) % 7, 4); let currentWeekday = Math.min((currentDate.getDay() + 6) % 7, 4);
let selectedWeekday = currentWeekday; let selectedWeekday = currentWeekday;
function toggleDate(index) {
function toggleDate(index) if ($screenWidth > 640) {
{ selectedWeekday = index;
if($screenWidth > 640) {
selectedWeekday = index
} }
} }
function clickWeekday (state, index) { function clickWeekday(state, index) {
if (state === "next" && selectedWeekday + 1 <= 4) {
if (state==='next' && selectedWeekday+1 <=4) selectedWeekday = selectedWeekday + 1;
{ } else if (state === "previous" && selectedWeekday - 1 >= 0) {
selectedWeekday = selectedWeekday +1; selectedWeekday--;
} } else if (
else if( state === 'previous' && selectedWeekday-1 >=0) state === "previous" &&
{ index === 0 &&
selectedWeekday --; differenceInWeeks(currentWeek, today) > -maxWeeksChange
} ) {
changeWeek(state);
else if (state=== 'previous' && index === 0 && differenceInWeeks(currentWeek, today) > -maxWeeksChange)
{
changeWeek(state)
selectedWeekday = 4; selectedWeekday = 4;
} } else if (
else if (state=== 'next' && index === 4 && differenceInWeeks(currentWeek, today) < maxWeeksChange) state === "next" &&
{ index === 4 &&
changeWeek(state) differenceInWeeks(currentWeek, today) < maxWeeksChange
) {
changeWeek(state);
selectedWeekday = 0; selectedWeekday = 0;
} }
} }
async function changeWeek(state) { async function changeWeek(state) {
//Limit the user to go back max 4 weeks and look forward 4 weeks //Limit the user to go back max 4 weeks and look forward 4 weeks
if (state === 'previous' && differenceInWeeks(currentWeek, today) > -maxWeeksChange) { if (
state === "previous" &&
differenceInWeeks(currentWeek, today) > -maxWeeksChange
) {
currentWeek = subWeeks(currentWeek, 1); currentWeek = subWeeks(currentWeek, 1);
} else if (state === 'next' && differenceInWeeks(currentWeek, today) < maxWeeksChange) { } else if (
state === "next" &&
differenceInWeeks(currentWeek, today) < maxWeeksChange
) {
currentWeek = addWeeks(currentWeek, 1); currentWeek = addWeeks(currentWeek, 1);
} }
formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 }); formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 });
formattedTuesday = format( addDays(formattedMonday, 1), "EEE, MMM d"); formattedTuesday = format(addDays(formattedMonday, 1), "EEE, MMM d");
formattedWednesday = format( addDays(formattedMonday, 2), "EEE, MMM d"); formattedWednesday = format(addDays(formattedMonday, 2), "EEE, MMM d");
formattedThursday = format( addDays(formattedMonday, 3), "EEE, MMM d"); formattedThursday = format(addDays(formattedMonday, 3), "EEE, MMM d");
formattedFriday = format( addDays(formattedMonday, 4), "EEE, MMM d"); formattedFriday = format(addDays(formattedMonday, 4), "EEE, MMM d");
formattedMonday = format( formattedMonday, "EEE, MMM d"); formattedMonday = format(formattedMonday, "EEE, MMM d");
formattedWeekday = [formattedMonday, formattedTuesday,formattedWednesday, formattedThursday, formattedFriday]; formattedWeekday = [
formattedMonday,
formattedTuesday,
formattedWednesday,
formattedThursday,
formattedFriday,
];
weekday = []; weekday = [];
startDate = startOfWeek(currentWeek, { weekStartsOn: 1 }); startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
@ -141,43 +153,11 @@ async function changeWeek(state) {
}, },
]; ];
earningsCalendar = daysOfWeek?.map((day) => { earningsCalendar = daysOfWeek?.map((day) => {
return { return {
name: day.name, name: day.name,
data: data?.getEarningsCalendar?.filter( data: data?.getEarningsCalendar?.filter(
(item) => item?.date === day?.date (item) => item?.date === day?.date,
),
};
});
if (earningsCalendar?.length) {
// Loop through each day of the week
for (let i = 0; i < earningsCalendar.length; i++) {
const dayData = earningsCalendar[i].data;
// Filter out entries with company name "---"
// Sort and map the filtered data
weekday[i] = dayData
.sort((a, b) => b.marketCap - a.marketCap)
}
}
}
$: {
if( earningsCalendar)
{
earningsCalendar = daysOfWeek?.map((day) => {
return {
name: day.name,
data: data?.getEarningsCalendar?.filter(
(item) => item?.date === day?.date
), ),
}; };
}); });
@ -190,71 +170,91 @@ $: {
// Filter out entries with company name "---" // Filter out entries with company name "---"
// Sort and map the filtered data // Sort and map the filtered data
weekday[i] = dayData weekday[i] = dayData.sort((a, b) => b.marketCap - a.marketCap);
.sort((a, b) => b.marketCap - a.marketCap) }
}
} }
$: {
if (earningsCalendar) {
earningsCalendar = daysOfWeek?.map((day) => {
return {
name: day.name,
data: data?.getEarningsCalendar?.filter(
(item) => item?.date === day?.date,
),
};
});
if (earningsCalendar?.length) {
// Loop through each day of the week
for (let i = 0; i < earningsCalendar.length; i++) {
const dayData = earningsCalendar[i].data;
// Filter out entries with company name "---"
// Sort and map the filtered data
weekday[i] = dayData.sort((a, b) => b.marketCap - a.marketCap);
}
}
}
} }
} $: {
} if (currentWeek) {
if (differenceInWeeks(currentWeek, today) > -maxWeeksChange) {
$: {
if (currentWeek)
{
if (differenceInWeeks(currentWeek, today) > -maxWeeksChange)
{
previousMax = false; previousMax = false;
} } else {
else {
previousMax = true; previousMax = true;
} }
} }
}
$: {
if (currentWeek)
{
if (differenceInWeeks(currentWeek, today) < maxWeeksChange)
{
nextMax = false;
} }
else {
$: {
if (currentWeek) {
if (differenceInWeeks(currentWeek, today) < maxWeeksChange) {
nextMax = false;
} else {
nextMax = true; nextMax = true;
} }
} }
} }
</script> </script>
<svelte:head> <svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Earnings
Calendar · stocknear
</title>
<meta
name="description"
content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`}
/>
<meta charset="utf-8" /> <!-- Other meta tags -->
<meta name="viewport" content="width=device-width" /> <meta property="og:title" content={`Earnings Calendar · stocknear`} />
<title> <meta
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Earnings Calendar · stocknear property="og:description"
</title> content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`}
<meta name="description" content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`} /> />
<meta property="og:type" content="website" />
<!-- Other meta tags --> <!-- Add more Open Graph meta tags as needed -->
<meta property="og:title" content={`Earnings Calendar · stocknear`}/>
<meta property="og:description" content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`} />
<meta property="og:type" content="website"/>
<!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`Earnings Calendar · stocknear`}/>
<meta name="twitter:description" content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`} />
<!-- Add more Twitter meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={`Earnings Calendar · stocknear`} />
<meta
name="twitter:description"
content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
<section
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"> class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"
>
<div class="text-sm sm:text-[1rem] breadcrumbs"> <div class="text-sm sm:text-[1rem] breadcrumbs">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
@ -263,263 +263,429 @@ $: {
</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
<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 --> <!-- Start Column -->
<div> <div>
<div class="flex flex-row 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"> <h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
Earnings Calendar Earnings Calendar
</h1> </h1>
</div> </div>
<span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center "> <span
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
>
Stay updated on upcoming Earnings Calls in the stock market. Stay updated on upcoming Earnings Calls in the stock market.
</span> </span>
</div> </div>
<!-- End Column --> <!-- End Column -->
<!-- Start Column --> <!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"> <div
<svg class="w-36 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
>
<svg
class="w-36 -my-5"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
>
<defs> <defs>
<filter id="glow"> <filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow"/> <feGaussianBlur stdDeviation="5" result="glow" />
<feMerge> <feMerge>
<feMergeNode in="glow"/> <feMergeNode in="glow" />
<feMergeNode in="SourceGraphic"/> <feMergeNode in="SourceGraphic" />
</feMerge> </feMerge>
</filter> </filter>
</defs> </defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" /> <path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg> </svg>
<div class="z-1 absolute top-0"> <div class="z-1 absolute top-0">
<img class="w-20 ml-5" src={cloudFrontUrl+"/assets/earnings_calender_logo.png"} alt="logo" loading="lazy"> <img
class="w-20 ml-5"
src={cloudFrontUrl + "/assets/earnings_calender_logo.png"}
alt="logo"
loading="lazy"
/>
</div> </div>
</div> </div>
<!-- End Column --> <!-- End Column -->
</div> </div>
</div> </div>
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area --> <!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden"> <div class="relative flex flex-col flex-1 overflow-hidden">
<!-- Cards --> <!-- Cards -->
<div class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0"> <div
class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0"
>
<!-- Start Columns --> <!-- Start Columns -->
<label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"> <label
<svg class="w-6 h-6 m-auto rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg> on:click={() => changeWeek("previous")}
class="{previousMax
? 'opacity-80'
: ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"
>
<svg
class="w-6 h-6 m-auto rotate-180"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label> </label>
{#each weekday as day,index} {#each weekday as day, index}
<div
<div class="w-full {index === selectedWeekday ? '' : 'hidden sm:block'}"> class="w-full {index === selectedWeekday
<label on:click={() => toggleDate(index)} class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index === selectedWeekday ? 'bg-purple-600 sm:hover:bg-purple-700' : ''} rounded sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3"> ? ''
<div class=" flex flex-row justify-center items-center w-full "> : 'hidden sm:block'}"
<label on:click={() => clickWeekday('previous', index) } class="{previousMax === true && index === 0? 'opacity-20' : ''} sm:hidden ml-auto"> >
<svg class="w-8 h-8 inline-block rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg> <label
on:click={() => toggleDate(index)}
class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index ===
selectedWeekday
? 'bg-purple-600 sm:hover:bg-purple-700'
: ''} rounded sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3"
>
<div
class=" flex flex-row justify-center items-center w-full"
>
<label
on:click={() => clickWeekday("previous", index)}
class="{previousMax === true && index === 0
? 'opacity-20'
: ''} sm:hidden ml-auto"
>
<svg
class="w-8 h-8 inline-block rotate-180"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label> </label>
<div class="flex flex-col items-center text-white truncate m-auto p-1"> <div
<span class="font-medium text-md">{formattedWeekday[index]}</span> class="flex flex-col items-center text-white truncate m-auto p-1"
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1"> {day?.length} Earnings</span> >
<span class="font-medium text-md"
>{formattedWeekday[index]}</span
>
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
{day?.length} Earnings</span
>
</div> </div>
<label on:click={() => clickWeekday('next', index) } class="{nextMax === true && index === 4? 'opacity-20' : ''} sm:hidden mr-auto"> <label
<svg class="w-8 h-8 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg> on:click={() => clickWeekday("next", index)}
class="{nextMax === true && index === 4
? 'opacity-20'
: ''} sm:hidden mr-auto"
>
<svg
class="w-8 h-8 inline-block"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label> </label>
</div> </div>
</label> </label>
</div> </div>
{/each} {/each}
<label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"> <label
<svg class="w-6 h-6 m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg> on:click={() => changeWeek("next")}
class="{nextMax
? 'opacity-80'
: ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"
>
<svg
class="w-6 h-6 m-auto"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label> </label>
</div> </div>
{#each weekday as day, index}
{#each weekday as day,index}
{#if index === selectedWeekday} {#if index === selectedWeekday}
{#if day?.length !== 0} {#if day?.length !== 0}
<div class="w-full overflow-x-scroll no-scrollbar"> <div class="w-full overflow-x-scroll no-scrollbar">
<table class="table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4 "> <table
class="table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4"
>
<thead> <thead>
<tr class="whitespace-nowrap"> <tr class="whitespace-nowrap">
<th class="text-start text-white font-semibold text-sm">Symbol</th> <th
<th class="text-start text-white font-semibold text-sm">Company Name</th> class="text-start text-white font-semibold text-sm"
<th class="text-white font-semibold text-sm text-end">Market Cap</th> >Symbol</th
<th class="text-white font-semibold text-sm text-end">Revenue Estimate</th> >
<th class="text-white font-semibold text-sm text-end">EPS Estimate</th> <th
<th class="text-white font-semibold text-sm text-end text-end">Earnings Time</th> class="text-start text-white font-semibold text-sm"
>Company Name</th
>
<th
class="text-white font-semibold text-sm text-end"
>Market Cap</th
>
<th
class="text-white font-semibold text-sm text-end"
>Revenue Estimate</th
>
<th
class="text-white font-semibold text-sm text-end"
>EPS Estimate</th
>
<th
class="text-white font-semibold text-sm text-end text-end"
>Earnings Time</th
>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each day as item, index} {#each day as item, index}
<!-- row --> <!-- row -->
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"> <tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
<td class="text-blue-400 border-b-[#09090B] text-start text-sm sm:text-[1rem]"> >
<a href={"/stocks/"+item?.symbol} class="sm:hover:text-white text-blue-400">{item?.symbol}</a> <td
class="text-blue-400 border-b-[#09090B] text-start text-sm sm:text-[1rem]"
>
<a
href={"/stocks/" + item?.symbol}
class="sm:hover:text-white text-blue-400"
>{item?.symbol}</a
>
</td> </td>
<td class="text-white whitespace-nowrap text-sm sm:text-[1rem] border-b-[#09090B]"> <td
{item?.name.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name} class="text-white whitespace-nowrap text-sm sm:text-[1rem] border-b-[#09090B]"
>
{item?.name.length > 20
? item?.name?.slice(0, 20) + "..."
: item?.name}
</td> </td>
<td class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem]"> <td
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap) : '-'} class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem]"
>
{item?.marketCap !== null
? abbreviateNumber(item?.marketCap)
: "-"}
</td> </td>
<td class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"> <td
<div class="flex flex-row items-center justify-end"> class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"
>
<div
class="flex flex-row items-center justify-end"
>
<span> <span>
{(item?.revenueEst !== null) ? abbreviateNumber(item?.revenueEst) : '-'} {item?.revenueEst !== null
? abbreviateNumber(item?.revenueEst)
: "-"}
</span> </span>
{#if item?.revenueEst !== null && item?.revenueEst !== null} {#if item?.revenueEst !== null && item?.revenueEst !== null}
{#if (item?.revenueEst/item?.revenuePrior-1) >= 0} {#if item?.revenueEst / item?.revenuePrior - 1 >= 0}
<span class="ml-1 text-[#22C55E]"> <span class="ml-1 text-[#22C55E]">
+{((item?.revenueEst/item?.revenuePrior-1)*100)?.toFixed(2)}% +{(
(item?.revenueEst /
item?.revenuePrior -
1) *
100
)?.toFixed(2)}%
</span> </span>
{:else} {:else}
<span class="ml-1 text-[#FF2F1F]"> <span class="ml-1 text-[#FF2F1F]">
{((item?.revenueEst/item?.revenuePrior-1)*100)?.toFixed(2)}% {(
(item?.revenueEst /
item?.revenuePrior -
1) *
100
)?.toFixed(2)}%
</span> </span>
{/if} {/if}
{/if} {/if}
</div> </div>
</td> </td>
<td class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"> <td
<div class="flex flex-row items-center justify-end"> class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"
>
<div
class="flex flex-row items-center justify-end"
>
<span> <span>
{item?.epsEst !== null ? item?.epsEst?.toFixed(2) : '-'} {item?.epsEst !== null
? item?.epsEst?.toFixed(2)
: "-"}
</span> </span>
{#if item?.epsEst !== null && item?.epsPrior !== null} {#if item?.epsEst !== null && item?.epsPrior !== null}
{#if (item?.epsEst/item?.epsPrior-1) >= 0} {#if item?.epsEst / item?.epsPrior - 1 >= 0}
<span class="ml-1 text-[#22C55E]"> <span class="ml-1 text-[#22C55E]">
+{((item?.epsEst/item?.epsPrior-1)*100)?.toFixed(2)}% +{(
(item?.epsEst / item?.epsPrior - 1) *
100
)?.toFixed(2)}%
</span> </span>
{:else} {:else}
<span class="ml-1 text-[#FF2F1F]"> <span class="ml-1 text-[#FF2F1F]">
{((item?.epsEst/item?.epsPrior-1)*100)?.toFixed(2)}% {(
(item?.epsEst / item?.epsPrior - 1) *
100
)?.toFixed(2)}%
</span> </span>
{/if} {/if}
{/if} {/if}
</div> </div>
</td> </td>
<td
<td class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"> class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
{#if item?.release === 'amc'} >
<svg class="w-4 h-4 inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#70A1EF" d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"/></svg> {#if item?.release === "amc"}
<svg
class="w-4 h-4 inline-block mr-1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#70A1EF"
d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99m-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"
/></svg
>
After Close After Close
{:else} {:else}
<svg class="w-4 h-4 inline-block mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><g fill="#FEC001"><path d="M184 128a56 56 0 1 1-56-56a56 56 0 0 1 56 56Z" opacity=".2"/><path d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z"/></g></svg> <svg
class="w-4 h-4 inline-block mr-1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><g fill="#FEC001"
><path
d="M184 128a56 56 0 1 1-56-56a56 56 0 0 1 56 56Z"
opacity=".2"
/><path
d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0Zm72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64Zm-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48ZM58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32ZM192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72Zm5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8Zm80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8Zm112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16Z"
/></g
></svg
>
Before Open Before Open
{/if} {/if}
</td> </td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
{:else} {:else}
<div class="text-white p-5 mt-5 w-fit m-auto rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-[1rem]"> <div
<svg class="w-6 h-6 flex-shrink-0 inline-block 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> class="text-white p-5 mt-5 w-fit m-auto rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-[1rem]"
>
<svg
class="w-6 h-6 flex-shrink-0 inline-block 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
>
No Earnings available for the day. No Earnings available for the day.
</div> </div>
{/if} {/if}
{/if} {/if}
{/each} {/each}
</div>
</div>
</main> </main>
<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 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> >
<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"> <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 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="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/dividends-calendar"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3"> <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">
Dividend Calendar 💸 Dividend Calendar 💸
</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">
Stay updated on upcoming Dividends in the stock market. Stay updated on upcoming Dividends in the stock market.
</span> </span>
</div> </a>
</div> </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"
>
<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"> <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">
Economic Events 🌍 Economic Events 🌍
</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">
Stay updated on upcoming Economic Events worldwide. Stay updated on upcoming Economic Events worldwide.
</span> </span>
</a>
</div> </div>
</div>
</aside> </aside>
</div> </div>
</div> </div>
</div> </div>
</section>
</section>

738
src/routes/economic-calendar/+page.svelte
View File

File diff suppressed because it is too large Load Diff

457
src/routes/list/+layout.svelte
View File

@ -1,244 +1,250 @@
<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 { industryList } from '$lib/utils'; import { industryList } from "$lib/utils";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { goto } from '$app/navigation';
export let data; export let data;
function formatFilename(industryName) { function formatFilename(industryName) {
let formattedName = industryName?.replace(/ /g, '-') let formattedName = industryName
.replace(/&/g, 'and') ?.replace(/ /g, "-")
.replace(/-{2,}/g, '-') .replace(/&/g, "and")
.replace(/-{2,}/g, "-")
.toLowerCase(); .toLowerCase();
return formattedName; return formattedName;
} }
let navigationIndustry = industryList.map(industry => ({ let navigationIndustry = industryList.map((industry) => ({
title: industry, title: industry,
link: `/list/industry/${formatFilename(industry)}` link: `/list/industry/${formatFilename(industry)}`,
})); }));
let navigation = [
{
title: "Stock Lists",
link: "/list",
},
{
title: "Mega-Cap Stocks",
link: "/list/mega-cap-stocks",
},
{
title: "Large-Cap Stocks",
link: "/list/large-cap-stocks",
},
{
title: "Mid-Cap Stocks",
link: "/list/mid-cap-stocks",
},
{
title: "Small-Cap Stocks",
link: "/list/small-cap-stocks",
},
{
title: "Micro-Cap Stocks",
link: "/list/micro-cap-stocks",
},
{
title: "Nano-Cap Stocks",
link: "/list/nano-cap-stocks",
},
{
title: "All Stocks Listed on the NASDAQ",
link: "/list/nasdaq-stocks",
},
{
title: "All Stocks Listed on the NYSE",
link: "/list/nyse-stocks",
},
{
title: "All Stocks Listed on XETRA",
link: "/list/xetra-stocks",
},
{
title: "All Stocks Listed on AMEX",
link: "/list/amex-stocks",
},
{
title: "Dow Jones Industrial Average Stocks List",
link: "/list/dow-jones-stocks",
},
{
title: "NASDAQ 100 Index Stocks List",
link: "/list/nasdaq-100-stocks",
},
{
title: "S&P 500 Index Stocks List",
link: "/list/sp-500-stocks",
},
{
title: "German Companies on the US Stock Market",
link: "/list/german-stocks-us",
},
{
title: "Canadian Companies on the US Stock Market",
link: "/list/canadian-stocks-us",
},
{
title: "Chinese Companies on the US Stock Market",
link: "/list/chinese-stocks-us",
},
{
title: "Indian Companies on the US Stock Market",
link: "/list/indian-stocks-us",
},
{
title: "Israeli Companies on the US Stock Market",
link: "/list/israeli-stocks-us",
},
{
title: "UK Companies on the US Stock Market",
link: "/list/uk-stocks-us",
},
{
title: "Japanese Companies on the US Stock Market",
link: "/list/japanese-stocks-us",
},
{
title: "Financials Sector Stocks",
link: "/list/financial-sector",
},
{
title: "Healthcare Sector Stocks",
link: "/list/healthcare-sector",
},
{
title: "Technology Sector Stocks",
link: "/list/technology-sector",
},
{
title: "Industrials Sector Stocks",
link: "/list/industrials-sector",
},
{
title: "Energy Sector Stocks",
link: "/list/energy-sector",
},
{
title: "Utilities Sector Stocks",
link: "/list/utilities-sector",
},
{
title: "Consumer Cyclical Sector Stocks",
link: "/list/consumer-cyclical-sector",
},
{
title: "Real Estate Sector Stocks",
link: "/list/real-estate-sector",
},
{
title: "Basic Materials Sector Stocks",
link: "/list/basic-materials-sector",
},
{
title: "Communication Services Sector Stocks",
link: "/list/communication-services-sector",
},
{
title: "Consumer Defensive Sector Stocks",
link: "/list/consumer-defensive-sector",
},
{
title: "Delisted Companies",
link: "/list/delisted-stocks",
},
{
title: "Bitcoin ETFs",
link: "/list/bitcoin-etfs",
},
{
title: "Magnificent Seven Stocks",
link: "/list/magnificent-seven",
},
{
title: "Dividend Kings",
link: "/list/dividend-kings",
},
{
title: "Dividend Aristocrats",
link: "/list/dividend-aristocrats",
},
{
title: "All Active REITs on the US Stock Market",
link: "/list/reit-stocks",
},
];
let navigation = [ navigation = [...navigationIndustry, ...navigation];
{ let updatedNavigation = navigation?.map((item) => {
title: 'Stock Lists',
link: '/list'
},
{
title: 'Mega-Cap Stocks',
link: '/list/mega-cap-stocks'
},
{
title: 'Large-Cap Stocks',
link: '/list/large-cap-stocks'
},
{
title: 'Mid-Cap Stocks',
link: '/list/mid-cap-stocks'
},
{
title: 'Small-Cap Stocks',
link: '/list/small-cap-stocks'
},
{
title: 'Micro-Cap Stocks',
link: '/list/micro-cap-stocks'
},
{
title: 'Nano-Cap Stocks',
link: '/list/nano-cap-stocks'
},
{
title: 'All Stocks Listed on the NASDAQ',
link: '/list/nasdaq-stocks'
},
{
title: 'All Stocks Listed on the NYSE',
link: '/list/nyse-stocks'
},
{
title: 'All Stocks Listed on XETRA',
link: '/list/xetra-stocks'
},
{
title: 'All Stocks Listed on AMEX',
link: '/list/amex-stocks'
},
{
title: 'Dow Jones Industrial Average Stocks List',
link: '/list/dow-jones-stocks'
},
{
title: 'NASDAQ 100 Index Stocks List',
link: '/list/nasdaq-100-stocks'
},
{
title: 'S&P 500 Index Stocks List',
link: '/list/sp-500-stocks'
},
{
title: 'German Companies on the US Stock Market',
link: '/list/german-stocks-us'
},
{
title: 'Canadian Companies on the US Stock Market',
link: '/list/canadian-stocks-us'
},
{
title: 'Chinese Companies on the US Stock Market',
link: '/list/chinese-stocks-us'
},
{
title: 'Indian Companies on the US Stock Market',
link: '/list/indian-stocks-us'
},
{
title: 'Israeli Companies on the US Stock Market',
link: '/list/israeli-stocks-us'
},
{
title: 'UK Companies on the US Stock Market',
link: '/list/uk-stocks-us'
},
{
title: 'Japanese Companies on the US Stock Market',
link: '/list/japanese-stocks-us'
},
{
title: 'Financials Sector Stocks',
link: '/list/financial-sector'
},
{
title: 'Healthcare Sector Stocks',
link: '/list/healthcare-sector'
},
{
title: 'Technology Sector Stocks',
link: '/list/technology-sector'
},
{
title: 'Industrials Sector Stocks',
link: '/list/industrials-sector'
},
{
title: 'Energy Sector Stocks',
link: '/list/energy-sector'
},
{
title: 'Utilities Sector Stocks',
link: '/list/utilities-sector'
},
{
title: 'Consumer Cyclical Sector Stocks',
link: '/list/consumer-cyclical-sector'
},
{
title: 'Real Estate Sector Stocks',
link: '/list/real-estate-sector'
},
{
title: 'Basic Materials Sector Stocks',
link: '/list/basic-materials-sector'
},
{
title: 'Communication Services Sector Stocks',
link: '/list/communication-services-sector'
},
{
title: 'Consumer Defensive Sector Stocks',
link: '/list/consumer-defensive-sector'
},
{
title: 'Delisted Companies',
link: '/list/delisted-stocks'
},
{
title: 'Bitcoin ETFs',
link: '/list/bitcoin-etfs'
},
{
title: 'Magnificent Seven Stocks',
link: '/list/magnificent-seven'
},
{
title: 'Dividend Kings',
link: '/list/dividend-kings'
},
{
title: 'Dividend Aristocrats',
link: '/list/dividend-aristocrats'
},
{
title: 'All Active REITs on the US Stock Market',
link: '/list/reit-stocks'
},
];
navigation = [...navigationIndustry, ...navigation];
let updatedNavigation = navigation?.map(item => {
return { return {
...item, ...item,
link: item.link + '/' link: item.link + "/",
}; };
}); });
const combinedNavigation = navigation?.concat(updatedNavigation); const combinedNavigation = navigation?.concat(updatedNavigation);
</script> </script>
<svelte:head> <svelte:head>
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Stock Lists · stocknear</title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Stock
Lists · 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="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."> <meta
name="description"
content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content="Stock Lists · stocknear"/> <meta property="og:title" content="Stock Lists · stocknear" />
<meta property="og:description" content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."> <meta
<meta property="og:type" content="website"/> property="og:description"
content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."
/>
<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="Stock Lists · stocknear"/> <meta name="twitter:title" content="Stock Lists · stocknear" />
<meta name="twitter:description" content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."> <meta
name="twitter:description"
content="Lists of stocks that share common characteristics. See companies ranked by market cap, employee count, sales or others."
/>
<!-- 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-2xl overflow-hidden min-h-screen pt-5 pb-40"
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"> >
<div class="text-sm sm:text-[1rem] breadcrumbs ml-3 lg:ml-10"> <div class="text-sm sm:text-[1rem] breadcrumbs ml-3 lg:ml-10">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
{#if $page.url.pathname.startsWith('/list/industry')} {#if $page.url.pathname.startsWith("/list/industry")}
<li><a href="/industry" class="text-gray-300">Industry</a></li> <li><a href="/industry" class="text-gray-300">Industry</a></li>
{:else} {:else}
<li><a href="/list/" class="text-gray-300">Lists</a></li> <li><a href="/list/" class="text-gray-300">Lists</a></li>
{/if} {/if}
{#if $page.url.pathname.startsWith('/list/')} {#if $page.url.pathname.startsWith("/list/")}
<li> <li>
<span class="text-gray-300"> <span class="text-gray-300">
{combinedNavigation?.find((item) => item?.link === $page.url.pathname)?.title} {combinedNavigation?.find(
(item) => item?.link === $page.url.pathname,
)?.title}
</span> </span>
</li> </li>
{/if} {/if}
</ul> </ul>
</div> </div>
<div
class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] px-3 lg:px-10 overflow-hidden"
<div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] px-3 lg:px-10 overflow-hidden"> >
<!--Start Top Winners/Losers--> <!--Start Top Winners/Losers-->
<div class="flex flex-col justify-center items-center"> <div class="flex flex-col justify-center items-center">
<div class="ml-2 text-start w-full text-white mb-2"> <div class="ml-2 text-start w-full text-white mb-2">
{#each navigation as item} {#each navigation as item}
{#if item?.link === $page.url.pathname} {#if item?.link === $page.url.pathname}
@ -252,70 +258,71 @@ const combinedNavigation = navigation?.concat(updatedNavigation);
<div class="border-b mt-2 border-blue-400 w-full mb-7" /> <div class="border-b mt-2 border-blue-400 w-full mb-7" />
<div class="flex justify-center w-full m-auto overflow-hidden"> <div class="flex justify-center w-full m-auto overflow-hidden">
<main class="w-full lg:w-3/4 lg:pr-10"> <main class="w-full lg:w-3/4 lg:pr-10">
<slot /> <slot />
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 -mt-4"> <aside class="hidden lg:block relative fixed w-1/4 -mt-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 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> >
<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"> <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 on:click={() => goto('/watchlist/stocks')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"> <div
<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"
>
<a
href={"/watchlist/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"> <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">
Watchlist ⭐ Watchlist ⭐
</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">
Build your watchlist to keep track of their performance. Build your watchlist to keep track of their performance.
</span> </span>
</div> </a>
</div> </div>
<div on:click={() => goto('/stock-screener')} 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"
>
<a
href={"/stock-screener"}
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">
Stock Screener 🔎 Stock Screener 🔎
</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">
Build your Stock Screener to find profitable stocks. Build your Stock Screener to find profitable stocks.
</span> </span>
</a>
</div> </div>
</div>
</aside> </aside>
</div> </div>
</div> </div>
</div> </div>
</section>
</section>

24
src/routes/most-shorted-stocks/+page.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
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 { onMount } from "svelte"; import { onMount } from "svelte";
@ -249,7 +248,6 @@
<tbody> <tbody>
{#each stockList as item, index} {#each stockList as item, index}
<tr <tr
on:click={() => goto(`/stocks/${item?.symbol}`)}
class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index + class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
1 === 1 ===
stockList?.length && data?.user?.tier !== 'Pro' stockList?.length && data?.user?.tier !== 'Pro'
@ -330,10 +328,10 @@
<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">
@ -345,15 +343,17 @@
<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 📊
@ -363,14 +363,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("/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" 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/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"> <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 Stocks Picks ⭐ Top Stocks Picks ⭐
@ -380,7 +382,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 Wall Street analyst ratings. Get the latest top Wall Street analyst ratings.
</span> </span>
</div> </a>
</div> </div>
</aside> </aside>
</div> </div>

1102
src/routes/politicians/flow-data/+page.svelte
View File

File diff suppressed because it is too large Load Diff

615
src/routes/price-alert/+page.svelte
View File

@ -1,33 +1,49 @@
<script lang='ts'> <script lang="ts">
import { numberOfUnreadNotification } from '$lib/store'; import { numberOfUnreadNotification } from "$lib/store";
//import { enhance } from '$app/forms'; import { abbreviateNumber } from "$lib/utils";
import toast from 'svelte-french-toast';
import { goto } from '$app/navigation';
import {screenWidth } from '$lib/store';
import MiniPlot from '$lib/components/MiniPlot.svelte';
import { onMount } from 'svelte';
import ArrowLogo from "lucide-svelte/icons/move-up-right";
//import { enhance } from '$app/forms';
import toast from "svelte-french-toast";
import { goto } from "$app/navigation";
import { screenWidth } from "$lib/store";
import MiniPlot from "$lib/components/MiniPlot.svelte";
import { onMount } from "svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
export let data; export let data;
const rawData = data?.getMiniPlotsIndex; const rawData = data?.getMiniPlotsIndex;
function getCurrentDateFormatted() { function getCurrentDateFormatted() {
// Get current date // Get current date
let date = new Date(); let date = new Date();
// If today is Saturday or Sunday, move to the previous Friday // If today is Saturday or Sunday, move to the previous Friday
if (date.getDay() === 6) { // Saturday if (date.getDay() === 6) {
// Saturday
date.setDate(date.getDate() - 1); date.setDate(date.getDate() - 1);
} else if (date.getDay() === 0) { // Sunday } else if (date.getDay() === 0) {
// Sunday
date.setDate(date.getDate() - 2); date.setDate(date.getDate() - 2);
} }
// Define months array for formatting // Define months array for formatting
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
// Get formatted date components // Get formatted date components
const month = months[date.getMonth()]; const month = months[date.getMonth()];
@ -36,43 +52,79 @@ function getCurrentDateFormatted() {
// Return formatted date // Return formatted date
return `${month} ${day}, ${year}`; return `${month} ${day}, ${year}`;
} }
let editMode = false; let editMode = false;
let numberOfChecked = 0; let numberOfChecked = 0;
let deletePriceAlertList = []; let deletePriceAlertList = [];
let priceDataSP500; let priceDataSP500;
let priceDataNasdaq; let priceDataNasdaq;
let priceDataDowJones; let priceDataDowJones;
let priceDataRussel2000; let priceDataRussel2000;
let changeSP500, changeNasdaq, changeDowJones, changeRussel2000; let changeSP500, changeNasdaq, changeDowJones, changeRussel2000;
let previousCloseSP500, previousCloseNasdaq, previousCloseDowJones, previousCloseRussel2000; let previousCloseSP500,
// Assign values based on the symbol previousCloseNasdaq,
rawData?.forEach(({ symbol, priceData, changesPercentage, previousClose }) => { previousCloseDowJones,
previousCloseRussel2000;
// Assign values based on the symbol
rawData?.forEach(
({ symbol, priceData, changesPercentage, previousClose }) => {
switch (symbol) { switch (symbol) {
case "SPY": case "SPY":
priceDataSP500 = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value})); priceDataSP500 = priceData?.map(({ time, value }) => ({
priceDataSP500 = priceDataSP500?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined) time: Date?.parse(time),
value,
}));
priceDataSP500 = priceDataSP500?.filter(
(item) =>
item.value !== 0 &&
item.value !== null &&
item.value !== undefined,
);
changeSP500 = changesPercentage; changeSP500 = changesPercentage;
previousCloseSP500 = previousClose; previousCloseSP500 = previousClose;
break; break;
case "QQQ": case "QQQ":
priceDataNasdaq = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value})); priceDataNasdaq = priceData?.map(({ time, value }) => ({
priceDataNasdaq = priceDataNasdaq?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined) time: Date?.parse(time),
value,
}));
priceDataNasdaq = priceDataNasdaq?.filter(
(item) =>
item.value !== 0 &&
item.value !== null &&
item.value !== undefined,
);
changeNasdaq = changesPercentage; changeNasdaq = changesPercentage;
previousCloseNasdaq = previousClose; previousCloseNasdaq = previousClose;
break; break;
case "DIA": case "DIA":
priceDataDowJones = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value})); priceDataDowJones = priceData?.map(({ time, value }) => ({
priceDataDowJones = priceDataDowJones?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined) time: Date?.parse(time),
changeDowJones = changesPercentage value,
}));
priceDataDowJones = priceDataDowJones?.filter(
(item) =>
item.value !== 0 &&
item.value !== null &&
item.value !== undefined,
);
changeDowJones = changesPercentage;
previousCloseDowJones = previousClose; previousCloseDowJones = previousClose;
break; break;
case "IWM": case "IWM":
priceDataRussel2000 = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value})); priceDataRussel2000 = priceData?.map(({ time, value }) => ({
priceDataRussel2000 = priceDataRussel2000?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined) time: Date?.parse(time),
value,
}));
priceDataRussel2000 = priceDataRussel2000?.filter(
(item) =>
item.value !== 0 &&
item.value !== null &&
item.value !== undefined,
);
changeRussel2000 = changesPercentage; changeRussel2000 = changesPercentage;
previousCloseRussel2000 = previousClose; previousCloseRussel2000 = previousClose;
break; break;
@ -80,25 +132,22 @@ rawData?.forEach(({ symbol, priceData, changesPercentage, previousClose }) => {
// Handle unknown symbol // Handle unknown symbol
break; break;
} }
}); },
);
let isLoaded = false; let isLoaded = false;
let priceAlertList = data?.getPriceAlert; let priceAlertList = data?.getPriceAlert;
function stockSelector(symbol, assetType) {
function stockSelector(symbol, assetType) {
if (editMode) { if (editMode) {
} else {
goto(
`/${assetType === "stock" ? "stocks" : assetType === "etf" ? "etf" : "crypto"}/${symbol}`,
);
} }
else {
goto(`/${assetType === 'stock' ? 'stocks' : assetType === 'etf' ? 'etf' : 'crypto'}/${symbol}`)
} }
}
async function handleFilter(priceAlertId) {
async function handleFilter(priceAlertId) {
const filterSet = new Set(deletePriceAlertList); const filterSet = new Set(deletePriceAlertList);
// Check if the new filter already exists in the list // Check if the new filter already exists in the list
@ -108,92 +157,83 @@ async function handleFilter(priceAlertId) {
} else { } else {
// If it doesn't exist, add it to the list // If it doesn't exist, add it to the list
filterSet?.add(priceAlertId); filterSet?.add(priceAlertId);
} }
deletePriceAlertList = Array?.from(filterSet); deletePriceAlertList = Array?.from(filterSet);
numberOfChecked = deletePriceAlertList?.length; numberOfChecked = deletePriceAlertList?.length;
} }
async function handleDelete() {
async function handleDelete() {
if (numberOfChecked === 0) { if (numberOfChecked === 0) {
toast.error(`You need to select symbols before you can delete them`, { toast.error(`You need to select symbols before you can delete them`, {
style: 'border-radius: 10px; background: #333; color: #fff; padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);', style:
"border-radius: 10px; background: #333; color: #fff; padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);",
}); });
} } else {
else { priceAlertList = priceAlertList?.filter(
(item) => !deletePriceAlertList?.includes(item?.id),
priceAlertList = priceAlertList?.filter(item => !deletePriceAlertList?.includes(item?.id)); );
priceAlertList = [...priceAlertList]; priceAlertList = [...priceAlertList];
const postData = { const postData = {
'priceAlertIdList': deletePriceAlertList, priceAlertIdList: deletePriceAlertList,
'path': 'delete-price-alert' path: "delete-price-alert",
} };
const response = await fetch('/api/fastify-post-data', { const response = await fetch("/api/fastify-post-data", {
method: 'POST', method: "POST",
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json",
}, },
body: JSON.stringify(postData) body: JSON.stringify(postData),
}); });
deletePriceAlertList = []; deletePriceAlertList = [];
numberOfChecked = 0; numberOfChecked = 0;
editMode = !editMode editMode = !editMode;
}
} }
} onMount(async () => {
isLoaded = true;
});
onMount( async () => {
isLoaded = true;
});
$: charNumber = $screenWidth < 640 ? 15 : 40;
$: charNumber = $screenWidth < 640 ? 15 : 40;
</script> </script>
<svelte:head> <svelte:head>
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Price Alert · stocknear</title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Price
Alert · 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="Set a price alert and get instant notification."> <meta
name="description"
content="Set a price alert and get instant notification."
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content="Price Alert · stocknear"/> <meta property="og:title" content="Price Alert · stocknear" />
<meta property="og:description" content="Set a price alert and get instant notification."> <meta
<meta property="og:type" content="website"/> property="og:description"
content="Set a price alert and get instant notification."
/>
<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="Price Alert · stocknear"/> <meta name="twitter:title" content="Price Alert · stocknear" />
<meta name="twitter:description" content="Set a price alert and get instant notification."> <meta
name="twitter:description"
content="Set a price alert and get instant notification."
/>
<!-- 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-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>
@ -202,17 +242,15 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
</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">
@ -221,201 +259,322 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
</h1> </h1>
</div> </div>
<span class="text-white text-md font-medium text-center flex justify-center items-center "> <span
Get email notifications instantly when your alert goes off, so you never miss out! class="text-white text-md font-medium text-center flex justify-center items-center"
>
Get email notifications instantly when your alert goes off, so
you never miss out!
</span> </span>
</div> </div>
<!-- End Column --> <!-- End Column -->
<!-- Start Column --> <!-- Start 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"> 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> <defs>
<filter id="glow"> <filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow"/> <feGaussianBlur stdDeviation="5" result="glow" />
<feMerge> <feMerge>
<feMergeNode in="glow"/> <feMergeNode in="glow" />
<feMergeNode in="SourceGraphic"/> <feMergeNode in="SourceGraphic" />
</feMerge> </feMerge>
</filter> </filter>
</defs> </defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" /> <path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg> </svg>
<div class="z-1 absolute top-2"> <div class="z-1 absolute top-2">
<img class="w-[120px] h-fit ml-10" src={cloudFrontUrl+"/assets/price_alert_logo.png"} alt="logo" loading='lazy'> <img
class="w-[120px] h-fit ml-10"
src={cloudFrontUrl + "/assets/price_alert_logo.png"}
alt="logo"
loading="lazy"
/>
</div> </div>
</div> </div>
<!-- End Column --> <!-- End Column -->
</div> </div>
</div> </div>
{#if isLoaded} {#if isLoaded}
<div class="sm:hidden"> <div class="sm:hidden">
<div class="text-white text-xs sm:text-sm pb-5 sm:pb-2 pl-3 sm:pl-0"> <div
class="text-white text-xs sm:text-sm pb-5 sm:pb-2 pl-3 sm:pl-0"
>
Stock Indexes - {getCurrentDateFormatted()} Stock Indexes - {getCurrentDateFormatted()}
</div> </div>
<div class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-start sm:justify-center items-center p-3 sm:p-0"> <div
<div class="w-full grid grid-cols-2 md:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3 "> class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-start sm:justify-center items-center p-3 sm:p-0"
<MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/> >
<MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/> <div
<MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/> class="w-full grid grid-cols-2 md:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3"
<MiniPlot title="Russel" priceData = {priceDataRussel2000} changesPercentage={changeRussel2000} previousClose={previousCloseRussel2000}/> >
<MiniPlot
title="S&P500"
priceData={priceDataSP500}
changesPercentage={changeSP500}
previousClose={previousCloseSP500}
/>
<MiniPlot
title="Nasdaq"
priceData={priceDataNasdaq}
changesPercentage={changeNasdaq}
previousClose={previousCloseNasdaq}
/>
<MiniPlot
title="Dow"
priceData={priceDataDowJones}
changesPercentage={changeDowJones}
previousClose={previousCloseDowJones}
/>
<MiniPlot
title="Russel"
priceData={priceDataRussel2000}
changesPercentage={changeRussel2000}
previousClose={previousCloseRussel2000}
/>
</div> </div>
</div> </div>
</div> </div>
{#if priceAlertList?.length === 0} {#if priceAlertList?.length === 0}
<div class="flex flex-col justify-center items-center m-auto pt-8"> <div
<span class="text-white font-bold text-white text-xl sm:text-3xl"> class="flex flex-col justify-center items-center m-auto pt-8"
>
<span
class="text-white font-bold text-white text-xl sm:text-3xl"
>
No Alerts set No Alerts set
</span> </span>
<span class="text-white text-sm sm:text-[1rem] m-auto p-4 text-center"> <span
Create price alerts for your stocks that have the most potential in your opinion. class="text-white text-sm sm:text-[1rem] m-auto p-4 text-center"
>
Create price alerts for your stocks that have the most
potential in your opinion.
</span> </span>
{#if !data?.user} {#if !data?.user}
<a class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group" href="/register"> <a
class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group"
href="/register"
>
Get Started Get Started
<span class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"> <span
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="white" d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"/></g></g></svg> class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
>
<svg
class="w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><g transform="rotate(90 12 12)"
><g fill="none"
><path
d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
/><path
fill="white"
d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
/></g
></g
></svg
>
</span> </span>
</a> </a>
{/if} {/if}
</div> </div>
{:else} {:else}
<div
<div class="flex flex-row justify-end items-center pr-4 sm:pr-0 pb-2"> class="flex flex-row justify-end items-center pr-4 sm:pr-0 pb-2"
>
{#if editMode} {#if editMode}
<label on:click={handleDelete} class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out"> <label
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z"/></svg> on:click={handleDelete}
class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out"
>
<svg
class="inline-block w-5 h-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z"
/></svg
>
<span class="ml-1 text-white text-sm"> <span class="ml-1 text-white text-sm">
{numberOfChecked} {numberOfChecked}
</span> </span>
</label> </label>
{/if} {/if}
<label on:click={() => editMode = !editMode} class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out"> <label
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="white" d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"/><path fill="white" d="m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"/></svg> on:click={() => (editMode = !editMode)}
class="border text-sm border-gray-600 ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md py-2 pl-3 pr-4 font-semibold text-white shadow-sm bg-[#09090B] sm:hover:bg-[#09090B]/60 ease-out"
>
<svg
class="inline-block w-5 h-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1024 1024"
><path
fill="white"
d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"
/><path
fill="white"
d="m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"
/></svg
>
{#if !editMode} {#if !editMode}
<span class="ml-1 text-white text-sm"> <span class="ml-1 text-white text-sm"> Edit </span>
Edit
</span>
{:else} {:else}
<span class="ml-1 text-white text-sm"> <span class="ml-1 text-white text-sm"> Cancel </span>
Cancel
</span>
{/if} {/if}
</label> </label>
</div> </div>
<!--Start Table--> <!--Start Table-->
<div class="w-screen sm:w-full rounded-lg overflow-hidden overflow-x-scroll no-scrollbar"> <div
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4 "> class="w-screen sm:w-full rounded-lg overflow-hidden overflow-x-scroll no-scrollbar"
>
<table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4"
>
<!-- head --> <!-- head -->
<thead> <thead>
<tr class=""> <tr class="">
<th class="text-white font-semibold text-[1rem] ">Symbol</th> <th class="text-white font-semibold text-[1rem]"
<th class="text-white font-semibold text-[1rem] ">Company</th> >Symbol</th
<th class="text-white font-semibold text-end text-[1rem] ">Volume</th> >
<th class="text-white font-semibold text-end text-[1rem] ">Price when Created</th> <th class="text-white font-semibold text-[1rem]"
<th class="text-white font-semibold text-end text-[1rem] ">Price Target</th> >Company</th
<th class="text-white font-semibold text-end text-[1rem] ">Current Price</th> >
<th class="text-white font-semibold text-end text-[1rem] ">Change</th> <th class="text-white font-semibold text-end text-[1rem]"
>Volume</th
>
<th class="text-white font-semibold text-end text-[1rem]"
>Price when Created</th
>
<th class="text-white font-semibold text-end text-[1rem]"
>Price Target</th
>
<th class="text-white font-semibold text-end text-[1rem]"
>Current Price</th
>
<th class="text-white font-semibold text-end text-[1rem]"
>Change</th
>
</tr> </tr>
</thead> </thead>
<tbody class="p-3"> <tbody class="p-3">
{#each priceAlertList as item, index} {#each priceAlertList as item, index}
<!-- row --> <!-- row -->
<tr on:click={() => stockSelector(item?.symbol, item?.assetType)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer"> <tr
on:click={() =>
<td on:click={() => handleFilter(item?.id)} class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] flex flex-row items-center"> stockSelector(item?.symbol, item?.assetType)}
<input type="checkbox" checked={deletePriceAlertList?.includes(item?.id) ?? false} class="{!editMode ? 'hidden' : ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3" /> class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer"
>
<td
on:click={() => handleFilter(item?.id)}
class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] flex flex-row items-center"
>
<input
type="checkbox"
checked={deletePriceAlertList?.includes(item?.id) ??
false}
class="{!editMode
? 'hidden'
: ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3"
/>
{item?.symbol} {item?.symbol}
</td> </td>
<td on:click={() => handleFilter(item?.id)} class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"> <td
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name} on:click={() => handleFilter(item?.id)}
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>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"> <td
{new Intl.NumberFormat("en", { class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
minimumFractionDigits: 2, >
maximumFractionDigits: 2 {abbreviateNumber(item?.volume)}
}).format(item?.volume)}
</td> </td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"> <td
${item?.priceWhenCreated} class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
>
{item?.priceWhenCreated}
</td> </td>
<td
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"> class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
${item?.targetPrice} >
{item?.targetPrice}
</td> </td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"> <td
${item.price?.toFixed(2)} class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
>
{item.price?.toFixed(2)}
</td> </td>
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"> <td
{#if item?.changesPercentage >=0} class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
<span class="text-[#37C97D]">+{item?.changesPercentage?.toFixed(2)}%</span> >
{#if item?.changesPercentage >= 0}
<span class="text-[#37C97D]"
>+{item?.changesPercentage?.toFixed(2)}%</span
>
{:else} {:else}
<span class="text-[#FF2F1F]">{item?.changesPercentage?.toFixed(2)}% </span> <span class="text-[#FF2F1F]"
>{item?.changesPercentage?.toFixed(2)}%
</span>
{/if} {/if}
</td> </td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
<!--End Table--> <!--End Table-->
{/if} {/if}
{:else} {:else}
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> <label
<span class="loading loading-spinner loading-md text-gray-400"></span> class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span class="loading loading-spinner loading-md text-gray-400"
></span>
</label> </label>
</div> </div>
</div> </div>
{/if} {/if}
</main> </main>
<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"> on:click={() => goto("/pricing")}
<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-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.
@ -424,43 +583,45 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
</div> </div>
{/if} {/if}
<div on:click={() => goto('/watchlist/stocks')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"> <div
<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"
>
<a
href={"/watchlist/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"> <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">
Watchlist ⭐ Watchlist ⭐
</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">
Build your watchlist to keep track of their performance. Build your watchlist to keep track of their performance.
</span> </span>
</div> </a>
</div> </div>
<div on:click={() => goto('/stock-screener')} 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"
>
<a
href={"/stock-screener"}
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">
Stock Screener 🔎 Stock Screener 🔎
</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">
Build your Stock Screener to find profitable stocks. Build your Stock Screener to find profitable stocks.
</span> </span>
</a>
</div> </div>
</div>
</aside> </aside>
</div> </div>
</div> </div>
</div> </div>
</section>
</section>

1
src/routes/sitemap.xml/+server.ts
View File

@ -15,6 +15,7 @@ const pages = [
{ title: "/donation" }, { title: "/donation" },
//{title: "/portfolio"}, //{title: "/portfolio"},
{ title: "/sentiment-tracker" }, { title: "/sentiment-tracker" },
{ title: "/insider-tracker" },
{ title: "/industry" }, { title: "/industry" },
{ title: "/industry/sectors" }, { title: "/industry/sectors" },
{ title: "/industry/all" }, { title: "/industry/all" },

173
src/routes/watchlist/+layout.svelte
View File

@ -1,19 +1,17 @@
<script lang='ts'> <script lang="ts">
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;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
function handleMode(i) {
function handleMode(i) {
activeIdx = i; activeIdx = i;
if(activeIdx === 0) { if (activeIdx === 0) {
goto("/watchlist/stocks") goto("/watchlist/stocks");
} else if (activeIdx === 1) { } else if (activeIdx === 1) {
goto("/watchlist/options") goto("/watchlist/options");
} }
} }
@ -26,15 +24,14 @@ function handleMode(i) {
}, },
]; ];
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 === '/watchlist/stocks') { $: if ($page.url.pathname === "/watchlist/stocks") {
activeIdx = 0; activeIdx = 0;
} else if ($page.url.pathname.startsWith('/watchlist/options')) { } else if ($page.url.pathname.startsWith("/watchlist/options")) {
activeIdx = 1; activeIdx = 1;
} }
</script> </script>
<!-- HEADER FOR BETTER SEO --> <!-- HEADER FOR BETTER SEO -->
@ -43,11 +40,9 @@ 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>
@ -56,14 +51,14 @@ let activeIdx = 0;
</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
<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 --> <!-- Start Column -->
<div> <div>
@ -73,81 +68,100 @@ let activeIdx = 0;
</h1> </h1>
</div> </div>
<span class="text-white text-md font-medium text-center flex justify-center items-center "> <span
Monitor the performance and recent updates of your favorite options. class="text-white text-md font-medium text-center flex justify-center items-center"
>
Monitor the performance and recent updates of your favorite
options.
</span> </span>
</div> </div>
<!-- End Column --> <!-- End Column -->
<!-- Start Column --> <!-- Start 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"> 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> <defs>
<filter id="glow"> <filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow"/> <feGaussianBlur stdDeviation="5" result="glow" />
<feMerge> <feMerge>
<feMergeNode in="glow"/> <feMergeNode in="glow" />
<feMergeNode in="SourceGraphic"/> <feMergeNode in="SourceGraphic" />
</feMerge> </feMerge>
</filter> </filter>
</defs> </defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" /> <path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg> </svg>
<div class="z-1 absolute top-3 right-10 "> <div class="z-1 absolute top-3 right-10">
<img class="w-24" src={cloudFrontUrl+(activeIdx === 0 ? "/assets/watchlist_logo.png" : "/assets/options_logo.png") } alt="logo" loading='lazy'> <img
class="w-24"
src={cloudFrontUrl +
(activeIdx === 0
? "/assets/watchlist_logo.png"
: "/assets/options_logo.png")}
alt="logo"
loading="lazy"
/>
</div> </div>
</div> </div>
<!-- End Column --> <!-- End Column -->
</div> </div>
</div> </div>
<div
class="bg-[#313131] w-52 sm:w-fit relative m-auto sm:m-0 sm:mr-auto flex sm:flex-wrap items-center justify-center rounded-lg p-1 -mt-3"
<div class="bg-[#313131] w-52 sm:w-fit relative m-auto sm:m-0 sm:mr-auto flex sm:flex-wrap items-center justify-center rounded-lg p-1 -mt-3"> >
{#each tabs as item, i} {#each tabs as item, i}
<a href={i === 0 ? '/watchlist/stocks' : '/watchlist/options'} <a
href={i === 0 ? "/watchlist/stocks" : "/watchlist/options"}
on:click={() => handleMode(i)} on:click={() => handleMode(i)}
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i class="group relative z-[1] rounded-full px-6 py-1 {activeIdx ===
i
? 'z-0' ? 'z-0'
: ''} " : ''} "
> >
{#if activeIdx === i} {#if activeIdx === i}
<div <div class="absolute inset-0 rounded-lg bg-purple-600"></div>
class="absolute inset-0 rounded-lg bg-purple-600"
></div>
{/if} {/if}
<span class="relative text-[1rem] sm:text-lg block font-semibold duration-200 text-white"> <span
class="relative text-[1rem] sm:text-lg block font-semibold duration-200 text-white"
>
{item.title} {item.title}
</span> </span>
</a> </a>
{/each} {/each}
</div> </div>
<div class="sm:border-b mt-5 border-slate-700" /> <div class="sm:border-b mt-5 border-slate-700" />
<slot /> <slot />
</main> </main>
<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"> on:click={() => goto("/pricing")}
<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-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.
@ -156,46 +170,45 @@ let activeIdx = 0;
</div> </div>
{/if} {/if}
<div on:click={() => goto('/price-alert')} 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"
>
<a
href={"/price-alert"}
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">
Price Alert ⏰ Price Alert ⏰
</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">
Customize your alerts to never miss out again Customize your alerts to never miss out again
</span> </span>
</div> </a>
</div> </div>
<div on:click={() => goto('/stock-screener')} 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"
>
<a
href={"/stock-screener"}
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">
Stock Screener 🔎 Stock Screener 🔎
</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">
Build your Stock Screener to find profitable stocks. Build your Stock Screener to find profitable stocks.
</span> </span>
</a>
</div> </div>
</div>
</aside> </aside>
</div> </div>
</div> </div>
</div> </div>
</section> </section>