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

ui fix§

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-10 01:18:19 +01:00
parent 27560e9bef
commit bb3a09bc67
7 changed files with 464 additions and 728 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/lib/components/Table/OptionsFlowTable.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { screenWidth } from "$lib/store"; import { screenWidth } from "$lib/store";
import { abbreviateNumberWithColor } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
import VirtualList from "svelte-tiny-virtual-list"; import VirtualList from "svelte-tiny-virtual-list";
import HoverStockChart from "$lib/components/HoverStockChart.svelte"; import HoverStockChart from "$lib/components/HoverStockChart.svelte";
@ -234,12 +234,12 @@
} }
</script> </script>
<div class="w-full overflow-x-auto"> <div class="w-full overflow-x-auto text-muted dark:text-white">
<!-- Set a min-width on smaller screens so the grid can show all columns --> <!-- Set a min-width on smaller screens so the grid can show all columns -->
<div class="min-w-[1000px]"> <div class="min-w-[1000px]">
<!-- Header row using grid --> <!-- Header row using grid -->
<div <div
class="grid grid-cols-16 sticky top-0 z-40 border border-gray-800 bg-default text-white font-bold text-xs uppercase" class="grid grid-cols-16 sticky top-0 z-10 border border-gray-300 dark:border-gray-800 bg-white dark:bg-default font-bold text-xs uppercase"
> >
<div <div
on:click={() => sortData("time")} on:click={() => sortData("time")}
@ -589,19 +589,19 @@
let:style let:style
{style} {style}
class="grid grid-cols-16 gap-0" class="grid grid-cols-16 gap-0"
class:bg-[#19191F]={index % 2 === 0} class:bg-[#fff]={index % 2 === 0 && $mode === "light"}
class:bg-[#121217]={index % 2 !== 0} class:bg-[#19191F]={index % 2 === 0 && $mode !== "light"}
class:bg-[#121217]={index % 2 !== 0 && $mode !== "light"}
class:bg-[#F6F7F8]={index % 2 !== 0 && $mode == "light"}
class:opacity-30={index + 1 === rawData?.length && class:opacity-30={index + 1 === rawData?.length &&
data?.user?.tier !== "Pro"} data?.user?.tier !== "Pro"}
> >
<div <div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{formatTime(displayedData[index]?.time)} {formatTime(displayedData[index]?.time)}
</div> </div>
<div <div
on:click|stopPropagation on:click|stopPropagation
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap" class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap"
> >
<HoverStockChart <HoverStockChart
symbol={displayedData[index]?.ticker} symbol={displayedData[index]?.ticker}
@ -617,7 +617,7 @@
displayedData[index]?.id, displayedData[index]?.id,
) )
? 'text-[#FBCE3C]' ? 'text-[#FBCE3C]'
: 'text-white'}" : ''}"
> >
<svg <svg
class="{displayedData[index]?.id === animationId class="{displayedData[index]?.id === animationId
@ -626,29 +626,23 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
><path ><path
fill="currentColor" fill={$mode === "light" ? "#4B5563" : "#fff"}
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
/></svg /></svg
> >
</div> </div>
<div <div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{reformatDate(displayedData[index]?.date_expiration)} {reformatDate(displayedData[index]?.date_expiration)}
</div> </div>
<div <div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{displayedData[index]?.dte < 0 {displayedData[index]?.dte < 0
? "expired" ? "expired"
: displayedData[index]?.dte + "d"} : displayedData[index]?.dte + "d"}
</div> </div>
<div <div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{displayedData[index]?.strike_price} {displayedData[index]?.strike_price}
</div> </div>
@ -656,7 +650,7 @@
class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap {displayedData[ class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap {displayedData[
index index
]?.put_call === 'Calls' ]?.put_call === 'Calls'
? 'text-[#00FC50]' ? 'text-green-600 dark:text-[#00FC50]'
: 'text-[#c44536]'} " : 'text-[#c44536]'} "
> >
{displayedData[index]?.put_call} {displayedData[index]?.put_call}
@ -666,30 +660,24 @@
class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap {displayedData[ class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap {displayedData[
index index
]?.sentiment === 'Bullish' ]?.sentiment === 'Bullish'
? 'text-[#00FC50]' ? 'text-green-600 dark:text-[#00FC50]'
: displayedData[index]?.sentiment === 'Bearish' : displayedData[index]?.sentiment === 'Bearish'
? 'text-[#FF2F1F]' ? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-[#C6A755]'} " : 'text-[#C6A755]'} "
> >
{displayedData[index]?.sentiment} {displayedData[index]?.sentiment}
</div> </div>
<div <div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{displayedData[index]?.underlying_price} {displayedData[index]?.underlying_price}
</div> </div>
<div <div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{displayedData[index]?.price} {displayedData[index]?.price}
</div> </div>
<div <div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap" {@html abbreviateNumber(
>
{@html abbreviateNumberWithColor(
displayedData[index]?.cost_basis, displayedData[index]?.cost_basis,
false, false,
true, true,
@ -700,8 +688,8 @@
class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap uppercase {displayedData[ class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap uppercase {displayedData[
index index
]?.option_activity_type === 'Sweep' ]?.option_activity_type === 'Sweep'
? 'text-[#C6A755]' ? 'text-[#9E8135] dark:text-[#C6A755]'
: 'text-[#976DB7]'}" : 'text-[#754A96] dark:text-[#976DB7]'}"
> >
{displayedData[index]?.option_activity_type} {displayedData[index]?.option_activity_type}
</div> </div>
@ -725,27 +713,21 @@
?.replace("Midpoint", "Mid")} ?.replace("Midpoint", "Mid")}
</div> </div>
<div <div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{new Intl.NumberFormat("en", { {new Intl.NumberFormat("en", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,
}).format(displayedData[index]?.size)} }).format(displayedData[index]?.size)}
</div> </div>
<div <div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{new Intl.NumberFormat("en", { {new Intl.NumberFormat("en", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,
}).format(displayedData[index]?.volume)} }).format(displayedData[index]?.volume)}
</div> </div>
<div <div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{new Intl.NumberFormat("en", { {new Intl.NumberFormat("en", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,

45
src/lib/components/UpgradeToPro.svelte
View File

@ -1,18 +1,17 @@
<script lang="ts"> <script lang="ts">
import { mode } from "mode-watcher";
export let data; export let data;
export let display = false; export let display = false;
</script> </script>
{#if (display === true && data?.user?.tier !== "Pro") || !["Pro", "Plus"]?.includes(data?.user?.tier)} {#if (display === true && data?.user?.tier !== "Pro") || !["Pro", "Plus"]?.includes(data?.user?.tier)}
<div class="mt-4 py-6"> <div class="mt-4 py-6 text-muted dark:text-white">
<div class="mx-auto max-w-7xl px-3 xs:px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-3 xs:px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center"> <div class="mx-auto max-w-2xl text-center">
<h3 <h3 class="mt-2 text-2xl sm:text-3xl font-extrabold tracking-tight">
class="mt-2 text-2xl sm:text-3xl font-extrabold tracking-tight text-white"
>
Trade Smarter, Not Harder Trade Smarter, Not Harder
</h3> </h3>
<p class="mt-4 text-lg text-white"> <p class="mt-4 text-lg">
Cut through market noise with <span class="italic">actionable</span> insights Cut through market noise with <span class="italic">actionable</span> insights
that actually help you make confident investment decisions. No more endless that actually help you make confident investment decisions. No more endless
research or gut-based guessing. research or gut-based guessing.
@ -25,16 +24,16 @@
> >
<!-- Success Rate --> <!-- Success Rate -->
<div class="relative pl-14"> <div class="relative pl-14">
<dt class="text-lg font-semibold leading-6 text-white"> <dt class="text-lg font-semibold leading-6">
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-white" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-white"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke={$mode === "light" ? "white" : "black"}
class="h-6 w-6 text-black" class="h-6 w-6 text-black"
><path ><path
stroke-linecap="round" stroke-linecap="round"
@ -45,7 +44,7 @@
</div> </div>
Unlimited access to all data and tools Unlimited access to all data and tools
</dt> </dt>
<dd class="mt-2 text-base leading-7 text-white"> <dd class="mt-2 text-base leading-7">
Unlimited access to all data and tools, giving you the edge over Unlimited access to all data and tools, giving you the edge over
everyone else in the market. everyone else in the market.
</dd> </dd>
@ -53,16 +52,16 @@
<!-- Average Return --> <!-- Average Return -->
<div class="relative pl-14"> <div class="relative pl-14">
<dt class="text-lg font-semibold leading-6 text-white"> <dt class="text-lg font-semibold leading-6">
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-white" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-white"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke={$mode === "light" ? "white" : "black"}
class="h-6 w-6 text-black" class="h-6 w-6 text-black"
><path ><path
stroke-linecap="round" stroke-linecap="round"
@ -73,7 +72,7 @@
</div> </div>
Realtime Options & Dark Pool Data Realtime Options & Dark Pool Data
</dt> </dt>
<dd class="mt-2 text-base leading-7 text-white"> <dd class="mt-2 text-base leading-7">
Instant access to live options & dark pool data to spot Instant access to live options & dark pool data to spot
opportunities and trade with precision before the market moves. opportunities and trade with precision before the market moves.
</dd> </dd>
@ -81,9 +80,9 @@
<!-- Rating Count --> <!-- Rating Count -->
<div class="relative pl-14"> <div class="relative pl-14">
<dt class="text-lg font-semibold leading-6 text-white"> <dt class="text-lg font-semibold leading-6">
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-white" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-white"
> >
<svg <svg
class="w-6 h-6" class="w-6 h-6"
@ -97,7 +96,7 @@
></g><g id="SVGRepo_iconCarrier"> ></g><g id="SVGRepo_iconCarrier">
<path <path
d="M11.2691 4.41115C11.5006 3.89177 11.6164 3.63208 11.7776 3.55211C11.9176 3.48263 12.082 3.48263 12.222 3.55211C12.3832 3.63208 12.499 3.89177 12.7305 4.41115L14.5745 8.54808C14.643 8.70162 14.6772 8.77839 14.7302 8.83718C14.777 8.8892 14.8343 8.93081 14.8982 8.95929C14.9705 8.99149 15.0541 9.00031 15.2213 9.01795L19.7256 9.49336C20.2911 9.55304 20.5738 9.58288 20.6997 9.71147C20.809 9.82316 20.8598 9.97956 20.837 10.1342C20.8108 10.3122 20.5996 10.5025 20.1772 10.8832L16.8125 13.9154C16.6877 14.0279 16.6252 14.0842 16.5857 14.1527C16.5507 14.2134 16.5288 14.2807 16.5215 14.3503C16.5132 14.429 16.5306 14.5112 16.5655 14.6757L17.5053 19.1064C17.6233 19.6627 17.6823 19.9408 17.5989 20.1002C17.5264 20.2388 17.3934 20.3354 17.2393 20.3615C17.0619 20.3915 16.8156 20.2495 16.323 19.9654L12.3995 17.7024C12.2539 17.6184 12.1811 17.5765 12.1037 17.56C12.0352 17.5455 11.9644 17.5455 11.8959 17.56C11.8185 17.5765 11.7457 17.6184 11.6001 17.7024L7.67662 19.9654C7.18404 20.2495 6.93775 20.3915 6.76034 20.3615C6.60623 20.3354 6.47319 20.2388 6.40075 20.1002C6.31736 19.9408 6.37635 19.6627 6.49434 19.1064L7.4341 14.6757C7.46898 14.5112 7.48642 14.429 7.47814 14.3503C7.47081 14.2807 7.44894 14.2134 7.41394 14.1527C7.37439 14.0842 7.31195 14.0279 7.18708 13.9154L3.82246 10.8832C3.40005 10.5025 3.18884 10.3122 3.16258 10.1342C3.13978 9.97956 3.19059 9.82316 3.29993 9.71147C3.42581 9.58288 3.70856 9.55304 4.27406 9.49336L8.77835 9.01795C8.94553 9.00031 9.02911 8.99149 9.10139 8.95929C9.16534 8.93081 9.2226 8.8892 9.26946 8.83718C9.32241 8.77839 9.35663 8.70162 9.42508 8.54808L11.2691 4.41115Z" d="M11.2691 4.41115C11.5006 3.89177 11.6164 3.63208 11.7776 3.55211C11.9176 3.48263 12.082 3.48263 12.222 3.55211C12.3832 3.63208 12.499 3.89177 12.7305 4.41115L14.5745 8.54808C14.643 8.70162 14.6772 8.77839 14.7302 8.83718C14.777 8.8892 14.8343 8.93081 14.8982 8.95929C14.9705 8.99149 15.0541 9.00031 15.2213 9.01795L19.7256 9.49336C20.2911 9.55304 20.5738 9.58288 20.6997 9.71147C20.809 9.82316 20.8598 9.97956 20.837 10.1342C20.8108 10.3122 20.5996 10.5025 20.1772 10.8832L16.8125 13.9154C16.6877 14.0279 16.6252 14.0842 16.5857 14.1527C16.5507 14.2134 16.5288 14.2807 16.5215 14.3503C16.5132 14.429 16.5306 14.5112 16.5655 14.6757L17.5053 19.1064C17.6233 19.6627 17.6823 19.9408 17.5989 20.1002C17.5264 20.2388 17.3934 20.3354 17.2393 20.3615C17.0619 20.3915 16.8156 20.2495 16.323 19.9654L12.3995 17.7024C12.2539 17.6184 12.1811 17.5765 12.1037 17.56C12.0352 17.5455 11.9644 17.5455 11.8959 17.56C11.8185 17.5765 11.7457 17.6184 11.6001 17.7024L7.67662 19.9654C7.18404 20.2495 6.93775 20.3915 6.76034 20.3615C6.60623 20.3354 6.47319 20.2388 6.40075 20.1002C6.31736 19.9408 6.37635 19.6627 6.49434 19.1064L7.4341 14.6757C7.46898 14.5112 7.48642 14.429 7.47814 14.3503C7.47081 14.2807 7.44894 14.2134 7.41394 14.1527C7.37439 14.0842 7.31195 14.0279 7.18708 13.9154L3.82246 10.8832C3.40005 10.5025 3.18884 10.3122 3.16258 10.1342C3.13978 9.97956 3.19059 9.82316 3.29993 9.71147C3.42581 9.58288 3.70856 9.55304 4.27406 9.49336L8.77835 9.01795C8.94553 9.00031 9.02911 8.99149 9.10139 8.95929C9.16534 8.93081 9.2226 8.8892 9.26946 8.83718C9.32241 8.77839 9.35663 8.70162 9.42508 8.54808L11.2691 4.41115Z"
stroke="#000" stroke={$mode === "light" ? "white" : "black"}
stroke-width="1.3" stroke-width="1.3"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@ -107,7 +106,7 @@
</div> </div>
Top Wallstreet Analyst Ratings Top Wallstreet Analyst Ratings
</dt> </dt>
<dd class="mt-2 text-base leading-7 text-white"> <dd class="mt-2 text-base leading-7">
Follow ratings from the best analysts on Wall Street to stay Follow ratings from the best analysts on Wall Street to stay
ahead. ahead.
</dd> </dd>
@ -115,15 +114,15 @@
<!-- Recency --> <!-- Recency -->
<div class="relative pl-14"> <div class="relative pl-14">
<dt class="text-lg font-semibold leading-6 text-white"> <dt class="text-lg font-semibold leading-6">
<div <div
class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-white" class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-white"
> >
<svg <svg
class="w-6 h-6 text-black" class="w-6 h-6 text-black"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke={$mode === "light" ? "white" : "black"}
style="max-width:40px" style="max-width:40px"
aria-hidden="true" aria-hidden="true"
><path ><path
@ -136,7 +135,7 @@
</div> </div>
Up to 30 years financial history Up to 30 years financial history
</dt> </dt>
<dd class="mt-2 text-base leading-7 text-white"> <dd class="mt-2 text-base leading-7">
We deliver premium Wall Street data with top-tier accuracy and up We deliver premium Wall Street data with top-tier accuracy and up
to 30 years of history. to 30 years of history.
</dd> </dd>
@ -147,7 +146,7 @@
<div class="mt-10 text-center"> <div class="mt-10 text-center">
<a <a
href="/pricing" href="/pricing"
class="mt-10 flex justify-center text-[1rem] items-center px-5 w-fit m-auto border-none rounded-md btn btn-lg font-semibold text-black bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group" class="mt-10 flex justify-center text-[1rem] items-center px-5 w-fit m-auto border-none rounded-md btn btn-lg font-semibold text-white dark:text-black bg-[#3B82F6] dark:bg-[#fff] dark:sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
> >
Get Pro Membership Get Pro Membership
<span <span
@ -162,7 +161,7 @@
><path ><path
d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z" d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
/><path /><path
fill="black" fill={$mode === "light" ? "white" : "black"}
d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z" d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
/></g /></g
></g ></g

2
src/routes/+layout.svelte
View File

@ -1252,7 +1252,7 @@
<style lang="scss"> <style lang="scss">
:root { :root {
--bprogress-color: #fff; --bprogress-color: #00A6F4;
--bprogress-height: 1px; --bprogress-height: 1px;
} }
</style> </style>

2
src/routes/+page.svelte
View File

@ -70,6 +70,7 @@
<svelte:component this={AppInstalled} /> <svelte:component this={AppInstalled} />
{/if} {/if}
<!--
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) || data?.user?.freeTrial === true} {#if !["Pro", "Plus"]?.includes(data?.user?.tier) || data?.user?.freeTrial === true}
<div class="flex justify-center mb-5"> <div class="flex justify-center mb-5">
<a <a
@ -94,6 +95,7 @@
</a> </a>
</div> </div>
{/if} {/if}
-->
<div class="flex flex-col m-auto justify-center items-center"> <div class="flex flex-col m-auto justify-center items-center">
<div class="text-center mb-10 w-full px-4 sm:px-3 mt-10"> <div class="text-center mb-10 w-full px-4 sm:px-3 mt-10">

187
src/routes/options-flow/+page.svelte
View File

@ -499,12 +499,12 @@
let previousVolume = 0; //This is needed to play the sound only if it changes. let previousVolume = 0; //This is needed to play the sound only if it changes.
let notFound = false; let notFound = false;
let isLoaded = false; let isLoaded = false;
$: mode = $isOpen === true ? true : false; $: modeStatus = $isOpen === true ? true : false;
function toggleMode() { function toggleMode() {
if ($isOpen) { if ($isOpen) {
mode = !mode; modeStatus = !modeStatus;
if (mode === true && selectedDate !== undefined) { if (modeStatus === true && selectedDate !== undefined) {
selectedDate = undefined; selectedDate = undefined;
rawData = data?.getOptionsFlowFeed; rawData = data?.getOptionsFlowFeed;
displayedData = [...rawData]; displayedData = [...rawData];
@ -525,7 +525,7 @@
socket.addEventListener("message", (event) => { socket.addEventListener("message", (event) => {
const totalVolume = displayCallVolume + displayPutVolume; const totalVolume = displayCallVolume + displayPutVolume;
if (mode === true) { if (modeStatus === true) {
try { try {
newData = JSON?.parse(event.data) ?? []; newData = JSON?.parse(event.data) ?? [];
if (newData?.length > 0) { if (newData?.length > 0) {
@ -725,7 +725,7 @@
const getHistoricalFlow = async () => { const getHistoricalFlow = async () => {
// Create a delay using setTimeout wrapped in a Promise // Create a delay using setTimeout wrapped in a Promise
if (data?.user?.tier === "Pro") { if (data?.user?.tier === "Pro") {
mode = false; modeStatus = false;
isLoaded = false; isLoaded = false;
displayRules = allRows?.filter((row) => displayRules = allRows?.filter((row) =>
@ -830,9 +830,9 @@
description="Explore unusual options from big institutional traders and hedge funds." description="Explore unusual options from big institutional traders and hedge funds."
/> />
<body class="overflow-y-auto"> <body class="overflow-y-auto text-muted dark:text-white">
<section <section
class="w-full max-w-screen sm:max-w-7xl sm:max-w-[1400px] flex justify-center items-center bg-default pb-20 10 p-3 sm:p-0" class="w-full max-w-screen sm:max-w-7xl sm:max-w-[1400px] flex justify-center items-center pb-20 10 p-3 sm:p-0"
> >
<div class="w-full m-auto min-h-screen"> <div class="w-full m-auto min-h-screen">
<!-- <!--
@ -846,17 +846,19 @@
{#if !$isOpen} {#if !$isOpen}
<div <div
class="text-white text-sm sm:text-[1rem] italic text-center sm:text-start w-full ml-2 mb-3" class=" text-sm sm:text-[1rem] italic text-center sm:text-start w-full ml-2 mb-3"
> >
Options Live flow of {data?.user?.tier === "Pro" && selectedDate Options Live flow of {data?.user?.tier === "Pro" && selectedDate
? df.format(selectedDate?.toDate()) ? df.format(selectedDate?.toDate())
: formattedNyseDate} (NYSE Time) : formattedNyseDate} (EST timezone)
</div> </div>
{/if} {/if}
<div class="rounded-md border border-gray-700 bg-primary p-2">
<div <div
class="flex flex-col sm:flex-row items-center pt-3 sm:pt-1 pb-3 sm:border-b sm:border-gray-600" class="rounded-md border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-100 dark:bg-primary p-2"
>
<div
class="flex flex-col sm:flex-row items-center pt-3 sm:pt-1 pb-3 sm:border-b sm:border-gray-300 dark:border-gray-600"
> >
<div <div
class="flex flex-row items-center justify-center sm:justify-start" class="flex flex-row items-center justify-center sm:justify-start"
@ -895,8 +897,8 @@
<span <span
class="text-xs sm:text-sm sm:text-lg {!mode class="text-xs sm:text-sm sm:text-lg {!mode
? 'text-white' ? ''
: 'text-gray-400'} mr-3" : 'text-muted dark:text-gray-400'} mr-3"
> >
{$isOpen ? "Paused" : "Market Closed"} {$isOpen ? "Paused" : "Market Closed"}
</span> </span>
@ -907,8 +909,8 @@
<input <input
on:click={toggleMode} on:click={toggleMode}
type="checkbox" type="checkbox"
checked={mode} checked={modeStatus}
value={mode} value={modeStatus}
disabled={!$isOpen} disabled={!$isOpen}
class="sr-only peer" class="sr-only peer"
/> />
@ -920,9 +922,9 @@
<div class="ml-3 flex flex-col items-start"> <div class="ml-3 flex flex-col items-start">
<span <span
class="text-xs sm:text-sm sm:text-lg {mode class="text-xs sm:text-sm sm:text-lg {modeStatus
? 'text-white' ? ''
: 'text-gray-400'}" : 'text-muted dark:text-gray-400'}"
> >
Live Flow Live Flow
</span> </span>
@ -932,13 +934,13 @@
<div class="sm:ml-auto w-full sm:w-fit pt-5"> <div class="sm:ml-auto w-full sm:w-fit pt-5">
<div class="relative flex flex-col sm:flex-row items-center"> <div class="relative flex flex-col sm:flex-row items-center">
<div <div
class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-secondary rounded-md border border-gray-600" class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-white dark:bg-secondary rounded-md border border-gray-300 dark:border-gray-600"
> >
<label class="flex flex-row items-center"> <label class="flex flex-row items-center">
<input <input
id="modal-search" id="modal-search"
type="search" type="search"
class="text-white sm:ml-2 text-[1rem] placeholder-gray-300 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1.5 bg-[inherit]" class="sm:ml-2 text-[1rem] placeholder-gray-500 dark:placeholder-gray-300 border-transparent bg-white dark:bg-secondary focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1.5"
placeholder="Stock or ETF symbol..." placeholder="Stock or ETF symbol..."
bind:value={filterQuery} bind:value={filterQuery}
on:input={debouncedHandleInput} on:input={debouncedHandleInput}
@ -957,7 +959,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="white" fill="currentColor"
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z" d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
/></svg /></svg
> >
@ -968,7 +970,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="#fff" fill="currentColor"
d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37" d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"
/></svg /></svg
> >
@ -987,7 +989,7 @@
<Popover.Trigger asChild let:builder> <Popover.Trigger asChild let:builder>
<Button <Button
class={cn( class={cn(
"w-full sm:w-[160px] truncate sm:mr-3 py-3 bg-[#000] sm:hover:bg-[#000] sm:hover:text-white text-white justify-center sm:justify-start text-center sm:text-left font-normal border-none rounded-md", "w-full sm:w-[160px] truncate sm:mr-3 py-3 bg-[#000] sm:hover:bg-[#000] sm:hover: justify-center sm:justify-start text-center sm:text-left font-normal border-none rounded-md",
!selectedDate && "text-gray-300", !selectedDate && "text-gray-300",
)} )}
builders={[builder]} builders={[builder]}
@ -1000,7 +1002,7 @@
</Popover.Trigger> </Popover.Trigger>
<Popover.Content class="w-auto p-0 border-gray-500"> <Popover.Content class="w-auto p-0 border-gray-500">
<Calendar <Calendar
class="bg-default text-white" class="bg-default "
bind:value={selectedDate} bind:value={selectedDate}
initialFocus initialFocus
onValueChange={getHistoricalFlow} onValueChange={getHistoricalFlow}
@ -1012,11 +1014,11 @@
</div> </div>
<div <div
class="mr-1 flex items-center justify-between lg:mr-2 pb-1.5 border-b border-gray-600 mt-1.5" class="mr-1 flex items-center justify-between lg:mr-2 pb-1.5 border-b border-gray-300 dark:border-gray-600 mt-1.5"
> >
<button <button
on:click={() => (showFilters = !showFilters)} on:click={() => (showFilters = !showFilters)}
class="flex cursor-pointer items-center text-lg sm:text-xl font-semibold text-white" class="flex cursor-pointer items-center text-lg sm:text-xl font-semibold"
title="Hide Filter Area" title="Hide Filter Area"
> >
<svg <svg
@ -1041,7 +1043,7 @@
> >
<label <label
for="ruleModal" for="ruleModal"
class="inline-flex cursor-pointer items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-transparent bg-blue-brand_light py-2 pl-3 pr-4 text-base font-semibold text-white shadow-xs bg-[#000] sm:hover:bg-default/60 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:text-smaller" class="inline-flex cursor-pointer items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-gray-300 dark:border-none py-2 pl-3 pr-4 text-base font-semibold shadow-sm bg-gray-300 sm:hover:bg-gray-400 dark:bg-[#000] dark:sm:hover:bg-default/60 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500"
> >
<svg <svg
class="h-5 w-5" class="h-5 w-5"
@ -1062,7 +1064,7 @@
{#if ruleOfList?.length !== 0} {#if ruleOfList?.length !== 0}
<label <label
on:click={handleResetAll} on:click={handleResetAll}
class="sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-transparent bg-blue-brand_light py-2 pl-3 pr-4 text-base font-semibold text-white shadow-xs bg-[#000] sm:hover:text-red-500 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:text-smaller" class="sm:ml-3 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded-md border border-transparent bg-blue-brand_light py-2 pl-3 pr-4 text-base font-semibold shadow-xs bg-[#000] sm:hover:text-red-500 ease-out focus:outline-hidden focus:ring-2 focus:ring-blue-500"
> >
<svg <svg
class="h-4 w-4" class="h-4 w-4"
@ -1085,14 +1087,14 @@
</div> </div>
<div <div
class="sm:grid sm:gap-x-2.5 md:grid-cols-2 lg:grid-cols-3 w-full mt-3 border-t border-b border-gray-600" class="sm:grid sm:gap-x-2.5 md:grid-cols-2 lg:grid-cols-3 w-full mt-3 border-t border-b border-gray-300 dark:border-gray-600"
> >
{#each displayRules as row (row?.rule)} {#each displayRules as row (row?.rule)}
<!--Start Added Rules--> <!--Start Added Rules-->
<div <div
class="flex items-center justify-between space-x-2 px-1 py-1.5 text-smaller leading-tight text-white" class="flex items-center justify-between space-x-2 px-1 py-1.5 text-smaller leading-tight"
> >
<div class="hide-scroll text-white"> <div class="hide-scroll">
{row?.label?.length > 20 {row?.label?.length > 20
? row?.label?.slice(0, 20)?.replace("[%]", "") + "..." ? row?.label?.slice(0, 20)?.replace("[%]", "") + "..."
: row?.label?.replace("[%]", "")} : row?.label?.replace("[%]", "")}
@ -1105,7 +1107,7 @@
role="tooltip" role="tooltip"
> >
<span <span
class="absolute -right-[15px] -top-[3px] cursor-pointer p-1 text-gray-300 sm:hover:text-white" class="absolute -right-[15px] -top-[3px] cursor-pointer p-1 text-gray-300 sm:hover:"
> >
<svg <svg
class="h-[10.5px] w-[10.5px]" class="h-[10.5px] w-[10.5px]"
@ -1148,7 +1150,7 @@
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="bg-[#000] h-[40px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 text-white rounded-md truncate" class="bg-[#000] h-[40px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 rounded-md truncate"
> >
<span class="truncate ml-2 text-sm sm:text-[1rem]"> <span class="truncate ml-2 text-sm sm:text-[1rem]">
{#if valueMappings[row?.rule] === "any"} {#if valueMappings[row?.rule] === "any"}
@ -1198,7 +1200,7 @@
<DropdownMenu.Trigger asChild let:builder <DropdownMenu.Trigger asChild let:builder
><Button ><Button
builders={[builder]} builders={[builder]}
class="w-fit -mt-1 -ml-2 bg-default flex flex-row justify-between items-center text-white" class="w-fit -mt-1 -ml-2 bg-default flex flex-row justify-between items-center "
> >
<span <span
class="truncate ml-2 text-sm sm:text-[1rem]" class="truncate ml-2 text-sm sm:text-[1rem]"
@ -1253,11 +1255,9 @@
: ""} : ""}
on:input={(e) => on:input={(e) =>
handleValueInput(e, row?.rule, 0)} handleValueInput(e, row?.rule, 0)}
class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-primary" class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-muted dark:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-gray-100 dark:bg-primary"
/> />
<span <span class=" text-[1rem] font-normal mt-1">
class="text-white text-[1rem] font-normal mt-1"
>
& &
</span> </span>
<input <input
@ -1270,7 +1270,7 @@
: ""} : ""}
on:input={(e) => on:input={(e) =>
handleValueInput(e, row?.rule, 1)} handleValueInput(e, row?.rule, 1)}
class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-primary" class="ios-zoom-fix block max-w-[3.5rem] rounded-sm placeholder:text-muted dark:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-gray-100 dark:bg-primary"
/> />
</div> </div>
{:else} {:else}
@ -1282,7 +1282,7 @@
: valueMappings[row?.rule]} : valueMappings[row?.rule]}
on:input={(e) => on:input={(e) =>
handleValueInput(e, row?.rule)} handleValueInput(e, row?.rule)}
class="ios-zoom-fix block max-w-[4.8rem] rounded-sm placeholder:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-primary" class="ios-zoom-fix block max-w-[4.8rem] rounded-sm placeholder:text-muted dark:text-gray-200 font-normal p-1 text-sm shadow-xs focus:border-blue-500 focus:ring-blue-500 bg-gray-100 dark:bg-primary"
/> />
{/if} {/if}
@ -1297,7 +1297,7 @@
"add", "add",
)} )}
><svg ><svg
class="size-6 cursor-pointer text-white" class="size-6 cursor-pointer"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@ -1317,7 +1317,7 @@
"minus", "minus",
)} )}
><svg ><svg
class="size-6 cursor-pointer text-white" class="size-6 cursor-pointer"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@ -1349,7 +1349,7 @@
{#if ruleCondition[row?.rule] === "between"} {#if ruleCondition[row?.rule] === "between"}
{#if newValue && row?.step[index + 1]} {#if newValue && row?.step[index + 1]}
<DropdownMenu.Item <DropdownMenu.Item
class="sm:hover:bg-primary" class="sm:hover:bg-gray-100 dark:bg-primary"
> >
<button <button
on:click={() => { on:click={() => {
@ -1358,7 +1358,7 @@
row?.step[index + 1], row?.step[index + 1],
]); ]);
}} }}
class="block w-full border-b border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded text-white last:border-0 sm:hover:bg-primary focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden" class="block w-full border-b border-gray-300 dark:border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded last:border-0 sm:hover:bg-gray-100 dark:bg-primary focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden"
> >
{ruleCondition[row?.rule]?.replace( {ruleCondition[row?.rule]?.replace(
"between", "between",
@ -1372,13 +1372,13 @@
{/if} {/if}
{:else} {:else}
<DropdownMenu.Item <DropdownMenu.Item
class="sm:hover:bg-primary" class="sm:hover:bg-gray-100 dark:bg-primary"
> >
<button <button
on:click={() => { on:click={() => {
handleChangeValue(newValue); handleChangeValue(newValue);
}} }}
class="block w-full border-b border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded text-white last:border-0 sm:hover:bg-primary focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden" class="block w-full border-b border-gray-300 dark:border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded last:border-0 sm:hover:bg-gray-100 dark:bg-primary focus:bg-blue-100 focus:text-gray-900 focus:outline-hidden"
> >
{ruleCondition[row?.rule] {ruleCondition[row?.rule]
?.replace("under", "Under") ?.replace("under", "Under")
@ -1403,7 +1403,7 @@
on:click={() => { on:click={() => {
handleChangeValue(item); handleChangeValue(item);
}} }}
class="cursor-pointer text-white" class="cursor-pointer"
for={item} for={item}
> >
<input <input
@ -1435,34 +1435,36 @@
<div class="w-full grid grid-cols-1 lg:grid-cols-4 gap-y-3 gap-x-3"> <div class="w-full grid grid-cols-1 lg:grid-cols-4 gap-y-3 gap-x-3">
<!--Start Flow Sentiment--> <!--Start Flow Sentiment-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-5 bg-primary border border-gray-600 rounded-md h-20" class="shadow-sm flex flex-row items-center flex-wrap w-full px-5 bg-gray-100 dark:bg-primary border border-gray-300 dark:border-gray-600 rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]" <span
class="font-semibold text-muted dark:text-gray-200 text-sm sm:text-[1rem]"
>Flow Sentiment</span >Flow Sentiment</span
> >
<span <span
class="text-start text-[1rem] font-semibold {flowSentiment === class="text-start text-[1rem] font-semibold {flowSentiment ===
'Bullish' 'Bullish'
? 'text-[#00FC50]' ? 'text-green-600 dark:text-[#00FC50]'
: flowSentiment === 'Bearish' : flowSentiment === 'Bearish'
? 'text-[#FF2F1F]' ? 'text-red-600 dark:text-[#FF2F1F]'
: flowSentiment === 'Neutral' : flowSentiment === 'Neutral'
? 'text-[#fff]' ? 'text-[#fff]'
: 'text-white'}">{flowSentiment}</span : ''}">{flowSentiment}</span
> >
</div> </div>
</div> </div>
<!--End Flow Sentiment--> <!--End Flow Sentiment-->
<!--Start Put/Call--> <!--Start Put/Call-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-5 bg-primary border border-gray-600 rounded-md h-20" class="shadow-sm flex flex-row items-center flex-wrap w-full px-5 bg-gray-100 dark:bg-primary border border-gray-300 dark:border-gray-600 rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]" <span
class="font-semibold text-muted dark:text-gray-200 text-sm sm:text-[1rem]"
>Put/Call</span >Put/Call</span
> >
<span class="text-start text-[1rem] font-semibold text-white"> <span class="text-start text-[1rem] font-semibold">
{putCallRatio?.toFixed(3)} {putCallRatio?.toFixed(3)}
</span> </span>
</div> </div>
@ -1479,7 +1481,7 @@
cy="18" cy="18"
r="16" r="16"
fill="none" fill="none"
class="stroke-current text-[#3E3E3E]" class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
stroke-width="3" stroke-width="3"
></circle> ></circle>
<!-- Progress Circle inside a group with rotation --> <!-- Progress Circle inside a group with rotation -->
@ -1502,7 +1504,7 @@
<div <div
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2" 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" <span class="text-center text-sm"
>{putCallRatio?.toFixed(2)}</span >{putCallRatio?.toFixed(2)}</span
> >
</div> </div>
@ -1512,13 +1514,14 @@
<!--End Put/Call--> <!--End Put/Call-->
<!--Start Call Flow--> <!--Start Call Flow-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-5 bg-primary border border-gray-600 rounded-md h-20" class="shadow-sm flex flex-row items-center flex-wrap w-full px-5 bg-gray-100 dark:bg-primary border border-gray-300 dark:border-gray-600 rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]" <span
class="font-semibold text-muted dark:text-gray-200 text-sm sm:text-[1rem]"
>Call Flow</span >Call Flow</span
> >
<span class="text-start text-[1rem] font-semibold text-white"> <span class="text-start text-[1rem] font-semibold">
{new Intl.NumberFormat("en", { {new Intl.NumberFormat("en", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,
@ -1538,7 +1541,7 @@
cy="18" cy="18"
r="16" r="16"
fill="none" fill="none"
class="stroke-current text-[#3E3E3E]" class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
stroke-width="3" stroke-width="3"
></circle> ></circle>
<!-- Progress Circle inside a group with rotation --> <!-- Progress Circle inside a group with rotation -->
@ -1548,7 +1551,7 @@
cy="18" cy="18"
r="16" r="16"
fill="none" fill="none"
class="stroke-current text-[#00FC50]" class="stroke-current text-green-600 dark:text-[#00FC50]"
stroke-width="3" stroke-width="3"
stroke-dasharray="100" stroke-dasharray="100"
stroke-dashoffset={100 - callPercentage?.toFixed(2)} stroke-dashoffset={100 - callPercentage?.toFixed(2)}
@ -1559,9 +1562,7 @@
<div <div
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2" 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" <span class="text-center text-sm">{callPercentage}%</span>
>{callPercentage}%</span
>
</div> </div>
</div> </div>
<!-- End Circular Progress --> <!-- End Circular Progress -->
@ -1569,13 +1570,14 @@
<!--End Call Flow--> <!--End Call Flow-->
<!--Start Put Flow--> <!--Start Put Flow-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-5 bg-primary border border-gray-600 rounded-md h-20" class="shadow-sm flex flex-row items-center flex-wrap w-full px-5 bg-gray-100 dark:bg-primary border border-gray-300 dark:border-gray-600 rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]" <span
class="font-semibold text-muted dark:text-gray-200 text-sm sm:text-[1rem]"
>Put Flow</span >Put Flow</span
> >
<span class="text-start text-[1rem] font-semibold text-white"> <span class="text-start text-[1rem] font-semibold">
{new Intl.NumberFormat("en", { {new Intl.NumberFormat("en", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,
@ -1595,7 +1597,7 @@
cy="18" cy="18"
r="16" r="16"
fill="none" fill="none"
class="stroke-current text-[#3E3E3E]" class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
stroke-width="3" stroke-width="3"
></circle> ></circle>
<!-- Progress Circle inside a group with rotation --> <!-- Progress Circle inside a group with rotation -->
@ -1616,9 +1618,7 @@
<div <div
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2" 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" <span class="text-center text-sm">{putPercentage}%</span>
>{putPercentage}%</span
>
</div> </div>
</div> </div>
<!-- End Circular Progress --> <!-- End Circular Progress -->
@ -1641,7 +1641,7 @@
</div> </div>
{:else} {:else}
<div <div
class="text-white text-center p-3 sm:p-5 mb-10 mt-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]" class=" text-center p-3 sm:p-5 mb-10 mt-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-300 dark:border-gray-600 text-sm sm:text-[1rem]"
> >
<svg <svg
class="w-6 h-6 shrink-0 inline-block sm:mr-2" class="w-6 h-6 shrink-0 inline-block sm:mr-2"
@ -1660,9 +1660,10 @@
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-primary rounded-md 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" class="bg-gray-100 dark:bg-primary rounded-md 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
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>
@ -1684,21 +1685,21 @@
></label> ></label>
<div <div
class="modal-box relative bg-primary z-20 mx-2 min-h-[30vh] h-[800px] rounded bg-default opacity-100 border border-gray-600 bp:mx-3 sm:mx-4 w-full max-w-6xl overflow-y-auto" class="modal-box text-muted dark:text-white relative bg-gray-100 dark:bg-primary z-20 mx-2 min-h-[30vh] h-[800px] rounded opacity-100 border border-gray-300 dark:border-gray-600 bp:mx-3 sm:mx-4 w-full max-w-6xl overflow-y-auto"
> >
<div class="relative flex flex-col w-full"> <div class="relative flex flex-col w-full">
<!-- Sticky Header --> <!-- Sticky Header -->
<div <div
class="fixed w-full h-fit sticky -top-6 z-40 bg-primary shadow-xs opacity-100 pb-6 pt-5 border-gray-600 border-b" class="fixed w-full h-fit sticky -top-6 z-40 bg-gray-100 dark:bg-primary shadow-xs opacity-100 pb-6 pt-5 border-gray-300 dark:border-gray-600 border-b"
> >
<div class="flex flex-row items-center justify-between mb-2"> <div class="flex flex-row items-center justify-between mb-2">
<h1 class="text-white text-[1rem] sm:text-xl font-semibold"> <h1 class=" text-[1rem] sm:text-xl font-semibold">
Select screener filters ({allRows?.length} total) Select screener filters ({allRows?.length} total)
</h1> </h1>
<label <label
for="ruleModal" for="ruleModal"
class="inline-block cursor-pointer absolute right-0 top-3 text-[1.3rem] sm:text-[1.8rem] text-white" class="inline-block cursor-pointer absolute right-0 top-3 text-[1.3rem] sm:text-[1.8rem]"
> >
<svg <svg
class="w-6 h-6 sm:w-8 sm:h-8" class="w-6 h-6 sm:w-8 sm:h-8"
@ -1717,15 +1718,13 @@
class="w-full h-8" class="w-full h-8"
on:keydown={(e) => (e?.key === "Enter" ? e.preventDefault() : "")} on:keydown={(e) => (e?.key === "Enter" ? e.preventDefault() : "")}
> >
<label for="search" class="text-sm text-gray-200 sr-only" <label for="search" class="text-sm sr-only">Search</label>
>Search</label
>
<div class="relative w-full max-w-sm"> <div class="relative w-full max-w-sm">
<div <div
class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none" class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
> >
<svg <svg
class="w-4 h-4 text-gray-200" class="w-4 h-4 text-muted dark:text-gray-200"
aria-hidden="true" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@ -1749,7 +1748,7 @@
> >
<button <button
on:click={() => (searchTerm = "")} on:click={() => (searchTerm = "")}
class="cursor-pointer text-gray-200 sm:hover:text-white" class="cursor-pointer text-muted dark:text-gray-200 sm:hover:"
tabindex="0" tabindex="0"
><svg ><svg
class="w-5 h-5" class="w-5 h-5"
@ -1771,7 +1770,7 @@
autocomplete="off" autocomplete="off"
type="search" type="search"
id="search" id="search"
class="placeholder-gray-300 block w-full p-2 ps-10 text-sm text-gray-200 border border-gray-600 rounded-md bg-primary border border-blue-500" class="placeholder-gray-500 dark:placeholder-gray-300 block w-full p-2 ps-10 text-sm text-muted dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-primary border border-blue-500"
placeholder="Search" placeholder="Search"
bind:value={searchTerm} bind:value={searchTerm}
/> />
@ -1781,7 +1780,7 @@
</div> </div>
<!-- Content --> <!-- Content -->
<div class="text-white mt-5"> <div class=" mt-5">
<div class="flex flex-wrap"> <div class="flex flex-wrap">
{#each searchTerm?.length !== 0 ? filteredRows : allRows as row} {#each searchTerm?.length !== 0 ? filteredRows : allRows as row}
<div <div
@ -1818,7 +1817,7 @@
</div> </div>
{#if searchTerm?.length > 0 && filteredRows?.length === 0} {#if searchTerm?.length > 0 && filteredRows?.length === 0}
<div class="text-white mt-5 font-semibold text-[1rem] sm:text-lg"> <div class=" mt-5 font-semibold text-[1rem] sm:text-lg">
Nothing found Nothing found
</div> </div>
{/if} {/if}
@ -1838,25 +1837,23 @@
<!-- Desktop modal content --> <!-- Desktop modal content -->
<div <div
class="modal-box rounded-md border border-gray-600 w-full bg-primary flex flex-col items-center" class="modal-box text-muted dark:text-white rounded-md border border-gray-300 dark:border-gray-600 w-full bg-gray-100 dark:bg-primary flex flex-col items-center"
> >
<div class="text-white mb-5 text-center"> <div class=" mb-5 text-center">
<h3 class="font-bold text-2xl mb-5">{tooltipTitle}</h3> <h3 class="font-bold text-2xl mb-5">{tooltipTitle}</h3>
<span class="text-white text-[1rem] font-normal" <span class=" text-[1rem] font-normal">{infoText?.text ?? "n/a"}</span>
>{infoText?.text ?? "n/a"}</span
>
{#if infoText?.equation !== undefined} {#if infoText?.equation !== undefined}
<div class="w-5/6 m-auto mt-5"></div> <div class="w-5/6 m-auto mt-5"></div>
<div class="text-[1rem] w-full pt-3 pb-3 m-auto text-white"> <div class="text-[1rem] w-full pt-3 pb-3 m-auto">
{infoText?.equation} {infoText?.equation}
</div> </div>
{/if} {/if}
</div> </div>
<div class="border-t border-gray-600 mt-2 w-full"> <div class="border-t border-gray-300 dark:border-gray-600 mt-2 w-full">
<label <label
for="mobileTooltip" for="mobileTooltip"
class="mt-4 font-semibold text-white text-xl m-auto flex justify-center cursor-pointer" class="mt-4 font-semibold text-xl m-auto flex justify-center cursor-pointer"
> >
Close Close
</label> </label>

136
src/routes/potus-tracker/+page.svelte
View File

@ -6,6 +6,8 @@
import { Button } from "$lib/components/shadcn/button/index.js"; import { Button } from "$lib/components/shadcn/button/index.js";
import { sectorList } from "$lib/utils"; import { sectorList } from "$lib/utils";
import avatar from "$lib/images/trump-avatar.jpeg"; import avatar from "$lib/images/trump-avatar.jpeg";
import { mode } from "mode-watcher";
import { goto } from "$app/navigation";
export let data; export let data;
@ -116,15 +118,15 @@
}, },
chart: { chart: {
type: "column", type: "column",
backgroundColor: "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: "#09090B", plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360, height: 360,
animation: false, animation: false,
}, },
title: { title: {
text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-xl">${selectedSector} - Performance</h3>`, text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-xl">${selectedSector} - Performance</h3>`,
style: { style: {
color: "white", color: $mode === "light" ? "black" : "white",
}, },
useHTML: true, useHTML: true,
}, },
@ -132,14 +134,14 @@
categories: categories, categories: categories,
gridLineWidth: 0, gridLineWidth: 0,
labels: { labels: {
style: { color: "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },
}, },
yAxis: { yAxis: {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: { labels: {
style: { color: "white" }, style: { color: $mode === "light" ? "black" : "white" },
formatter: function () { formatter: function () {
return this.value + "%"; // Add percentage symbol return this.value + "%"; // Add percentage symbol
}, },
@ -152,11 +154,11 @@
}, },
plotOptions: { plotOptions: {
series: { series: {
color: "white", color: $mode === "light" ? "black" : "white",
animation: false, animation: false,
dataLabels: { dataLabels: {
enabled: true, enabled: true,
color: "white", color: $mode === "light" ? "black" : "white",
style: { style: {
fontSize: "14px", fontSize: "14px",
fontWeight: "normal", fontWeight: "normal",
@ -197,7 +199,7 @@
let config = null; let config = null;
$: { $: {
if (selectedSector) { if (selectedSector || $mode) {
config = plotData() || null; config = plotData() || null;
} }
} }
@ -209,12 +211,12 @@
/> />
<section <section
class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3 text-white" class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3 text-muted dark:text-white"
> >
<div class="text-sm sm:text-[1rem] breadcrumbs"> <div class="text-sm sm:text-[1rem] breadcrumbs">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-muted dark:text-gray-300">Home</a></li>
<li class="text-gray-300">POTUS Tracker</li> <li class="text-muted dark:text-gray-300">POTUS Tracker</li>
</ul> </ul>
</div> </div>
@ -228,9 +230,7 @@
<div class="w-full mt-5"> <div class="w-full mt-5">
<div class="lg:float-left lg:w-[calc(100%-336px-20px)]"> <div class="lg:float-left lg:w-[calc(100%-336px-20px)]">
<div class=" border-b-[2px]"> <div class=" border-b-[2px]">
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold"> <h1 class="mb-1 text-2xl sm:text-3xl font-bold">POTUS Tracker</h1>
POTUS Tracker
</h1>
</div> </div>
</div> </div>
@ -238,7 +238,7 @@
<div class="mt-5 mb-5"> <div class="mt-5 mb-5">
<Infobox <Infobox
text={`Since the inauguration of Donald J. Trump on January 20, 2025, the text={`Since the inauguration of Donald J. Trump on January 20, 2025, the
${selectedSector} has ${data?.getData?.marketPerformance[sectorDict[selectedSector]]["Inauguration"] >= 0 ? "grown" : "declined"} by <span class="${data?.getData?.marketPerformance[sectorDict[selectedSector]]["Inauguration"] >= 0 ? "text-[#00FC50] before:content-['+']" : "text-[#FF2F1F]"}"> ${selectedSector} has ${data?.getData?.marketPerformance[sectorDict[selectedSector]]["Inauguration"] >= 0 ? "grown" : "declined"} by <span class="${data?.getData?.marketPerformance[sectorDict[selectedSector]]["Inauguration"] >= 0 ? "text-green-600 dark:text-[#00FC50] before:content-['+']" : "text-red-600 dark:text-[#FF2F1F]"}">
${data?.getData?.marketPerformance[sectorDict[selectedSector]]["Inauguration"] ?? "n/a"}%</span>.`} ${data?.getData?.marketPerformance[sectorDict[selectedSector]]["Inauguration"] ?? "n/a"}%</span>.`}
/> />
</div> </div>
@ -249,9 +249,9 @@
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate" class="shadow-sm w-full border-gray-300 dark:border-gray-600 border bg-white sm:hover:bg-gray-100 dark:bg-default dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
> >
<span class="truncate text-white">{selectedSector}</span> <span class="truncate">{selectedSector}</span>
<svg <svg
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block" class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@ -270,7 +270,9 @@
<DropdownMenu.Content <DropdownMenu.Content
class="w-56 h-fit max-h-72 overflow-y-auto scroller" class="w-56 h-fit max-h-72 overflow-y-auto scroller"
> >
<DropdownMenu.Label class="text-gray-400"> <DropdownMenu.Label
class="text-muted dark:text-muted dark:text-gray-400"
>
Select Sector Select Sector
</DropdownMenu.Label> </DropdownMenu.Label>
<DropdownMenu.Separator /> <DropdownMenu.Separator />
@ -279,14 +281,14 @@
{#if sector === "S&P500" || ["Pro", "Plus"]?.includes(data?.user?.tier)} {#if sector === "S&P500" || ["Pro", "Plus"]?.includes(data?.user?.tier)}
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (selectedSector = sector)} on:click={() => (selectedSector = sector)}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-200 dark:sm:hover:bg-primary"
> >
{sector} {sector}
</DropdownMenu.Item> </DropdownMenu.Item>
{:else} {:else}
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => goto("/pricing")} on:click={() => goto("/pricing")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-200 dark:sm:hover:bg-primary"
> >
{sector} {sector}
<svg <svg
@ -312,22 +314,20 @@
</div> </div>
<div <div
class="chart mt-5 border border-gray-800 rounded" class="chart mt-5 border border-gray-300 dark:border-gray-800 rounded"
use:highcharts={config} use:highcharts={config}
></div> ></div>
<nav <nav
class="border-b-[2px] whitespace-nowrap mt-10 sm:mt-6 overflow-x-auto no-scrollbar" class="border-[#2C6288] dark:border-white border-b-[2px] overflow-x-auto whitespace-nowrap no-scrollbar mt-4"
>
<ul
class="flex flex-row items-center w-full text-[1rem] text-white"
> >
<ul class="flex flex-row items-center w-full text-[1rem]">
{#each tabs as item, i} {#each tabs as item, i}
<button <button
on:click={() => (activeIdx = i)} on:click={() => (activeIdx = i)}
class="p-2 px-5 cursor-pointer {activeIdx === i class="p-2 px-5 cursor-pointer {activeIdx === i
? 'text-white bg-primary/90 font-semibold' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}" : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
> >
{item.title} {item.title}
</button> </button>
@ -337,20 +337,20 @@
{#if activeIdx === 0} {#if activeIdx === 0}
<h3 <h3
class="text-white text-lg sm:text-xl font-semibold mb-2 mt-6 border-y border-gray-800 pt-2 pb-2" class=" text-lg sm:text-xl font-semibold mb-2 mt-6 border-y border-gray-300 dark:border-gray-800 pt-2 pb-2"
> >
Official Presidential Schedule Official Presidential Schedule
</h3> </h3>
<div class="border border-gray-800 rounded-md p-4"> <div
class="border border-gray-300 dark:border-gray-800 rounded-md p-4"
>
<div class="space-y-4"> <div class="space-y-4">
{#each Object?.entries(groupedByDate) as [date, items], indexA} {#each Object?.entries(groupedByDate) as [date, items], indexA}
<div class="my-4"> <div class="my-4">
<div <div
class="border-b border-gray-600 pb-2 w-full flex flex-row items-center justify-between" class="border-b border-gray-300 dark:border-gray-600 pb-2 w-full flex flex-row items-center justify-between"
>
<span
class="text-[1rem] sm:text-lg font-semibold text-white"
> >
<span class="text-[1rem] sm:text-lg font-semibold">
{date}</span {date}</span
> >
{#if items?.at(0)?.changesPercentage} {#if items?.at(0)?.changesPercentage}
@ -358,8 +358,8 @@
<span class="inline-block">S&P500</span> <span class="inline-block">S&P500</span>
<span <span
class="{items?.at(0)?.changesPercentage > 0 class="{items?.at(0)?.changesPercentage > 0
? "text-[#00FC50] before:content-['+']" ? "text-green-600 dark:text-[#00FC50] before:content-['+']"
: 'text-[#FF2F1F]'} " : 'text-red-600 dark:text-[#FF2F1F]'} "
>{items.length > 0 >{items.length > 0
? items?.at(0)?.changesPercentage ? items?.at(0)?.changesPercentage
: "n/a"}%</span : "n/a"}%</span
@ -411,7 +411,7 @@
{/if} {/if}
</div> </div>
<span class="text-sm text-gray-400"> <span class="text-sm text-muted dark:text-gray-400">
{item.time_formatted} {item.time_formatted}
{item.location !== null {item.location !== null
? `- ${item?.location}` ? `- ${item?.location}`
@ -430,20 +430,20 @@
</div> </div>
{:else if activeIdx === 1} {:else if activeIdx === 1}
<h3 <h3
class="text-white text-lg sm:text-xl font-semibold mb-2 mt-6 border-y border-gray-800 pt-2 pb-2" class=" text-lg sm:text-xl font-semibold mb-2 mt-6 border-y border-gray-300 dark:border-gray-800 pt-2 pb-2"
> >
Executive Actions Executive Actions
</h3> </h3>
<div class=" border border-gray-800 rounded-md p-4"> <div
class=" border border-gray-300 dark:border-gray-800 rounded-md p-4"
>
<div class="space-y-4"> <div class="space-y-4">
{#each Object.entries(groupedOrders) as [date, items], indexA} {#each Object.entries(groupedOrders) as [date, items], indexA}
<div class="my-4"> <div class="my-4">
<div <div
class="border-b border-gray-600 pb-2 flex flex-row items-center" class="border-b border-gray-300 dark:border-gray-600 pb-2 flex flex-row items-center"
>
<span class="text-[1rem] font-semibold text-white"
>{date}</span
> >
<span class="text-[1rem] font-semibold">{date}</span>
{#if latestInfoDate(date)} {#if latestInfoDate(date)}
<label <label
class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3 inline-block" class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3 inline-block"
@ -455,7 +455,7 @@
{#each items as item, indexB} {#each items as item, indexB}
<div <div
class="flex flex-col items-start space-y-1 mb-6 border-b border-gray-800 pb-4" class="flex flex-col items-start space-y-1 mb-6 border-b border-gray-300 dark:border-gray-800 pb-4"
> >
<div class="flex items-start space-x-3"> <div class="flex items-start space-x-3">
<img <img
@ -466,17 +466,17 @@
/> />
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<h3 class="text-white font-semibold"> <h3 class=" font-semibold">
{item?.title} {item?.title}
</h3> </h3>
<div <div
class={`mt-1 px-3 py-1 rounded text-xs sm:text-sm w-fit class={`mt-1 px-3 py-1 rounded text-xs sm:text-sm text-white w-fit
${ ${
item?.sentiment === "Bullish" item?.sentiment === "Bullish"
? "bg-emerald-500 text-white" ? "bg-emerald-500 "
: item?.sentiment === "Bearish" : item?.sentiment === "Bearish"
? "bg-red-600 text-white" ? "bg-red-600 "
: "bg-gray-200 text-black" : "bg-gray-200 text-black"
}`} }`}
> >
@ -494,7 +494,7 @@
on:click={() => on:click={() =>
(expandedDescriptions[item.title] = (expandedDescriptions[item.title] =
!expandedDescriptions[item.title])} !expandedDescriptions[item.title])}
class="text-blue-400 hover:text-blue-300 ml-1" class="cursor-pointer text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white ml-1"
> >
{expandedDescriptions[item.title] {expandedDescriptions[item.title]
? "Read less" ? "Read less"
@ -509,7 +509,7 @@
href={item?.link} href={item?.link}
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
class="ml-14 inline-block text-sm text-white hover:underline" class="ml-14 inline-block text-sm hover:underline"
> >
Source Source
<svg <svg
@ -596,7 +596,7 @@
</div> </div>
{:else if activeIdx === 2} {:else if activeIdx === 2}
<div <div
class="flex flex-row items-center mb-2 mt-6 border-y border-gray-800 pt-2 pb-2" class="flex flex-row items-center mb-2 mt-6 border-y border-gray-300 dark:border-gray-800 pt-2 pb-2"
> >
<svg <svg
class="w-7 h-7 rounded-full inline-block" class="w-7 h-7 rounded-full inline-block"
@ -610,17 +610,19 @@
/><path d="m24 28.4382h11.4878v9.4539h-11.4878z" /></g /><path d="m24 28.4382h11.4878v9.4539h-11.4878z" /></g
></svg ></svg
> >
<h3 class="ml-2 text-white text-lg sm:text-xl font-semibold"> <h3 class="ml-2 text-lg sm:text-xl font-semibold">
Truth Social Posts Truth Social Posts
</h3> </h3>
</div> </div>
<div class="border border-gray-800 rounded-md p-4"> <div
class="border border-gray-300 dark:border-gray-800 rounded-md p-4"
>
<div class="space-y-4"> <div class="space-y-4">
{#each posts as item} {#each posts as item}
<div class="my-4"> <div class="my-4">
<div <div
class="flex flex-col items-start space-y-1 mb-6 border-b border-gray-800 pb-4" class="flex flex-col items-start space-y-1 mb-6 border-b border-gray-300 dark:border-gray-800 pb-4"
> >
<div class="flex items-start space-x-3"> <div class="flex items-start space-x-3">
<a <a
@ -638,7 +640,7 @@
> >
<div class="flex flex-col items-start w-full"> <div class="flex flex-col items-start w-full">
<h3 class="text-white font-semibold"> <h3 class=" font-semibold">
<a <a
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -647,7 +649,7 @@
>Donald J. Trump</a >Donald J. Trump</a
> >
</h3> </h3>
<h4 class="text-sm text-gray-400"> <h4 class="text-sm text-muted dark:text-gray-400">
<a <a
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -668,12 +670,12 @@
href={item?.source} href={item?.source}
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
class="ml-12 pt-5 inline-block text-sm text-white sm:hover:underline" class="ml-12 pt-5 inline-block text-sm sm:hover:underline"
> >
Original Post Original Post
<svg <svg
class="w-4 h-4 sm:w-5 sm:h-5 -mt-0.5 inline-block" class="w-4 h-4 sm:w-5 sm:h-5 -mt-0.5 inline-block"
fill="#fff" fill="currentColor"
viewBox="0 0 64 64" viewBox="0 0 64 64"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -757,18 +759,18 @@
<div class="order-4 shrink-0 lg:float-right lg:w-[336px]"> <div class="order-4 shrink-0 lg:float-right lg:w-[336px]">
<div <div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100" class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
> >
<a <a
href={`/newsletter`} href={`/newsletter`}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0" class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
> >
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold ml-3">
Market Newsletter Market Newsletter
</h2> </h2>
</div> </div>
<span class="text-white p-3 ml-3 mr-3"> <span class=" p-3 ml-3 mr-3">
Get a daily email with the top market news in bullet point Get a daily email with the top market news in bullet point
format. format.
</span> </span>
@ -776,35 +778,35 @@
</div> </div>
<div <div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100" class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
> >
<a <a
href={"/stock-screener"} href={"/stock-screener"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0" class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
> >
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold ml-3">
Stock Screener Stock Screener
</h2> </h2>
</div> </div>
<span class="text-white p-3 ml-3 mr-3"> <span class=" p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks. Build your Stock Screener to find profitable stocks.
</span> </span>
</a> </a>
</div> </div>
<div <div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100" class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
> >
<a <a
href={"/watchlist/stocks"} href={"/watchlist/stocks"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0" class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
> >
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3"> <h2 class="text-start text-xl font-semibold ml-3">
Watchlist Watchlist
</h2> </h2>
</div> </div>
<span class="text-white p-3 ml-3 mr-3"> <span class=" p-3 ml-3 mr-3">
Keep track of your favorite stocks in real-time. Keep track of your favorite stocks in real-time.
</span> </span>
</a> </a>

254
src/routes/reddit-tracker/+page.svelte
View File

@ -1,31 +1,19 @@
<script lang="ts"> <script lang="ts">
import { screenWidth } from "$lib/store"; import { screenWidth } from "$lib/store";
import { onMount } from "svelte";
import * as Card from "$lib/components/shadcn/card/index.ts"; import * as Card from "$lib/components/shadcn/card/index.ts";
import * as Table from "$lib/components/shadcn/table/index.ts"; import * as Table from "$lib/components/shadcn/table/index.ts";
import HoverStockChart from "$lib/components/HoverStockChart.svelte"; import HoverStockChart from "$lib/components/HoverStockChart.svelte";
//import UpgradeToPro from '$lib/components/UpgradeToPro.svelte'; //import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import { abbreviateNumber } from "$lib/utils";
import { Chart } from "svelte-echarts";
import Link from "lucide-svelte/icons/external-link"; import Link from "lucide-svelte/icons/external-link";
import ThumbsUp from "lucide-svelte/icons/thumbs-up"; import ThumbsUp from "lucide-svelte/icons/thumbs-up";
import MessageCircle from "lucide-svelte/icons/message-circle"; import MessageCircle from "lucide-svelte/icons/message-circle";
import Lazy from "$lib/components/Lazy.svelte"; import Lazy from "$lib/components/Lazy.svelte";
import { init, use } from "echarts/core";
import { LineChart, BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
export let data; export let data;
let isLoaded = false;
let optionGraphPost;
let optionGraphComment;
let postList = [];
let commentList = [];
let timePeriod = "oneDay"; let timePeriod = "oneDay";
const today = new Date(); const today = new Date();
@ -86,144 +74,6 @@
return output; return output;
} }
function getPlotOptions() {
let rawData = data?.getRedditTracker?.stats;
rawData = rawData?.sort((a, b) => new Date(a?.date) - new Date(b?.date));
let dates = [];
rawData?.forEach((item) => {
dates?.push(item?.date);
postList?.push(item?.totalPosts);
commentList?.push(item?.totalComments);
});
const optionPost = {
silent: true,
animation: false,
tooltip: {
trigger: "axis",
hideDelay: 100, // Set the delay in milliseconds
},
grid: {
left: "3%",
right: "4%",
bottom: "0%",
top: $screenWidth < 640 ? "20%" : "10%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
splitLine: {
show: false, // Disable x-axis grid lines
},
data: dates,
axisLabel: {
show: false, // Hide x-axis labels
},
},
],
yAxis: [
{
type: "value",
splitLine: {
show: false, // Disable x-axis grid lines
},
axisLabel: {
show: false, // Hide y-axis labels
},
},
],
series: [
{
name: "Total Posts",
type: "line",
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 1,
color: "#3B82F6",
},
emphasis: {
focus: "series",
},
data: postList,
},
],
};
const optionComment = {
silent: true,
animation: false,
tooltip: {
trigger: "axis",
hideDelay: 100, // Set the delay in milliseconds
},
grid: {
left: "3%",
right: "4%",
bottom: "0%",
top: $screenWidth < 640 ? "20%" : "10%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
splitLine: {
show: false, // Disable x-axis grid lines
},
data: dates,
axisLabel: {
show: false, // Hide x-axis labels
},
},
],
yAxis: [
{
type: "value",
splitLine: {
show: false, // Disable x-axis grid lines
},
axisLabel: {
show: false, // Hide y-axis labels
},
},
],
series: [
{
name: "Total Comments",
type: "line",
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 1,
color: "#E11D48",
},
emphasis: {
focus: "series",
},
data: commentList,
},
],
};
return { optionPost, optionComment };
}
onMount(() => {
const { optionPost, optionComment } = getPlotOptions();
optionGraphPost = optionPost;
optionGraphComment = optionComment;
isLoaded = true;
});
let activeIdx = 0; let activeIdx = 0;
const tabs = [ const tabs = [
@ -282,73 +132,7 @@
</h1> </h1>
</div> </div>
{#if isLoaded} <div class="grid gap-4 md:gap-8 grid-cols-1 text-start">
<div class=" grid gap-4 grid-cols-1 sm:grid-cols-2 md:gap-8">
<Card.Root class="bg-[#141417]">
<Card.Header class="flex flex-col items-start space-y-0 pb-2">
<Card.Title
class="text-start text-xl sm:text-2xl font-semibold pb-2"
>Post Activity</Card.Title
>
<Card.Description class="text-gray-300 text-sm pb-2"
>Number of Posts in the last 24 hours:</Card.Description
>
<Card.Description class=" text-[1rem] pb-2"
><span class="text-[#408FFF] font-bold text-2xl">
+{postList?.at(-1)}
</span> posts today
</Card.Description>
<Card.Description class="text-gray-400 text-sm pb-2">
{((postList?.at(-1) / postList?.at(-2) - 1) * 100)?.toFixed(
0,
)}% from yesterday
</Card.Description>
</Card.Header>
<Card.Content>
<Lazy>
<div class="app w-full h-[150px]">
<Chart {init} options={optionGraphPost} class="chart" />
</div>
</Lazy>
</Card.Content>
</Card.Root>
<Card.Root class="bg-[#141417]">
<Card.Header class="flex flex-col items-start space-y-0 pb-2">
<Card.Title
class="text-start text-xl sm:text-2xl font-semibold pb-2"
>Comment Activity</Card.Title
>
<Card.Description class="text-gray-300 text-sm pb-2"
>Number of Comments in the last 24 hours:</Card.Description
>
<Card.Description class=" text-[1rem] pb-2"
><span class="text-[#F71F4F] font-bold text-2xl">
+{abbreviateNumber(commentList?.at(-1))}
</span> comments today
</Card.Description>
<Card.Description class="text-gray-400 text-sm pb-2">
{(
(commentList?.at(-1) / commentList?.at(-2) - 1) *
100
)?.toFixed(0)}% from yesterday
</Card.Description>
</Card.Header>
<Card.Content>
<Lazy>
<div class="app w-full h-[150px]">
<Chart
{init}
options={optionGraphComment}
class="chart"
/>
</div>
</Lazy>
</Card.Content>
</Card.Root>
</div>
<div class="mt-10 grid gap-4 md:gap-8 grid-cols-1 text-start">
<Lazy> <Lazy>
<div class="order-1 overflow-x-auto h-full mt-5 sm:mt-0"> <div class="order-1 overflow-x-auto h-full mt-5 sm:mt-0">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
@ -358,8 +142,7 @@
class="text-start text-xl w-full flex flex-row items-center mb-3" class="text-start text-xl w-full flex flex-row items-center mb-3"
> >
<span class="font-semibold">Trending Posts</span> <span class="font-semibold">Trending Posts</span>
<span <span class="text-sm sm:text-[1rem] ml-auto font-normal"
class="text-sm sm:text-[1rem] ml-auto font-normal"
>Updated {formattedDate}</span >Updated {formattedDate}</span
> >
</div> </div>
@ -613,18 +396,6 @@
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
</div> </div>
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label
class="bg-secondary rounded-md 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> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 ml-4">
@ -674,20 +445,3 @@
</div> </div>
</div> </div>
</section> </section>
<style>
.app {
height: 150px;
max-width: 100%; /* Ensure chart width doesn't exceed the container */
}
@media (max-width: 640px) {
.app {
height: 120px;
}
}
.chart {
width: 100%;
}
</style>