refactor code
This commit is contained in:
MuslemRahimi
parent
a7af133376
commit
b2d943a0cc
@ -1,131 +1,195 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { scoreComponent, stockTicker } from '$lib/store';
|
import { scoreComponent, stockTicker } from "$lib/store";
|
||||||
|
|
||||||
export let score;
|
export let score;
|
||||||
export let tier;
|
export let tier;
|
||||||
|
|
||||||
// Use the correct reactive declaration
|
// Use the correct reactive declaration
|
||||||
$: {
|
$: {
|
||||||
if ($stockTicker && typeof window !== 'undefined') {
|
if ($stockTicker && typeof window !== "undefined") {
|
||||||
// Correctly check if score is neither undefined nor null
|
// Correctly check if score is neither undefined nor null
|
||||||
$scoreComponent = score !== undefined && score !== null && score !== 0;
|
$scoreComponent = score !== undefined && score !== null && score !== 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<section class="overflow-hidden text-white">
|
||||||
|
<main class="overflow-hidden">
|
||||||
|
<div class="w-full">
|
||||||
|
<div
|
||||||
|
class="flex flex-col items-center w-auto p-4 sm:p-4 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative"
|
||||||
|
>
|
||||||
|
<div class="relative">
|
||||||
|
<h3 class="text-center text-white text-sm sm:text-[1rem] mb-2">
|
||||||
|
AI Score
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<label
|
||||||
|
for="scoreInfo"
|
||||||
|
class="absolute -top-3 -right-4 cursor-pointer border border-gray-900 rounded-full bg-[#242424] sm:hover:bg-[#313131] duration-100 p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-[8px] w-[8px]"
|
||||||
|
viewBox="0 0 4 16"
|
||||||
|
fill="white"
|
||||||
|
style="max-width:20px"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section class="overflow-hidden text-white">
|
<div class="flex flex-row items-center justify-between">
|
||||||
<main class="overflow-hidden ">
|
<div class="relative size-[50px] sm:size-[60px] ml-auto">
|
||||||
|
<svg
|
||||||
<div class="w-full">
|
class="size-full w-[50px] h-[50px] sm:w-[60px] sm:h-[60px]"
|
||||||
<div class="flex flex-col items-center w-auto p-4 sm:p-4 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative">
|
viewBox="0 0 36 36"
|
||||||
<div class="relative">
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<h3 class="text-center text-white text-sm sm:text-[1rem] mb-2">AI Score</h3>
|
>
|
||||||
|
<!-- Background Circle -->
|
||||||
<label for="scoreInfo" class="absolute -top-3 -right-4 cursor-pointer border border-gray-900 rounded-full bg-[#242424] sm:hover:bg-[#313131] duration-100 p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
|
<circle
|
||||||
<svg class="h-[8px] w-[8px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
|
cx="18"
|
||||||
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
|
cy="18"
|
||||||
</svg>
|
r="16"
|
||||||
</label>
|
fill="none"
|
||||||
</div>
|
class="stroke-current text-[#303030]"
|
||||||
|
stroke-width="2"
|
||||||
<div class="flex flex-row items-center justify-between">
|
></circle>
|
||||||
<div class="relative size-[50px] sm:size-[60px] ml-auto">
|
<!-- score Circle inside a group with rotation -->
|
||||||
<svg class="size-full w-[50px] h-[50px] sm:w-[60px] sm:h-[60px]" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
<g class="origin-center -rotate-90 transform">
|
||||||
<!-- Background Circle -->
|
<!-- score Circle -->
|
||||||
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#303030]" stroke-width="2"></circle>
|
<circle
|
||||||
<!-- score Circle inside a group with rotation -->
|
cx="18"
|
||||||
<g class="origin-center -rotate-90 transform">
|
cy="18"
|
||||||
<!-- score Circle -->
|
r="16"
|
||||||
<circle cx="18" cy="18" r="16" fill="none"
|
fill="none"
|
||||||
class="stroke-current {score >= 7 ? 'text-[#37C97D]' : score >=4 ? 'text-[#FF9E21]' : 'text-[#FF2F1F]'}"
|
class="stroke-current {score >= 7
|
||||||
stroke-width="3"
|
? 'text-[#37C97D]'
|
||||||
stroke-dasharray="100.48"
|
: score >= 4
|
||||||
stroke-dashoffset="{100.48 - ((tier === 'Pro' || ['AAPL','NVDA','GOOGL','META','AMD']?.includes($stockTicker) ? score : 0) / 10) * 100.48}">
|
? 'text-[#FF9E21]'
|
||||||
</circle>
|
: 'text-[#FF2F1F]'}"
|
||||||
</g>
|
stroke-width="3"
|
||||||
<!-- Text in the middle -->
|
stroke-dasharray="100.48"
|
||||||
<text x="18" y="21" text-anchor="middle" font-size="10" fill="#000">{tier === 'Pro' || ['AAPL','NVDA','GOOGL','META','AMD']?.includes($stockTicker) ? score : 0}</text>
|
stroke-dashoffset={100.48 -
|
||||||
</svg>
|
((tier === "Pro" ||
|
||||||
|
["AAPL", "NVDA", "GOOGL", "META", "AMD"]?.includes(
|
||||||
<!-- Percentage Text -->
|
$stockTicker,
|
||||||
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
|
)
|
||||||
{#if tier === 'Pro' || ['AAPL','NVDA','GOOGL','META','AMD']?.includes($stockTicker) }
|
? score
|
||||||
<span class="text-center text-white text-xl font-semibold">
|
: 0) /
|
||||||
{score}
|
10) *
|
||||||
</span>
|
100.48}
|
||||||
{:else}
|
>
|
||||||
<a class="block relative" href="/pricing">
|
</circle>
|
||||||
<span class="text-base font-semibold text-blue-link blur group-hover:blur-[3px]">
|
</g>
|
||||||
XX
|
<!-- Text in the middle -->
|
||||||
</span>
|
<text
|
||||||
<div class="absolute top-0.5 flex items-center">
|
x="18"
|
||||||
<svg class="size-5 text-[#FBCE3C]"
|
y="21"
|
||||||
viewBox="0 0 20 20"
|
text-anchor="middle"
|
||||||
fill="currentColor"
|
font-size="10"
|
||||||
style="max-width: 40px;">
|
fill="#000"
|
||||||
<path fill-rule="evenodd"
|
>{tier === "Pro" ||
|
||||||
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
["AAPL", "NVDA", "GOOGL", "META", "AMD"]?.includes($stockTicker)
|
||||||
clip-rule="evenodd">
|
? score
|
||||||
</path>
|
: 0}</text
|
||||||
</svg>
|
>
|
||||||
</div>
|
</svg>
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<h4 class="text-center text-white text-sm mt-1 font-semibold {tier === 'Pro' || ['AAPL','NVDA','GOOGL','META','AMD']?.includes($stockTicker) ? '': 'invisible'}">
|
|
||||||
{#if score === 10}
|
|
||||||
Strong Buy
|
|
||||||
{:else if score >=7}
|
|
||||||
Buy
|
|
||||||
{:else if score >=4}
|
|
||||||
Hold
|
|
||||||
{:else if score >=2}
|
|
||||||
Sell
|
|
||||||
{:else}
|
|
||||||
Strong Sell
|
|
||||||
{/if}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Percentage Text -->
|
||||||
|
<div
|
||||||
|
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
|
||||||
|
>
|
||||||
|
{#if tier === "Pro" || ["AAPL", "NVDA", "GOOGL", "META", "AMD"]?.includes($stockTicker)}
|
||||||
|
<span class="text-center text-white text-xl font-semibold">
|
||||||
|
{score}
|
||||||
|
</span>
|
||||||
|
{:else}
|
||||||
|
<a class="block relative" href="/pricing">
|
||||||
|
<span
|
||||||
|
class="text-base font-semibold text-blue-link blur group-hover:blur-[3px]"
|
||||||
|
>
|
||||||
|
XX
|
||||||
|
</span>
|
||||||
|
<div class="absolute top-0.5 flex items-center">
|
||||||
|
<svg
|
||||||
|
class="size-5 text-[#FBCE3C]"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
style="max-width: 40px;"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
>
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4
|
||||||
|
class="text-center text-white text-sm mt-1 font-semibold {tier ===
|
||||||
|
'Pro' ||
|
||||||
|
['AAPL', 'NVDA', 'GOOGL', 'META', 'AMD']?.includes($stockTicker)
|
||||||
|
? ''
|
||||||
|
: 'invisible'}"
|
||||||
|
>
|
||||||
|
{#if score === 10}
|
||||||
|
Strong Buy
|
||||||
|
{:else if score >= 7}
|
||||||
|
Buy
|
||||||
|
{:else if score >= 4}
|
||||||
|
Hold
|
||||||
|
{:else if score >= 2}
|
||||||
|
Sell
|
||||||
|
{:else}
|
||||||
|
Strong Sell
|
||||||
|
{/if}
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Put this part before </body> tag -->
|
<!-- Put this part before </body> tag -->
|
||||||
<input type="checkbox" id="scoreInfo" class="modal-toggle" />
|
<input type="checkbox" id="scoreInfo" class="modal-toggle" />
|
||||||
|
|
||||||
|
<label
|
||||||
|
for="scoreInfo"
|
||||||
<label for="scoreInfo" class="modal modal-bottom sm:modal-middle cursor-pointer">
|
class="modal modal-bottom sm:modal-middle cursor-pointer"
|
||||||
|
>
|
||||||
<label for="scoreInfo" class="cursor-pointer modal-backdrop"></label>
|
<label for="scoreInfo" class="cursor-pointer modal-backdrop"></label>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||||
<label class="modal-box w-full relative bg-[#09090B] border border-gray-800 h-auto">
|
<label
|
||||||
<label for="scoreInfo" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-2xl text-white">
|
class="modal-box w-full relative bg-[#09090B] border border-gray-800 h-auto"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
for="scoreInfo"
|
||||||
|
class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-2xl text-white"
|
||||||
|
>
|
||||||
✕
|
✕
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<h3 class="text-2xl font-bold text-white">
|
<h3 class="text-2xl font-bold text-white">AI Score</h3>
|
||||||
AI Score
|
|
||||||
</h3>
|
|
||||||
<p class="py-4 text-gray-200 bg-[#09090B] w-full">
|
<p class="py-4 text-gray-200 bg-[#09090B] w-full">
|
||||||
Our AI model analyzes fundamental, technical, and statistical indicators to predict the probability of a bullish trend over the next three months.
|
Our AI model analyzes fundamental, technical, and statistical indicators
|
||||||
<br>
|
to predict the probability of a bullish trend over the next three months.
|
||||||
<br>
|
<br />
|
||||||
We regularly update and refine our models to deliver the most reliable forecasts for you.
|
<br />
|
||||||
|
We regularly update and refine our models to deliver the most reliable forecasts
|
||||||
|
for you.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<table class="table table-sm table-compact bg-[#09090B] w-full mt-5 mb-10 text-white">
|
<table
|
||||||
|
class="table table-sm table-compact bg-[#09090B] w-full mt-5 mb-10 text-white"
|
||||||
|
>
|
||||||
<!-- head -->
|
<!-- head -->
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||||
@ -159,10 +223,8 @@
|
|||||||
<td class="text-sm sm:text-[1rem] text-end">8</td>
|
<td class="text-sm sm:text-[1rem] text-end">8</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||||
<td class="text-sm sm:text-[1rem]">
|
<td class="text-sm sm:text-[1rem]"> +60% </td>
|
||||||
+60%
|
<td class="text-sm sm:text-[1rem]">Buy</td>
|
||||||
</td>
|
|
||||||
<td class="text-sm sm:text-[1rem]">Buy</td>
|
|
||||||
<td class="text-sm sm:text-[1rem] text-end">7</td>
|
<td class="text-sm sm:text-[1rem] text-end">7</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
||||||
@ -197,8 +259,5 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
</label>
|
</label>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
|||||||
@ -45,6 +45,7 @@ export const clearCache = () => {
|
|||||||
|
|
||||||
export const showCookieConsent = writable(<boolean>false);
|
export const showCookieConsent = writable(<boolean>false);
|
||||||
export const shouldUpdatePriceChart = writable(<boolean>false);
|
export const shouldUpdatePriceChart = writable(<boolean>false);
|
||||||
|
export const coolMode = writable(<boolean>false);
|
||||||
|
|
||||||
export const executiveClicked = writable(<boolean>false);
|
export const executiveClicked = writable(<boolean>false);
|
||||||
export const secFilingsClicked = writable(<boolean>false);
|
export const secFilingsClicked = writable(<boolean>false);
|
||||||
|
|||||||
@ -347,7 +347,7 @@ function handleTypeOfTrade(state:string)
|
|||||||
<svelte:window bind:scrollY={y} />
|
<svelte:window bind:scrollY={y} />
|
||||||
|
|
||||||
<body
|
<body
|
||||||
class="bg-[#09090B] w-full max-w-screen min-h-screen sm:max-w-7xl xl:max-w-screen-2xl overflow-hidden"
|
class="bg-[#09090B] w-full max-w-screen sm:max-w-7xl min-h-screen xl:max-w-screen-2xl overflow-hidden"
|
||||||
>
|
>
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex flex-col w-full mt-5 relative w-full">
|
<div class="flex flex-col w-full mt-5 relative w-full">
|
||||||
@ -554,7 +554,7 @@ function handleTypeOfTrade(state:string)
|
|||||||
</div>
|
</div>
|
||||||
<!--End Mobile Navbar-->
|
<!--End Mobile Navbar-->
|
||||||
|
|
||||||
<div class="pt-14 sm:pt-0 w-auto max-w-7xl px-3 sm:px-0">
|
<div class="pt-14 sm:pt-0 w-full max-w-7xl px-3 sm:px-0">
|
||||||
<div
|
<div
|
||||||
class="md:flex md:justify-between md:divide-x md:divide-slate-800"
|
class="md:flex md:justify-between md:divide-x md:divide-slate-800"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -1,11 +1,80 @@
|
|||||||
<section
|
<script lang="ts">
|
||||||
class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||||
>
|
|
||||||
<div class="h-full overflow-hidden">
|
|
||||||
<main class="w-full">
|
|
||||||
<div class="sm:ml-8 w-screen mb-2"></div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<slot />
|
export let data;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="w-auto overflow-hidden min-h-screen">
|
||||||
|
<div class="w-full overflow-hidden m-auto">
|
||||||
|
<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">
|
||||||
|
<slot />
|
||||||
|
</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={"/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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -132,16 +132,14 @@
|
|||||||
<!-- Add more Twitter meta tags as needed -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<section
|
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
|
||||||
class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
|
|
||||||
>
|
|
||||||
<div class="w-full flex h-full overflow-hidden">
|
<div class="w-full flex h-full overflow-hidden">
|
||||||
<div
|
<div
|
||||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||||
>
|
>
|
||||||
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||||
<div class="w-full mb-6">
|
<div class="w-full mb-6">
|
||||||
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4 w-full">
|
||||||
Dividends
|
Dividends
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
@ -191,7 +189,9 @@
|
|||||||
dividends for over 12 months.
|
dividends for over 12 months.
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
No dividend history available for {$displayCompanyName}.
|
<div class="w-full">
|
||||||
|
No dividend history available for {$displayCompanyName}.
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -43,7 +43,7 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-auto bg-[#09090B] overflow-hidden text-black h-full">
|
<section class="w-auto bg-[#09090B] overflow-hidden h-full">
|
||||||
<div class="m-auto h-full overflow-hidden">
|
<div class="m-auto h-full overflow-hidden">
|
||||||
<main class="w-full">
|
<main class="w-full">
|
||||||
<div class="m-auto">
|
<div class="m-auto">
|
||||||
|
|||||||
@ -0,0 +1,87 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||||
|
import { coolMode } from "$lib/store";
|
||||||
|
|
||||||
|
export let data;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="w-full overflow-hidden min-h-screen">
|
||||||
|
<div class="w-full overflow-hidden m-auto">
|
||||||
|
<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 {$coolMode ? 'lg:w-3/4' : 'w-full'} ">
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{#if $coolMode}
|
||||||
|
<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={"/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>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@ -2,6 +2,7 @@
|
|||||||
import { Chart } from "svelte-echarts";
|
import { Chart } from "svelte-echarts";
|
||||||
import {
|
import {
|
||||||
numberOfUnreadNotification,
|
numberOfUnreadNotification,
|
||||||
|
coolMode,
|
||||||
displayCompanyName,
|
displayCompanyName,
|
||||||
stockTicker,
|
stockTicker,
|
||||||
} from "$lib/store";
|
} from "$lib/store";
|
||||||
@ -27,7 +28,7 @@
|
|||||||
|
|
||||||
let displayStatement = "cashAndCashEquivalents";
|
let displayStatement = "cashAndCashEquivalents";
|
||||||
|
|
||||||
let mode = false;
|
$: $coolMode = false;
|
||||||
let timeFrame = "10Y";
|
let timeFrame = "10Y";
|
||||||
|
|
||||||
const statementConfig = [
|
const statementConfig = [
|
||||||
@ -198,7 +199,7 @@
|
|||||||
let namingList = statementConfig?.map((config) => config?.propertyName) || [];
|
let namingList = statementConfig?.map((config) => config?.propertyName) || [];
|
||||||
|
|
||||||
function toggleMode() {
|
function toggleMode() {
|
||||||
mode = !mode;
|
$coolMode = !$coolMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeStatement(event) {
|
function changeStatement(event) {
|
||||||
@ -406,7 +407,7 @@
|
|||||||
|
|
||||||
balanceSheet = filterStatement(fullStatement, timeFrame);
|
balanceSheet = filterStatement(fullStatement, timeFrame);
|
||||||
|
|
||||||
if (mode === true) {
|
if ($coolMode === true) {
|
||||||
optionsData = plotData();
|
optionsData = plotData();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -459,7 +460,7 @@
|
|||||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
|
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<h1 class="text-2xl text-gray-200 font-bold">
|
<h1 class="text-2xl text-gray-200 font-bold">
|
||||||
{#if mode}
|
{#if $coolMode}
|
||||||
{statementConfig?.find(
|
{statementConfig?.find(
|
||||||
(item) => item?.propertyName === displayStatement,
|
(item) => item?.propertyName === displayStatement,
|
||||||
)?.label}
|
)?.label}
|
||||||
@ -485,7 +486,7 @@
|
|||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
|
|
||||||
{#if mode}
|
{#if $coolMode}
|
||||||
{statementConfig?.find(
|
{statementConfig?.find(
|
||||||
(item) => item?.propertyName === displayStatement,
|
(item) => item?.propertyName === displayStatement,
|
||||||
)?.text}
|
)?.text}
|
||||||
@ -543,7 +544,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
|
class="mb-6 sm:mb-3 flex flex-row items-center w-full justify-end sm:justify-center mt-3 sm:mt-0"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
|
class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
|
||||||
@ -551,14 +552,14 @@
|
|||||||
<input
|
<input
|
||||||
on:click={toggleMode}
|
on:click={toggleMode}
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={mode}
|
checked={$coolMode}
|
||||||
value={mode}
|
value={$coolMode}
|
||||||
class="sr-only peer"
|
class="sr-only peer"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
|
class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
|
||||||
></div>
|
></div>
|
||||||
{#if mode}
|
{#if $coolMode}
|
||||||
<span class="ml-2 text-sm font-medium text-white">
|
<span class="ml-2 text-sm font-medium text-white">
|
||||||
Cool Mode
|
Cool Mode
|
||||||
</span>
|
</span>
|
||||||
@ -645,7 +646,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if mode}
|
{#if $coolMode}
|
||||||
<div class="sm:w-full">
|
<div class="sm:w-full">
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<select
|
<select
|
||||||
@ -730,24 +731,20 @@
|
|||||||
>
|
>
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border border-slate-800">
|
<tr class="border border-slate-800">
|
||||||
<th
|
<th class="text-white font-semibold text-start text-sm"
|
||||||
class="text-white font-semibold text-start text-sm sm:text-[1rem]"
|
|
||||||
>{filterRule === "annual"
|
>{filterRule === "annual"
|
||||||
? "Fiscal Year End"
|
? "Fiscal Year End"
|
||||||
: "Quarter Ends"}</th
|
: "Quarter Ends"}</th
|
||||||
>
|
>
|
||||||
<th
|
<th class="text-white font-semibold text-end text-sm"
|
||||||
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
|
|
||||||
>{statementConfig?.find(
|
>{statementConfig?.find(
|
||||||
(item) => item?.propertyName === displayStatement,
|
(item) => item?.propertyName === displayStatement,
|
||||||
)?.label}</th
|
)?.label}</th
|
||||||
>
|
>
|
||||||
<th
|
<th class="text-white font-semibold text-end text-sm"
|
||||||
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
|
|
||||||
>Change</th
|
>Change</th
|
||||||
>
|
>
|
||||||
<th
|
<th class="text-white font-semibold text-end text-sm"
|
||||||
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
|
|
||||||
>Growth</th
|
>Growth</th
|
||||||
>
|
>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@ -2,6 +2,8 @@
|
|||||||
import { stockTicker, screenWidth } from "$lib/store";
|
import { stockTicker, screenWidth } from "$lib/store";
|
||||||
import { page } from "$app/stores";
|
import { page } from "$app/stores";
|
||||||
|
|
||||||
|
export let data;
|
||||||
|
|
||||||
let displaySubSection = "";
|
let displaySubSection = "";
|
||||||
|
|
||||||
if (!displaySubSection || displaySubSection.length === 0) {
|
if (!displaySubSection || displaySubSection.length === 0) {
|
||||||
@ -37,10 +39,8 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section
|
<section class="w-full bg-[#09090B] overflow-hidden h-full">
|
||||||
class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
<div class="h-full overflow-hidden w-full">
|
||||||
>
|
|
||||||
<div class="h-full overflow-hidden">
|
|
||||||
<main class="w-full">
|
<main class="w-full">
|
||||||
<div
|
<div
|
||||||
class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640
|
class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640
|
||||||
|
|||||||
@ -0,0 +1,80 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||||
|
|
||||||
|
export let data;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="w-full overflow-hidden min-h-screen">
|
||||||
|
<div class="w-full overflow-hidden m-auto">
|
||||||
|
<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">
|
||||||
|
<slot />
|
||||||
|
</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={"/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>
|
||||||
@ -1,292 +1,422 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from "svelte";
|
||||||
import { displayCompanyName, numberOfUnreadNotification, stockTicker } from '$lib/store';
|
import {
|
||||||
import { getPartyForPoliticians } from '$lib/utils';
|
displayCompanyName,
|
||||||
|
numberOfUnreadNotification,
|
||||||
|
stockTicker,
|
||||||
|
} from "$lib/store";
|
||||||
|
import { getPartyForPoliticians } from "$lib/utils";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let rawData = data?.getSenateTrading;
|
let rawData = data?.getSenateTrading;
|
||||||
let buySellRatio = 0;
|
let buySellRatio = 0;
|
||||||
let partyRatio = 0
|
let partyRatio = 0;
|
||||||
let senateTradingList = [];
|
let senateTradingList = [];
|
||||||
let isLoaded = false;
|
let isLoaded = false;
|
||||||
let images = {};
|
let images = {};
|
||||||
|
|
||||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||||
|
|
||||||
|
function backToTop() {
|
||||||
function backToTop() {
|
|
||||||
window.scrollTo({
|
window.scrollTo({
|
||||||
top: 0,
|
top: 0,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function handleScroll() {
|
||||||
|
|
||||||
async function handleScroll() {
|
|
||||||
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
if (isBottom && senateTradingList?.length !== rawData?.length) {
|
if (isBottom && senateTradingList?.length !== rawData?.length) {
|
||||||
const nextIndex = senateTradingList?.length;
|
const nextIndex = senateTradingList?.length;
|
||||||
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||||
senateTradingList = [...senateTradingList, ...filteredNewResults];
|
senateTradingList = [...senateTradingList, ...filteredNewResults];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
onMount(async () => {
|
rawData.forEach((item) => {
|
||||||
|
const representative = item?.representative || "";
|
||||||
|
const fullName = representative
|
||||||
rawData.forEach(item => {
|
.replace(/(\s(?:Dr\s)?\w(?:\.|(?=\s)))?\s/g, "_")
|
||||||
const representative = item?.representative || '';
|
.trim();
|
||||||
const fullName = representative.replace(/(\s(?:Dr\s)?\w(?:\.|(?=\s)))?\s/g, '_').trim();
|
item.representative = fullName.replace(/_/g, " ");
|
||||||
item.representative = fullName.replace(/_/g, ' ');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
rawData = rawData?.map(item => {
|
rawData = rawData?.map((item) => {
|
||||||
const party = getPartyForPoliticians(item?.representative);
|
const party = getPartyForPoliticians(item?.representative);
|
||||||
return {
|
return {
|
||||||
...item,
|
...item,
|
||||||
party: party
|
party: party,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
// Count the occurrences of "Republican" and "Democrat"
|
// Count the occurrences of "Republican" and "Democrat"
|
||||||
const partyCounts = rawData.reduce((counts, item) => {
|
const partyCounts = rawData.reduce((counts, item) => {
|
||||||
counts[item?.party] = (counts[item?.party] || 0) + 1;
|
counts[item?.party] = (counts[item?.party] || 0) + 1;
|
||||||
return counts;
|
return counts;
|
||||||
}, {});
|
}, {});
|
||||||
|
|
||||||
const typeCounts = rawData.reduce((counts, item) => {
|
const typeCounts = rawData.reduce((counts, item) => {
|
||||||
counts[item?.type] = (counts[item?.type ] || 0) + 1;
|
counts[item?.type] = (counts[item?.type] || 0) + 1;
|
||||||
return counts;
|
return counts;
|
||||||
}, {});
|
}, {});
|
||||||
|
|
||||||
partyRatio = partyCounts['Democratic'] > 0 && partyCounts['Republican'] === undefined ? 1 : partyCounts['Democratic'] === undefined ? 0 : partyCounts["Democratic"] / partyCounts["Republican"];
|
partyRatio =
|
||||||
buySellRatio = typeCounts['Bought'] > 0 && typeCounts['Sold'] === undefined ? 1 : typeCounts['Bought'] === undefined ? 0 : typeCounts["Bought"] / typeCounts["Sold"];
|
partyCounts["Democratic"] > 0 && partyCounts["Republican"] === undefined
|
||||||
|
? 1
|
||||||
|
: partyCounts["Democratic"] === undefined
|
||||||
|
? 0
|
||||||
|
: partyCounts["Democratic"] / partyCounts["Republican"];
|
||||||
|
buySellRatio =
|
||||||
|
typeCounts["Bought"] > 0 && typeCounts["Sold"] === undefined
|
||||||
|
? 1
|
||||||
|
: typeCounts["Bought"] === undefined
|
||||||
|
? 0
|
||||||
|
: typeCounts["Bought"] / typeCounts["Sold"];
|
||||||
|
|
||||||
senateTradingList = rawData.slice(0, 20) ?? [];
|
senateTradingList = rawData.slice(0, 20) ?? [];
|
||||||
|
|
||||||
isLoaded = true;
|
isLoaded = true;
|
||||||
|
|
||||||
window.addEventListener('scroll', handleScroll);
|
window.addEventListener("scroll", handleScroll);
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('scroll', handleScroll);
|
window.removeEventListener("scroll", handleScroll);
|
||||||
};
|
};
|
||||||
|
});
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<title>
|
<title>
|
||||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) US Congress & Senate Trading · stocknear
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||||
|
{$displayCompanyName} ({$stockTicker}) US Congress & Senate Trading ·
|
||||||
|
stocknear
|
||||||
</title>
|
</title>
|
||||||
<meta name="description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`} />
|
<meta
|
||||||
|
name="description"
|
||||||
|
content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- Other meta tags -->
|
<!-- Other meta tags -->
|
||||||
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}/>
|
<meta
|
||||||
<meta property="og:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`} />
|
property="og:title"
|
||||||
<meta property="og:type" content="website"/>
|
content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
|
||||||
|
/>
|
||||||
|
<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={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}/>
|
<meta
|
||||||
<meta name="twitter:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`} />
|
name="twitter:title"
|
||||||
|
content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
name="twitter:description"
|
||||||
|
content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
|
||||||
|
/>
|
||||||
<!-- Add more Twitter meta tags as needed -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
|
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
|
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
|
||||||
|
<div class="h-full overflow-hidden w-full">
|
||||||
|
<div class="relative flex justify-center items-center overflow-hidden">
|
||||||
|
<div class="sm:p-7 w-full mt-2 sm:mt-0">
|
||||||
|
<div class="mb-6">
|
||||||
|
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
||||||
|
Congress Trading
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
|
||||||
|
>
|
||||||
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
|
<svg
|
||||||
<div class="h-full overflow-hidden">
|
class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
|
||||||
<div class="relative flex justify-center items-center overflow-hidden">
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<div class="sm:p-7 w-full mt-2 sm:mt-0">
|
viewBox="0 0 256 256"
|
||||||
<div class="mb-6">
|
><path
|
||||||
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
fill="#a474f6"
|
||||||
Congress Trading
|
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"
|
||||||
</h1>
|
/></svg
|
||||||
|
>
|
||||||
|
Get detailed insights of Corrupt US Politician 🇺🇸 who bought or sold
|
||||||
<div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
|
{$displayCompanyName} and the amounts involved!
|
||||||
<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>
|
</div>
|
||||||
Get detailed insights of Corrupt US Politician 🇺🇸 who bought or sold {$displayCompanyName} and the amounts involved!
|
</div>
|
||||||
|
{#if isLoaded}
|
||||||
</div>
|
{#if senateTradingList?.length !== 0}
|
||||||
|
<h3 class="text-white text-xl font-semibold">
|
||||||
|
Congress Statistics
|
||||||
|
</h3>
|
||||||
|
<!--Start Widget-->
|
||||||
|
<div
|
||||||
|
class="w-full mt-5 mb-10 m-auto flex justify-center items-center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3"
|
||||||
|
>
|
||||||
|
<!--Start Buy/Sell-->
|
||||||
|
<div
|
||||||
|
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col items-start">
|
||||||
|
<span
|
||||||
|
class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
|
||||||
|
>Buy/Sell</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="text-start text-sm sm:text-[1rem] font-medium text-white"
|
||||||
|
>
|
||||||
|
{buySellRatio?.toFixed(3)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<!-- Circular Progress -->
|
||||||
|
<div class="relative size-14 ml-auto">
|
||||||
|
<svg
|
||||||
|
class="size-full w-14 h-14"
|
||||||
|
viewBox="0 0 36 36"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<!-- Background Circle -->
|
||||||
|
<circle
|
||||||
|
cx="18"
|
||||||
|
cy="18"
|
||||||
|
r="16"
|
||||||
|
fill="none"
|
||||||
|
class="stroke-current text-[#3E3E3E]"
|
||||||
|
stroke-width="3"
|
||||||
|
></circle>
|
||||||
|
<!-- Progress Circle inside a group with rotation -->
|
||||||
|
<g class="origin-center -rotate-90 transform">
|
||||||
|
<circle
|
||||||
|
cx="18"
|
||||||
|
cy="18"
|
||||||
|
r="16"
|
||||||
|
fill="none"
|
||||||
|
class="stroke-current {buySellRatio >= 0.5
|
||||||
|
? 'text-[#00FC50]'
|
||||||
|
: 'text-[#EE5365]'} "
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-dasharray="100"
|
||||||
|
stroke-dashoffset={100 - buySellRatio * 100 >= 0
|
||||||
|
? 100 - (buySellRatio * 100)?.toFixed(2)
|
||||||
|
: 0}
|
||||||
|
></circle>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<!-- Percentage Text -->
|
||||||
|
<div
|
||||||
|
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="text-center text-white text-sm sm:text-[1rem]"
|
||||||
|
>{buySellRatio?.toFixed(2)}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
{#if isLoaded}
|
</div>
|
||||||
|
<!-- End Circular Progress -->
|
||||||
|
|
||||||
|
|
||||||
{#if senateTradingList?.length !== 0}
|
|
||||||
|
|
||||||
<h3 class="text-white text-xl font-semibold ">
|
|
||||||
Congress Statistics
|
|
||||||
</h3>
|
|
||||||
<!--Start Widget-->
|
|
||||||
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
|
|
||||||
<div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
|
|
||||||
|
|
||||||
<!--Start Buy/Sell-->
|
|
||||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20">
|
|
||||||
<div class="flex flex-col items-start">
|
|
||||||
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Buy/Sell</span>
|
|
||||||
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
|
|
||||||
{buySellRatio?.toFixed(3)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<!-- Circular Progress -->
|
|
||||||
<div class="relative size-14 ml-auto">
|
|
||||||
<svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<!-- Background Circle -->
|
|
||||||
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
|
|
||||||
<!-- Progress Circle inside a group with rotation -->
|
|
||||||
<g class="origin-center -rotate-90 transform">
|
|
||||||
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current {buySellRatio >=0.5 ? 'text-[#00FC50]' : 'text-[#EE5365]'} " stroke-width="3" stroke-dasharray="100" stroke-dashoffset={(100- buySellRatio*100) >= 0 ? 100-(buySellRatio*100)?.toFixed(2) : 0}></circle>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<!-- Percentage Text -->
|
|
||||||
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
|
|
||||||
<span class="text-center text-white text-sm sm:text-[1rem]">{buySellRatio?.toFixed(2)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- End Circular Progress -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!--End Buy/Sell-->
|
|
||||||
<!--Start Dem/Rep-->
|
|
||||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20">
|
|
||||||
<div class="flex flex-col items-start">
|
|
||||||
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Dem/Rep</span>
|
|
||||||
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
|
|
||||||
{partyRatio?.toFixed(3)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<!-- Circular Progress -->
|
|
||||||
<div class="relative size-14 ml-auto">
|
|
||||||
<svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<!-- Background Circle -->
|
|
||||||
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
|
|
||||||
<!-- Progress Circle inside a group with rotation -->
|
|
||||||
<g class="origin-center -rotate-90 transform">
|
|
||||||
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-blue-500" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={(100-partyRatio*100) >=0 ? 100-(partyRatio*100)?.toFixed(2) : 0}></circle>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<!-- Percentage Text -->
|
|
||||||
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
|
|
||||||
<span class="text-center text-white text-sm sm:text-[1rem]">{partyRatio?.toFixed(2)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- End Circular Progress -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!--End Put/Call-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--End Widget-->
|
|
||||||
|
|
||||||
|
|
||||||
<div class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll">
|
|
||||||
<table class="table table-sm sm:table-md table-compact 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="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold">
|
|
||||||
Person
|
|
||||||
</th>
|
|
||||||
<th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
|
|
||||||
Transaction Date
|
|
||||||
</th>
|
|
||||||
<th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
|
|
||||||
Amount
|
|
||||||
</th>
|
|
||||||
<th class="shadow-md text-white font-semibold text-end text-sm">Type</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{#each senateTradingList as item}
|
|
||||||
<tr class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]">
|
|
||||||
|
|
||||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<div class="flex-shrink-0 rounded-full border border-slate-700 w-10 h-10 sm:w-12 sm:h-12 relative {item?.party === 'Republican' ? 'bg-[#98272B]' : item?.party === 'Democratic' ? 'bg-[#295AC7]' : 'bg-[#4E2153]'} flex items-center justify-center">
|
|
||||||
|
|
||||||
<img style="clip-path: circle(50%);" class="avatar rounded-full w-7 sm:w-9" src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`} loading="lazy"/>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col ml-3">
|
|
||||||
<a href={`/politicians/${item?.id}`} class="sm:hover:text-white text-blue-400">{item?.representative?.replace('_',' ')}</a>
|
|
||||||
<span class="">{item?.party}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--{item?.firstName} {item?.lastName}-->
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
|
|
||||||
{new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
|
|
||||||
{item?.amount}
|
|
||||||
</td>
|
|
||||||
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
|
|
||||||
{#if item?.type === 'Bought'}
|
|
||||||
<span class="text-[#37C97D]">Bought</span>
|
|
||||||
{:else if item?.type === 'Sold'}
|
|
||||||
<span class="text-[#FF2F1F]">Sold</span>
|
|
||||||
{:else if item?.type === 'Exchange'}
|
|
||||||
<span class="text-[#C6A755]">Exchange</span>
|
|
||||||
{/if}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{#if rawData?.length >= 20}
|
|
||||||
<label on:click={backToTop} class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full">
|
|
||||||
Back to top
|
|
||||||
</label>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
{:else}
|
|
||||||
<h2 class="pl-4 pr-4 flex justify-center items-center text-md sm:text-lg text-center text-slate-200">
|
|
||||||
No trading history available for {$displayCompanyName}. Likely no corrupt politican has interest in this stock.
|
|
||||||
</h2>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{: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>
|
</div>
|
||||||
|
<!--End Buy/Sell-->
|
||||||
|
<!--Start Dem/Rep-->
|
||||||
|
<div
|
||||||
|
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col items-start">
|
||||||
|
<span
|
||||||
|
class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
|
||||||
|
>Dem/Rep</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="text-start text-sm sm:text-[1rem] font-medium text-white"
|
||||||
|
>
|
||||||
|
{partyRatio?.toFixed(3)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<!-- Circular Progress -->
|
||||||
|
<div class="relative size-14 ml-auto">
|
||||||
|
<svg
|
||||||
|
class="size-full w-14 h-14"
|
||||||
|
viewBox="0 0 36 36"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<!-- Background Circle -->
|
||||||
|
<circle
|
||||||
|
cx="18"
|
||||||
|
cy="18"
|
||||||
|
r="16"
|
||||||
|
fill="none"
|
||||||
|
class="stroke-current text-[#3E3E3E]"
|
||||||
|
stroke-width="3"
|
||||||
|
></circle>
|
||||||
|
<!-- Progress Circle inside a group with rotation -->
|
||||||
|
<g class="origin-center -rotate-90 transform">
|
||||||
|
<circle
|
||||||
|
cx="18"
|
||||||
|
cy="18"
|
||||||
|
r="16"
|
||||||
|
fill="none"
|
||||||
|
class="stroke-current text-blue-500"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-dasharray="100"
|
||||||
|
stroke-dashoffset={100 - partyRatio * 100 >= 0
|
||||||
|
? 100 - (partyRatio * 100)?.toFixed(2)
|
||||||
|
: 0}
|
||||||
|
></circle>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<!-- Percentage Text -->
|
||||||
|
<div
|
||||||
|
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="text-center text-white text-sm sm:text-[1rem]"
|
||||||
|
>{partyRatio?.toFixed(2)}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Circular Progress -->
|
||||||
|
</div>
|
||||||
|
<!--End Put/Call-->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!--End Widget-->
|
||||||
</section>
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
class="table table-sm sm:table-md table-compact 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="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold"
|
||||||
|
>
|
||||||
|
Person
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold"
|
||||||
|
>
|
||||||
|
Transaction Date
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold"
|
||||||
|
>
|
||||||
|
Amount
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="shadow-md text-white font-semibold text-end text-sm"
|
||||||
|
>Type</th
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#each senateTradingList as item}
|
||||||
|
<tr
|
||||||
|
class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<div
|
||||||
|
class="flex-shrink-0 rounded-full border border-slate-700 w-10 h-10 sm:w-12 sm:h-12 relative {item?.party ===
|
||||||
|
'Republican'
|
||||||
|
? 'bg-[#98272B]'
|
||||||
|
: item?.party === 'Democratic'
|
||||||
|
? 'bg-[#295AC7]'
|
||||||
|
: 'bg-[#4E2153]'} flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
style="clip-path: circle(50%);"
|
||||||
|
class="avatar rounded-full w-7 sm:w-9"
|
||||||
|
src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`}
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col ml-3">
|
||||||
|
<a
|
||||||
|
href={`/politicians/${item?.id}`}
|
||||||
|
class="sm:hover:text-white text-blue-400"
|
||||||
|
>{item?.representative?.replace("_", " ")}</a
|
||||||
|
>
|
||||||
|
<span class="">{item?.party}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--{item?.firstName} {item?.lastName}-->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
{new Date(item?.transactionDate)?.toLocaleString(
|
||||||
|
"en-US",
|
||||||
|
{
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
daySuffix: "2-digit",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
{item?.amount}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
{#if item?.type === "Bought"}
|
||||||
|
<span class="text-[#37C97D]">Bought</span>
|
||||||
|
{:else if item?.type === "Sold"}
|
||||||
|
<span class="text-[#FF2F1F]">Sold</span>
|
||||||
|
{:else if item?.type === "Exchange"}
|
||||||
|
<span class="text-[#C6A755]">Exchange</span>
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if rawData?.length >= 20}
|
||||||
|
<label
|
||||||
|
on:click={backToTop}
|
||||||
|
class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full"
|
||||||
|
>
|
||||||
|
Back to top
|
||||||
|
</label>
|
||||||
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<h2
|
||||||
|
class="pl-4 pr-4 flex justify-center items-center text-md sm:text-lg text-center text-slate-200"
|
||||||
|
>
|
||||||
|
No trading history available for {$displayCompanyName}. Likely no
|
||||||
|
corrupt politican has interest in this stock.
|
||||||
|
</h2>
|
||||||
|
{/if}
|
||||||
|
{: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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|||||||
@ -55,9 +55,7 @@
|
|||||||
|
|
||||||
<!-- Rest of the component remains the same -->
|
<!-- Rest of the component remains the same -->
|
||||||
|
|
||||||
<section
|
<section class="w-full bg-[#09090B] overflow-hidden h-full">
|
||||||
class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
|
||||||
>
|
|
||||||
<div class="m-auto h-full overflow-hidden">
|
<div class="m-auto h-full overflow-hidden">
|
||||||
<main class="w-fit sm:w-full sm:max-w-2xl">
|
<main class="w-fit sm:w-full sm:max-w-2xl">
|
||||||
<div class="m-auto">
|
<div class="m-auto">
|
||||||
|
|||||||
@ -88,9 +88,7 @@
|
|||||||
/>
|
/>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<section
|
<section class="bg-[#09090B] overflow-hidden text-white h-full w-full">
|
||||||
class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full"
|
|
||||||
>
|
|
||||||
<div class="flex justify-center m-auto h-full overflow-hidden w-full">
|
<div class="flex justify-center m-auto h-full overflow-hidden w-full">
|
||||||
<div
|
<div
|
||||||
class="relative flex justify-center items-center overflow-hidden w-full"
|
class="relative flex justify-center items-center overflow-hidden w-full"
|
||||||
|
|||||||
80
src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte
Normal file
80
src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||||
|
|
||||||
|
export let data;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="w-full overflow-hidden min-h-screen">
|
||||||
|
<div class="w-full overflow-hidden m-auto">
|
||||||
|
<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">
|
||||||
|
<slot />
|
||||||
|
</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={"/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>
|
||||||
@ -152,16 +152,14 @@
|
|||||||
<meta name="twitter:description" content={`Revenue & Geographic Breakdown`} />
|
<meta name="twitter:description" content={`Revenue & Geographic Breakdown`} />
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<section
|
<section class="bg-[#09090B] w-full overflow-hidden text-white h-full">
|
||||||
class="bg-[#09090B] w-full overflow-hidden text-white h-full pb-40 sm:mb-0"
|
|
||||||
>
|
|
||||||
<div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
|
<div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
|
||||||
<div
|
<div
|
||||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||||
>
|
>
|
||||||
{#if isLoaded}
|
{#if isLoaded}
|
||||||
<main class="w-full">
|
<main class="w-full">
|
||||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
|
<div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<h1 class="text-2xl text-gray-200 font-bold">
|
<h1 class="text-2xl text-gray-200 font-bold">
|
||||||
{convertToTitleCase(data?.getParams)} Revenue
|
{convertToTitleCase(data?.getParams)} Revenue
|
||||||
@ -191,15 +189,20 @@
|
|||||||
>
|
>
|
||||||
<th
|
<th
|
||||||
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
|
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
|
||||||
>% Change</th
|
>
|
||||||
|
Change
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
|
||||||
|
>Growth</th
|
||||||
>
|
>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each tableList as item}
|
{#each tableList as item, index}
|
||||||
<!-- row -->
|
<!-- row -->
|
||||||
<tr
|
<tr
|
||||||
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
|
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer"
|
||||||
>
|
>
|
||||||
<td
|
<td
|
||||||
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||||
@ -222,6 +225,18 @@
|
|||||||
: "-"}
|
: "-"}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
{#if Number(item?.value - tableList[index + 1]?.value)}
|
||||||
|
{abbreviateNumber(
|
||||||
|
item?.value - tableList[index + 1]?.value,
|
||||||
|
)}
|
||||||
|
{:else}
|
||||||
|
-
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
|
||||||
<td
|
<td
|
||||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
|
class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -1,11 +1,80 @@
|
|||||||
<section
|
<script lang="ts">
|
||||||
class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||||
>
|
|
||||||
<div class="h-full overflow-hidden">
|
|
||||||
<main class="w-full">
|
|
||||||
<div class="sm:ml-8 w-screen mb-2"></div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<slot />
|
export let data;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="w-full overflow-hidden min-h-screen">
|
||||||
|
<div class="w-full overflow-hidden m-auto">
|
||||||
|
<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">
|
||||||
|
<slot />
|
||||||
|
</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={"/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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -552,9 +552,7 @@
|
|||||||
<!-- Add more Twitter meta tags as needed -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<section
|
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
|
||||||
class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
|
|
||||||
>
|
|
||||||
<div class="w-full flex h-full overflow-hidden">
|
<div class="w-full flex h-full overflow-hidden">
|
||||||
<div
|
<div
|
||||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||||
|
|||||||
@ -4,13 +4,13 @@
|
|||||||
export let data;
|
export let data;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="w-full max-w-screen-2xl overflow-hidden min-h-screen lg:px-3">
|
<section class="w-full overflow-hidden min-h-screen">
|
||||||
<div class="w-full overflow-hidden m-auto">
|
<div class="w-full overflow-hidden m-auto">
|
||||||
<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">
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
@ -4,15 +4,13 @@
|
|||||||
export let data;
|
export let data;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section
|
<section class="w-full overflow-hidden min-h-screen">
|
||||||
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="w-full overflow-hidden m-auto">
|
||||||
>
|
|
||||||
<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">
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user