diff --git a/src/routes/reddit-tracker/+page.server.ts b/src/routes/reddit-tracker/+page.server.ts index da1c7cd0..05570d4c 100644 --- a/src/routes/reddit-tracker/+page.server.ts +++ b/src/routes/reddit-tracker/+page.server.ts @@ -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; diff --git a/src/routes/reddit-tracker/+page.svelte b/src/routes/reddit-tracker/+page.svelte index 7d412c48..a921ecd3 100644 --- a/src/routes/reddit-tracker/+page.svelte +++ b/src/routes/reddit-tracker/+page.svelte @@ -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"; + } + } @@ -310,372 +288,409 @@
-
-
-
-
-
- stock logo + + +
+
+
+
+
+

+ Wallsteetbets Tracker +

-

- r/Wallstreetbets Tracker -

-
-
- Description:
Like - 4chan found a Bloomberg Terminal. -
-
+ {#if isLoaded} +
+ + + Post Activity + Number of Posts in the last 24 hours: + + +{postList?.at(-1)} + posts today + + + {((postList?.at(-1) / postList?.at(-2) - 1) * 100)?.toFixed( + 0, + )}% from yesterday + + + + +
+ +
+
+
+
-
-
-
- {#if isLoaded} -
- - - Post Activity - Number of Posts in the last 24 hours: - - +{postList?.at(-1)} - posts today - - - {( - (postList?.at(-1) / postList?.at(-2) - 1) * - 100 - )?.toFixed(0)}% from yesterday - - - - -
- -
-
-
-
+ + + Comment Activity + Number of Comments in the last 24 hours: + + +{abbreviateNumber(commentList?.at(-1))} + comments today + + + {( + (commentList?.at(-1) / commentList?.at(-2) - 1) * + 100 + )?.toFixed(0)}% from yesterday + + + + +
+ +
+
+
+
+
- - - Comment Activity - Number of Comments in the last 24 hours: - - +{abbreviateNumber(commentList?.at(-1))} - comments today - - - {( - (commentList?.at(-1) / commentList?.at(-2) - 1) * - 100 - )?.toFixed(0)}% from yesterday - - - - -
- -
-
-
-
- - - - Company Spread - Number of Tickers discussed in the last 24 hours: - - +{numCompanyList?.at(-1)} - discussed today - - - - {( - (numCompanyList?.at(-1) / numCompanyList?.at(-2) - 1) * - 100 - )?.toFixed(0)}% from yesterday - - - - -
- -
-
-
-
-
- -
- - - -
-
- Latest Posts -
-
-
- - {#each data?.getRedditTracker?.posts as item} -
+ + + +
+
+ + Trending Posts + Updated {formattedDate} + +
+
+
+ + {#each data?.getRedditTracker?.posts as item} +
+ + {item?.title} + + + {#if item?.selftext?.length !== 0} +
+ {#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} +
+ {/if} + +
+ + +
+ + + {#if item?.thumbnail !== null && item?.thumbnail} +
+
+ + + post image +
+ {/if} + +
+ + Posted by {item?.author} + - {item?.title} + {formatUtcTimestamp(item?.created_utc)} + - - {#if item?.selftext?.length !== 0} -
- {#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} -
- {/if} - -
- - -
- - - -
- {/each} - - - - - - - Last 14 Days Trend - - - - - - - Rank - Symbol - Mentions - Calls - Puts - Sentiment - Price - % Change - - - - {#each data?.getRedditTracker?.trending as item, index} - - - #{index + 1} - - -
- - -
-
- {item?.count} - {item?.call} - {item?.put} - {item?.avgSentiment > 0.4 - ? "Bullish" - : item?.avgSentiment <= -0.1 - ? "Bearish" - : "Neutral"} - - {item?.price?.toFixed(2)} - - - - {#if item?.changesPercentage > 0} - +{item?.changesPercentage?.toFixed(2)}% - {:else} - {item?.changesPercentage?.toFixed(2)}% - {/if} - - -
- {/each} -
-
+
+ {/each}
-
- {:else} -
-
-
+
    + {#each tabs as item, index} + + {/each} +
+ + + + + + + Rank + Symbol + Mentions + Calls + Puts + Sentiment + Price + % Change + + + + {#each data?.getRedditTracker?.trending[timePeriod]?.slice(0, 5) as item, index} + + + {index + 1} + + +
+ + +
+
+ {item?.count} + {item?.call} + {item?.put} + {item?.avgSentiment > 0.4 + ? "Bullish" + : item?.avgSentiment <= -0.1 + ? "Bearish" + : "Neutral"} + + {item?.price?.toFixed(2)} + + + + {#if item?.changesPercentage > 0} + +{item?.changesPercentage?.toFixed(2)}% + {:else} + {item?.changesPercentage?.toFixed(2)}% + {/if} + + +
+ {/each} +
+
+
+ +
+ {:else} +
+
+
- {/if} - -
+
+ {/if} + + +