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

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2025-03-11 22:36:36 +01:00
parent ac9fc73737
commit 79c869b741
25 changed files with 437 additions and 460 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/Options/HottestContracts.svelte
View File

@ -850,11 +850,11 @@
</p> </p>
<button class="cursor-pointer text-[1.8rem] focus:outline-hidden"> <button class="cursor-pointer text-[1.8rem] focus:outline-hidden">
<svg <svg
class="w-8 h-8" class="w-8 h-8 text-muted dark:text-white"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="white" fill="currentColor"
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z" d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
/> />
</svg> </svg>

4
src/lib/components/Options/UnusualActivity.svelte
View File

@ -888,11 +888,11 @@
</p> </p>
<button class="cursor-pointer text-[1.8rem] focus:outline-hidden"> <button class="cursor-pointer text-[1.8rem] focus:outline-hidden">
<svg <svg
class="w-8 h-8" class="w-8 h-8 text-muted dark:text-white"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="white" fill="currentColor"
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z" d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
/> />
</svg> </svg>

12
src/routes/etf/[tickerID]/+layout.svelte
View File

@ -364,7 +364,7 @@
<svelte:window bind:scrollY={y} /> <svelte:window bind:scrollY={y} />
<body <body
class="bg-default w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden" class="w-full max-w-screen sm:max-w-[1250px] min-h-screen overflow-hidden"
> >
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="mt-5 flex flex-col w-full relative w-full"> <div class="mt-5 flex flex-col w-full relative w-full">
@ -373,7 +373,7 @@
<div class="w-full"> <div class="w-full">
<div class="sm:flex sm:justify-start w-full sm:max-w-[1250px]"> <div class="sm:flex sm:justify-start w-full sm:max-w-[1250px]">
<!--Start Mobile Navbar--> <!--Start Mobile Navbar-->
<div class="fixed top-0 left-0 right-0 z-20 bg-default sm:hidden"> <div class="fixed top-0 left-0 right-0 z-20 sm:hidden">
<div class="navbar w-full px-4 py-2"> <div class="navbar w-full px-4 py-2">
<div <div
class="{isScrolled class="{isScrolled
@ -590,7 +590,7 @@
<div class="flex flex-col ml-auto mr-2"> <div class="flex flex-col ml-auto mr-2">
{#if userWatchList?.length !== 0} {#if userWatchList?.length !== 0}
<div <div
class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center" class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
> >
<label <label
for="addWatchListModal" for="addWatchListModal"
@ -621,7 +621,7 @@
</div> </div>
{:else if userWatchList?.length === 0} {:else if userWatchList?.length === 0}
<div <div
class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center" class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
> >
<label <label
on:click={() => on:click={() =>
@ -655,7 +655,7 @@
</div> </div>
{:else} {:else}
<div <div
class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center" class="shrink-0 ml-auto mr-2 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
> >
<label <label
for="userLogin" for="userLogin"
@ -678,7 +678,7 @@
<!--Start Price Alert --> <!--Start Price Alert -->
<div <div
class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative bg-default flex items-center justify-center" class="shrink-0 rounded-full sm:hover:bg-white/10 transition ease-out w-12 h-12 relative flex items-center justify-center"
> >
<label <label
on:click={() => ($openPriceAlert = true)} on:click={() => ($openPriceAlert = true)}

4
src/routes/etf/[tickerID]/dark-pool/+layout.svelte
View File

@ -10,11 +10,11 @@
<div <div
class="relative flex justify-center items-start overflow-hidden w-full" class="relative flex justify-center items-start overflow-hidden w-full"
> >
<main class="w-full lg:w-3/4"> <main class="w-full lg:w-3/4 lg:pr-10">
<slot /> <slot />
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 mt-3">
<div <div
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" 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"
> >

66
src/routes/etf/[tickerID]/dark-pool/+page.server.ts
View File

@ -3,17 +3,30 @@ import { validateData } from "$lib/utils";
import { loginUserSchema, registerUserSchema } from "$lib/schemas"; import { loginUserSchema, registerUserSchema } from "$lib/schemas";
export const load = async ({ params, locals }) => {
export const load = async ({ locals, params }) => {
const { apiURL, apiKey, user } = locals; const { apiURL, apiKey, user } = locals;
const ticker = params.tickerID;
if (!ticker) {
return { error: 'Invalid ticker ID' };
}
// Define the endpoints you want to fetch in bulk
const endpoints = [
"/dark-pool-level",
"/historical-dark-pool",
];
// Prepare the payload for the bulk request
const postData = { const postData = {
ticker: params.tickerID, ticker,
endpoints
}; };
const getPriceLevel = async () => { try {
const response = await fetch(`${apiURL}/bulk-data`, {
const response = await fetch(apiURL + "/dark-pool-level", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
@ -22,41 +35,30 @@ export const load = async ({ params, locals }) => {
body: JSON.stringify(postData), body: JSON.stringify(postData),
}); });
let output = await response.json(); if (!response.ok) {
output.hottestTrades = user?.tier !== "Pro" ? output?.hottestTrades?.slice(0, 3) : output.hottestTrades; throw new Error("Failed to fetch bulk data");
}
const bulkData = await response.json();
return output; // Process analyst ticker history: if user isn't Pro, limit to 6 items
}; let priceLevel = bulkData["/dark-pool-level"];
if (user?.tier !== "Pro") {
priceLevel.hottestTrades = priceLevel?.hottestTrades?.slice(0, 3);
}
const getHistoricalDarkPool = async () => {
// make the POST request to the endpoint
const response = await fetch(apiURL + "/historical-dark-pool", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
const output = await response.json();
return output;
};
// Make sure to return a promise
return { return {
getPriceLevel: await getPriceLevel(), getPriceLevel: priceLevel,
getHistoricalDarkPool: await getHistoricalDarkPool(), getHistoricalDarkPool: bulkData["/historical-dark-pool"],
}; };
} catch (error) {
return { error: "Failed to load data" };
}
}; };
export const actions = { export const actions = {
login: async ({ url, request, locals }) => { login: async ({ url, request, locals }) => {

5
src/routes/etf/[tickerID]/dark-pool/+page.svelte
View File

@ -19,7 +19,7 @@
description={`Explore exclusive dark pool trading data for ${$displayCompanyName} (${$etfTicker}). Get insights into hidden market activity, stock price movements, institutional trades, financials, and key statistics.`} description={`Explore exclusive dark pool trading data for ${$displayCompanyName} (${$etfTicker}). Get insights into hidden market activity, stock price movements, institutional trades, financials, and key statistics.`}
/> />
<section class="w-full bg-default overflow-hidden text-white h-full"> <section class="w-full overflow-hidden h-full">
<div class="w-full flex h-full overflow-hidden"> <div class="w-full flex h-full overflow-hidden">
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
@ -34,7 +34,7 @@
<div class="flex flex-row items-center mb-4 sm:mb-0"> <div class="flex flex-row items-center mb-4 sm:mb-0">
<label <label
for="darkPoolInfo" for="darkPoolInfo"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold" class="mr-1 cursor-pointer flex flex-row items-center text-xl sm:text-2xl font-bold"
> >
Dark Pool Data Dark Pool Data
</label> </label>
@ -59,6 +59,7 @@
{#if hottestTrades?.length > 0} {#if hottestTrades?.length > 0}
<HottestTrades {data} rawData={hottestTrades} /> <HottestTrades {data} rawData={hottestTrades} />
{/if} {/if}
{#if historicalDarkPool?.length > 10} {#if historicalDarkPool?.length > 10}
<HistoricalVolume {data} rawData={historicalDarkPool} /> <HistoricalVolume {data} rawData={historicalDarkPool} />
{/if} {/if}

6
src/routes/etf/[tickerID]/dividends/+layout.svelte
View File

@ -20,13 +20,13 @@
<aside class="hidden lg:block relative fixed w-1/4 mt-3"> <aside class="hidden lg:block relative fixed w-1/4 mt-3">
{#if newsList?.length !== 0} {#if newsList?.length !== 0}
<div <div
class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit" class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
> >
<div class="p-4 text-sm"> <div class="p-4 text-sm">
<h3 class="text-lg text-white font-semibold mb-3"> <h3 class="text-lg font-semibold mb-3">
{$etfTicker} News {$etfTicker} News
</h3> </h3>
<ul class="text-white"> <ul class="">
{#each newsList?.slice(0, 10) as item} {#each newsList?.slice(0, 10) as item}
<li class="mb-3 last:mb-1"> <li class="mb-3 last:mb-1">
{formatDate(item?.publishedDate)} &#183; {formatDate(item?.publishedDate)} &#183;

90
src/routes/etf/[tickerID]/dividends/+page.svelte
View File

@ -68,59 +68,53 @@
description={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} description={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
/> />
<section class="w-full bg-default overflow-hidden text-white h-full"> <section class="w-full overflow-hidden h-full">
<div class="w-full flex h-full overflow-hidden"> <div class="w-full flex h-full overflow-hidden">
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
> >
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
<div class="w-full mb-6"> <div class="w-full mb-6">
<h1 class="text-xl sm:text-2xl text-gray-200 font-bold mb-4 w-full"> <h1 class="text-xl sm:text-2xl font-bold mb-4 w-full">Dividends</h1>
Dividends
</h1>
<Infobox text={htmlOutput} /> <Infobox text={htmlOutput} />
</div> </div>
{#if rawData?.history?.length !== 0} {#if rawData?.history?.length !== 0}
<div <div
class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 md:grid-cols-3 md:grid-rows-1 divide-x" class="shadow-sm mb-4 grid grid-cols-2 grid-rows-1 divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 md:grid-cols-3 md:grid-rows-1 divide-x"
> >
<div class="p-4 bp:p-5 sm:p-6"> <div class="p-4 bp:p-5 sm:p-6">
<label <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]" class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
> >
Dividend Yield Dividend Yield
</label> </label>
<div <div class="mt-1 break-words font-semibold leading-8 text-xl">
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{dividendYield !== "0.00" ? dividendYield : "0"}% {dividendYield !== "0.00" ? dividendYield : "0"}%
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-b border-gray-600"> <div
class="p-4 bp:p-5 sm:p-6 border-b border-gray-300 dark:border-gray-600"
>
<label <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]" class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
> >
Annual Dividend Annual Dividend
</label> </label>
<div <div class="mt-1 break-words font-semibold leading-8 text-xl">
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{annualDividend !== "0.00" ? annualDividend : "0"} {annualDividend !== "0.00" ? annualDividend : "0"}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-none"> <div class="p-4 bp:p-5 sm:p-6 border-t border-b sm:border-none">
<label <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]" class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
> >
Ex-Dividend Date Ex-Dividend Date
</label> </label>
<div <div class="mt-1 break-words font-semibold leading-8 text-xl">
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{new Date(exDividendDate)?.toLocaleString("en-US", { {new Date(exDividendDate)?.toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
@ -132,53 +126,47 @@
<div class="p-4 bp:p-5 sm:p-6 border-t"> <div class="p-4 bp:p-5 sm:p-6 border-t">
<label <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]" class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
> >
Payout Frequency Payout Frequency
</label> </label>
<div <div class="mt-1 break-words font-semibold leading-8 text-xl">
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{payoutFrequency ? payoutFrequency : "n/a"} {payoutFrequency ? payoutFrequency : "n/a"}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6"> <div class="p-4 bp:p-5 sm:p-6">
<label <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]" class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
> >
Payout Ratio Payout Ratio
</label> </label>
<div <div class="mt-1 break-words font-semibold leading-8 text-xl">
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{payoutRatio !== "0.00" && payoutRatio !== null {payoutRatio !== "0.00" && payoutRatio !== null
? payoutRatio + "%" ? payoutRatio + "%"
: "n/a"} : "n/a"}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-t border-gray-600"> <div
class="p-4 bp:p-5 sm:p-6 border-t border-gray-300 dark:border-gray-600"
>
<label <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]" class="mr-1 cursor-pointer flex flex-row items-center text-[1rem]"
> >
Dividend Growth Dividend Growth
</label> </label>
<div <div class="mt-1 break-words font-semibold leading-8 text-xl">
class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{dividendGrowth ? dividendGrowth + "%" : "n/a"} {dividendGrowth ? dividendGrowth + "%" : "n/a"}
</div> </div>
</div> </div>
</div> </div>
<div <div
class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-5 mb-8" class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-5 mb-4"
> >
<h2 class="text-xl sm:text-2xl text-white font-bold"> <h2 class="text-xl sm:text-2xl font-bold">Dividends History</h2>
Dividends History
</h2>
</div> </div>
{#if rawData?.history?.length !== 0} {#if rawData?.history?.length !== 0}
@ -186,32 +174,32 @@
class="overflow-x-auto no-scrollbar flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4" class="overflow-x-auto no-scrollbar flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4"
> >
<table <table
class="table table-sm table-compact bg-table border border-gray-800 flex justify-start items-center w-full m-auto" class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
> >
<thead class="bg-default"> <thead class="text-muted dark:text-white dark:bg-default">
<tr class=""> <tr class="">
<th class="text-start text-white text-sm font-semibold"> <th class="text-start text-sm font-semibold">
Ex-Dividend Date Ex-Dividend Date
</th> </th>
<th class="text-end text-white text-sm font-semibold"> <th class="text-end text-sm font-semibold">
Cash Amount Cash Amount
</th> </th>
<th class="text-end text-white text-sm font-semibold"> <th class="text-end text-sm font-semibold">
Declaration Date Declaration Date
</th> </th>
<th class="text-end text-white text-sm font-semibold"> <th class="text-end text-sm font-semibold">
Record Date Record Date
</th> </th>
<th class="text-end text-white text-sm font-semibold"> <th class="text-end text-sm font-semibold"> Pay Date </th>
Pay Date
</th>
</tr> </tr>
</thead> </thead>
<tbody class=""> <tbody class="">
{#each rawData?.history as item} {#each rawData?.history as item}
<tr class="text-white odd:bg-odd"> <tr
class=" dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
>
<td <td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
> >
{new Date(item?.date)?.toLocaleString("en-US", { {new Date(item?.date)?.toLocaleString("en-US", {
month: "short", month: "short",
@ -221,12 +209,12 @@
})} })}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
${item?.adjDividend?.toFixed(3)} ${item?.adjDividend?.toFixed(3)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.declarationDate?.length !== 0 {item?.declarationDate?.length !== 0
? new Date(item?.declarationDate)?.toLocaleString( ? new Date(item?.declarationDate)?.toLocaleString(
@ -241,7 +229,7 @@
: "n/a"} : "n/a"}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.recordDate?.length !== 0 {item?.recordDate?.length !== 0
? new Date(item?.recordDate)?.toLocaleString( ? new Date(item?.recordDate)?.toLocaleString(
@ -256,7 +244,7 @@
: "n/a"} : "n/a"}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.paymentDate?.length !== 0 {item?.paymentDate?.length !== 0
? new Date(item?.paymentDate)?.toLocaleString( ? new Date(item?.paymentDate)?.toLocaleString(

102
src/routes/etf/[tickerID]/history/+page.svelte
View File

@ -1,9 +1,5 @@
<script lang="ts"> <script lang="ts">
import { import { stockTicker, displayCompanyName } from "$lib/store";
etfTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
import TableHeader from "$lib/components/Table/TableHeader.svelte"; import TableHeader from "$lib/components/Table/TableHeader.svelte";
import Infobox from "$lib/components/Infobox.svelte"; import Infobox from "$lib/components/Infobox.svelte";
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js"; import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
@ -11,11 +7,9 @@
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
export let data; export let data;
let isLoaded = false;
let timePeriod = "Daily"; let timePeriod = "Daily";
let rawData = data?.getData || []; let rawData = data?.getData || [];
let originalData = []; let originalData = [];
@ -253,7 +247,7 @@
const a = document.createElement("a"); const a = document.createElement("a");
a.setAttribute("hidden", ""); a.setAttribute("hidden", "");
a.setAttribute("href", url); a.setAttribute("href", url);
a.setAttribute("download", `${$etfTicker}_price_history.csv`); a.setAttribute("download", `${$stockTicker}_price_history.csv`);
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
document.body.removeChild(a); document.body.removeChild(a);
@ -263,36 +257,34 @@
} }
$: { $: {
if (timePeriod && typeof window !== "undefined") { if (timePeriod) {
isLoaded = false;
rawData = prepareDataset(data?.getData, timePeriod); rawData = prepareDataset(data?.getData, timePeriod);
originalData = rawData; originalData = rawData;
stockList = rawData?.slice(0, 50); stockList = rawData?.slice(0, 50);
isLoaded = true;
} }
} }
</script> </script>
<SEO <SEO
title={`${$displayCompanyName} (${$etfTicker}) Stock Price History`} title={`${$displayCompanyName} (${$stockTicker}) Stock Price History · Stocknear`}
description={`Get a complete stock price history for ${$displayCompanyName} (${$etfTicker}), starting from its first trading day. Includes open, high, low, close and volume.`} description={`Get a complete stock price history for ${$displayCompanyName} (${$stockTicker}), starting from its first trading day. Includes open, high, low, close and volume.`}
/> />
<section <section
class="bg-default overflow-hidden text-white h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0" class=" overflow-hidden h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
> >
<div class="w-full overflow-hidden m-auto mt-5"> <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="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div <div
class="relative flex justify-center items-start overflow-hidden w-full" class="relative flex justify-center items-start overflow-hidden w-full"
> >
<main class="w-full lg:w-3/4"> <main class="w-full lg:w-3/4 lg:pr-10">
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto">
<div <div
class="flex flex-col sm:flex-row items-start w-full sm:justify-between md:space-x-4 md:border-0 w-full mb-5" class="flex flex-col sm:flex-row items-start w-full sm:justify-between md:space-x-4 md:border-0 w-full mb-5"
> >
<h1 class="text-xl sm:text-2xl font-bold mb-3 sm:mb-0"> <h1 class="text-xl sm:text-2xl font-bold mb-3 sm:mb-0">
{$etfTicker} Stock Price History {$stockTicker} Stock Price History
</h1> </h1>
<div <div
class="flex flex-row items-center ml-auto w-fit mt-2 sm:mt-0" class="flex flex-row items-center ml-auto w-fit mt-2 sm:mt-0"
@ -302,11 +294,9 @@
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="w-fit sm: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-fit border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 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 px-1"
>{timePeriod}</span
> >
<span class="truncate px-1">{timePeriod}</span>
<svg <svg
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block" class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@ -325,20 +315,20 @@
<DropdownMenu.Content <DropdownMenu.Content
class="w-56 h-fit max-h-72 overflow-y-auto scroller" class="w-56 h-fit max-h-72 overflow-y-auto scroller"
> >
<DropdownMenu.Label class="text-gray-400"> <DropdownMenu.Label class="text-muted dark:text-gray-400">
Select time frame Select time frame
</DropdownMenu.Label> </DropdownMenu.Label>
<DropdownMenu.Separator /> <DropdownMenu.Separator />
<DropdownMenu.Group> <DropdownMenu.Group>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (timePeriod = "Daily")} on:click={() => (timePeriod = "Daily")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Daily Daily
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (timePeriod = "Weekly")} on:click={() => (timePeriod = "Weekly")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Weekly Weekly
</DropdownMenu.Item> </DropdownMenu.Item>
@ -346,7 +336,7 @@
{#each ["Monthly", "Quarterly", "Annual"] as entry} {#each ["Monthly", "Quarterly", "Annual"] as entry}
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => goto("/pricing")} on:click={() => goto("/pricing")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
{entry} {entry}
<svg <svg
@ -354,7 +344,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="#A3A3A3" 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" 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 /></svg
> >
@ -363,19 +353,19 @@
{:else} {:else}
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (timePeriod = "Monthly")} on:click={() => (timePeriod = "Monthly")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Monthly Monthly
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (timePeriod = "Quarterly")} on:click={() => (timePeriod = "Quarterly")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Quarterly Quarterly
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (timePeriod = "Annual")} on:click={() => (timePeriod = "Annual")}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Annual Annual
</DropdownMenu.Item> </DropdownMenu.Item>
@ -387,9 +377,9 @@
<Button <Button
on:click={() => exportData()} on:click={() => exportData()}
class="ml-2 w-fit 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 ml-2 border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 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">Download</span> <span class="truncate">Download</span>
<svg <svg
class="{['Pro', 'Plus']?.includes(data?.user?.tier) class="{['Pro', 'Plus']?.includes(data?.user?.tier)
? 'hidden' ? 'hidden'
@ -397,21 +387,20 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="#A3A3A3" 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" 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 /></svg
> >
</Button> </Button>
</div> </div>
</div> </div>
{#if isLoaded}
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="w-full m-auto mt-2"> <div class="w-full m-auto mt-2">
<div <div
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto" class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
> >
<table <table
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto" class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
> >
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
@ -420,7 +409,7 @@
<tbody> <tbody>
{#each stockList as item, index} {#each stockList as item, index}
<tr <tr
class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index + class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
1 === 1 ===
rawData?.length && rawData?.length &&
!['Pro', 'Plus']?.includes(data?.user?.tier) !['Pro', 'Plus']?.includes(data?.user?.tier)
@ -428,7 +417,7 @@
: ''}" : ''}"
> >
<td <td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
> >
{#if timePeriod === "Weekly"} {#if timePeriod === "Weekly"}
Week of {new Date(item?.time).toLocaleString( Week of {new Date(item?.time).toLocaleString(
@ -437,7 +426,7 @@
month: "short", month: "short",
day: "numeric", day: "numeric",
year: "numeric", year: "numeric",
daySuffix: "2-digit", timeZone: "Europe/Berlin",
}, },
)} )}
{:else} {:else}
@ -445,50 +434,50 @@
month: "short", month: "short",
day: "numeric", day: "numeric",
year: "numeric", year: "numeric",
daySuffix: "2-digit", timeZone: "Europe/Berlin",
})} })}
{/if} {/if}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.open?.toFixed(2)} {item?.open?.toFixed(2)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.high?.toFixed(2)} {item?.high?.toFixed(2)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.low?.toFixed(2)} {item?.low?.toFixed(2)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.close?.toFixed(2)} {item?.close?.toFixed(2)}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.change !== null ? item?.change : "n/a"} {item?.change !== null ? item?.change : "n/a"}
</td> </td>
<td <td
class="text-sm sm:text-[1rem] {item?.changesPercentage >= class="text-sm sm:text-[1rem] {item?.changesPercentage >=
0 && item?.changesPercentage !== null 0 && item?.changesPercentage !== null
? "text-[#00FC50] before:content-['+'] " ? "text-green-600 dark:text-[#00FC50] before:content-['+'] "
: item?.changesPercentage < 0 && : item?.changesPercentage < 0 &&
item?.changesPercentage !== null item?.changesPercentage !== null
? 'text-red-600 dark:text-[#FF2F1F]' ? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'} text-end" : ''} text-end"
> >
{item?.changesPercentage !== null {item?.changesPercentage !== null
? item?.changesPercentage + "%" ? item?.changesPercentage + "%"
: "n/a"} : "n/a"}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.volume?.toLocaleString("en-US")} {item?.volume?.toLocaleString("en-US")}
</td> </td>
@ -503,22 +492,9 @@
text={`No price history are available for ${$displayCompanyName}.`} text={`No price history are available for ${$displayCompanyName}.`}
/> />
{/if} {/if}
{: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}
</div> </div>
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 mt-3">
<div <div
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" 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"
> >
@ -530,9 +506,7 @@
<h2 class="text-start text-xl font-semibold ml-3"> <h2 class="text-start text-xl font-semibold ml-3">
Stock Screener Stock Screener
</h2> </h2>
<ArrowLogo <ArrowLogo class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:" />
class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
/>
</div> </div>
<span class="p-3 ml-3 mr-3"> <span class="p-3 ml-3 mr-3">
Filter, sort and analyze all stocks to find your next Filter, sort and analyze all stocks to find your next
@ -550,9 +524,7 @@
> >
<div class="w-full flex justify-between items-center p-3 mt-3"> <div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold ml-3">Watchlist</h2> <h2 class="text-start text-xl font-semibold ml-3">Watchlist</h2>
<ArrowLogo <ArrowLogo class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:" />
class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
/>
</div> </div>
<span class="p-3 ml-3 mr-3"> <span class="p-3 ml-3 mr-3">
Keep track of your favorite stocks in real-time. Keep track of your favorite stocks in real-time.

10
src/routes/etf/[tickerID]/holdings/+page.svelte
View File

@ -1,9 +1,5 @@
<script lang="ts"> <script lang="ts">
import { import { etfTicker, displayCompanyName } from "$lib/store";
etfTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
import { formatString } from "$lib/utils"; import { formatString } from "$lib/utils";
import Table from "$lib/components/Table/Table.svelte"; import Table from "$lib/components/Table/Table.svelte";
import Infobox from "$lib/components/Infobox.svelte"; import Infobox from "$lib/components/Infobox.svelte";
@ -64,7 +60,7 @@
/> />
<section <section
class="bg-default overflow-hidden text-white h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0" class=" overflow-hidden h-full min-h-screen mb-20 sm:mb-0 w-full mt-2 sm:mt-0"
> >
<div class="flex justify-center m-auto h-full overflow-hidden w-full"> <div class="flex justify-center m-auto h-full overflow-hidden w-full">
<div <div
@ -83,7 +79,7 @@
</div> </div>
{/if} {/if}
</div> </div>
<div class="mt-5 mb-10"> <div class="mt-5">
<Infobox text={htmlOutput} /> <Infobox text={htmlOutput} />
</div> </div>

81
src/routes/etf/[tickerID]/insider/+layout.svelte
View File

@ -1,11 +1,74 @@
<script lang="ts"> <script lang="ts">
import { etfTicker } from "$lib/store"; import { etfTicker } from "$lib/store";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { formatDate } from "$lib/utils"; import { page } from "$app/stores";
export let data; export let data;
let newsList = data?.getNews ?? []; let newsList = data?.getNews ?? [];
const formatDate = (dateString) => {
// Create a date object for the input dateString
const inputDate = new Date(dateString);
// Create a date object for the current time in New York City
const nycTime = new Date().toLocaleString("en-US", {
timeZone: "America/New_York",
});
const currentNYCDate = new Date(nycTime);
// Calculate the difference in milliseconds
const difference = inputDate.getTime() - currentNYCDate.getTime();
// Convert the difference to minutes
const minutes = Math.abs(Math.round(difference / (1000 * 60)));
if (minutes < 60) {
return `${minutes} minutes`;
} else if (minutes < 1440) {
const hours = Math.round(minutes / 60);
return `${hours} hour${hours !== 1 ? "s" : ""}`;
} else {
const days = Math.round(minutes / 1440);
return `${days} day${days !== 1 ? "s" : ""}`;
}
};
let displaySubSection = "";
if (!displaySubSection || displaySubSection.length === 0) {
const parts = $page?.url?.pathname.split("/");
const sectionMap = {
institute: "institute",
"congress-trading": "congress-trading",
transcripts: "transcripts",
};
const foundSection = parts?.find((part) =>
Object?.values(sectionMap)?.includes(part),
);
displaySubSection =
Object?.keys(sectionMap)?.find(
(key) => sectionMap[key] === foundSection,
) || "insider";
}
function changeSubSection(state) {
const subSectionMap = {
"congress-trading": "/insider/congress-trading",
institute: "/insider/institute",
transcripts: "/insider/transcripts",
};
if (state !== "insider" && subSectionMap[state]) {
displaySubSection = state;
//goto(`/stocks/${$etfTicker}${subSectionMap[state]}`);
} else {
displaySubSection = state;
//goto(`/stocks/${$etfTicker}/insider`);
}
}
</script> </script>
<section class="w-auto overflow-hidden"> <section class="w-auto overflow-hidden">
@ -18,21 +81,19 @@
<slot /> <slot />
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 mt-3"> <aside class="hidden lg:block relative fixed w-1/4">
{#if newsList?.length !== 0} {#if newsList?.length !== 0}
<div <div
class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit" class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
> >
<div class="p-4 text-sm"> <div class="p-4 text-sm">
<h3 class="text-lg text-white font-semibold mb-3"> <h3 class="text-xl font-bold mb-3">{$etfTicker} News</h3>
{$etfTicker} News <ul class="">
</h3>
<ul class="text-white">
{#each newsList?.slice(0, 10) as item} {#each newsList?.slice(0, 10) as item}
<li class="mb-3 last:mb-1"> <li class="mb-3 last:mb-1">
{formatDate(item?.publishedDate)} &#183; {formatDate(item?.publishedDate)} ago -
<a <a
class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400" class="sm:hover:text-muted dark:sm:hover:text-white text-blue-500 dark:text-blue-400"
href={item?.url} href={item?.url}
target="_blank" target="_blank"
rel="noopener noreferrer nofollow">{item?.title}</a rel="noopener noreferrer nofollow">{item?.title}</a

58
src/routes/etf/[tickerID]/insider/+page.svelte
View File

@ -1,10 +1,6 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import { import { displayCompanyName, etfTicker } from "$lib/store";
displayCompanyName,
numberOfUnreadNotification,
etfTicker,
} from "$lib/store";
import { getPartyForPoliticians } from "$lib/utils"; import { getPartyForPoliticians } from "$lib/utils";
import TableHeader from "$lib/components/Table/TableHeader.svelte"; import TableHeader from "$lib/components/Table/TableHeader.svelte";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
@ -189,16 +185,12 @@
description={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$etfTicker}) from democrates and republicans.`} description={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$etfTicker}) from democrates and republicans.`}
/> />
<section <section class="w-full overflow-hidden min-h-screen h-full">
class="w-full bg-default overflow-hidden min-h-screen text-white h-full"
>
<div class="h-full overflow-hidden w-full"> <div class="h-full overflow-hidden w-full">
<div class="relative flex justify-center items-center overflow-hidden"> <div class="relative flex justify-center items-center overflow-hidden">
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full mt-2 sm:mt-0">
<div class="mb-6"> <div class="mb-6">
<h1 class="text-xl sm:text-2xl text-white font-bold mb-4"> <h1 class="text-xl sm:text-2xl font-bold mb-4">Congress Trading</h1>
Congress Trading
</h1>
{#if isLoaded} {#if isLoaded}
{#if senateTradingList?.length !== 0} {#if senateTradingList?.length !== 0}
@ -211,16 +203,13 @@
> >
<!--Start Buy/Sell--> <!--Start Buy/Sell-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 rounded h-20" class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-300 shadow-sm dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span <span class="font-semibold text-sm sm:text-[1rem]"
class="font-semibold text-white text-sm sm:text-[1rem]"
>Buy/Sell</span >Buy/Sell</span
> >
<span <span class="text-start text-sm sm:text-[1rem]">
class="text-start text-sm sm:text-[1rem] text-white"
>
{buySellRatio?.toFixed(3)} {buySellRatio?.toFixed(3)}
</span> </span>
</div> </div>
@ -237,7 +226,7 @@
cy="18" cy="18"
r="16" r="16"
fill="none" fill="none"
class="stroke-current text-[#3E3E3E]" class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
stroke-width="3" stroke-width="3"
></circle> ></circle>
<!-- Progress Circle inside a group with rotation --> <!-- Progress Circle inside a group with rotation -->
@ -262,8 +251,7 @@
<div <div
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2" class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
> >
<span <span class="text-center text-sm sm:text-[1rem]"
class="text-center text-white text-sm sm:text-[1rem]"
>{buySellRatio?.toFixed(2)}</span >{buySellRatio?.toFixed(2)}</span
> >
</div> </div>
@ -273,16 +261,13 @@
<!--End Buy/Sell--> <!--End Buy/Sell-->
<!--Start Dem/Rep--> <!--Start Dem/Rep-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 rounded h-20" class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-300 shadow-sm dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span <span class="font-semibold text-sm sm:text-[1rem]"
class="font-semibold text-white text-sm sm:text-[1rem]"
>Dem/Rep</span >Dem/Rep</span
> >
<span <span class="text-start text-sm sm:text-[1rem]">
class="text-start text-sm sm:text-[1rem] text-white"
>
{partyRatio?.toFixed(3)} {partyRatio?.toFixed(3)}
</span> </span>
</div> </div>
@ -299,7 +284,7 @@
cy="18" cy="18"
r="16" r="16"
fill="none" fill="none"
class="stroke-current text-[#3E3E3E]" class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
stroke-width="3" stroke-width="3"
></circle> ></circle>
<!-- Progress Circle inside a group with rotation --> <!-- Progress Circle inside a group with rotation -->
@ -322,8 +307,7 @@
<div <div
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2" class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
> >
<span <span class="text-center text-sm sm:text-[1rem]"
class="text-center text-white text-sm sm:text-[1rem]"
>{partyRatio?.toFixed(2)}</span >{partyRatio?.toFixed(2)}</span
> >
</div> </div>
@ -339,7 +323,7 @@
class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded mb-4 overflow-x-auto" class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded mb-4 overflow-x-auto"
> >
<table <table
class="table table-sm sm:table-md table-compact rounded-none sm:rounded w-full bg-table border border-gray-800 m-auto" class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
> >
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
@ -347,10 +331,10 @@
<tbody> <tbody>
{#each senateTradingList as item} {#each senateTradingList as item}
<tr <tr
class="odd:bg-odd sm:hover:bg-[#245073]/10 border-b border-gray-800" class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
> >
<td <td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3" class=" text-sm sm:text-[1rem] whitespace-nowrap pb-3"
> >
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<div <div
@ -371,7 +355,7 @@
<div class="flex flex-col ml-3 font-normal"> <div class="flex flex-col ml-3 font-normal">
<a <a
href={`/politicians/${item?.id}`} href={`/politicians/${item?.id}`}
class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400" class="text-blue-500 sm:hover:text-muted dark:sm:hover: dark:text-blue-400"
>{getAbbreviatedName( >{getAbbreviatedName(
item?.representative?.replace("_", " "), item?.representative?.replace("_", " "),
)}</a )}</a
@ -382,13 +366,13 @@
</td> </td>
<td <td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.party} {item?.party}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{new Date(item?.transactionDate)?.toLocaleString( {new Date(item?.transactionDate)?.toLocaleString(
"en-US", "en-US",
@ -402,12 +386,12 @@
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.amount} {item?.amount}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{#if item?.type === "Bought"} {#if item?.type === "Bought"}
<span class="text-green-600 dark:text-[#00FC50]" <span class="text-green-600 dark:text-[#00FC50]"

20
src/routes/etf/[tickerID]/options/+layout.svelte
View File

@ -20,8 +20,10 @@
if (state !== "overview" && subSectionMap[state]) { if (state !== "overview" && subSectionMap[state]) {
displaySubSection = state; displaySubSection = state;
//goto(`/etf/${$etfTicker}${subSectionMap[state]}`);
} else { } else {
displaySubSection = state; displaySubSection = state;
//goto(`/etf/${$etfTicker}/statistics`);
} }
} }
@ -56,13 +58,9 @@
<div <div
class="relative flex justify-center items-start overflow-hidden w-full" class="relative flex justify-center items-start overflow-hidden w-full"
> >
<main <main class="w-full lg:w-3/4 lg:pr-10">
class="w-full {displaySubSection === 'overview'
? ''
: 'lg:w-3/4 lg:pr-10'}"
>
<nav <nav
class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap" class="sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
> >
<ul class="flex flex-row items-center w-full"> <ul class="flex flex-row items-center w-full">
<a <a
@ -139,11 +137,7 @@
</div> </div>
</main> </main>
<aside <aside class="hidden lg:block relative fixed w-1/4 ml-4">
class="{displaySubSection === 'overview'
? 'hidden'
: 'hidden lg:block'} relative fixed w-1/4 ml-4"
>
<div <div
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" 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"
> >
@ -159,7 +153,7 @@
class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white" class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
/> />
</div> </div>
<span class="p-3 ml-3 mr-3"> <span class=" p-3 ml-3 mr-3">
Get realtime options flow and customize your screener Get realtime options flow and customize your screener
</span> </span>
</a> </a>
@ -180,7 +174,7 @@
class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white" class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
/> />
</div> </div>
<span class="p-3 ml-3 mr-3"> <span class=" p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks. Build your Stock Screener to find profitable stocks.
</span> </span>
</a> </a>

158
src/routes/etf/[tickerID]/options/+page.svelte
View File

@ -3,7 +3,7 @@
import DailyStats from "$lib/components/Options/DailyStats.svelte"; import DailyStats from "$lib/components/Options/DailyStats.svelte";
import TickerFlow from "$lib/components/Options/TickerFlow.svelte"; import TickerFlow from "$lib/components/Options/TickerFlow.svelte";
import { abbreviateNumberWithColor, monthNames } from "$lib/utils"; import { abbreviateNumber, monthNames } from "$lib/utils";
import { onMount } from "svelte"; import { onMount } from "svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte"; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
@ -90,7 +90,7 @@
marker + marker +
param.seriesName + param.seriesName +
": " + ": " +
abbreviateNumberWithColor(param.value, false, true) + abbreviateNumber(param.value, false, true) +
"<br/>"; "<br/>";
}); });
@ -279,10 +279,10 @@
<SEO <SEO
title="Options Activity" title="Options Activity"
description={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$etfTicker}).`} description={`Explore unusual options activity for ${$displayCompanyName} (${$etfTicker}), providing insights into market sentiment and potential stock movement.`}
/> />
<section class="w-full bg-default overflow-hidden text-white min-h-screen"> <section class="w-full overflow-hidden min-h-screen">
<div class="w-full flex h-full overflow-hidden"> <div class="w-full flex h-full overflow-hidden">
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
@ -318,15 +318,15 @@
</select> </select>
</div> </div>
<div class="app w-full bg-default"> <div class="app w-full ">
{#if filteredList?.length !== 0} {#if filteredList?.length !== 0}
<Chart {init} {options} class="chart" /> <Chart {init} {options} class="chart" />
{:else} {:else}
<span <span
class="text-xl text-white m-auto flex justify-center items-center h-full" class="text-xl m-auto flex justify-center items-center h-full"
> >
<div <div
class="text-white text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4" class=" text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
> >
<svg <svg
class="w-5 h-5 inline-block sm:mr-2 shrink-0" class="w-5 h-5 inline-block sm:mr-2 shrink-0"
@ -345,64 +345,42 @@
--> -->
{#if optionList?.length !== 0} {#if optionList?.length !== 0}
<h3 class="text-xl sm:text-2xl text-white font-bold text-start"> <h3 class="text-xl sm:text-2xl font-bold text-start">
Historical {$etfTicker} Data Historical {$etfTicker} Data
</h3> </h3>
<div class="flex justify-start items-center m-auto overflow-x-auto"> <div class="flex justify-start items-center m-auto overflow-x-auto">
<table <table
class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto" class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-3"
> >
<thead class="bg-default"> <thead class="text-muted dark:text-white dark:bg-default">
<tr class=""> <tr class="">
<td class="text-white font-semibold text-sm text-start" <td class=" font-semibold text-sm text-start">Date</td>
>Date</td <td class=" font-semibold text-sm text-end">% Change</td>
> <td class=" font-semibold text-sm text-end">P/C</td>
<td class="text-white font-semibold text-sm text-end" <td class=" font-semibold text-sm text-center">Volume</td>
>% Change</td <td class=" font-semibold text-sm text-center">C Volume</td>
> <td class=" font-semibold text-sm text-center">P Volume</td>
<td class="text-white font-semibold text-sm text-end"
>P/C</td
>
<td class="text-white font-semibold text-sm text-center"
>Volume</td
>
<td class="text-white font-semibold text-sm text-center"
>C Volume</td
>
<td class="text-white font-semibold text-sm text-center"
>P Volume</td
>
<!-- <!--
<td class="text-white font-semibold text-sm text-end" <td class=" font-semibold text-sm text-end"
>Vol/30D</td >Vol/30D</td
> >
--> -->
<!-- <!--
<td class="text-white font-semibold text-sm text-end" <td class=" font-semibold text-sm text-end"
>🐻/🐂 Prem</td >🐻/🐂 Prem</td
> >
--> -->
<td class="text-white font-semibold text-sm text-end" <td class=" font-semibold text-sm text-end">Total OI</td>
>Total OI</td <td class=" font-semibold text-sm text-end">OI Change</td>
> <td class=" font-semibold text-sm text-end">% OI Change</td>
<td class="text-white font-semibold text-sm text-end" <td class=" font-semibold text-sm text-end">C Prem</td>
>OI Change</td <td class=" font-semibold text-sm text-end">P Prem</td>
>
<td class="text-white font-semibold text-sm text-end"
>% OI Change</td
>
<td class="text-white font-semibold text-sm text-end"
>C Prem</td
>
<td class="text-white font-semibold text-sm text-end"
>P Prem</td
>
<!-- <!--
<td class="text-white font-semibold text-sm text-end" <td class=" font-semibold text-sm text-end"
>Net Prem</td >Net Prem</td
> >
<td class="text-white font-semibold text-sm text-end" <td class=" font-semibold text-sm text-end"
>Total Prem</td >Total Prem</td
> >
--> -->
@ -411,32 +389,28 @@
<tbody> <tbody>
{#each data?.user?.tier === "Pro" ? optionList : optionList?.slice(0, 3) as item, index} {#each data?.user?.tier === "Pro" ? optionList : optionList?.slice(0, 3) as item, index}
<tr <tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b border-gray-800 {index + class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
1 === 1 ===
optionList?.slice(0, 3)?.length && optionList?.slice(0, 3)?.length &&
!['Pro']?.includes(data?.user?.tier) !['Pro']?.includes(data?.user?.tier)
? 'opacity-[0.1]' ? 'opacity-[0.1]'
: ''}" : ''}"
> >
<td class="text-white text-sm sm:text-[1rem] text-start"> <td class=" text-sm sm:text-[1rem] text-start">
{formatDate(item?.date)} {formatDate(item?.date)}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] text-end"> <td class=" text-sm sm:text-[1rem] text-end">
{#if item?.changesPercentage >= 0 && item?.changesPercentage !== null} {#if item?.changesPercentage >= 0 && item?.changesPercentage !== null}
<span class="text-green-600 dark:text-[#00FC50]" <span class="text-green-600 dark:text-[#00FC50]"
>+{item?.changesPercentage >= 1000 >+{item?.changesPercentage >= 1000
? abbreviateNumberWithColor( ? abbreviateNumber(item?.changesPercentage)
item?.changesPercentage,
)
: item?.changesPercentage?.toFixed(2)}%</span : item?.changesPercentage?.toFixed(2)}%</span
> >
{:else if item?.changesPercentage < 0 && item?.changesPercentage !== null} {:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
<span class="text-red-600 dark:text-[#FF2F1F]" <span class="text-red-600 dark:text-[#FF2F1F]"
>{item?.changesPercentage <= -1000 >{item?.changesPercentage <= -1000
? abbreviateNumberWithColor( ? abbreviateNumber(item?.changesPercentage)
item?.changesPercentage,
)
: item?.changesPercentage?.toFixed(2)}% : item?.changesPercentage?.toFixed(2)}%
</span> </span>
{:else} {:else}
@ -444,11 +418,11 @@
{/if} {/if}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end">
{item?.putCallRatio} {item?.putCallRatio}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end">
{item?.volume?.toLocaleString("en-US")} {item?.volume?.toLocaleString("en-US")}
</td> </td>
@ -464,7 +438,7 @@
{item?.put_volume?.toLocaleString("en-US")} {item?.put_volume?.toLocaleString("en-US")}
</td> </td>
<!-- <!--
<td class="text-sm sm:text-[1rem] text-white text-end"> <td class="text-sm sm:text-[1rem] text-end">
{item?.avgVolumeRatio?.toFixed(2)} {item?.avgVolumeRatio?.toFixed(2)}
</td> </td>
--> -->
@ -512,24 +486,24 @@
> >
<div class="flex justify-between space-x-4"> <div class="flex justify-between space-x-4">
<div <div
class="space-y-1 flex flex-col items-start text-white" class="space-y-1 flex flex-col items-start "
> >
<div> <div>
Bearish: {@html abbreviateNumberWithColor( Bearish: {@html abbreviateNumber(
item?.premium_ratio[0], item?.premium_ratio[0],
false, false,
true, true,
)} )}
</div> </div>
<div> <div>
Neutral: {@html abbreviateNumberWithColor( Neutral: {@html abbreviateNumber(
item?.premium_ratio[1], item?.premium_ratio[1],
false, false,
true, true,
)} )}
</div> </div>
<div> <div>
Bullish: {@html abbreviateNumberWithColor( Bullish: {@html abbreviateNumber(
item?.premium_ratio[2], item?.premium_ratio[2],
false, false,
true, true,
@ -542,15 +516,15 @@
</td> </td>
--> -->
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor( {@html abbreviateNumber(
item?.total_open_interest, item?.total_open_interest,
false, false,
true, true,
)} )}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] text-end"> <td class=" text-sm sm:text-[1rem] text-end">
{#if item?.changeOI >= 0} {#if item?.changeOI >= 0}
<span class="text-green-600 dark:text-[#00FC50]" <span class="text-green-600 dark:text-[#00FC50]"
>+{item?.changeOI?.toLocaleString("en-US")}</span >+{item?.changeOI?.toLocaleString("en-US")}</span
@ -560,58 +534,50 @@
>{item?.changeOI?.toLocaleString("en-US")} >{item?.changeOI?.toLocaleString("en-US")}
</span> </span>
{:else} {:else}
<span class="text-white"> n/a </span> <span class=""> n/a </span>
{/if} {/if}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] text-end"> <td class=" text-sm sm:text-[1rem] text-end">
{#if item?.changesPercentageOI >= 0} {#if item?.changesPercentageOI >= 0}
<span class="text-green-600 dark:text-[#00FC50]" <span class="text-green-600 dark:text-[#00FC50]"
>+{item?.changesPercentageOI >= 1000 >+{item?.changesPercentageOI >= 1000
? abbreviateNumberWithColor( ? abbreviateNumber(item?.changesPercentageOI)
item?.changesPercentageOI,
)
: item?.changesPercentageOI?.toFixed(2)}%</span : item?.changesPercentageOI?.toFixed(2)}%</span
> >
{:else if item?.changesPercentageOI < 0} {:else if item?.changesPercentageOI < 0}
<span class="text-red-600 dark:text-[#FF2F1F]" <span class="text-red-600 dark:text-[#FF2F1F]"
>{item?.changesPercentageOI <= -1000 >{item?.changesPercentageOI <= -1000
? abbreviateNumberWithColor( ? abbreviateNumber(item?.changesPercentageOI)
item?.changesPercentageOI,
)
: item?.changesPercentageOI?.toFixed(2)}% : item?.changesPercentageOI?.toFixed(2)}%
</span> </span>
{:else} {:else}
<span class="text-white"> n/a </span> <span class=""> n/a </span>
{/if} {/if}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor( {@html abbreviateNumber(
item?.call_premium, item?.call_premium,
false, false,
true, true,
)} )}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end">
{@html abbreviateNumberWithColor( {@html abbreviateNumber(item?.put_premium, false, true)}
item?.put_premium,
false,
true,
)}
</td> </td>
<!-- <!--
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end ">
{@html abbreviateNumberWithColor( {@html abbreviateNumber(
item?.net_premium, item?.net_premium,
false, false,
true, true,
)} )}
</td> </td>
<td class="text-sm sm:text-[1rem] text-end text-white"> <td class="text-sm sm:text-[1rem] text-end ">
{@html abbreviateNumberWithColor( {@html abbreviateNumber(
item?.total_premium, item?.total_premium,
false, false,
true, true,
@ -633,21 +599,3 @@
</section> </section>
<!--Start Options Detail Desktop Modal--> <!--Start Options Detail Desktop Modal-->
<style>
.app {
height: 400px;
width: 100%;
}
@media (max-width: 560px) {
.app {
width: 100%;
height: 300px;
}
}
.chart {
width: 100%;
}
</style>

4
src/routes/etf/[tickerID]/options/dex/+layout.svelte
View File

@ -15,10 +15,10 @@
if (state !== "overview" && subSectionMap[state]) { if (state !== "overview" && subSectionMap[state]) {
displaySubSection = state; displaySubSection = state;
//goto(`/stocks/${$etfTicker}${subSectionMap[state]}`); //goto(`/etf/${$etfTicker}${subSectionMap[state]}`);
} else { } else {
displaySubSection = state; displaySubSection = state;
//goto(`/stocks/${$etfTicker}/statistics`); //goto(`/etf/${$etfTicker}/statistics`);
} }
} }

6
src/routes/etf/[tickerID]/options/dex/+page.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { etfTicker, displayCompanyName } from "$lib/store";
import Infobox from "$lib/components/Infobox.svelte"; import Infobox from "$lib/components/Infobox.svelte";
import GreekExposure from "$lib/components/Options/GreekExposure.svelte"; import GreekExposure from "$lib/components/Options/GreekExposure.svelte";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
@ -8,10 +7,9 @@
</script> </script>
<SEO <SEO
title="Daily Gamma Exposure" title="Daily Delta Exposure"
description={`Analyze daily gamma exposure for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`} description="Analyze daily delta exposure with historic options volume and open interest data. Save individual contracts for future reference and optimize your trading strategy."
/> />
<section class="w-full overflow-hidden min-h-screen pb-40"> <section class="w-full overflow-hidden min-h-screen pb-40">
<div class="w-full flex h-full overflow-hidden"> <div class="w-full flex h-full overflow-hidden">
<div <div

4
src/routes/etf/[tickerID]/options/dex/expiry/+page.svelte
View File

@ -10,8 +10,8 @@
</script> </script>
<SEO <SEO
title="Delta Exposure By Expiry" title="Delta Exposure by Expiry"
description={`Analyze delta exposure for ${$displayCompanyName} (${$etfTicker}) by expiry. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`} description={`Analyze Delta Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
/> />
<section class="w-full overflow-hidden min-h-screen pb-40"> <section class="w-full overflow-hidden min-h-screen pb-40">

48
src/routes/etf/[tickerID]/options/dex/strike/+page.svelte
View File

@ -1,18 +1,54 @@
<script lang="ts"> <script lang="ts">
import { etfTicker, displayCompanyName } from "$lib/store"; import {
etfTicker,
numberOfUnreadNotification,
displayCompanyName,
} from "$lib/store";
import Infobox from "$lib/components/Infobox.svelte"; import Infobox from "$lib/components/Infobox.svelte";
import SEO from "$lib/components/SEO.svelte";
import GreekByStrike from "$lib/components/Options/GreekByStrike.svelte"; import GreekByStrike from "$lib/components/Options/GreekByStrike.svelte";
export let data; export let data;
</script> </script>
<SEO <svelte:head>
title="Delta Exposure By Strike Price" <meta charset="utf-8" />
description={`Analyze delta exposure for ${$displayCompanyName} (${$etfTicker}) by strike price. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`} <meta name="viewport" content="width=device-width" />
/> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$etfTicker}) Delta Exposure by Strike Price ·
Stocknear
</title>
<meta
name="description"
content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/>
<!-- Other meta tags -->
<meta
property="og:title"
content={`${$displayCompanyName} (${$etfTicker}) Delta Exposure by Strike Price · Stocknear`}
/>
<meta
property="og:description"
content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/>
<meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content={`${$displayCompanyName} (${$etfTicker}) Delta Exposure by Strike Price · Stocknear`}
/>
<meta
name="twitter:description"
content={`Discover detailed Delta Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="w-full overflow-hidden min-h-screen pb-40"> <section class="w-full overflow-hidden min-h-screen pb-40">
<div class="w-full flex h-full overflow-hidden"> <div class="w-full flex h-full overflow-hidden">

4
src/routes/etf/[tickerID]/options/gex/+page.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { etfTicker, displayCompanyName } from "$lib/store"; import { etfTicker, displayCompanyName } from "$lib/store";
import Infobox from "$lib/components/Infobox.svelte"; import Infobox from "$lib/components/Infobox.svelte";
import GreekExposure from "$lib/components/Options/GreekExposure.svelte"; import GreekExposure from "$lib/components/Options/GreekExposure.svelte";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
@ -11,13 +12,14 @@
title="Daily Gamma Exposure" title="Daily Gamma Exposure"
description={`Analyze daily gamma exposure for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`} description={`Analyze daily gamma exposure for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
/> />
<section class="w-full overflow-hidden min-h-screen pb-40"> <section class="w-full overflow-hidden min-h-screen pb-40">
<div class="w-full flex h-full overflow-hidden"> <div class="w-full flex h-full overflow-hidden">
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
> >
{#if data?.getData?.length > 0} {#if data?.getData?.length > 0}
<GreekExposure {data} title="Gamma" params="" /> <GreekExposure {data} title="Gamma" />
{:else} {:else}
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
<div class="mt-2"> <div class="mt-2">

3
src/routes/etf/[tickerID]/options/gex/expiry/+page.server.ts
View File

@ -24,9 +24,6 @@ export const load = async ({ locals, params }) => {
}; };
// Make sure to return a promise // Make sure to return a promise
return { return {
getData: await getData(), getData: await getData(),

6
src/routes/etf/[tickerID]/options/gex/expiry/+page.svelte
View File

@ -1,17 +1,17 @@
<script lang="ts"> <script lang="ts">
import { etfTicker, displayCompanyName } from "$lib/store"; import { etfTicker, displayCompanyName } from "$lib/store";
import SEO from "$lib/components/SEO.svelte";
import Infobox from "$lib/components/Infobox.svelte"; import Infobox from "$lib/components/Infobox.svelte";
import GreekByExpiry from "$lib/components/Options/GreekByExpiry.svelte"; import GreekByExpiry from "$lib/components/Options/GreekByExpiry.svelte";
import SEO from "$lib/components/SEO.svelte";
export let data; export let data;
let rawData = data?.getData || []; let rawData = data?.getData || [];
</script> </script>
<SEO <SEO
title="Gamma Exposure By Expiry" title="Gamma Exposure by Expiry"
description={`Analyze gamma exposure for ${$displayCompanyName} (${$etfTicker}) by expiry. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`} description={`Analyze Gamma Exposure by expiry for ${$displayCompanyName} (${$etfTicker}). Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`}
/> />
<section class="w-full overflow-hidden min-h-screen pb-40"> <section class="w-full overflow-hidden min-h-screen pb-40">

8
src/routes/etf/[tickerID]/options/gex/strike/+page.svelte
View File

@ -1,17 +1,15 @@
<script lang="ts"> <script lang="ts">
import { etfTicker, displayCompanyName } from "$lib/store"; import { etfTicker, displayCompanyName } from "$lib/store";
import Infobox from "$lib/components/Infobox.svelte";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
import Infobox from "$lib/components/Infobox.svelte";
import GreekByStrike from "$lib/components/Options/GreekByStrike.svelte"; import GreekByStrike from "$lib/components/Options/GreekByStrike.svelte";
export let data; export let data;
</script> </script>
<SEO <SEO
title="Gamma Exposure By Strike Price" title={`${$displayCompanyName} (${$etfTicker}) Gamma Exposure by Strike Price`}
description={`Analyze gamma exposure for ${$displayCompanyName} (${$etfTicker}) by strike price. Access historical volume, open interest trends, and save options contracts for detailed analysis and insights.`} description={`Discover detailed Gamma Exposure analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/> />
<section class="w-full overflow-hidden min-h-screen pb-40"> <section class="w-full overflow-hidden min-h-screen pb-40">

6
src/routes/etf/[tickerID]/options/oi/+layout.svelte
View File

@ -14,10 +14,10 @@
if (state !== "overview" && subSectionMap[state]) { if (state !== "overview" && subSectionMap[state]) {
displaySubSection = state; displaySubSection = state;
//goto(`/stocks/${$etfTicker}${subSectionMap[state]}`); //goto(`/etf/${$etfTicker}${subSectionMap[state]}`);
} else { } else {
displaySubSection = state; displaySubSection = state;
//goto(`/stocks/${$etfTicker}/statistics`); //goto(`/etf/${$etfTicker}/statistics`);
} }
} }
@ -49,7 +49,7 @@
> >
<main class="w-full"> <main class="w-full">
<nav <nav
class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap" class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
> >
<ul class="flex flex-row items-center w-full"> <ul class="flex flex-row items-center w-full">
<a <a

2
src/routes/etf/[tickerID]/options/oi/+page.svelte
View File

@ -10,7 +10,7 @@
</script> </script>
<SEO <SEO
title="Open Interet by Strike Price" title="Open Interest by Strike Price"
description={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`} description={`Discover detailed Open Interest analysis by strike price for ${$displayCompanyName} (${$etfTicker}). Explore historical volume, open interest, and save individual options contracts for in-depth insights.`}
/> />

2
src/routes/etf/[tickerID]/options/volatility/+page.svelte
View File

@ -14,7 +14,7 @@
description={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`} description={`Track volatility and implied volatility trends with our interactive chart. Analyze price movements, 30-day implied volatility, and realized volatility to make data-driven trading decisions.`}
/> />
<section class="w-full overflow-hidden min-h-screen pb-40"> <section class="w-full overflow-hidden min-h-screen">
<div class="w-full flex h-full overflow-hidden"> <div class="w-full flex h-full overflow-hidden">
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"