update reddit page
This commit is contained in:
MuslemRahimi
parent
90ea2756ab
commit
1643b936e1
@ -1,4 +1,4 @@
|
||||
export const load = async ({ locals }) => {
|
||||
export const load = async ({ locals, setHeaders }) => {
|
||||
const getRedditTracker = async () => {
|
||||
let output;
|
||||
|
||||
@ -13,6 +13,7 @@ export const load = async ({ locals }) => {
|
||||
});
|
||||
|
||||
output = await response.json();
|
||||
setHeaders({ "cache-control": "public, max-age=60*15" });
|
||||
|
||||
|
||||
return output;
|
||||
|
||||
@ -17,18 +17,21 @@
|
||||
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";
|
||||
|
||||
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
|
||||
|
||||
export let data;
|
||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||
|
||||
let isLoaded = false;
|
||||
let optionGraphPost;
|
||||
let optionGraphComment;
|
||||
let optionGraphCompanySpread;
|
||||
let postList = [];
|
||||
let commentList = [];
|
||||
let numCompanyList = [];
|
||||
let timePeriod = "oneDay";
|
||||
|
||||
const today = new Date();
|
||||
const options = { month: "short", day: "numeric", year: "numeric" };
|
||||
const formattedDate = today.toLocaleDateString("en-US", options);
|
||||
|
||||
function formatUtcTimestamp(timestamp) {
|
||||
// Create a Date object from the UTC timestamp (in seconds)
|
||||
@ -93,7 +96,6 @@
|
||||
dates?.push(item?.date);
|
||||
postList?.push(item?.totalPosts);
|
||||
commentList?.push(item?.totalComments);
|
||||
numCompanyList?.push(item?.companySpread);
|
||||
});
|
||||
|
||||
const optionPost = {
|
||||
@ -214,68 +216,44 @@
|
||||
],
|
||||
};
|
||||
|
||||
const optionCompanySpread = {
|
||||
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: "Company Spread",
|
||||
type: "bar",
|
||||
smooth: true,
|
||||
barWidth: "90%",
|
||||
showSymbol: false,
|
||||
data: numCompanyList,
|
||||
itemStyle: {
|
||||
color: "#22C55E",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
return { optionPost, optionComment, optionCompanySpread };
|
||||
return { optionPost, optionComment };
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const { optionPost, optionComment, optionCompanySpread } = getPlotOptions();
|
||||
const { optionPost, optionComment } = getPlotOptions();
|
||||
optionGraphPost = optionPost;
|
||||
optionGraphComment = optionComment;
|
||||
optionGraphCompanySpread = optionCompanySpread;
|
||||
isLoaded = true;
|
||||
});
|
||||
let activeIdx = 0;
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
title: "Today",
|
||||
},
|
||||
{
|
||||
title: "Week",
|
||||
},
|
||||
{
|
||||
title: "Month",
|
||||
},
|
||||
{
|
||||
title: "3 Months",
|
||||
},
|
||||
];
|
||||
|
||||
function changeTimePeriod(state) {
|
||||
activeIdx = state;
|
||||
if (activeIdx === 0) {
|
||||
timePeriod = "oneDay";
|
||||
} else if (activeIdx === 1) {
|
||||
timePeriod = "oneWeek";
|
||||
} else if (activeIdx === 2) {
|
||||
timePeriod = "oneMonth";
|
||||
} else if (activeIdx === 3) {
|
||||
timePeriod = "threeMonths";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@ -310,372 +288,409 @@
|
||||
</svelte:head>
|
||||
|
||||
<section
|
||||
class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pb-40"
|
||||
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
|
||||
>
|
||||
<div class="flex flex-col w-full m-auto justify-center items-center">
|
||||
<div class="text-center mb-10 w-full px-4 3xl:px-10 mt-10 3xl:ml-20">
|
||||
<div class="flex flex-col items-start mb-10">
|
||||
<div class="flex flex-row items-center mb-10">
|
||||
<div
|
||||
class="flex-shrink-0 rounded-full w-12 h-12 sm:w-20 sm:h-20 relative bg-[#27272A] flex items-center border border-gray-600 justify-center"
|
||||
>
|
||||
<img
|
||||
style="clip-path: circle(50%);"
|
||||
class="avatar w-9 h-9 sm:w-16 sm:h-16"
|
||||
src={cloudFrontUrl + "/reddit/wallstreetbets_logo.png"}
|
||||
alt="stock logo"
|
||||
/>
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">Reddit Tracker</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
<div class="mb-6 border-b-[2px]">
|
||||
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
|
||||
Wallsteetbets Tracker
|
||||
</h1>
|
||||
</div>
|
||||
<h1
|
||||
class="text-white text-xl sm:text-4xl font-bold text-start w-full pl-4"
|
||||
>
|
||||
r/Wallstreetbets Tracker
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="text-start w-full text-gray-300 text-[1rem]">
|
||||
<span class="font-semibold text-white">Description:</span> <br /> Like
|
||||
4chan found a Bloomberg Terminal.
|
||||
</div>
|
||||
</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-white 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>
|
||||
|
||||
<div class="flex justify-center w-full m-auto overflow-hidden">
|
||||
<div
|
||||
class="relative flex justify-center items-center overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full">
|
||||
{#if isLoaded}
|
||||
<div
|
||||
class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 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-white 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-white 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>
|
||||
|
||||
<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-white 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>
|
||||
|
||||
<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"
|
||||
>Company Spread</Card.Title
|
||||
>
|
||||
<Card.Description
|
||||
class="text-start text-gray-300 text-sm pb-2"
|
||||
>Number of Tickers discussed in the last 24 hours:</Card.Description
|
||||
>
|
||||
<Card.Description class="text-white text-[1rem] pb-2"
|
||||
><span class="text-[#24D766] font-bold text-2xl">
|
||||
+{numCompanyList?.at(-1)}
|
||||
</span> discussed today
|
||||
</Card.Description>
|
||||
|
||||
<Card.Description class="text-gray-400 text-sm pb-2">
|
||||
{(
|
||||
(numCompanyList?.at(-1) / numCompanyList?.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={optionGraphCompanySpread}
|
||||
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>
|
||||
<Card.Root class="order-1 overflow-x-scroll h-full">
|
||||
<Card.Header class="flex flex-row items-center">
|
||||
<div class="flex flex-col items-start w-full">
|
||||
<div class="flex flex-row w-full items-center">
|
||||
<Card.Title
|
||||
class="text-xl sm:text-2xl text-white font-semibold"
|
||||
>Latest Posts</Card.Title
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content class="p-3 sm:p-6">
|
||||
{#each data?.getRedditTracker?.posts as item}
|
||||
<div
|
||||
class="flex flex-col items-start mb-3 p-3 border border-gray-800 rounded-md bg-[#141417]"
|
||||
<div class="mt-10 grid gap-4 md:gap-8 grid-cols-1 text-start">
|
||||
<Lazy>
|
||||
<Card.Root class="order-1 overflow-x-scroll h-full">
|
||||
<Card.Header class="flex flex-row items-center">
|
||||
<div class="flex flex-col items-start w-full">
|
||||
<div class="flex flex-row w-full items-center">
|
||||
<Card.Title
|
||||
class="text-start text-xl w-full flex flex-col sm:flex-row items-start sm:items-center"
|
||||
>
|
||||
<span>Trending Posts</span>
|
||||
<span
|
||||
class="text-sm sm:text-[1rem] mt-2 sm:mt-0 sm:ml-auto font-normal"
|
||||
>Updated {formattedDate}</span
|
||||
>
|
||||
</Card.Title>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content class="p-3 sm:p-6">
|
||||
{#each data?.getRedditTracker?.posts as item}
|
||||
<div
|
||||
class="flex flex-col items-start mb-3 p-3 border border-gray-800 rounded-md 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 text-white 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}
|
||||
</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="text-sm text-white 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 text-white sm:hover:text-blue-400"
|
||||
class="mt-2 sm:mt-0 text-sm text-white 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 * 100}%
|
||||
</label>
|
||||
<label class="text-sm">
|
||||
<MessageCircle
|
||||
class="h-5 w-5 inline-block -mt-1 shrink-0 mr-1"
|
||||
/>
|
||||
{item?.num_comments}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label
|
||||
class="mt-2 mb-2 text-xs bg-white rounded-md px-3 py-1 text-black"
|
||||
>
|
||||
{item?.link_flair_text}
|
||||
</label>
|
||||
|
||||
<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="text-sm text-white 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 text-white 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}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</Lazy>
|
||||
<Card.Root class="order-0 overflow-x-scroll no-scrollbar">
|
||||
<Card.Header>
|
||||
<Card.Title
|
||||
class="text-start text-xl w-full flex flex-row items-center"
|
||||
>
|
||||
<span> Last 14 Days Trend </span>
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="grid gap-y-4">
|
||||
<Table.Root class="overflow-x-scroll w-full">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class="text-white text-sm font-semibold"
|
||||
>Rank</Table.Head
|
||||
>
|
||||
<Table.Head class="text-white text-sm font-semibold"
|
||||
>Symbol</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="text-white text-sm font-semibold text-end"
|
||||
>Mentions</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="text-white text-sm font-semibold text-end"
|
||||
>Calls</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="text-white text-sm font-semibold text-end"
|
||||
>Puts</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="text-white text-sm font-semibold text-end"
|
||||
>Sentiment</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="text-white text-sm font-semibold text-end"
|
||||
>Price</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="text-white text-sm text-right whitespace-nowrap"
|
||||
>% Change</Table.Head
|
||||
>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each data?.getRedditTracker?.trending 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="text-white 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-[#00FC50]"
|
||||
>{item?.call}</Table.Cell
|
||||
>
|
||||
<Table.Cell
|
||||
class="text-right text-[1rem] text-[#FF2F1F]"
|
||||
>{item?.put}</Table.Cell
|
||||
>
|
||||
<Table.Cell
|
||||
class="text-right text-[1rem] {item?.avgSentiment >
|
||||
0.4
|
||||
? 'text-[#00FC50]'
|
||||
: item?.avgSentiment < -0.1
|
||||
? 'text-[#FF2F1F]'
|
||||
: 'text-[#C6A755]'} "
|
||||
>{item?.avgSentiment > 0.4
|
||||
? "Bullish"
|
||||
: item?.avgSentiment <= -0.1
|
||||
? "Bearish"
|
||||
: "Neutral"}</Table.Cell
|
||||
>
|
||||
|
||||
<Table.Cell
|
||||
class="text-right text-[1rem] text-white"
|
||||
>{item?.price?.toFixed(2)}</Table.Cell
|
||||
>
|
||||
|
||||
<Table.Cell class="text-right text-[1rem] ">
|
||||
<span
|
||||
class="{item?.changesPercentage > 0
|
||||
? 'text-[#00FC50]'
|
||||
: '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>
|
||||
</div>
|
||||
{/each}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label
|
||||
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
</Lazy>
|
||||
<Card.Root class="order-0 overflow-x-scroll no-scrollbar">
|
||||
<Card.Header>
|
||||
<nav
|
||||
class="border-b-[2px] overflow-x-scroll whitespace-nowrap"
|
||||
>
|
||||
<span
|
||||
class="loading loading-spinner loading-md text-gray-400"
|
||||
></span>
|
||||
</label>
|
||||
</div>
|
||||
<ul
|
||||
class="flex flex-row items-center w-full text-[1rem] sm:text-lg text-white"
|
||||
>
|
||||
{#each tabs as item, index}
|
||||
<label
|
||||
on:click={() => changeTimePeriod(index)}
|
||||
class="p-2 px-5 cursor-pointer {activeIdx === index
|
||||
? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
{item.title}
|
||||
</label>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
</Card.Header>
|
||||
<Card.Content class="grid gap-y-4">
|
||||
<Table.Root class="overflow-x-scroll w-full">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class="text-white text-sm font-semibold"
|
||||
>Rank</Table.Head
|
||||
>
|
||||
<Table.Head class="text-white text-sm font-semibold"
|
||||
>Symbol</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="text-white text-sm font-semibold text-end"
|
||||
>Mentions</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="text-white text-sm font-semibold text-end"
|
||||
>Calls</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="text-white text-sm font-semibold text-end"
|
||||
>Puts</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="text-white text-sm font-semibold text-end"
|
||||
>Sentiment</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="text-white text-sm font-semibold text-end"
|
||||
>Price</Table.Head
|
||||
>
|
||||
<Table.Head
|
||||
class="text-white text-sm text-right 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="text-white 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-[#00FC50]"
|
||||
>{item?.call}</Table.Cell
|
||||
>
|
||||
<Table.Cell
|
||||
class="text-right text-[1rem] text-[#FF2F1F]"
|
||||
>{item?.put}</Table.Cell
|
||||
>
|
||||
<Table.Cell
|
||||
class="text-right text-[1rem] {item?.avgSentiment >
|
||||
0.4
|
||||
? 'text-[#00FC50]'
|
||||
: item?.avgSentiment < -0.1
|
||||
? 'text-[#FF2F1F]'
|
||||
: 'text-[#C6A755]'} "
|
||||
>{item?.avgSentiment > 0.4
|
||||
? "Bullish"
|
||||
: item?.avgSentiment <= -0.1
|
||||
? "Bearish"
|
||||
: "Neutral"}</Table.Cell
|
||||
>
|
||||
|
||||
<Table.Cell class="text-right text-[1rem] text-white"
|
||||
>{item?.price?.toFixed(2)}</Table.Cell
|
||||
>
|
||||
|
||||
<Table.Cell class="text-right text-[1rem] ">
|
||||
<span
|
||||
class="{item?.changesPercentage > 0
|
||||
? 'text-[#00FC50]'
|
||||
: '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-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
>
|
||||
<span class="loading loading-spinner loading-md text-gray-400"
|
||||
></span>
|
||||
</label>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
|
||||
<div
|
||||
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href="/pricing"
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href="cramer-tracker"
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Cramer Tracker
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Follow Jim Cramer latest stock picks
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
|
||||
>
|
||||
<a
|
||||
href="/reddit-tracker"
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Reddit Tracker
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get the latest trends of r/Wallstreetbets
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user