ui fix§
This commit is contained in:
MuslemRahimi
parent
27560e9bef
commit
bb3a09bc67
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { screenWidth } from "$lib/store";
|
||||
import { abbreviateNumberWithColor } from "$lib/utils";
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
|
||||
import VirtualList from "svelte-tiny-virtual-list";
|
||||
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
|
||||
@ -234,12 +234,12 @@
|
||||
}
|
||||
</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 -->
|
||||
<div class="min-w-[1000px]">
|
||||
<!-- Header row using grid -->
|
||||
<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
|
||||
on:click={() => sortData("time")}
|
||||
@ -589,19 +589,19 @@
|
||||
let:style
|
||||
{style}
|
||||
class="grid grid-cols-16 gap-0"
|
||||
class:bg-[#19191F]={index % 2 === 0}
|
||||
class:bg-[#121217]={index % 2 !== 0}
|
||||
class:bg-[#fff]={index % 2 === 0 && $mode === "light"}
|
||||
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 &&
|
||||
data?.user?.tier !== "Pro"}
|
||||
>
|
||||
<div
|
||||
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{formatTime(displayedData[index]?.time)}
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
symbol={displayedData[index]?.ticker}
|
||||
@ -617,7 +617,7 @@
|
||||
displayedData[index]?.id,
|
||||
)
|
||||
? 'text-[#FBCE3C]'
|
||||
: 'text-white'}"
|
||||
: ''}"
|
||||
>
|
||||
<svg
|
||||
class="{displayedData[index]?.id === animationId
|
||||
@ -626,29 +626,23 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
><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"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{reformatDate(displayedData[index]?.date_expiration)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{displayedData[index]?.dte < 0
|
||||
? "expired"
|
||||
: displayedData[index]?.dte + "d"}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{displayedData[index]?.strike_price}
|
||||
</div>
|
||||
|
||||
@ -656,7 +650,7 @@
|
||||
class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap {displayedData[
|
||||
index
|
||||
]?.put_call === 'Calls'
|
||||
? 'text-[#00FC50]'
|
||||
? 'text-green-600 dark:text-[#00FC50]'
|
||||
: 'text-[#c44536]'} "
|
||||
>
|
||||
{displayedData[index]?.put_call}
|
||||
@ -666,30 +660,24 @@
|
||||
class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap {displayedData[
|
||||
index
|
||||
]?.sentiment === 'Bullish'
|
||||
? 'text-[#00FC50]'
|
||||
? 'text-green-600 dark:text-[#00FC50]'
|
||||
: displayedData[index]?.sentiment === 'Bearish'
|
||||
? 'text-[#FF2F1F]'
|
||||
? 'text-red-600 dark:text-[#FF2F1F]'
|
||||
: 'text-[#C6A755]'} "
|
||||
>
|
||||
{displayedData[index]?.sentiment}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{displayedData[index]?.underlying_price}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{displayedData[index]?.price}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
{@html abbreviateNumberWithColor(
|
||||
<div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{@html abbreviateNumber(
|
||||
displayedData[index]?.cost_basis,
|
||||
false,
|
||||
true,
|
||||
@ -700,8 +688,8 @@
|
||||
class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap uppercase {displayedData[
|
||||
index
|
||||
]?.option_activity_type === 'Sweep'
|
||||
? 'text-[#C6A755]'
|
||||
: 'text-[#976DB7]'}"
|
||||
? 'text-[#9E8135] dark:text-[#C6A755]'
|
||||
: 'text-[#754A96] dark:text-[#976DB7]'}"
|
||||
>
|
||||
{displayedData[index]?.option_activity_type}
|
||||
</div>
|
||||
@ -725,27 +713,21 @@
|
||||
?.replace("Midpoint", "Mid")}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(displayedData[index]?.size)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(displayedData[index]?.volume)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-2 text-center text-white text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
|
||||
@ -1,18 +1,17 @@
|
||||
<script lang="ts">
|
||||
import { mode } from "mode-watcher";
|
||||
export let data;
|
||||
export let display = false;
|
||||
</script>
|
||||
|
||||
{#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-2xl text-center">
|
||||
<h3
|
||||
class="mt-2 text-2xl sm:text-3xl font-extrabold tracking-tight text-white"
|
||||
>
|
||||
<h3 class="mt-2 text-2xl sm:text-3xl font-extrabold tracking-tight">
|
||||
Trade Smarter, Not Harder
|
||||
</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
|
||||
that actually help you make confident investment decisions. No more endless
|
||||
research or gut-based guessing.
|
||||
@ -25,16 +24,16 @@
|
||||
>
|
||||
<!-- Success Rate -->
|
||||
<div class="relative pl-14">
|
||||
<dt class="text-lg font-semibold leading-6 text-white">
|
||||
<dt class="text-lg font-semibold leading-6">
|
||||
<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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
stroke={$mode === "light" ? "white" : "black"}
|
||||
class="h-6 w-6 text-black"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
@ -45,7 +44,7 @@
|
||||
</div>
|
||||
Unlimited access to all data and tools
|
||||
</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
|
||||
everyone else in the market.
|
||||
</dd>
|
||||
@ -53,16 +52,16 @@
|
||||
|
||||
<!-- Average Return -->
|
||||
<div class="relative pl-14">
|
||||
<dt class="text-lg font-semibold leading-6 text-white">
|
||||
<dt class="text-lg font-semibold leading-6">
|
||||
<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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
stroke={$mode === "light" ? "white" : "black"}
|
||||
class="h-6 w-6 text-black"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
@ -73,7 +72,7 @@
|
||||
</div>
|
||||
Realtime Options & Dark Pool Data
|
||||
</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
|
||||
opportunities and trade with precision before the market moves.
|
||||
</dd>
|
||||
@ -81,9 +80,9 @@
|
||||
|
||||
<!-- Rating Count -->
|
||||
<div class="relative pl-14">
|
||||
<dt class="text-lg font-semibold leading-6 text-white">
|
||||
<dt class="text-lg font-semibold leading-6">
|
||||
<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
|
||||
class="w-6 h-6"
|
||||
@ -97,7 +96,7 @@
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<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"
|
||||
stroke="#000"
|
||||
stroke={$mode === "light" ? "white" : "black"}
|
||||
stroke-width="1.3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
@ -107,7 +106,7 @@
|
||||
</div>
|
||||
Top Wallstreet Analyst Ratings
|
||||
</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
|
||||
ahead.
|
||||
</dd>
|
||||
@ -115,15 +114,15 @@
|
||||
|
||||
<!-- Recency -->
|
||||
<div class="relative pl-14">
|
||||
<dt class="text-lg font-semibold leading-6 text-white">
|
||||
<dt class="text-lg font-semibold leading-6">
|
||||
<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
|
||||
class="w-6 h-6 text-black"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke={$mode === "light" ? "white" : "black"}
|
||||
style="max-width:40px"
|
||||
aria-hidden="true"
|
||||
><path
|
||||
@ -136,7 +135,7 @@
|
||||
</div>
|
||||
Up to 30 years financial history
|
||||
</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
|
||||
to 30 years of history.
|
||||
</dd>
|
||||
@ -147,7 +146,7 @@
|
||||
<div class="mt-10 text-center">
|
||||
<a
|
||||
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
|
||||
<span
|
||||
@ -162,7 +161,7 @@
|
||||
><path
|
||||
d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
|
||||
/><path
|
||||
fill="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"
|
||||
/></g
|
||||
></g
|
||||
|
||||
@ -1252,7 +1252,7 @@
|
||||
|
||||
<style lang="scss">
|
||||
:root {
|
||||
--bprogress-color: #fff;
|
||||
--bprogress-color: #00A6F4;
|
||||
--bprogress-height: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -70,6 +70,7 @@
|
||||
<svelte:component this={AppInstalled} />
|
||||
{/if}
|
||||
|
||||
<!--
|
||||
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) || data?.user?.freeTrial === true}
|
||||
<div class="flex justify-center mb-5">
|
||||
<a
|
||||
@ -94,6 +95,7 @@
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
-->
|
||||
|
||||
<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">
|
||||
|
||||
@ -499,12 +499,12 @@
|
||||
let previousVolume = 0; //This is needed to play the sound only if it changes.
|
||||
let notFound = false;
|
||||
let isLoaded = false;
|
||||
$: mode = $isOpen === true ? true : false;
|
||||
$: modeStatus = $isOpen === true ? true : false;
|
||||
|
||||
function toggleMode() {
|
||||
if ($isOpen) {
|
||||
mode = !mode;
|
||||
if (mode === true && selectedDate !== undefined) {
|
||||
modeStatus = !modeStatus;
|
||||
if (modeStatus === true && selectedDate !== undefined) {
|
||||
selectedDate = undefined;
|
||||
rawData = data?.getOptionsFlowFeed;
|
||||
displayedData = [...rawData];
|
||||
@ -525,7 +525,7 @@
|
||||
|
||||
socket.addEventListener("message", (event) => {
|
||||
const totalVolume = displayCallVolume + displayPutVolume;
|
||||
if (mode === true) {
|
||||
if (modeStatus === true) {
|
||||
try {
|
||||
newData = JSON?.parse(event.data) ?? [];
|
||||
if (newData?.length > 0) {
|
||||
@ -725,7 +725,7 @@
|
||||
const getHistoricalFlow = async () => {
|
||||
// Create a delay using setTimeout wrapped in a Promise
|
||||
if (data?.user?.tier === "Pro") {
|
||||
mode = false;
|
||||
modeStatus = false;
|
||||
isLoaded = false;
|
||||
|
||||
displayRules = allRows?.filter((row) =>
|
||||
@ -830,9 +830,9 @@
|
||||
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
|
||||
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">
|
||||
<!--
|
||||
@ -846,17 +846,19 @@
|
||||
|
||||
{#if !$isOpen}
|
||||
<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
|
||||
? df.format(selectedDate?.toDate())
|
||||
: formattedNyseDate} (NYSE Time)
|
||||
: formattedNyseDate} (EST timezone)
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="rounded-md border border-gray-700 bg-primary p-2">
|
||||
<div
|
||||
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-600"
|
||||
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
|
||||
class="flex flex-row items-center justify-center sm:justify-start"
|
||||
@ -895,8 +897,8 @@
|
||||
|
||||
<span
|
||||
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"}
|
||||
</span>
|
||||
@ -907,8 +909,8 @@
|
||||
<input
|
||||
on:click={toggleMode}
|
||||
type="checkbox"
|
||||
checked={mode}
|
||||
value={mode}
|
||||
checked={modeStatus}
|
||||
value={modeStatus}
|
||||
disabled={!$isOpen}
|
||||
class="sr-only peer"
|
||||
/>
|
||||
@ -920,9 +922,9 @@
|
||||
|
||||
<div class="ml-3 flex flex-col items-start">
|
||||
<span
|
||||
class="text-xs sm:text-sm sm:text-lg {mode
|
||||
? 'text-white'
|
||||
: 'text-gray-400'}"
|
||||
class="text-xs sm:text-sm sm:text-lg {modeStatus
|
||||
? ''
|
||||
: 'text-muted dark:text-gray-400'}"
|
||||
>
|
||||
Live Flow
|
||||
</span>
|
||||
@ -932,13 +934,13 @@
|
||||
<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 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">
|
||||
<input
|
||||
id="modal-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..."
|
||||
bind:value={filterQuery}
|
||||
on:input={debouncedHandleInput}
|
||||
@ -957,7 +959,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><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"
|
||||
/></svg
|
||||
>
|
||||
@ -968,7 +970,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><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"
|
||||
/></svg
|
||||
>
|
||||
@ -987,7 +989,7 @@
|
||||
<Popover.Trigger asChild let:builder>
|
||||
<Button
|
||||
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",
|
||||
)}
|
||||
builders={[builder]}
|
||||
@ -1000,7 +1002,7 @@
|
||||
</Popover.Trigger>
|
||||
<Popover.Content class="w-auto p-0 border-gray-500">
|
||||
<Calendar
|
||||
class="bg-default text-white"
|
||||
class="bg-default "
|
||||
bind:value={selectedDate}
|
||||
initialFocus
|
||||
onValueChange={getHistoricalFlow}
|
||||
@ -1012,11 +1014,11 @@
|
||||
</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
|
||||
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"
|
||||
>
|
||||
<svg
|
||||
@ -1041,7 +1043,7 @@
|
||||
>
|
||||
<label
|
||||
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
|
||||
class="h-5 w-5"
|
||||
@ -1062,7 +1064,7 @@
|
||||
{#if ruleOfList?.length !== 0}
|
||||
<label
|
||||
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
|
||||
class="h-4 w-4"
|
||||
@ -1085,14 +1087,14 @@
|
||||
</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)}
|
||||
<!--Start Added Rules-->
|
||||
<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?.slice(0, 20)?.replace("[%]", "") + "..."
|
||||
: row?.label?.replace("[%]", "")}
|
||||
@ -1105,7 +1107,7 @@
|
||||
role="tooltip"
|
||||
>
|
||||
<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
|
||||
class="h-[10.5px] w-[10.5px]"
|
||||
@ -1148,7 +1150,7 @@
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
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]">
|
||||
{#if valueMappings[row?.rule] === "any"}
|
||||
@ -1198,7 +1200,7 @@
|
||||
<DropdownMenu.Trigger asChild let:builder
|
||||
><Button
|
||||
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
|
||||
class="truncate ml-2 text-sm sm:text-[1rem]"
|
||||
@ -1253,11 +1255,9 @@
|
||||
: ""}
|
||||
on:input={(e) =>
|
||||
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
|
||||
class="text-white text-[1rem] font-normal mt-1"
|
||||
>
|
||||
<span class=" text-[1rem] font-normal mt-1">
|
||||
&
|
||||
</span>
|
||||
<input
|
||||
@ -1270,7 +1270,7 @@
|
||||
: ""}
|
||||
on:input={(e) =>
|
||||
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>
|
||||
{:else}
|
||||
@ -1282,7 +1282,7 @@
|
||||
: valueMappings[row?.rule]}
|
||||
on:input={(e) =>
|
||||
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}
|
||||
|
||||
@ -1297,7 +1297,7 @@
|
||||
"add",
|
||||
)}
|
||||
><svg
|
||||
class="size-6 cursor-pointer text-white"
|
||||
class="size-6 cursor-pointer"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
@ -1317,7 +1317,7 @@
|
||||
"minus",
|
||||
)}
|
||||
><svg
|
||||
class="size-6 cursor-pointer text-white"
|
||||
class="size-6 cursor-pointer"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
@ -1349,7 +1349,7 @@
|
||||
{#if ruleCondition[row?.rule] === "between"}
|
||||
{#if newValue && row?.step[index + 1]}
|
||||
<DropdownMenu.Item
|
||||
class="sm:hover:bg-primary"
|
||||
class="sm:hover:bg-gray-100 dark:bg-primary"
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
@ -1358,7 +1358,7 @@
|
||||
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(
|
||||
"between",
|
||||
@ -1372,13 +1372,13 @@
|
||||
{/if}
|
||||
{:else}
|
||||
<DropdownMenu.Item
|
||||
class="sm:hover:bg-primary"
|
||||
class="sm:hover:bg-gray-100 dark:bg-primary"
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
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]
|
||||
?.replace("under", "Under")
|
||||
@ -1403,7 +1403,7 @@
|
||||
on:click={() => {
|
||||
handleChangeValue(item);
|
||||
}}
|
||||
class="cursor-pointer text-white"
|
||||
class="cursor-pointer"
|
||||
for={item}
|
||||
>
|
||||
<input
|
||||
@ -1435,34 +1435,36 @@
|
||||
<div class="w-full grid grid-cols-1 lg:grid-cols-4 gap-y-3 gap-x-3">
|
||||
<!--Start Flow Sentiment-->
|
||||
<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">
|
||||
<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
|
||||
>
|
||||
<span
|
||||
class="text-start text-[1rem] font-semibold {flowSentiment ===
|
||||
'Bullish'
|
||||
? 'text-[#00FC50]'
|
||||
? 'text-green-600 dark:text-[#00FC50]'
|
||||
: flowSentiment === 'Bearish'
|
||||
? 'text-[#FF2F1F]'
|
||||
? 'text-red-600 dark:text-[#FF2F1F]'
|
||||
: flowSentiment === 'Neutral'
|
||||
? 'text-[#fff]'
|
||||
: 'text-white'}">{flowSentiment}</span
|
||||
: ''}">{flowSentiment}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!--End Flow Sentiment-->
|
||||
<!--Start Put/Call-->
|
||||
<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">
|
||||
<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
|
||||
>
|
||||
<span class="text-start text-[1rem] font-semibold text-white">
|
||||
<span class="text-start text-[1rem] font-semibold">
|
||||
{putCallRatio?.toFixed(3)}
|
||||
</span>
|
||||
</div>
|
||||
@ -1479,7 +1481,7 @@
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#3E3E3E]"
|
||||
class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
|
||||
stroke-width="3"
|
||||
></circle>
|
||||
<!-- Progress Circle inside a group with rotation -->
|
||||
@ -1502,7 +1504,7 @@
|
||||
<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"
|
||||
<span class="text-center text-sm"
|
||||
>{putCallRatio?.toFixed(2)}</span
|
||||
>
|
||||
</div>
|
||||
@ -1512,13 +1514,14 @@
|
||||
<!--End Put/Call-->
|
||||
<!--Start Call Flow-->
|
||||
<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">
|
||||
<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
|
||||
>
|
||||
<span class="text-start text-[1rem] font-semibold text-white">
|
||||
<span class="text-start text-[1rem] font-semibold">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
@ -1538,7 +1541,7 @@
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#3E3E3E]"
|
||||
class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
|
||||
stroke-width="3"
|
||||
></circle>
|
||||
<!-- Progress Circle inside a group with rotation -->
|
||||
@ -1548,7 +1551,7 @@
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#00FC50]"
|
||||
class="stroke-current text-green-600 dark:text-[#00FC50]"
|
||||
stroke-width="3"
|
||||
stroke-dasharray="100"
|
||||
stroke-dashoffset={100 - callPercentage?.toFixed(2)}
|
||||
@ -1559,9 +1562,7 @@
|
||||
<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"
|
||||
>{callPercentage}%</span
|
||||
>
|
||||
<span class="text-center text-sm">{callPercentage}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Circular Progress -->
|
||||
@ -1569,13 +1570,14 @@
|
||||
<!--End Call Flow-->
|
||||
<!--Start Put Flow-->
|
||||
<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">
|
||||
<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
|
||||
>
|
||||
<span class="text-start text-[1rem] font-semibold text-white">
|
||||
<span class="text-start text-[1rem] font-semibold">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
@ -1595,7 +1597,7 @@
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#3E3E3E]"
|
||||
class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
|
||||
stroke-width="3"
|
||||
></circle>
|
||||
<!-- Progress Circle inside a group with rotation -->
|
||||
@ -1616,9 +1618,7 @@
|
||||
<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"
|
||||
>{putPercentage}%</span
|
||||
>
|
||||
<span class="text-center text-sm">{putPercentage}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Circular Progress -->
|
||||
@ -1641,7 +1641,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<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
|
||||
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="relative">
|
||||
<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>
|
||||
</label>
|
||||
</div>
|
||||
@ -1684,21 +1685,21 @@
|
||||
></label>
|
||||
|
||||
<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">
|
||||
<!-- Sticky Header -->
|
||||
|
||||
<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">
|
||||
<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)
|
||||
</h1>
|
||||
<label
|
||||
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
|
||||
class="w-6 h-6 sm:w-8 sm:h-8"
|
||||
@ -1717,15 +1718,13 @@
|
||||
class="w-full h-8"
|
||||
on:keydown={(e) => (e?.key === "Enter" ? e.preventDefault() : "")}
|
||||
>
|
||||
<label for="search" class="text-sm text-gray-200 sr-only"
|
||||
>Search</label
|
||||
>
|
||||
<label for="search" class="text-sm sr-only">Search</label>
|
||||
<div class="relative w-full max-w-sm">
|
||||
<div
|
||||
class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 text-gray-200"
|
||||
class="w-4 h-4 text-muted dark:text-gray-200"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
@ -1749,7 +1748,7 @@
|
||||
>
|
||||
<button
|
||||
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"
|
||||
><svg
|
||||
class="w-5 h-5"
|
||||
@ -1771,7 +1770,7 @@
|
||||
autocomplete="off"
|
||||
type="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"
|
||||
bind:value={searchTerm}
|
||||
/>
|
||||
@ -1781,7 +1780,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="text-white mt-5">
|
||||
<div class=" mt-5">
|
||||
<div class="flex flex-wrap">
|
||||
{#each searchTerm?.length !== 0 ? filteredRows : allRows as row}
|
||||
<div
|
||||
@ -1818,7 +1817,7 @@
|
||||
</div>
|
||||
|
||||
{#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
|
||||
</div>
|
||||
{/if}
|
||||
@ -1838,25 +1837,23 @@
|
||||
|
||||
<!-- Desktop modal content -->
|
||||
<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>
|
||||
<span class="text-white text-[1rem] font-normal"
|
||||
>{infoText?.text ?? "n/a"}</span
|
||||
>
|
||||
<span class=" text-[1rem] font-normal">{infoText?.text ?? "n/a"}</span>
|
||||
{#if infoText?.equation !== undefined}
|
||||
<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}
|
||||
</div>
|
||||
{/if}
|
||||
</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
|
||||
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
|
||||
</label>
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
import { Button } from "$lib/components/shadcn/button/index.js";
|
||||
import { sectorList } from "$lib/utils";
|
||||
import avatar from "$lib/images/trump-avatar.jpeg";
|
||||
import { mode } from "mode-watcher";
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
export let data;
|
||||
|
||||
@ -116,15 +118,15 @@
|
||||
},
|
||||
chart: {
|
||||
type: "column",
|
||||
backgroundColor: "#09090B",
|
||||
plotBackgroundColor: "#09090B",
|
||||
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
height: 360,
|
||||
animation: false,
|
||||
},
|
||||
title: {
|
||||
text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-xl">${selectedSector} - Performance</h3>`,
|
||||
style: {
|
||||
color: "white",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
},
|
||||
useHTML: true,
|
||||
},
|
||||
@ -132,14 +134,14 @@
|
||||
categories: categories,
|
||||
gridLineWidth: 0,
|
||||
labels: {
|
||||
style: { color: "white" },
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
|
||||
labels: {
|
||||
style: { color: "white" },
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
formatter: function () {
|
||||
return this.value + "%"; // Add percentage symbol
|
||||
},
|
||||
@ -152,11 +154,11 @@
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
color: "white",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
animation: false,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
color: "white",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
style: {
|
||||
fontSize: "14px",
|
||||
fontWeight: "normal",
|
||||
@ -197,7 +199,7 @@
|
||||
let config = null;
|
||||
|
||||
$: {
|
||||
if (selectedSector) {
|
||||
if (selectedSector || $mode) {
|
||||
config = plotData() || null;
|
||||
}
|
||||
}
|
||||
@ -209,12 +211,12 @@
|
||||
/>
|
||||
|
||||
<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">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">POTUS Tracker</li>
|
||||
<li><a href="/" class="text-muted dark:text-gray-300">Home</a></li>
|
||||
<li class="text-muted dark:text-gray-300">POTUS Tracker</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -228,9 +230,7 @@
|
||||
<div class="w-full mt-5">
|
||||
<div class="lg:float-left lg:w-[calc(100%-336px-20px)]">
|
||||
<div class=" border-b-[2px]">
|
||||
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
|
||||
POTUS Tracker
|
||||
</h1>
|
||||
<h1 class="mb-1 text-2xl sm:text-3xl font-bold">POTUS Tracker</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -238,7 +238,7 @@
|
||||
<div class="mt-5 mb-5">
|
||||
<Infobox
|
||||
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>.`}
|
||||
/>
|
||||
</div>
|
||||
@ -249,9 +249,9 @@
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
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
|
||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||
viewBox="0 0 20 20"
|
||||
@ -270,7 +270,9 @@
|
||||
<DropdownMenu.Content
|
||||
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
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
@ -279,14 +281,14 @@
|
||||
{#if sector === "S&P500" || ["Pro", "Plus"]?.includes(data?.user?.tier)}
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (selectedSector = sector)}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
class="cursor-pointer sm:hover:bg-gray-200 dark:sm:hover:bg-primary"
|
||||
>
|
||||
{sector}
|
||||
</DropdownMenu.Item>
|
||||
{:else}
|
||||
<DropdownMenu.Item
|
||||
on:click={() => goto("/pricing")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
class="cursor-pointer sm:hover:bg-gray-200 dark:sm:hover:bg-primary"
|
||||
>
|
||||
{sector}
|
||||
<svg
|
||||
@ -312,22 +314,20 @@
|
||||
</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}
|
||||
></div>
|
||||
|
||||
<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}
|
||||
<button
|
||||
on:click={() => (activeIdx = i)}
|
||||
class="p-2 px-5 cursor-pointer {activeIdx === i
|
||||
? 'text-white bg-primary/90 font-semibold'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
|
||||
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
|
||||
: '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}
|
||||
</button>
|
||||
@ -337,20 +337,20 @@
|
||||
|
||||
{#if activeIdx === 0}
|
||||
<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
|
||||
</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">
|
||||
{#each Object?.entries(groupedByDate) as [date, items], indexA}
|
||||
<div class="my-4">
|
||||
<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
|
||||
>
|
||||
{#if items?.at(0)?.changesPercentage}
|
||||
@ -358,8 +358,8 @@
|
||||
<span class="inline-block">S&P500</span>
|
||||
<span
|
||||
class="{items?.at(0)?.changesPercentage > 0
|
||||
? "text-[#00FC50] before:content-['+']"
|
||||
: 'text-[#FF2F1F]'} "
|
||||
? "text-green-600 dark:text-[#00FC50] before:content-['+']"
|
||||
: 'text-red-600 dark:text-[#FF2F1F]'} "
|
||||
>{items.length > 0
|
||||
? items?.at(0)?.changesPercentage
|
||||
: "n/a"}%</span
|
||||
@ -411,7 +411,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<span class="text-sm text-gray-400">
|
||||
<span class="text-sm text-muted dark:text-gray-400">
|
||||
{item.time_formatted}
|
||||
{item.location !== null
|
||||
? `- ${item?.location}`
|
||||
@ -430,20 +430,20 @@
|
||||
</div>
|
||||
{:else if activeIdx === 1}
|
||||
<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
|
||||
</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">
|
||||
{#each Object.entries(groupedOrders) as [date, items], indexA}
|
||||
<div class="my-4">
|
||||
<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)}
|
||||
<label
|
||||
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}
|
||||
<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">
|
||||
<img
|
||||
@ -466,17 +466,17 @@
|
||||
/>
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
<h3 class="text-white font-semibold">
|
||||
<h3 class=" font-semibold">
|
||||
{item?.title}
|
||||
</h3>
|
||||
|
||||
<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"
|
||||
? "bg-emerald-500 text-white"
|
||||
? "bg-emerald-500 "
|
||||
: item?.sentiment === "Bearish"
|
||||
? "bg-red-600 text-white"
|
||||
? "bg-red-600 "
|
||||
: "bg-gray-200 text-black"
|
||||
}`}
|
||||
>
|
||||
@ -494,7 +494,7 @@
|
||||
on:click={() =>
|
||||
(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]
|
||||
? "Read less"
|
||||
@ -509,7 +509,7 @@
|
||||
href={item?.link}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="ml-14 inline-block text-sm text-white hover:underline"
|
||||
class="ml-14 inline-block text-sm hover:underline"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -596,7 +596,7 @@
|
||||
</div>
|
||||
{:else if activeIdx === 2}
|
||||
<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
|
||||
class="w-7 h-7 rounded-full inline-block"
|
||||
@ -610,17 +610,19 @@
|
||||
/><path d="m24 28.4382h11.4878v9.4539h-11.4878z" /></g
|
||||
></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
|
||||
</h3>
|
||||
</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">
|
||||
{#each posts as item}
|
||||
<div class="my-4">
|
||||
<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">
|
||||
<a
|
||||
@ -638,7 +640,7 @@
|
||||
>
|
||||
|
||||
<div class="flex flex-col items-start w-full">
|
||||
<h3 class="text-white font-semibold">
|
||||
<h3 class=" font-semibold">
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
@ -647,7 +649,7 @@
|
||||
>Donald J. Trump</a
|
||||
>
|
||||
</h3>
|
||||
<h4 class="text-sm text-gray-400">
|
||||
<h4 class="text-sm text-muted dark:text-gray-400">
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
@ -668,12 +670,12 @@
|
||||
href={item?.source}
|
||||
rel="noopener noreferrer"
|
||||
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
|
||||
<svg
|
||||
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"
|
||||
version="1.1"
|
||||
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="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
|
||||
href={`/newsletter`}
|
||||
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">
|
||||
<h2 class="text-start text-xl font-semibold ml-3">
|
||||
Market Newsletter
|
||||
</h2>
|
||||
</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
|
||||
format.
|
||||
</span>
|
||||
@ -776,35 +778,35 @@
|
||||
</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
|
||||
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">
|
||||
<h2 class="text-start text-xl font-semibold ml-3">
|
||||
Stock Screener
|
||||
</h2>
|
||||
</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.
|
||||
</span>
|
||||
</a>
|
||||
</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
|
||||
href={"/watchlist/stocks"}
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
<h2 class="text-start text-xl font-semibold ml-3">
|
||||
Watchlist
|
||||
</h2>
|
||||
</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.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
@ -1,31 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { screenWidth } from "$lib/store";
|
||||
import { onMount } from "svelte";
|
||||
import * as Card from "$lib/components/shadcn/card/index.ts";
|
||||
import * as Table from "$lib/components/shadcn/table/index.ts";
|
||||
import HoverStockChart from "$lib/components/HoverStockChart.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 ThumbsUp from "lucide-svelte/icons/thumbs-up";
|
||||
import MessageCircle from "lucide-svelte/icons/message-circle";
|
||||
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 SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
|
||||
|
||||
export let data;
|
||||
let isLoaded = false;
|
||||
let optionGraphPost;
|
||||
let optionGraphComment;
|
||||
let postList = [];
|
||||
let commentList = [];
|
||||
|
||||
let timePeriod = "oneDay";
|
||||
|
||||
const today = new Date();
|
||||
@ -86,144 +74,6 @@
|
||||
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;
|
||||
|
||||
const tabs = [
|
||||
@ -282,349 +132,270 @@
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{#if isLoaded}
|
||||
<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>
|
||||
<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-col items-start w-full">
|
||||
<div class="flex flex-row w-full items-center">
|
||||
<div
|
||||
class="text-start text-xl w-full flex flex-row items-center mb-3"
|
||||
<div class="grid gap-4 md:gap-8 grid-cols-1 text-start">
|
||||
<Lazy>
|
||||
<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-col items-start w-full">
|
||||
<div class="flex flex-row w-full items-center">
|
||||
<div
|
||||
class="text-start text-xl w-full flex flex-row items-center mb-3"
|
||||
>
|
||||
<span class="font-semibold">Trending Posts</span>
|
||||
<span class="text-sm sm:text-[1rem] ml-auto font-normal"
|
||||
>Updated {formattedDate}</span
|
||||
>
|
||||
<span class="font-semibold">Trending Posts</span>
|
||||
<span
|
||||
class="text-sm sm:text-[1rem] ml-auto font-normal"
|
||||
>Updated {formattedDate}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
{#each data?.getRedditTracker?.posts as item}
|
||||
<div
|
||||
class="flex flex-col items-start mb-3 p-3 border border-gray-300 dark:border-gray-800 rounded-md shadow-sm border-gray-200 dark:bg-[#141417]"
|
||||
</div>
|
||||
<div class="">
|
||||
{#each data?.getRedditTracker?.posts as item}
|
||||
<div
|
||||
class="flex flex-col items-start mb-3 p-3 border border-gray-300 dark:border-gray-800 rounded-md shadow-sm border-gray-200 dark:bg-[#141417]"
|
||||
>
|
||||
<a
|
||||
href={"https://www.reddit.com" + item?.permalink}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="text-[1rem] sm:text-xl font-semibold mb-3 transition duration-100 sm:hover:text-blue-500 dark:sm:hover:text-blue-400"
|
||||
>
|
||||
{item?.title}
|
||||
</a>
|
||||
|
||||
{#if item?.selftext?.length !== 0}
|
||||
<div class="text-sm sm:text-[1rem] mb-3">
|
||||
{#if $screenWidth < 640}
|
||||
{item?.selftext?.length > 400
|
||||
? removeHttpsStrings(item?.selftext)?.slice(
|
||||
0,
|
||||
240,
|
||||
) + "..."
|
||||
: removeHttpsStrings(item?.selftext)}
|
||||
{:else}
|
||||
{item?.selftext?.length > 1000
|
||||
? removeHttpsStrings(item?.selftext)?.slice(
|
||||
0,
|
||||
800,
|
||||
) + "..."
|
||||
: removeHttpsStrings(item?.selftext)}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-row items-center mb-5 mt-3">
|
||||
<label class="mr-4 text-sm">
|
||||
<ThumbsUp
|
||||
class="h-5 w-5 inline-block -mt-1 shrink-0 mr-1"
|
||||
/>
|
||||
{item?.upvote_ratio}%
|
||||
</label>
|
||||
<label class="text-sm">
|
||||
<MessageCircle
|
||||
class="h-5 w-5 inline-block -mt-1 shrink-0 mr-1"
|
||||
/>
|
||||
{item?.num_comments?.toLocaleString("en-US")}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label
|
||||
class="mt-2 mb-2 text-sm bg-white rounded-md px-3 py-1 text-black"
|
||||
>
|
||||
{item?.link_flair_text}
|
||||
</label>
|
||||
{#if item?.thumbnail !== null && item?.thumbnail}
|
||||
<div class="relative m-auto mt-4">
|
||||
<div
|
||||
class="absolute inset-0 bg-cover object-fill bg-center bg-[#000]"
|
||||
></div>
|
||||
|
||||
<!--<div class="absolute -inset-3 md:-inset-y-20 md:mt-10 bg-cover object-contain blur-[40px]" style="clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%); background-image: url('{getImageURL(posts.collectionId, posts.id, posts.thumbnail)}');"></div>-->
|
||||
<img
|
||||
src={item?.thumbnail}
|
||||
alt="post image"
|
||||
class="m-auto w-auto relative max-h-[520px] sm:max-h-[700px] rounded"
|
||||
style="position: relative;"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="flex flex-col sm:flex-row items-start sm:items-center justify-between w-full mt-3"
|
||||
>
|
||||
<a
|
||||
href={"https://www.reddit.com/user/" + item?.author}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="hidden sm:inline-block text-sm sm:hover:text-blue-500 dark:sm:hover:text-blue-400"
|
||||
>
|
||||
Posted by {item?.author}
|
||||
</a>
|
||||
<a
|
||||
href={"https://www.reddit.com" + item?.permalink}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="text-[1rem] sm:text-xl font-semibold mb-3 transition duration-100 sm:hover:text-blue-500 dark:sm:hover:text-blue-400"
|
||||
class="mt-2 sm:mt-0 text-sm sm:hover:text-blue-500 dark:sm:hover:text-blue-400"
|
||||
>
|
||||
{item?.title}
|
||||
{formatUtcTimestamp(item?.created_utc)}
|
||||
<Link
|
||||
class="h-3 w-3 inline-block shrink-0 -mt-1 ml-1"
|
||||
/>
|
||||
</a>
|
||||
|
||||
{#if item?.selftext?.length !== 0}
|
||||
<div class="text-sm sm:text-[1rem] mb-3">
|
||||
{#if $screenWidth < 640}
|
||||
{item?.selftext?.length > 400
|
||||
? removeHttpsStrings(item?.selftext)?.slice(
|
||||
0,
|
||||
240,
|
||||
) + "..."
|
||||
: removeHttpsStrings(item?.selftext)}
|
||||
{:else}
|
||||
{item?.selftext?.length > 1000
|
||||
? removeHttpsStrings(item?.selftext)?.slice(
|
||||
0,
|
||||
800,
|
||||
) + "..."
|
||||
: removeHttpsStrings(item?.selftext)}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-row items-center mb-5 mt-3">
|
||||
<label class="mr-4 text-sm">
|
||||
<ThumbsUp
|
||||
class="h-5 w-5 inline-block -mt-1 shrink-0 mr-1"
|
||||
/>
|
||||
{item?.upvote_ratio}%
|
||||
</label>
|
||||
<label class="text-sm">
|
||||
<MessageCircle
|
||||
class="h-5 w-5 inline-block -mt-1 shrink-0 mr-1"
|
||||
/>
|
||||
{item?.num_comments?.toLocaleString("en-US")}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label
|
||||
class="mt-2 mb-2 text-sm bg-white rounded-md px-3 py-1 text-black"
|
||||
>
|
||||
{item?.link_flair_text}
|
||||
</label>
|
||||
{#if item?.thumbnail !== null && item?.thumbnail}
|
||||
<div class="relative m-auto mt-4">
|
||||
<div
|
||||
class="absolute inset-0 bg-cover object-fill bg-center bg-[#000]"
|
||||
></div>
|
||||
|
||||
<!--<div class="absolute -inset-3 md:-inset-y-20 md:mt-10 bg-cover object-contain blur-[40px]" style="clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%); background-image: url('{getImageURL(posts.collectionId, posts.id, posts.thumbnail)}');"></div>-->
|
||||
<img
|
||||
src={item?.thumbnail}
|
||||
alt="post image"
|
||||
class="m-auto w-auto relative max-h-[520px] sm:max-h-[700px] rounded"
|
||||
style="position: relative;"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="flex flex-col sm:flex-row items-start sm:items-center justify-between w-full mt-3"
|
||||
>
|
||||
<a
|
||||
href={"https://www.reddit.com/user/" + item?.author}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="hidden sm:inline-block text-sm sm:hover:text-blue-500 dark:sm:hover:text-blue-400"
|
||||
>
|
||||
Posted by {item?.author}
|
||||
</a>
|
||||
<a
|
||||
href={"https://www.reddit.com" + item?.permalink}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
class="mt-2 sm:mt-0 text-sm sm:hover:text-blue-500 dark:sm:hover:text-blue-400"
|
||||
>
|
||||
{formatUtcTimestamp(item?.created_utc)}
|
||||
<Link
|
||||
class="h-3 w-3 inline-block shrink-0 -mt-1 ml-1"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Lazy>
|
||||
<Card.Root class="order-0 overflow-x-auto no-scrollbar">
|
||||
<Card.Header>
|
||||
<div
|
||||
class="text-start text-xl w-full flex flex-col sm:flex-row items-start sm:items-center mb-3"
|
||||
>
|
||||
<span class="font-semibold">Trending Companies</span>
|
||||
<span
|
||||
class="text-sm sm:text-[1rem] mt-2 sm:mt-0 sm:ml-auto font-normal"
|
||||
>Updated {formattedDate}</span
|
||||
>
|
||||
</div>
|
||||
<nav
|
||||
class="border-[#2C6288] dark:border-white border-b-[2px] overflow-x-auto whitespace-nowrap"
|
||||
>
|
||||
<ul
|
||||
class="flex flex-row items-center w-full text-sm sm:text-[1rem]"
|
||||
>
|
||||
{#each tabs as item, index}
|
||||
{#if ["Pro", "Plus"]?.includes(data?.user?.tier) || index === 0}
|
||||
<label
|
||||
on:click={() => changeTimePeriod(index)}
|
||||
class="p-2 px-5 cursor-pointer {activeIdx === index
|
||||
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
|
||||
: '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}
|
||||
</label>
|
||||
{:else if !["Pro", "Plus"]?.includes(data?.user?.tier)}
|
||||
<a
|
||||
href="/pricing"
|
||||
class="p-2 px-5 cursor-pointer flex flex-row items-center {activeIdx ===
|
||||
index
|
||||
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
|
||||
: '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'}"
|
||||
>
|
||||
<span class="">{item.title}</span>
|
||||
<svg
|
||||
class="ml-2 w-3.5 h-3.5 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||
/></svg
|
||||
>
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
</Card.Header>
|
||||
<Card.Content class="grid gap-y-4">
|
||||
<Table.Root class="overflow-x-auto w-full">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class=" text-sm font-semibold"
|
||||
>Rank</Table.Head
|
||||
>
|
||||
<Table.Head class=" text-sm font-semibold"
|
||||
>Symbol</Table.Head
|
||||
>
|
||||
<Table.Head class=" text-sm font-semibold text-end"
|
||||
>Mentions</Table.Head
|
||||
>
|
||||
<Table.Head class=" text-sm font-semibold text-end"
|
||||
>Calls</Table.Head
|
||||
>
|
||||
<Table.Head class=" text-sm font-semibold text-end"
|
||||
>Puts</Table.Head
|
||||
>
|
||||
<Table.Head class=" text-sm font-semibold text-end"
|
||||
>Sentiment</Table.Head
|
||||
>
|
||||
<Table.Head class=" text-sm font-semibold text-end"
|
||||
>Price</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class=" text-sm text-right font-semibold whitespace-nowrap"
|
||||
>% Change</Table.Head
|
||||
>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each data?.getRedditTracker?.trending[timePeriod]?.slice(0, 5) as item, index}
|
||||
<Table.Row>
|
||||
<Table.Cell class="text-left text-[1rem]">
|
||||
{index + 1}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<div class="flex flex-col items-start text-[1rem]">
|
||||
<HoverStockChart
|
||||
symbol={item?.symbol}
|
||||
assetType={item?.assetType}
|
||||
/>
|
||||
<span class="whitespace-wrap hidden sm:block">
|
||||
{item?.name}
|
||||
</span>
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-right text-[1rem]"
|
||||
>{item?.count}</Table.Cell
|
||||
>
|
||||
<Table.Cell
|
||||
class="text-right text-[1rem] text-green-600 dark:text-[#00FC50]"
|
||||
>{item?.call}</Table.Cell
|
||||
>
|
||||
<Table.Cell
|
||||
class="text-right text-[1rem] text-red-600 dark:text-[#FF2F1F]"
|
||||
>{item?.put}</Table.Cell
|
||||
>
|
||||
<Table.Cell
|
||||
class="text-right text-[1rem] {item?.avgSentiment >
|
||||
0.4
|
||||
? 'text-green-600 dark:text-[#00FC50]'
|
||||
: item?.avgSentiment < -0.1
|
||||
? 'text-red-600 dark:text-[#FF2F1F]'
|
||||
: 'text-[#C6A755]'} "
|
||||
>{item?.avgSentiment > 0.4
|
||||
? "Bullish"
|
||||
: item?.avgSentiment <= -0.1
|
||||
? "Bearish"
|
||||
: "Neutral"}</Table.Cell
|
||||
>
|
||||
|
||||
<Table.Cell class="text-right text-[1rem] "
|
||||
>{item?.price?.toFixed(2)}</Table.Cell
|
||||
>
|
||||
|
||||
<Table.Cell class="text-right text-[1rem] ">
|
||||
<span
|
||||
class="{item?.changesPercentage > 0
|
||||
? 'text-green-600 dark:text-[#00FC50]'
|
||||
: 'text-red-600 dark:text-[#FF2F1F]'} text-end"
|
||||
>
|
||||
{#if item?.changesPercentage > 0}
|
||||
+{item?.changesPercentage?.toFixed(2)}%
|
||||
{:else}
|
||||
{item?.changesPercentage?.toFixed(2)}%
|
||||
{/if}
|
||||
</span>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</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}
|
||||
</Lazy>
|
||||
<Card.Root class="order-0 overflow-x-auto no-scrollbar">
|
||||
<Card.Header>
|
||||
<div
|
||||
class="text-start text-xl w-full flex flex-col sm:flex-row items-start sm:items-center mb-3"
|
||||
>
|
||||
<span class="font-semibold">Trending Companies</span>
|
||||
<span
|
||||
class="text-sm sm:text-[1rem] mt-2 sm:mt-0 sm:ml-auto font-normal"
|
||||
>Updated {formattedDate}</span
|
||||
>
|
||||
</div>
|
||||
<nav
|
||||
class="border-[#2C6288] dark:border-white border-b-[2px] overflow-x-auto whitespace-nowrap"
|
||||
>
|
||||
<ul
|
||||
class="flex flex-row items-center w-full text-sm sm:text-[1rem]"
|
||||
>
|
||||
{#each tabs as item, index}
|
||||
{#if ["Pro", "Plus"]?.includes(data?.user?.tier) || index === 0}
|
||||
<label
|
||||
on:click={() => changeTimePeriod(index)}
|
||||
class="p-2 px-5 cursor-pointer {activeIdx === index
|
||||
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
|
||||
: '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}
|
||||
</label>
|
||||
{:else if !["Pro", "Plus"]?.includes(data?.user?.tier)}
|
||||
<a
|
||||
href="/pricing"
|
||||
class="p-2 px-5 cursor-pointer flex flex-row items-center {activeIdx ===
|
||||
index
|
||||
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
|
||||
: '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'}"
|
||||
>
|
||||
<span class="">{item.title}</span>
|
||||
<svg
|
||||
class="ml-2 w-3.5 h-3.5 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||
/></svg
|
||||
>
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
</Card.Header>
|
||||
<Card.Content class="grid gap-y-4">
|
||||
<Table.Root class="overflow-x-auto w-full">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class=" text-sm font-semibold"
|
||||
>Rank</Table.Head
|
||||
>
|
||||
<Table.Head class=" text-sm font-semibold"
|
||||
>Symbol</Table.Head
|
||||
>
|
||||
<Table.Head class=" text-sm font-semibold text-end"
|
||||
>Mentions</Table.Head
|
||||
>
|
||||
<Table.Head class=" text-sm font-semibold text-end"
|
||||
>Calls</Table.Head
|
||||
>
|
||||
<Table.Head class=" text-sm font-semibold text-end"
|
||||
>Puts</Table.Head
|
||||
>
|
||||
<Table.Head class=" text-sm font-semibold text-end"
|
||||
>Sentiment</Table.Head
|
||||
>
|
||||
<Table.Head class=" text-sm font-semibold text-end"
|
||||
>Price</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class=" text-sm text-right font-semibold whitespace-nowrap"
|
||||
>% Change</Table.Head
|
||||
>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each data?.getRedditTracker?.trending[timePeriod]?.slice(0, 5) as item, index}
|
||||
<Table.Row>
|
||||
<Table.Cell class="text-left text-[1rem]">
|
||||
{index + 1}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<div class="flex flex-col items-start text-[1rem]">
|
||||
<HoverStockChart
|
||||
symbol={item?.symbol}
|
||||
assetType={item?.assetType}
|
||||
/>
|
||||
<span class="whitespace-wrap hidden sm:block">
|
||||
{item?.name}
|
||||
</span>
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-right text-[1rem]"
|
||||
>{item?.count}</Table.Cell
|
||||
>
|
||||
<Table.Cell
|
||||
class="text-right text-[1rem] text-green-600 dark:text-[#00FC50]"
|
||||
>{item?.call}</Table.Cell
|
||||
>
|
||||
<Table.Cell
|
||||
class="text-right text-[1rem] text-red-600 dark:text-[#FF2F1F]"
|
||||
>{item?.put}</Table.Cell
|
||||
>
|
||||
<Table.Cell
|
||||
class="text-right text-[1rem] {item?.avgSentiment >
|
||||
0.4
|
||||
? 'text-green-600 dark:text-[#00FC50]'
|
||||
: item?.avgSentiment < -0.1
|
||||
? 'text-red-600 dark:text-[#FF2F1F]'
|
||||
: 'text-[#C6A755]'} "
|
||||
>{item?.avgSentiment > 0.4
|
||||
? "Bullish"
|
||||
: item?.avgSentiment <= -0.1
|
||||
? "Bearish"
|
||||
: "Neutral"}</Table.Cell
|
||||
>
|
||||
|
||||
<Table.Cell class="text-right text-[1rem] "
|
||||
>{item?.price?.toFixed(2)}</Table.Cell
|
||||
>
|
||||
|
||||
<Table.Cell class="text-right text-[1rem] ">
|
||||
<span
|
||||
class="{item?.changesPercentage > 0
|
||||
? 'text-green-600 dark:text-[#00FC50]'
|
||||
: 'text-red-600 dark:text-[#FF2F1F]'} text-end"
|
||||
>
|
||||
{#if item?.changesPercentage > 0}
|
||||
+{item?.changesPercentage?.toFixed(2)}%
|
||||
{:else}
|
||||
{item?.changesPercentage?.toFixed(2)}%
|
||||
{/if}
|
||||
</span>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
@ -674,20 +445,3 @@
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user