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

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

@ -1,12 +1,10 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { numberOfUnreadNotification } from '$lib/store';
import { sortTableData } from '$lib/utils';
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import ArrowLogo from 'lucide-svelte/icons/move-up-right';
import TableHeader from '$lib/components/Table/TableHeader.svelte';
import { numberOfUnreadNotification } from "$lib/store";
import UpgradeToPro from "$lib/components/UpgradeToPro.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;
@ -28,28 +26,28 @@
onMount(async () => {
isLoaded = true;
window.addEventListener('scroll', handleScroll);
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
window.removeEventListener("scroll", handleScroll);
};
});
let columns = [
{ key: 'rank', label: 'Rank', align: 'left' },
{ key: 'analystName', label: 'Analyst', align: 'left' },
{ key: 'successRate', label: 'Success Rate', align: 'right' },
{ key: 'avgReturn', label: 'Avg. Return', align: 'right' },
{ key: 'totalRatings', label: 'Total Ratings', align: 'right' },
{ key: 'lastRating', label: 'Last Rating', align: 'right' },
{ key: "rank", label: "Rank", align: "left" },
{ key: "analystName", label: "Analyst", align: "left" },
{ key: "successRate", label: "Success Rate", align: "right" },
{ key: "avgReturn", label: "Avg. Return", align: "right" },
{ key: "totalRatings", label: "Total Ratings", align: "right" },
{ key: "lastRating", label: "Last Rating", align: "right" },
];
let sortOrders = {
rank: { order: 'none', type: 'number' },
analystName: { order: 'none', type: 'string' },
successRate: { order: 'none', type: 'number' },
avgReturn: { order: 'none', type: 'number' },
totalRatings: { order: 'none', type: 'number' },
lastRating: { order: 'none', type: 'date' },
rank: { order: "none", type: "number" },
analystName: { order: "none", type: "string" },
successRate: { order: "none", type: "number" },
avgReturn: { order: "none", type: "number" },
totalRatings: { order: "none", type: "number" },
lastRating: { order: "none", type: "date" },
};
const sortData = (key) => {
@ -57,12 +55,12 @@
let finalList = [];
for (const k in sortOrders) {
if (k !== key) {
sortOrders[k].order = 'none';
sortOrders[k].order = "none";
}
}
// 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 currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
sortOrders[key].order =
@ -70,7 +68,7 @@
const sortOrder = sortOrders[key].order;
// 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)
return;
}
@ -81,24 +79,24 @@
let valueA, valueB;
switch (type) {
case 'date':
case "date":
valueA = new Date(a[key]);
valueB = new Date(b[key]);
break;
case 'string':
case "string":
valueA = a[key].toUpperCase();
valueB = b[key].toUpperCase();
return sortOrder === 'asc'
return sortOrder === "asc"
? valueA.localeCompare(valueB)
: valueB.localeCompare(valueA);
case 'number':
case "number":
default:
valueA = parseFloat(a[key]);
valueB = parseFloat(b[key]);
break;
}
if (sortOrder === 'asc') {
if (sortOrder === "asc") {
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
} else {
return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
@ -114,7 +112,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Top
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Top
Wall Street Stock Analysts · stocknear
</title>
<meta
@ -214,7 +212,7 @@
<div class="z-1 absolute top-4">
<img
class="w-36 ml-2"
src={cloudFrontUrl + '/assets/analyst_logo.png'}
src={cloudFrontUrl + "/assets/analyst_logo.png"}
alt="logo"
loading="lazy"
/>
@ -255,7 +253,7 @@
>
<div class="flex flex-col items-start">
<a
href={'/analysts/' + item?.analystId}
href={"/analysts/" + item?.analystId}
class="sm:hover:text-white text-blue-400 font-medium"
>{item?.analystName}
</a>
@ -339,15 +337,15 @@
>
{item?.lastRating !== null
? new Date(item?.lastRating)?.toLocaleString(
'en-US',
"en-US",
{
month: 'short',
day: 'numeric',
year: 'numeric',
daySuffix: '2-digit',
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
},
)
: 'n/a'}
: "n/a"}
</td>
</tr>
{/each}
@ -355,11 +353,11 @@
</table>
</div>
<UpgradeToPro
{data}
title="Get stock forecasts from Wall Street's highest rated professionals"
/>
{:else}
<UpgradeToPro
{data}
title="Get stock forecasts from Wall Street's highest rated professionals"
/>
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label
@ -375,12 +373,12 @@
</div>
</main>
<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
on:click={() => goto('/pricing')}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
@ -392,15 +390,17 @@
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools
</span>
</div>
</a>
</div>
{/if}
<div
on:click={() => goto('/analysts/top-stocks')}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<a
href={"/analysts/top-stocks"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Stocks Picks ⭐
@ -410,14 +410,16 @@
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings.
</span>
</div>
</a>
</div>
<div
on:click={() => goto('/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 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">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Shorted Stocks 🍋
@ -427,7 +429,7 @@
<span class="text-white p-3 ml-3 mr-3">
Never miss out another short squeeze
</span>
</div>
</a>
</div>
</aside>
</div>

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

@ -1,76 +1,71 @@
<script lang='ts'>
import { goto } from '$app/navigation';
import { numberOfUnreadNotification, screenWidth } from '$lib/store';
import { abbreviateNumber } from '$lib/utils';
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import { onMount } from 'svelte';
<script lang="ts">
import { goto } from "$app/navigation";
import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import { onMount } from "svelte";
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;
let isLoaded = false;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
export let data;
let isLoaded = false;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let rawData = data?.getTopAnalystStocks;
let rawData = data?.getTopAnalystStocks;
let analytRatingList = rawData?.slice(0,50) ?? [];
async function handleScroll() {
let analytRatingList = rawData?.slice(0, 50) ?? [];
async function handleScroll() {
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (isBottom && analytRatingList?.length !== rawData?.length) {
const nextIndex = analytRatingList?.length;
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
analytRatingList = [...analytRatingList, ...filteredNewResults];
const nextIndex = analytRatingList?.length;
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
analytRatingList = [...analytRatingList, ...filteredNewResults];
}
}
onMount(async () => {
onMount(async () => {
isLoaded = true;
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
});
isLoaded = true;
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
})
let columns = [
{ key: 'rank', label: 'Rank', align: 'left' },
{ key: 'ticker', label: 'Symbol', align: 'left' },
{ key: 'name', label: 'Name', align: 'left' },
{ key: 'counter', label: 'Ratings Count', align: 'right' },
{ key: 'priceTarget', label: 'Price Target', align: 'right' },
{ key: 'price', label: 'Current Price', align: 'right' },
{ key: 'marketCap', label: 'Market Cap', align: 'right' },
{ key: 'upside', label: 'Upside', align: 'right' },
let columns = [
{ key: "rank", label: "Rank", align: "left" },
{ key: "ticker", label: "Symbol", align: "left" },
{ key: "name", label: "Name", align: "left" },
{ key: "counter", label: "Ratings Count", align: "right" },
{ key: "priceTarget", label: "Price Target", align: "right" },
{ key: "price", label: "Current Price", align: "right" },
{ key: "marketCap", label: "Market Cap", align: "right" },
{ key: "upside", label: "Upside", align: "right" },
];
let sortOrders = {
rank: { order: 'none', type: 'number' },
ticker: { order: 'none', type: 'string' },
name: { order: 'none', type: 'string' },
counter: { order: 'none', type: 'number' },
priceTarget: { order: 'none', type: 'number' },
price: { order: 'none', type: 'number' },
marketCap: { order: 'none', type: 'number' },
upside: { order: 'none', type: 'number' },
rank: { order: "none", type: "number" },
ticker: { order: "none", type: "string" },
name: { order: "none", type: "string" },
counter: { order: "none", type: "number" },
priceTarget: { order: "none", type: "number" },
price: { order: "none", type: "number" },
marketCap: { order: "none", type: "number" },
upside: { order: "none", type: "number" },
};
const sortData = (key) => {
const sortData = (key) => {
// Reset all other keys to 'none' except the current key
let finalList = [];
for (const k in sortOrders) {
if (k !== key) {
sortOrders[k].order = 'none';
sortOrders[k].order = "none";
}
}
// 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 currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
sortOrders[key].order =
@ -78,7 +73,7 @@ window.addEventListener('scroll', handleScroll);
const sortOrder = sortOrders[key].order;
// 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)
return;
}
@ -89,24 +84,24 @@ window.addEventListener('scroll', handleScroll);
let valueA, valueB;
switch (type) {
case 'date':
case "date":
valueA = new Date(a[key]);
valueB = new Date(b[key]);
break;
case 'string':
case "string":
valueA = a[key].toUpperCase();
valueB = b[key].toUpperCase();
return sortOrder === 'asc'
return sortOrder === "asc"
? valueA.localeCompare(valueB)
: valueB.localeCompare(valueA);
case 'number':
case "number":
default:
valueA = parseFloat(a[key]);
valueB = parseFloat(b[key]);
break;
}
if (sortOrder === 'asc') {
if (sortOrder === "asc") {
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
} else {
return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
@ -118,233 +113,306 @@ window.addEventListener('scroll', handleScroll);
};
$: charNumber = $screenWidth < 640 ? 30 : 20;
</script>
</script>
<svelte:head>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Top 100 Strong Buy Stocks · stocknear
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Top
100 Strong Buy Stocks · stocknear
</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 -->
<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 property="og:type" content="website"/>
<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 property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`Top 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.`} />
<meta name="twitter:card" content="summary_large_image" />
<meta
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 -->
</svelte:head>
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Top Analyst Stocks</li>
</ul>
</div>
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
<div class="relative flex justify-center items-start overflow-hidden w-full">
</svelte:head>
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
>
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Top Analyst Stocks</li>
</ul>
</div>
<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="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column -->
<div>
<div class="flex flex-row justify-center items-center">
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
Top Stocks
</h1>
</div>
<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
</span>
</div>
<!-- End Column -->
<!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
</svg>
<div class="z-1 absolute top-0">
<img class="w-28 ml-6" src={cloudFrontUrl+'/assets/wsb_diamond_hands_logo.png'} alt="logo" loading="lazy">
</div>
</div>
<!-- End Column -->
</div>
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<div
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column -->
<div>
<div class="flex flex-row justify-center items-center">
<h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
Top Stocks
</h1>
</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 ">
<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.
<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
</span>
</div>
<!-- End Column -->
<!-- Start Column -->
<div
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
>
<svg
class="w-40 -my-5"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow" />
<feMerge>
<feMergeNode in="glow" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg>
<div class="z-1 absolute top-0">
<img
class="w-28 ml-6"
src={cloudFrontUrl + "/assets/wsb_diamond_hands_logo.png"}
alt="logo"
loading="lazy"
/>
</div>
<div class="w-screen sm:w-full m-auto mt-10">
{#if isLoaded}
<div 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>
<TableHeader {columns} {sortOrders} {sortData} />
</thead>
<tbody>
{#each analytRatingList as item, index}
<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]' : ''}">
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white text-center">
{item?.rank}
</td>
<td 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}
</a>
</td>
<td 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 class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
{item?.counter}
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
{item?.priceTarget?.toFixed(2)}
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
{item?.price?.toFixed(2)}
</td>
<td class="text-end font-medium text-white text-sm sm:text-[1rem] whitespace-nowrap">
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap) : '-'}
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
{#if Number(item?.upside) >= 0}
<span class="text-[#37C97D]">+{Number(item?.upside)?.toFixed(2)}%</span>
{:else}
<span class="text-[#B84242]">{Number(item?.upside)?.toFixed(2)}%</span>
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<UpgradeToPro data={data} title="Get stock forecasts from Wall Street's highest rated professionals"/>
{:else}
<div class="flex justify-center items-center h-80">
<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">
<span class="loading loading-spinner loading-md text-gray-400"></span>
</label>
</div>
</div>
{/if}
</div>
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools
</span>
</div>
</div>
{/if}
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Analyst 📊
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings
</span>
</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 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Shorted Stocks 🍋
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Never miss out another short squeeze
</span>
</div>
</div>
</aside>
</div>
<!-- End Column -->
</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"
>
<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 class="w-screen sm:w-full m-auto mt-10">
{#if isLoaded}
<div
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>
<TableHeader {columns} {sortOrders} {sortData} />
</thead>
<tbody>
{#each analytRatingList as item, index}
<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]'
: ''}"
>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white text-center"
>
{item?.rank}
</td>
<td
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}
</a>
</td>
<td
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
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{item?.counter}
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{item?.priceTarget?.toFixed(2)}
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{item?.price?.toFixed(2)}
</td>
<td
class="text-end font-medium text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.marketCap !== null
? abbreviateNumber(item?.marketCap)
: "-"}
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white"
>
{#if Number(item?.upside) >= 0}
<span class="text-[#37C97D]"
>+{Number(item?.upside)?.toFixed(2)}%</span
>
{:else}
<span class="text-[#B84242]"
>{Number(item?.upside)?.toFixed(2)}%</span
>
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<UpgradeToPro
{data}
title="Get stock forecasts from Wall Street's highest rated professionals"
/>
{:else}
<div class="flex justify-center items-center h-80">
<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"
>
<span
class="loading loading-spinner loading-md text-gray-400"
></span>
</label>
</div>
</div>
{/if}
</div>
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools
</span>
</a>
</div>
{/if}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/analysts"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Analyst 📊
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings
</span>
</a>
</div>
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/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">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Shorted Stocks 🍋
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Never miss out another short squeeze
</span>
</a>
</div>
</aside>
</div>
</section>
</div>
</div>
</section>

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

@ -1,321 +1,374 @@
<script lang='ts'>
import { goto } from '$app/navigation';
import { numberOfUnreadNotification, screenWidth } from '$lib/store';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import { onMount } from 'svelte';
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import ArrowLogo from "lucide-svelte/icons/move-up-right";
<script lang="ts">
import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import InfiniteLoading from "$lib/components/InfiniteLoading.svelte";
import { onMount } from "svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let isLoaded = false;
let rawData = []
let displayList = [];
export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let order = 'highToLow';
let isLoaded = false;
let rawData = [];
let displayList = [];
let order = "highToLow";
const sortByAmount = (tickerList) => {
return tickerList?.sort(function(a, b) {
if(order === 'highToLow')
{
return tickerList?.sort(function (a, b) {
if (order === "highToLow") {
return b?.amount - a?.amount;
}
else {
} else {
return a?.amount - b?.amount;
}
});
});
};
async function infiniteHandler({ detail: { loaded, complete } }) {
if (displayList?.length === rawData?.length) {
complete();
} else {
const nextIndex = displayList?.length;
const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
displayList = [...displayList, ...newArticles];
loaded();
}
}
async function infiniteHandler({ detail: { loaded, complete } })
{
if (displayList?.length === rawData?.length) {
complete();
} else {
const nextIndex = displayList?.length;
const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
displayList = [...displayList, ...newArticles];
loaded();
}
}
function formatDate(dateString) {
const date = new Date(dateString);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-based
const day = date.getDate().toString().padStart(2, '0');
const month = (date.getMonth() + 1).toString().padStart(2, "0"); // Months are zero-based
const day = date.getDate().toString().padStart(2, "0");
const hours = date.getHours() % 12 || 12; // Convert to 12-hour format
const minutes = date.getMinutes().toString().padStart(2, '0');
const ampm = date.getHours() >= 12 ? 'PM' : 'AM';
const minutes = date.getMinutes().toString().padStart(2, "0");
const ampm = date.getHours() >= 12 ? "PM" : "AM";
return `${year}/${month}/${day} ${hours}:${minutes} ${ampm}`;
}
onMount(() => {
rawData = data?.getCorporateLobbyingTracker ?? [];
displayList = rawData?.slice(0,50) ?? []
isLoaded = true;
})
function changeOrder(state:string) {
if (state === 'highToLow')
{
order = 'lowToHigh';
}
else {
order = 'highToLow';
onMount(() => {
rawData = data?.getCorporateLobbyingTracker ?? [];
displayList = rawData?.slice(0, 50) ?? [];
isLoaded = true;
});
function changeOrder(state: string) {
if (state === "highToLow") {
order = "lowToHigh";
} else {
order = "highToLow";
}
displayList = sortByAmount(rawData)?.slice(0, 50);
}
displayList = sortByAmount(rawData)?.slice(0,50);
$: charNumber = $screenWidth < 640 ? 15 : 20;
</script>
}
$: charNumber = $screenWidth < 640 ? 15 : 20;
</script>
<svelte:head>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Latest Lobbiyng Disclosure Tracker · stocknear
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Latest
Lobbiyng Disclosure Tracker · stocknear
</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 -->
<meta property="og:title" 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"/>
<meta
property="og:title"
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 -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`Latest Lobbiyng Disclosure Tracker · stocknear`}/>
<meta name="twitter:description" content={`Track the latest senate lobbying spending of US companies.`} />
<meta name="twitter:card" content="summary_large_image" />
<meta
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 -->
</svelte:head>
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Corporate Lobbying Tracker</li>
</ul>
</div>
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
<div class="relative flex justify-center items-start overflow-hidden w-full">
</svelte:head>
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
>
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Corporate Lobbying Tracker</li>
</ul>
</div>
<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="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column -->
<div>
<div class="flex flex-row justify-center items-center">
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
Lobbying Tracker
</h1>
</div>
<span class="text-white text-md font-medium text-center flex justify-center items-center ">
Track the latest lobbying spendings of US stock companies
</span>
</div>
<!-- End Column -->
<!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
</svg>
<div class="z-1 absolute top-4">
<img class="w-fit" src={cloudFrontUrl+'/assets/lobbying_logo.png'} alt="logo" loading="lazy">
</div>
</div>
<!-- End Column -->
</div>
</div>
{#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 rounded-none sm:rounded-lg mb-4 overflow-x-scroll lg:overflow-hidden">
<table class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
<thead>
<tr class="bg-[#09090B] border-b border-[#27272A]">
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
Date
</th>
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
Symbol
</th>
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
Name
</th>
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Sector
</th>
<th on:click={() => { changeOrder(order); }} class="cursor-pointer text-end bg-[#09090B] text-white text-[1rem] font-semibold">
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>
</th>
</tr>
</thead>
<tbody>
{#each displayList as item, index}
<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]' : ''}">
<td class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap">
{formatDate(item?.date)}
</td>
<td 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}
</a>
</td>
<td 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 class="text-end text-sm sm:text-[1rem] font-medium text-white whitespace-nowrap">
{item?.sector}
</td>
<td class="text-white text-sm sm:text-[1rem] text-end">
${new Intl.NumberFormat("en", {
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}).format(item?.amount)}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
<UpgradeToPro data={data} title="Get the latest lobbying spendings in realtime of US stock companies"/>
{:else}
<div class="flex justify-center items-center h-80">
<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">
<span class="loading loading-spinner loading-md text-gray-400"></span>
</label>
</div>
</div>
{/if}
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</div>
</div>
{/if}
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Wallstreet Analyst
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings.
</span>
</div>
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<div
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column -->
<div>
<div class="flex flex-row justify-center items-center">
<h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
Lobbying Tracker
</h1>
</div>
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Congress Trading
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Congress trading insights.
</span>
</div>
<span
class="text-white text-md font-medium text-center flex justify-center items-center"
>
Track the latest lobbying spendings of US stock companies
</span>
</div>
<!-- End Column -->
<!-- Start Column -->
<div
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
>
<svg
class="w-40 -my-5"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow" />
<feMerge>
<feMergeNode in="glow" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg>
<div class="z-1 absolute top-4">
<img
class="w-fit"
src={cloudFrontUrl + "/assets/lobbying_logo.png"}
alt="logo"
loading="lazy"
/>
</div>
</div>
<!-- End Column -->
</div>
</div>
</aside>
{#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 rounded-none sm:rounded-lg mb-4 overflow-x-scroll lg:overflow-hidden"
>
<table
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
>
<thead>
<tr class="bg-[#09090B] border-b border-[#27272A]">
<th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
>
Date
</th>
<th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
>
Symbol
</th>
<th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
>
Name
</th>
</div>
<th
class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"
>
Sector
</th>
<th
on:click={() => {
changeOrder(order);
}}
class="cursor-pointer text-end bg-[#09090B] text-white text-[1rem] font-semibold"
>
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
>
</th>
</tr>
</thead>
<tbody>
{#each displayList as item, index}
<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]'
: ''}"
>
<td
class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap"
>
{formatDate(item?.date)}
</td>
<td
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}
</a>
</td>
<td
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
class="text-end text-sm sm:text-[1rem] font-medium text-white whitespace-nowrap"
>
{item?.sector}
</td>
<td class="text-white text-sm sm:text-[1rem] text-end">
${new Intl.NumberFormat("en", {
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}).format(item?.amount)}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
<UpgradeToPro
{data}
title="Get the latest lobbying spendings in realtime of US stock companies"
/>
{:else}
<div class="flex justify-center items-center h-80">
<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"
>
<span class="loading loading-spinner loading-md text-gray-400"
></span>
</label>
</div>
</div>
{/if}
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</a>
</div>
{/if}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/analysts"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Analyst 📊
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings
</span>
</a>
</div>
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/politicians"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Congress Trading 🇺🇸
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Congress trading insights.
</span>
</a>
</div>
</aside>
</div>
</div>
</section>
</div>
</section>

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

@ -1,9 +1,7 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import { onMount } from "svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import * as Card from "$lib/components/shadcn/card/index.ts";
export let data;
@ -12,7 +10,6 @@
let isLoaded = false;
let rawData = data?.getCramerTracker ?? [];
let displayList = rawData?.slice(0, 50) ?? [];
let cumulativeList = [];
let winRate;
function sectorSelector(sector) {
@ -421,10 +418,10 @@
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
on:click={() => goto("/pricing")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
@ -436,15 +433,17 @@
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</div>
</a>
</div>
{/if}
<div
on:click={() => goto("/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"
>
<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">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Reddit Tracker 🚀
@ -454,14 +453,16 @@
<span class="text-white p-3 ml-3 mr-3">
Get the latest trends of r/Wallstreetbets
</span>
</div>
</a>
</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"
>
<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">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Sentiment Tracker <svg
@ -491,7 +492,7 @@
<span class="text-white p-3 ml-3 mr-3">
Follow the daily trends of retail investors
</span>
</div>
</a>
</div>
</aside>
</div>

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

@ -9,7 +9,6 @@
} from "date-fns";
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
import dividendsLogo from "$lib/images/dividends_calendar_logo.png";
import { goto } from "$app/navigation";
import { abbreviateNumber } from "$lib/utils";
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">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
on:click={() => goto("/pricing")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</div>
</a>
</div>
{/if}
<div
on:click={() => goto("/earnings-calendar")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<a
href={"/earnings-calendar"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Earnings Calendar 🌟
@ -615,14 +616,16 @@
<span class="text-white p-3 ml-3 mr-3">
Get the latest Earnings of companies
</span>
</div>
</a>
</div>
<div
on:click={() => goto("/economic-calendar")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<a
href={"/economic-calendar"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Economic Events 🌍
@ -632,7 +635,7 @@
<span class="text-white p-3 ml-3 mr-3">
Stay updated on upcoming Economic Events worldwide.
</span>
</div>
</a>
</div>
</aside>
</div>

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

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

@ -1,321 +1,328 @@
<script lang='ts'>
import { numberOfUnreadNotification } from '$lib/store';
import { page } from '$app/stores';
import { industryList } from '$lib/utils';
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { goto } from '$app/navigation';
<script lang="ts">
import { numberOfUnreadNotification } from "$lib/store";
import { page } from "$app/stores";
import { industryList } from "$lib/utils";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
export let data;
export let data;
function formatFilename(industryName) {
let formattedName = industryName?.replace(/ /g, '-')
.replace(/&/g, 'and')
.replace(/-{2,}/g, '-')
.toLowerCase();
function formatFilename(industryName) {
let formattedName = industryName
?.replace(/ /g, "-")
.replace(/&/g, "and")
.replace(/-{2,}/g, "-")
.toLowerCase();
return formattedName;
}
}
let navigationIndustry = industryList.map(industry => ({
let navigationIndustry = industryList.map((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 = [
{
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 => {
navigation = [...navigationIndustry, ...navigation];
let updatedNavigation = navigation?.map((item) => {
return {
...item,
link: item.link + '/'
...item,
link: item.link + "/",
};
});
});
const combinedNavigation = navigation?.concat(updatedNavigation);
const combinedNavigation = navigation?.concat(updatedNavigation);
</script>
<svelte:head>
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Stock Lists · stocknear</title>
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Stock
Lists · stocknear</title
>
<meta charset="utf-8" />
<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 -->
<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 property="og:type" content="website"/>
<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 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="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:card" content="summary_large_image" />
<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."
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40">
<div class="text-sm sm:text-[1rem] breadcrumbs ml-3 lg:ml-10">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
{#if $page.url.pathname.startsWith('/list/industry')}
<li><a href="/industry" class="text-gray-300">Industry</a></li>
{:else}
<li><a href="/list/" class="text-gray-300">Lists</a></li>
{/if}
{#if $page.url.pathname.startsWith('/list/')}
<li>
<span class="text-gray-300">
{combinedNavigation?.find((item) => item?.link === $page.url.pathname)?.title}
</span>
</li>
{/if}
</ul>
<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">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
{#if $page.url.pathname.startsWith("/list/industry")}
<li><a href="/industry" class="text-gray-300">Industry</a></li>
{:else}
<li><a href="/list/" class="text-gray-300">Lists</a></li>
{/if}
{#if $page.url.pathname.startsWith("/list/")}
<li>
<span class="text-gray-300">
{combinedNavigation?.find(
(item) => item?.link === $page.url.pathname,
)?.title}
</span>
</li>
{/if}
</ul>
</div>
<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-->
<div class="flex flex-col justify-center items-center">
<div class="ml-2 text-start w-full text-white mb-2">
{#each navigation as item}
{#if item?.link === $page.url.pathname}
<span class="font-bold text-2xl">
{item?.title}
</span>
{/if}
{/each}
</div>
<div class="border-b mt-2 border-blue-400 w-full mb-7" />
<div class="flex justify-center w-full m-auto overflow-hidden">
<main class="w-full lg:w-3/4 lg:pr-10">
<slot />
</main>
<aside class="hidden lg:block relative fixed w-1/4 -mt-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</a>
</div>
{/if}
<div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] px-3 lg:px-10 overflow-hidden">
<!--Start Top Winners/Losers-->
<div class="flex flex-col justify-center items-center">
<div class="ml-2 text-start w-full text-white mb-2">
{#each navigation as item}
{#if item?.link === $page.url.pathname}
<span class="font-bold text-2xl">
{item?.title}
</span>
{/if}
{/each}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/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">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Watchlist ⭐
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<div class="border-b mt-2 border-blue-400 w-full mb-7" />
<div class="flex justify-center w-full m-auto overflow-hidden">
<main class="w-full lg:w-3/4 lg:pr-10">
<slot />
</main>
<aside class="hidden lg:block relative fixed w-1/4 -mt-4">
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</div>
</div>
{/if}
<div on:click={() => goto('/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 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Watchlist ⭐
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your watchlist to keep track of their performance.
</span>
</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 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks.
</span>
</div>
</div>
</aside>
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your watchlist to keep track of their performance.
</span>
</a>
</div>
</div>
</section>
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/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">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks.
</span>
</a>
</div>
</aside>
</div>
</div>
</div>
</section>

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

@ -1,5 +1,4 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import { onMount } from "svelte";
@ -249,7 +248,6 @@
<tbody>
{#each stockList as item, index}
<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 +
1 ===
stockList?.length && data?.user?.tier !== 'Pro'
@ -330,10 +328,10 @@
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
on:click={() => goto("/pricing")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
@ -345,15 +343,17 @@
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools
</span>
</div>
</a>
</div>
{/if}
<div
on:click={() => goto("/analysts")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<a
href={"/analysts"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Analyst 📊
@ -363,14 +363,16 @@
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings
</span>
</div>
</a>
</div>
<div
on:click={() => goto("/analysts/top-stocks")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<a
href={"/analysts/top-stocks"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Stocks Picks ⭐
@ -380,7 +382,7 @@
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings.
</span>
</div>
</a>
</div>
</aside>
</div>

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

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

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

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

@ -1,40 +1,37 @@
<script lang='ts'>
import ScrollToTop from '$lib/components/ScrollToTop.svelte';
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { goto } from '$app/navigation';
import { page } from '$app/stores';
<script lang="ts">
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { goto } from "$app/navigation";
import { page } from "$app/stores";
export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
function handleMode(i) {
function handleMode(i) {
activeIdx = i;
if(activeIdx === 0) {
goto("/watchlist/stocks")
if (activeIdx === 0) {
goto("/watchlist/stocks");
} else if (activeIdx === 1) {
goto("/watchlist/options")
goto("/watchlist/options");
}
}
const tabs = [
{
title: "Stocks",
},
{
title: "Options",
},
];
let activeIdx = 0;
{
title: "Stocks",
},
{
title: "Options",
},
];
let activeIdx = 0;
// 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;
} else if ($page.url.pathname.startsWith('/watchlist/options')) {
} else if ($page.url.pathname.startsWith("/watchlist/options")) {
activeIdx = 1;
}
}
</script>
<!-- HEADER FOR BETTER SEO -->
@ -43,159 +40,175 @@ let activeIdx = 0;
<meta name="viewport" content="width=device-width" />
</svelte:head>
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
>
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Watchlist</li>
</ul>
</div>
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
<div class="relative flex justify-center items-start overflow-hidden w-full">
<main class="w-full lg:w-3/4 lg:pr-5">
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column -->
<div>
<div class="flex flex-row justify-center items-center">
<h1 class="text-4xl sm:text-5xl text-white font-bold mb-5">
Watchlist
</h1>
</div>
<span 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>
</div>
<!-- End Column -->
<!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
</svg>
<div class="z-1 absolute top-3 right-10 ">
<img class="w-24" src={cloudFrontUrl+(activeIdx === 0 ? "/assets/watchlist_logo.png" : "/assets/options_logo.png") } alt="logo" loading='lazy'>
</div>
</div>
<!-- End Column -->
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<div
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column -->
<div>
<div class="flex flex-row justify-center items-center">
<h1 class="text-4xl sm:text-5xl text-white font-bold mb-5">
Watchlist
</h1>
</div>
<span
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>
</div>
<!-- End Column -->
<!-- Start Column -->
<div
class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
>
<svg
class="w-40 -my-5"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow" />
<feMerge>
<feMergeNode in="glow" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg>
<div class="bg-[#313131] w-52 sm:w-fit relative m-auto sm:m-0 sm:mr-auto flex sm:flex-wrap items-center justify-center rounded-lg p-1 -mt-3">
{#each tabs as item, i}
<a href={i === 0 ? '/watchlist/stocks' : '/watchlist/options'}
on:click={() => handleMode(i)}
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
? 'z-0'
: ''} "
>
{#if activeIdx === i}
<div
class="absolute inset-0 rounded-lg bg-purple-600"
></div>
{/if}
<span class="relative text-[1rem] sm:text-lg block font-semibold duration-200 text-white">
{item.title}
</span>
</a>
{/each}
</div>
<div class="sm:border-b mt-5 border-slate-700" />
<slot />
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
<div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</div>
<div 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"
/>
</div>
</div>
<!-- End Column -->
</div>
</div>
<div
class="bg-[#313131] w-52 sm:w-fit relative m-auto sm:m-0 sm:mr-auto flex sm:flex-wrap items-center justify-center rounded-lg p-1 -mt-3"
>
{#each tabs as item, i}
<a
href={i === 0 ? "/watchlist/stocks" : "/watchlist/options"}
on:click={() => handleMode(i)}
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx ===
i
? 'z-0'
: ''} "
>
{#if activeIdx === i}
<div class="absolute inset-0 rounded-lg bg-purple-600"></div>
{/if}
<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 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Price Alert ⏰
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Customize your alerts to never miss out again
</span>
</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 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks.
</span>
</div>
</div>
</aside>
<span
class="relative text-[1rem] sm:text-lg block font-semibold duration-200 text-white"
>
{item.title}
</span>
</a>
{/each}
</div>
<div class="sm:border-b mt-5 border-slate-700" />
<slot />
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
on:click={() => goto("/pricing")}
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<div
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</div>
</div>
{/if}
<div
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">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Price Alert ⏰
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Customize your alerts to never miss out again
</span>
</a>
</div>
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/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">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks.
</span>
</a>
</div>
</aside>
</div>
</div>
</div>
</section>