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

update potus tracker

Browse Source
This commit is contained in:
MuslemRahimi 2025-02-24 14:27:24 +01:00
parent eed1b9fced
commit 2dfad5dd84
5 changed files with 513 additions and 303 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/images/newsletter.png:Zone.Identifier
View File

@ -1,4 +0,0 @@
[ZoneTransfer]
ZoneId=3
ReferrerUrl=https://imagecompressor.com/
HostUrl=https://imagecompressor.com/download/14lao7515uhpe1k0/file_og81ulb1md5krt1k6agg91hav1/Screenshot%202025-01-16%20112032-min.png

BIN
src/lib/images/trump-avatar.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

2
src/lib/images/uw_x_stocknear.jpg:Zone.Identifier
View File

@ -1,2 +0,0 @@
[ZoneTransfer]
ZoneId=3

4
src/lib/images/visual_mod.webp:Zone.Identifier
View File

@ -1,4 +0,0 @@
[ZoneTransfer]
ZoneId=3
ReferrerUrl=https://useast-pb.stocknear.com/_/
HostUrl=https://useast-pb.stocknear.com/api/files/_pb_users_auth_/9ncz4wunmhk0k52/profile_icon_kof6ixwefd4c1_n9a6Ljm6rj.webp?token=

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

@ -1,13 +1,33 @@
<script lang="ts">
import SEO from "$lib/components/SEO.svelte";
import Map from "$lib/components/Map.svelte";
import Infobox from "$lib/components/Infobox.svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import highcharts from "$lib/highcharts.ts";
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
import { Button } from "$lib/components/shadcn/button/index.js";
import { sectorList } from "$lib/utils";
import avatar from "$lib/images/trump-avatar.jpeg";
export let data;
const updatedSectorList = ["S&P500", ...sectorList];
let rawData = data?.getData?.history || [];
let executiveOrders = data?.getData?.executiveOrders || [];
let selectedSector = "S&P500";
const sectorDict = {
"S&P500": "SPY",
"Basic Materials": "XLB",
"Communication Services": "XLC",
Energy: "XLE",
"Financial Services": "XLF",
Industrials: "XLI",
Technology: "XLK",
"Consumer Defensive": "XLP",
"Real Estate": "XLRE",
Utilities: "XLU",
Healthcare: "XLV",
"Consumer Cyclical": "XLY",
};
const groupedByDate = rawData?.reduce((acc, item) => {
const dateKey = new Intl.DateTimeFormat("en-US", {
@ -43,10 +63,9 @@
];
let activeIdx = 0;
let expandedDescriptions: { [key: string]: boolean } = {};
function truncateText(text: string, maxLength: number = 250) {
function truncateText(text: string, maxLength: number = 300) {
if (text.length <= maxLength) return text;
return text.slice(0, maxLength) + "...";
}
@ -75,6 +94,105 @@
// Return whether the difference is less than or equal to 1 day
return differenceInDays <= 2;
}
function plotData() {
// Transform raw data into arrays for Highcharts
const rawData =
data?.getData?.marketPerformance[sectorDict[selectedSector]];
// Convert data into arrays for Highcharts
const categories = Object.keys(rawData);
const values = Object.values(rawData);
const options = {
credits: {
enabled: false,
},
chart: {
type: "column",
backgroundColor: "#09090B",
plotBackgroundColor: "#09090B",
height: 360,
animation: false,
},
title: {
text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-xl">${selectedSector} - Performance</h3>`,
style: {
color: "white",
},
useHTML: true,
},
xAxis: {
categories: categories,
gridLineWidth: 0,
labels: {
style: { color: "white" },
},
},
yAxis: {
gridLineWidth: 1,
gridLineColor: "#111827",
labels: {
style: { color: "white" },
formatter: function () {
return this.value + "%"; // Add percentage symbol
},
},
title: { text: null },
opposite: true,
},
tooltip: {
enabled: false,
},
plotOptions: {
series: {
color: "white",
animation: false,
dataLabels: {
enabled: true,
color: "white",
style: {
fontSize: "13px",
fontWeight: "bold",
},
formatter: function () {
return this.y.toFixed(2) + "%"; // Add percentage symbol
},
},
},
},
legend: {
enabled: false,
},
series: [
{
name: "Performance",
data: values,
zones: [
{
value: 0, // Values below 0
color: "#E02424", // Red
borderColor: "#E02424", // Red border
},
{
color: "#10B981", // Green for values 0 and above
borderColor: "#10B981", // Green border
},
],
},
],
};
return options;
}
let config = null;
$: {
if (selectedSector) {
config = plotData() || null;
}
}
</script>
<SEO
@ -112,27 +230,104 @@
<div class="mt-5 mb-5">
<Infobox
text={`Since the inauguration of Donald J. Trump on January 20, 2025, the
S&P500 has ${data?.getData?.returnSince >= 0 ? "grown" : "declined"} by <span class="${data?.getData?.returnSince >= 0 ? "text-[#00FC50] before:content-['+']" : "text-[#FF2F1F]"}">
${data?.getData?.returnSince ?? "n/a"}%</span>.`}
${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]"}">
${data?.getData?.marketPerformance[sectorDict[selectedSector]]["Inauguration"] ?? "n/a"}%</span>.`}
/>
</div>
<h2
class="text-white text-[1rem] sm:text-xl font-semibold mb-2 mt-4"
<div class="flex flex-row items-center w-fit ml-auto mt-2 sm:mt-0">
<div class="relative inline-block text-left grow">
<DropdownMenu.Root>
<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"
>
The President is in {(data?.getData?.city === "Washington" ||
data?.getData?.city === null
? "the White House"
: data?.getData?.city) ?? "n/a"}
</h2>
<div class="w-full m-auto border border-gray-800 rounded-[10px]">
<Map LAT={data?.getData?.lat} LON={data?.getData?.lon} />
<span class="truncate text-white">{selectedSector}</span>
<svg
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
>
<DropdownMenu.Label class="text-gray-400">
Select Sector
</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Group>
{#each updatedSectorList as sector}
{#if sector === "S&P500" || data?.user?.tier === "Pro"}
<DropdownMenu.Item
on:click={() => (selectedSector = sector)}
class="cursor-pointer hover:bg-primary"
>
{sector}
</DropdownMenu.Item>
{:else}
<DropdownMenu.Item
on:click={() => goto("/pricing")}
class="cursor-pointer hover:bg-primary"
>
{sector}
<svg
class="ml-1 size-4"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width: 40px;"
>
<path
fill-rule="evenodd"
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
clip-rule="evenodd"
>
</path>
</svg>
</DropdownMenu.Item>
{/if}
{/each}
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
</div>
<span class="text-gray-300 text-xs">
Map data © OpenStreetMap
</span>
<div
class="chart mt-5 border border-gray-800 rounded"
use:highcharts={config}
></div>
<nav
class=" border-b-[2px] whitespace-nowrap mt-10 sm:mt-6 overflow-hidden"
>
<ul
class="flex flex-row items-center w-full text-[1rem] text-white"
>
{#each tabs as item, i}
<button
on:click={() => (activeIdx = i)}
class="p-2 px-5 cursor-pointer {activeIdx === i
? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
>
{item.title}
</button>
{/each}
</ul>
</nav>
{#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"
>
@ -145,9 +340,11 @@
{#each Object.entries(groupedByDate) as [date, items], indexA}
<div class="my-4">
<div
class="border-b border-gray-200 pb-2 w-full flex flex-row items-center justify-between"
class="border-b 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] font-semibold text-white">
{date}</span
>
{#if items?.at(0)?.changesPercentage}
@ -225,12 +422,10 @@
{/each}
</div>
</div>
</div>
<div
class="order-4 flex-shrink-0 lg:float-right lg:w-[336px] no-scrollbar overflow-y-auto"
{:else}
<h3
class="text-white text-lg sm:text-xl font-semibold mb-2 mt-6 border-y border-gray-800 pt-2 pb-2"
>
<h3 class="text-white text-lg sm:text-xl font-semibold mb-2 mt-6">
Executive Actions
</h3>
<div
@ -240,9 +435,9 @@
{#each Object.entries(groupedOrders) as [date, items], indexA}
<div class="my-4">
<div
class="border-b border-gray-300 pb-2 flex flex-row items-center"
class="border-b border-gray-600 pb-2 flex flex-row items-center"
>
<span class="text-lg font-semibold text-white"
<span class="text-[1rem] font-semibold text-white"
>{date}</span
>
{#if latestInfoDate(date)}
@ -258,67 +453,35 @@
<div
class="flex flex-col items-start space-y-1 mb-6 border-b border-gray-800 pb-4"
>
<div class="flex flex-row items-center space-x-2">
<div class="relative">
<svg
fill={indexA === 0 && indexB === 0
? "#2E86DE"
: "#808080"}
class="w-5 h-5 relative z-10"
viewBox="-51.2 -51.2 614.40 614.40"
id="_78_Circle-Full"
xmlns="http://www.w3.org/2000/svg"
stroke={indexA === 0 && indexB === 0
? "#2E86DE"
: "#808080"}
stroke-width="0.00512"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
stroke="#CCCCCC"
stroke-width="24.576"
></g>
<g id="SVGRepo_iconCarrier">
<path
id="Path_111"
data-name="Path 111"
d="M256,512C114.625,512,0,397.375,0,256S114.625,0,256,0,512,114.625,512,256,397.375,512,256,512Zm0-448C149.969,64,64,149.969,64,256s85.969,192,192,192,192-85.969,192-192S362.031,64,256,64Zm0,320A128,128,0,1,1,384,256,128.006,128.006,0,0,1,256,384Z"
fill-rule="evenodd"
></path>
</g>
</svg>
<div class="flex items-start space-x-3">
<img
class="w-10 h-10 rounded-full flex-shrink-0"
src={avatar}
alt="Avatar"
loading="lazy"
/>
{#if indexA === 0 && indexB === 0}
<span
class="absolute -inset-1 rounded-full animate-ping w-3 h-3 m-auto bg-blue-400/75"
></span>
{/if}
</div>
<div class="flex flex-col w-full">
<h3 class="text-white font-semibold">
{item?.title}
</h3>
<div
class="text-sm flex flex-col items-start w-full mb-1"
>
<span
class="text-white text-lg font-semibold inline-block"
>{item.title}</span
>
</div>
</div>
<div
class="ml-7 {item?.sentiment === 'Bullish'
? 'bg-emerald-500 text-white'
: item?.sentiment === 'Bearish'
? 'bg-red-600 text-white'
: 'bg-white text-black'} py-1 rounded text-xs sm:text-sm w-fit px-2 font-medium"
class={`mt-1 px-3 py-1 rounded text-xs sm:text-sm font-medium w-fit
${
item?.sentiment === "Bullish"
? "bg-emerald-500 text-white"
: item?.sentiment === "Bearish"
? "bg-red-600 text-white"
: "bg-gray-200 text-black"
}`}
>
{item?.sentiment}
</div>
</div>
</div>
<span class="text-[1rem] ml-7 pt-2">
<span class="text-sm ml-14 pt-2">
{#if item.description.length > 150}
{expandedDescriptions[item.title]
? item.description
@ -342,7 +505,7 @@
href={item?.link}
rel="noopener noreferrer"
target="_blank"
class="ml-7 inline-block text-sm sm:text-[1rem] text-white hover:underline"
class="ml-14 inline-block text-sm text-white hover:underline"
>
Source
<svg
@ -427,6 +590,63 @@
{/each}
</div>
</div>
{/if}
</div>
<div class="order-4 flex-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"
>
<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">
Market Newsletter
</h2>
</div>
<span class="text-white p-3 ml-3 mr-3">
Get a daily email with the top market news in bullet point
format.
</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"
>
<a
href={"/stock-screener"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener
</h2>
</div>
<span class="text-white 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"
>
<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">
Watchlist
</h2>
</div>
<span class="text-white p-3 ml-3 mr-3">
Keep track of your favorite stocks in real-time.
</span>
</a>
</div>
</div>
</div>
</div>