add index
This commit is contained in:
MuslemRahimi
parent
691acbc061
commit
5b500ae3f9
218
src/lib/components/IndexSidecard.svelte
Normal file
218
src/lib/components/IndexSidecard.svelte
Normal file
@ -0,0 +1,218 @@
|
||||
<script lang="ts">
|
||||
import { indexTicker, stockTicker } from "$lib/store";
|
||||
import {
|
||||
formatString,
|
||||
abbreviateNumber,
|
||||
sectorNavigation,
|
||||
} from "$lib/utils";
|
||||
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
export let data;
|
||||
|
||||
let info;
|
||||
let topHoldingList = [];
|
||||
let topSectorList = [];
|
||||
let description = "";
|
||||
|
||||
let assetClass = "-";
|
||||
let totalAssetPercentage = 0;
|
||||
|
||||
|
||||
async function stockSelector(ticker: string) {
|
||||
if (ticker?.length !== 0 && !["BTCUSD", "USD"]?.includes(ticker)) {
|
||||
window?.scroll({ top: 0, left: 0, behavior: "smooth" });
|
||||
stockTicker.update((value) => ticker);
|
||||
goto("/stocks/" + ticker + "/");
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($indexTicker) {
|
||||
info = data?.getIndexProfile?.at(0);
|
||||
topHoldingList = data?.getIndexHoldings?.holdings || [];
|
||||
topSectorList = data?.getIndexSectorWeighting || [];
|
||||
assetClass = info?.assetClass;
|
||||
|
||||
description =
|
||||
info?.description ??
|
||||
"A detailed description of the company is not yet available.";
|
||||
|
||||
totalAssetPercentage = topHoldingList
|
||||
?.slice(0, 5)
|
||||
?.reduce((acc, current) => acc + current?.weightPercentage, 0)
|
||||
?.toFixed(2);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="px-0.5 lg:px-0">
|
||||
<h2 class="mb-2 text-2xl text-white font-semibold">
|
||||
About {$indexTicker}
|
||||
</h2>
|
||||
<p class="text-gray-200">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="mt-3 grid grid-cols-2 gap-3 w-full border-b border-gray-600 lg:border-none pb-8 lg:pb-0"
|
||||
>
|
||||
<div class="col-span-1 text-gray-200">
|
||||
<span class="block font-semibold">Asset Class</span>
|
||||
<span class=" text-white">{assetClass}</span>
|
||||
</div>
|
||||
<div class="col-span-1 text-gray-200">
|
||||
<span class="block font-semibold">Ticker Symbol</span>
|
||||
{$indexTicker}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if topSectorList?.length !== 0}
|
||||
<div class="space-y-3 pt-5 {topSectorList?.length !== 0 ? '' : 'hidden'}">
|
||||
<div class="h-auto w-full">
|
||||
<!--Start Content-->
|
||||
<div class="w-auto lg:w-full flex flex-col m-auto">
|
||||
<h2
|
||||
class="mb-2 text-2xl text-white font-semibold flex flex-row items-center"
|
||||
>
|
||||
<span>Top Sectors</span>
|
||||
</h2>
|
||||
|
||||
<div class="mt-2 w-full overflow-hidden">
|
||||
<table class="w-full table table-sm table table-compact w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="text-white font-semibold text-sm text-start bg-default"
|
||||
>Sector</th
|
||||
>
|
||||
|
||||
<th class="text-white font-semibold text-sm text-end bg-default"
|
||||
>Weight %</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each topSectorList as item}
|
||||
{#if item?.weightPercentage > 0}
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem]">
|
||||
<a
|
||||
href={sectorNavigation?.find(
|
||||
(listItem) => listItem?.title === item?.sector,
|
||||
)?.link}
|
||||
class="sm:hover:underline sm:hover:underline-offset-4 text-white truncate"
|
||||
>
|
||||
{item?.sector}
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td class="text-white font-semibold text-end">
|
||||
{abbreviateNumber(item?.weightPercentage?.toFixed(2))}%
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={`/industry/sectors`}
|
||||
class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100"
|
||||
>
|
||||
All Sectors
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if topHoldingList?.length !== 0}
|
||||
<div
|
||||
class="space-y-3 pt-8 sm:pt-5 {topHoldingList?.length !== 0
|
||||
? ''
|
||||
: 'hidden'}"
|
||||
>
|
||||
<div class="h-auto w-full">
|
||||
<!--Start Content-->
|
||||
<div class="w-auto lg:w-full flex flex-col m-auto">
|
||||
<h2
|
||||
class="mb-2 text-2xl text-white font-semibold flex flex-row items-center"
|
||||
>
|
||||
<span>Top Holdings</span>
|
||||
<span class="text-white font-semibold ml-auto text-sm">
|
||||
{totalAssetPercentage}% of assets
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div class="mt-2 w-full">
|
||||
<table class="table table-sm table-compact w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="text-white font-semibold text-sm text-start bg-default"
|
||||
>Company</th
|
||||
>
|
||||
|
||||
<th class="text-white font-semibold text-sm text-end bg-default"
|
||||
>Portfolio</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each topHoldingList?.slice(0, 5) as item}
|
||||
{#if item?.symbol !== null}
|
||||
<tr
|
||||
on:click={() => stockSelector(item?.symbol)}
|
||||
class="lg:shake-ticker sm:hover:text-white text-blue-400 cursor-pointer lg:hover:bg-[#245073] lg:hover:bg-opacity-[0.2] [#09090B] border-b border-[#27272A]"
|
||||
>
|
||||
<td class="">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex flex-col w-full">
|
||||
<span class="text-sm font-medium"
|
||||
>{item?.symbol ?? "n/a"}</span
|
||||
>
|
||||
<span class="text-white text-sm">
|
||||
{#if typeof item?.name !== "undefined"}
|
||||
{item?.name?.length > 20
|
||||
? formatString(item?.name?.slice(0, 20)) + "..."
|
||||
: formatString(item?.name)?.replace(
|
||||
"Usd",
|
||||
"USD",
|
||||
)}
|
||||
{:else}
|
||||
n/a
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="text-white font-semibold text-end">
|
||||
{abbreviateNumber(item?.weightPercentage?.toFixed(2))}%
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={`/etf/${$indexTicker}/holdings`}
|
||||
class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100"
|
||||
>
|
||||
All Holdings
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
|
||||
nextPage = true;
|
||||
goto(
|
||||
`/${assetType === "ETF" ? "etf" : assetType === "Crypto" ? "crypto" : "stocks"}/${symbol}`,
|
||||
`/${assetType === "ETF" ? "etf" : assetType === "Index" ? "index" : "stocks"}/${symbol}`,
|
||||
);
|
||||
}
|
||||
|
||||
@ -498,7 +498,7 @@
|
||||
{#each searchHistory?.length > 0 ? searchHistory : popularList as item}
|
||||
<li class="border-b border-gray-600">
|
||||
<a
|
||||
href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
|
||||
href={`/${item?.type === "ETF" ? "etf" : item?.type === "Index" ? "index" : "stocks"}/${item?.symbol}`}
|
||||
on:click={() => popularTicker(item?.symbol)}
|
||||
class="mb-2 {item?.symbol === focusedSuggestion
|
||||
? 'cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
|
||||
@ -530,7 +530,7 @@
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<a
|
||||
href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
|
||||
href={`/${item?.type === "ETF" ? "etf" : item?.type === "Index" ? "index" : "stocks"}/${item?.symbol}`}
|
||||
on:click={() => searchBarTicker(item?.symbol)}
|
||||
class="mb-2 {item?.symbol === focusedSuggestion
|
||||
? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
|
||||
|
||||
@ -146,6 +146,8 @@ export const searchBarData = writable([]);
|
||||
|
||||
export const stockTicker = writable(<string>"");
|
||||
export const etfTicker = writable(<string>"");
|
||||
export const indexTicker = writable(<string>"");
|
||||
|
||||
export const cryptoTicker = writable(<string>"");
|
||||
export const assetType = writable(<string>"");
|
||||
|
||||
|
||||
124
src/routes/index/[tickerID]/+layout.server.ts
Normal file
124
src/routes/index/[tickerID]/+layout.server.ts
Normal file
@ -0,0 +1,124 @@
|
||||
const cleanString = (input) => {
|
||||
const substringsToRemove = [
|
||||
"Depositary",
|
||||
"Inc.",
|
||||
"Incorporated",
|
||||
"Holdings",
|
||||
"Corporations",
|
||||
"LLC",
|
||||
"Holdings plc American Depositary Shares",
|
||||
"Holding Corporation",
|
||||
"Oyj",
|
||||
"Company",
|
||||
"The",
|
||||
"plc",
|
||||
];
|
||||
const pattern = new RegExp(`\\b(${substringsToRemove.join("|")})\\b|,`, "gi");
|
||||
return input?.replace(pattern, "").trim();
|
||||
};
|
||||
|
||||
const fetchData = async (apiURL, apiKey, endpoint, ticker) => {
|
||||
try {
|
||||
const response = await fetch(`${apiURL}${endpoint}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify({ ticker }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error(`Error fetching ${endpoint}:`, error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const fetchWatchlist = async (pb, userId) => {
|
||||
let output;
|
||||
try {
|
||||
output = await pb.collection("watchlist").getFullList({
|
||||
filter: `user="${userId}"`,
|
||||
});
|
||||
} catch (e) {
|
||||
//console.log(e)
|
||||
output = [];
|
||||
}
|
||||
return output;
|
||||
};
|
||||
|
||||
export const load = async ({ params, locals }) => {
|
||||
const { apiURL, apiKey, pb, user } = locals;
|
||||
const { tickerID } = params;
|
||||
|
||||
try {
|
||||
const endpoints = [
|
||||
"/index-profile",
|
||||
"/etf-holdings",
|
||||
"/etf-sector-weighting",
|
||||
"/stock-quote",
|
||||
"/pre-post-quote",
|
||||
"/wiim",
|
||||
"/one-day-price",
|
||||
"/stock-news",
|
||||
];
|
||||
|
||||
const promises = endpoints.map((endpoint) => {
|
||||
// Use SPY for specific endpoints when tickerID is ^SPC or ^spc
|
||||
const useSpyTicker = tickerID?.toLowerCase() === "^spc" &&
|
||||
["/etf-holdings", "/etf-sector-weighting", "/wiim", "/stock-news"].includes(endpoint);
|
||||
|
||||
return fetchData(apiURL, apiKey, endpoint, useSpyTicker ? "SPY" : tickerID);
|
||||
});
|
||||
|
||||
// Add watchlist promise
|
||||
promises.push(fetchWatchlist(pb, user?.id));
|
||||
|
||||
const [
|
||||
getIndexProfile,
|
||||
getIndexHolding,
|
||||
getIndexSectorWeighting,
|
||||
getStockQuote,
|
||||
getPrePostQuote,
|
||||
getWhyPriceMoved,
|
||||
getOneDayPrice,
|
||||
getNews,
|
||||
getUserWatchlist,
|
||||
] = await Promise.all(promises);
|
||||
|
||||
return {
|
||||
getIndexProfile: getIndexProfile || [],
|
||||
getIndexHolding: getIndexHolding || [],
|
||||
getIndexSectorWeighting: getIndexSectorWeighting || [],
|
||||
getStockQuote: getStockQuote || [],
|
||||
getPrePostQuote: getPrePostQuote || [],
|
||||
getWhyPriceMoved: getWhyPriceMoved || [],
|
||||
getOneDayPrice: getOneDayPrice || [],
|
||||
getNews: getNews || [],
|
||||
getUserWatchlist: getUserWatchlist || [],
|
||||
companyName: cleanString(getIndexProfile?.at(0)?.name),
|
||||
getParams: params.tickerID,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error in load function:', error);
|
||||
return {
|
||||
getIndexProfile: [],
|
||||
getIndexHolding: [],
|
||||
getIndexSectorWeighting: [],
|
||||
getStockQuote: [],
|
||||
getPrePostQuote: [],
|
||||
getWhyPriceMoved: [],
|
||||
getOneDayPrice: [],
|
||||
getNews: [],
|
||||
getUserWatchlist: [],
|
||||
companyName: '',
|
||||
getParams: params.tickerID,
|
||||
};
|
||||
}
|
||||
};
|
||||
1078
src/routes/index/[tickerID]/+layout.svelte
Normal file
1078
src/routes/index/[tickerID]/+layout.svelte
Normal file
File diff suppressed because it is too large
Load Diff
146
src/routes/index/[tickerID]/+page.server.ts
Normal file
146
src/routes/index/[tickerID]/+page.server.ts
Normal file
@ -0,0 +1,146 @@
|
||||
import { error, fail, redirect } from "@sveltejs/kit";
|
||||
import { validateData } from "$lib/utils";
|
||||
import { loginUserSchema, registerUserSchema } from "$lib/schemas";
|
||||
|
||||
export const actions = {
|
||||
login: async ({ request, locals }) => {
|
||||
const { formData, errors } = await validateData(
|
||||
await request.formData(),
|
||||
loginUserSchema,
|
||||
);
|
||||
|
||||
if (errors) {
|
||||
return fail(400, {
|
||||
data: formData,
|
||||
errors: errors.fieldErrors,
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
await locals.pb
|
||||
.collection("users")
|
||||
.authWithPassword(formData.email, formData.password);
|
||||
|
||||
/*
|
||||
if (!locals.pb?.authStore?.model?.verified) {
|
||||
locals.pb.authStore.clear();
|
||||
return {
|
||||
notVerified: true,
|
||||
};
|
||||
}
|
||||
*/
|
||||
} catch (err) {
|
||||
console.log("Error: ", err);
|
||||
error(err.status, err.message);
|
||||
}
|
||||
|
||||
redirect(302, "/");
|
||||
},
|
||||
|
||||
register: async ({ locals, request }) => {
|
||||
const { formData, errors } = await validateData(
|
||||
await request.formData(),
|
||||
registerUserSchema,
|
||||
);
|
||||
|
||||
if (errors) {
|
||||
return fail(400, {
|
||||
data: formData,
|
||||
errors: errors.fieldErrors,
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
let newUser = await locals.pb.collection("users").create(formData);
|
||||
/*
|
||||
await locals.pb?.collection('users').update(
|
||||
newUser?.id, {
|
||||
'freeTrial' : true,
|
||||
'tier': 'Pro', //Give new users a free trial for the Pro Subscription
|
||||
});
|
||||
*/
|
||||
|
||||
await locals.pb.collection("users").requestVerification(formData.email);
|
||||
} catch (err) {
|
||||
console.log("Error: ", err);
|
||||
error(err.status, err.message);
|
||||
}
|
||||
|
||||
try {
|
||||
await locals.pb
|
||||
.collection("users")
|
||||
.authWithPassword(formData.email, formData.password);
|
||||
} catch (err) {
|
||||
console.log("Error: ", err);
|
||||
error(err.status, err.message);
|
||||
}
|
||||
|
||||
redirect(303, "/");
|
||||
},
|
||||
|
||||
oauth2: async ({ url, locals, request, cookies }) => {
|
||||
const authMethods = (await locals?.pb
|
||||
?.collection("users")
|
||||
?.listAuthMethods())?.oauth2;
|
||||
|
||||
|
||||
const data = await request?.formData();
|
||||
const providerSelected = data?.get("provider");
|
||||
|
||||
if (!authMethods) {
|
||||
return {
|
||||
authProviderRedirect: "",
|
||||
authProviderState: "",
|
||||
};
|
||||
}
|
||||
const redirectURL = `${url.origin}/oauth`;
|
||||
|
||||
const targetItem = authMethods?.providers?.findIndex(
|
||||
(item) => item?.name === providerSelected,
|
||||
);
|
||||
//console.log("==================")
|
||||
//console.log(authMethods.authProviders)
|
||||
//console.log('target item is: ', targetItem)
|
||||
|
||||
const provider = authMethods.providers[targetItem];
|
||||
const authProviderRedirect = `${provider.authUrl}${redirectURL}`;
|
||||
const state = provider.state;
|
||||
const verifier = provider.codeVerifier;
|
||||
|
||||
console.log(provider)
|
||||
|
||||
cookies.set("state", state, {
|
||||
httpOnly: true,
|
||||
sameSite: "lax",
|
||||
secure: true,
|
||||
path: "/",
|
||||
maxAge: 60 * 60,
|
||||
});
|
||||
|
||||
cookies.set("verifier", verifier, {
|
||||
httpOnly: true,
|
||||
sameSite: "lax",
|
||||
secure: true,
|
||||
path: "/",
|
||||
maxAge: 60 * 60,
|
||||
});
|
||||
|
||||
cookies.set("provider", providerSelected, {
|
||||
httpOnly: true,
|
||||
sameSite: "lax",
|
||||
secure: true,
|
||||
path: "/",
|
||||
maxAge: 60 * 60,
|
||||
});
|
||||
|
||||
cookies.set("path", "/", {
|
||||
httpOnly: true,
|
||||
sameSite: "lax",
|
||||
secure: true,
|
||||
path: "/",
|
||||
maxAge: 60,
|
||||
});
|
||||
|
||||
redirect(302, authProviderRedirect);
|
||||
},
|
||||
};
|
||||
1156
src/routes/index/[tickerID]/+page.svelte
Normal file
1156
src/routes/index/[tickerID]/+page.svelte
Normal file
File diff suppressed because it is too large
Load Diff
25
src/routes/index/[tickerID]/history/+page.server.ts
Normal file
25
src/routes/index/[tickerID]/history/+page.server.ts
Normal file
@ -0,0 +1,25 @@
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
const getData = async () => {
|
||||
const postData = { ticker: params.tickerID, timePeriod: 'max' };
|
||||
|
||||
|
||||
const response = await fetch(apiURL + "/historical-price", {
|
||||
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 {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
594
src/routes/index/[tickerID]/history/+page.svelte
Normal file
594
src/routes/index/[tickerID]/history/+page.svelte
Normal file
@ -0,0 +1,594 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
etfTicker,
|
||||
numberOfUnreadNotification,
|
||||
displayCompanyName,
|
||||
} from "$lib/store";
|
||||
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
|
||||
import { Button } from "$lib/components/shadcn/button/index.js";
|
||||
import { goto } from "$app/navigation";
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
|
||||
import { onMount } from "svelte";
|
||||
|
||||
export let data;
|
||||
let isLoaded = false;
|
||||
let timePeriod = "Daily";
|
||||
let rawData = data?.getData || [];
|
||||
let originalData = [];
|
||||
|
||||
let stockList = [];
|
||||
function prepareDataset(data, timePeriod = "Daily") {
|
||||
if (
|
||||
timePeriod === "Weekly" ||
|
||||
timePeriod === "Monthly" ||
|
||||
timePeriod === "Quarterly" ||
|
||||
timePeriod === "Annual"
|
||||
) {
|
||||
// Group data by week, month, quarter, or year
|
||||
const aggregatedData = [];
|
||||
let currentPeriod = null;
|
||||
|
||||
data.forEach((entry) => {
|
||||
const date = new Date(entry.time);
|
||||
let periodStart;
|
||||
let periodKey;
|
||||
|
||||
if (timePeriod === "Weekly") {
|
||||
// Calculate the start of the week (Monday)
|
||||
const dayOfWeek = date.getDay(); // 0 for Sunday, 1 for Monday, etc.
|
||||
periodStart = new Date(
|
||||
date.setDate(date.getDate() - ((dayOfWeek + 6) % 7)), // Adjust to get Monday
|
||||
);
|
||||
periodKey = periodStart.getTime();
|
||||
} else if (timePeriod === "Monthly") {
|
||||
// Use year and month as the period key
|
||||
periodKey = `${date.getFullYear()}-${date.getMonth()}`;
|
||||
// Get the last day of the month
|
||||
periodStart = new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
||||
} else if (timePeriod === "Quarterly") {
|
||||
// Calculate quarter (0-3)
|
||||
const quarter = Math.floor(date.getMonth() / 3);
|
||||
periodKey = `${date.getFullYear()}-Q${quarter}`;
|
||||
// Get the last day of the quarter
|
||||
const lastMonthOfQuarter = (quarter + 1) * 3 - 1;
|
||||
periodStart = new Date(date.getFullYear(), lastMonthOfQuarter + 1, 0);
|
||||
} else {
|
||||
// Annual
|
||||
periodKey = date.getFullYear().toString();
|
||||
// Get the last day of the year (December 31st)
|
||||
periodStart = new Date(date.getFullYear(), 11, 31);
|
||||
}
|
||||
|
||||
if (!currentPeriod || currentPeriod.periodKey !== periodKey) {
|
||||
// Start a new period
|
||||
currentPeriod = {
|
||||
periodStart,
|
||||
periodKey,
|
||||
open: entry.open,
|
||||
high: entry.high,
|
||||
low: entry.low,
|
||||
close: entry.close,
|
||||
volume: entry.volume,
|
||||
};
|
||||
aggregatedData.push(currentPeriod);
|
||||
} else {
|
||||
// Update the current period's values
|
||||
currentPeriod.high = Math.max(currentPeriod.high, entry.high);
|
||||
currentPeriod.low = Math.min(currentPeriod.low, entry.low);
|
||||
currentPeriod.close = entry.close; // Update the close to the most recent in the period
|
||||
currentPeriod.volume += entry.volume;
|
||||
}
|
||||
});
|
||||
|
||||
// Replace Daily data with aggregated data
|
||||
data = aggregatedData.map((period) => ({
|
||||
time: period.periodStart.toISOString().split("T")[0],
|
||||
open: period.open,
|
||||
high: period.high,
|
||||
low: period.low,
|
||||
close: period.close,
|
||||
volume: period.volume,
|
||||
}));
|
||||
}
|
||||
|
||||
// Process the data to add change and changesPercentage
|
||||
const modifiedData = data?.map((entry, index, arr) => {
|
||||
if (index === 0) {
|
||||
return { ...entry, change: null, changesPercentage: null };
|
||||
}
|
||||
const previousClose = arr[index - 1]?.close;
|
||||
const currentClose = entry?.close;
|
||||
const change = (currentClose - previousClose)?.toFixed(2);
|
||||
const changesPercentage =
|
||||
previousClose !== 0
|
||||
? (((currentClose - previousClose) / previousClose) * 100)?.toFixed(2)
|
||||
: null;
|
||||
return { ...entry, change, changesPercentage };
|
||||
});
|
||||
|
||||
// Sort the data by "time" from latest to earliest
|
||||
return modifiedData?.sort((a, b) => new Date(b?.time) - new Date(a?.time));
|
||||
}
|
||||
|
||||
async function handleScroll() {
|
||||
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||
|
||||
if (isBottom && stockList?.length !== originalData?.length) {
|
||||
const nextIndex = stockList?.length;
|
||||
const filteredNewResults = originalData?.slice(nextIndex, nextIndex + 50);
|
||||
stockList = [...stockList, ...filteredNewResults];
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
});
|
||||
|
||||
$: columns = [
|
||||
{ key: "time", label: "Date", align: "left" },
|
||||
{ key: "open", label: "Open", align: "right" },
|
||||
{ key: "high", label: "High", align: "right" },
|
||||
{ key: "low", label: "Low", align: "right" },
|
||||
{ key: "close", label: "Close", align: "right" },
|
||||
{ key: "change", label: "Change", align: "right" },
|
||||
{ key: "changesPercentage", label: "% Change", align: "right" },
|
||||
{ key: "volume", label: "Volume", align: "right" },
|
||||
];
|
||||
|
||||
$: sortOrders = {
|
||||
time: { order: "none", type: "date" },
|
||||
open: { order: "none", type: "number" },
|
||||
high: { order: "none", type: "number" },
|
||||
low: { order: "none", type: "number" },
|
||||
close: { order: "none", type: "number" },
|
||||
change: { order: "none", type: "number" },
|
||||
changesPercentage: { order: "none", type: "number" },
|
||||
volume: { order: "none", type: "number" },
|
||||
};
|
||||
|
||||
const sortData = (key) => {
|
||||
// Reset all other keys to 'none' except the current key
|
||||
for (const k in sortOrders) {
|
||||
if (k !== key) {
|
||||
sortOrders[k].order = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// Cycle through 'none', 'asc', 'desc' for the clicked key
|
||||
const orderCycle = ["none", "asc", "desc"];
|
||||
|
||||
const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
|
||||
sortOrders[key].order =
|
||||
orderCycle[(currentOrderIndex + 1) % orderCycle.length];
|
||||
const sortOrder = sortOrders[key].order;
|
||||
|
||||
// Reset to original data when 'none' and stop further sorting
|
||||
if (sortOrder === "none") {
|
||||
originalData = [...rawData]; // Reset originalData to rawData
|
||||
stockList = originalData?.slice(0, 50); // Reset displayed data
|
||||
return;
|
||||
}
|
||||
|
||||
// Define a generic comparison function
|
||||
const compareValues = (a, b) => {
|
||||
const { type } = sortOrders[key];
|
||||
let valueA, valueB;
|
||||
|
||||
switch (type) {
|
||||
case "date":
|
||||
valueA = new Date(a[key]);
|
||||
valueB = new Date(b[key]);
|
||||
break;
|
||||
case "string":
|
||||
valueA = a[key].toUpperCase();
|
||||
valueB = b[key].toUpperCase();
|
||||
return sortOrder === "asc"
|
||||
? valueA.localeCompare(valueB)
|
||||
: valueB.localeCompare(valueA);
|
||||
case "number":
|
||||
default:
|
||||
valueA = parseFloat(a[key]);
|
||||
valueB = parseFloat(b[key]);
|
||||
break;
|
||||
}
|
||||
|
||||
if (sortOrder === "asc") {
|
||||
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
|
||||
} else {
|
||||
return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
|
||||
}
|
||||
};
|
||||
|
||||
// Sort using the generic comparison function
|
||||
stockList = [...originalData].sort(compareValues)?.slice(0, 50);
|
||||
};
|
||||
|
||||
async function exportData() {
|
||||
if (data?.user?.tier === "Pro") {
|
||||
let exportList = rawData?.map(
|
||||
({
|
||||
time,
|
||||
open,
|
||||
high,
|
||||
low,
|
||||
close,
|
||||
change,
|
||||
changesPercentage,
|
||||
volume,
|
||||
}) => ({
|
||||
time,
|
||||
open,
|
||||
high,
|
||||
low,
|
||||
close,
|
||||
change,
|
||||
changesPercentage,
|
||||
volume,
|
||||
}),
|
||||
);
|
||||
|
||||
const csvRows = [];
|
||||
|
||||
// Add headers row
|
||||
csvRows.push("time,open,high,low,close,change,changesPercentage,volume");
|
||||
|
||||
// Add data rows
|
||||
for (const row of exportList) {
|
||||
const csvRow = `${row.time},${row.open},${row.high},${row.low},${row.close},${row.change},${row.changesPercentage},${row.volume}`;
|
||||
csvRows.push(csvRow);
|
||||
}
|
||||
|
||||
// Create CSV blob and trigger download
|
||||
const csv = csvRows.join("\n");
|
||||
const blob = new Blob([csv], { type: "text/csv" });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.setAttribute("hidden", "");
|
||||
a.setAttribute("href", url);
|
||||
a.setAttribute("download", `${$etfTicker}_price_history.csv`);
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
} else {
|
||||
goto("/pricing");
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if (timePeriod && typeof window !== "undefined") {
|
||||
isLoaded = false;
|
||||
rawData = prepareDataset(data?.getData, timePeriod);
|
||||
originalData = rawData;
|
||||
stockList = rawData?.slice(0, 50);
|
||||
isLoaded = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||
{$displayCompanyName} ({$etfTicker}) Historical Stock Price Data · Stocknear
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={`Get a complete stock price history for ${$etfTicker}, starting from its first trading day. Includes open, high, low, close and volume.`}
|
||||
/>
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`${$displayCompanyName} (${$etfTicker}) Historical Stock Price Data · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`Get a complete stock price history for NVIDIA, starting from its first trading day. Includes open, high, low, close and volume.`}
|
||||
/>
|
||||
<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}) Historical Stock Price Data · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`Get a complete stock price history for NVIDIA, starting from its first trading day. Includes open, high, low, close and volume.`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
<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"
|
||||
>
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full lg:w-3/4">
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto">
|
||||
<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"
|
||||
>
|
||||
<h1 class="text-xl sm:text-2xl font-bold mb-3 sm:mb-0">
|
||||
{$etfTicker} Stock Price History
|
||||
</h1>
|
||||
<div
|
||||
class="flex flex-row items-center ml-auto w-fit mt-2 sm:mt-0"
|
||||
>
|
||||
<div class="relative inline-block text-left ml-auto">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
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"
|
||||
>
|
||||
<span class="truncate text-white px-1"
|
||||
>{timePeriod}</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 time frame
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (timePeriod = "Daily")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
Daily
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (timePeriod = "Weekly")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
Weekly
|
||||
</DropdownMenu.Item>
|
||||
{#if data?.user?.tier !== "Pro"}
|
||||
{#each ["Monthly", "Quarterly", "Annual"] as entry}
|
||||
<DropdownMenu.Item
|
||||
on:click={() => goto("/pricing")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
{entry}
|
||||
<svg
|
||||
class="ml-auto -mt-0.5 w-4 h-4 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#A3A3A3"
|
||||
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
|
||||
>
|
||||
</DropdownMenu.Item>
|
||||
{/each}
|
||||
{:else}
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (timePeriod = "Monthly")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
Monthly
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (timePeriod = "Quarterly")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
Quarterly
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (timePeriod = "Annual")}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
>
|
||||
Annual
|
||||
</DropdownMenu.Item>
|
||||
{/if}
|
||||
</DropdownMenu.Group>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
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"
|
||||
>
|
||||
<span class="truncate text-white">Download</span>
|
||||
<svg
|
||||
class="{data?.user?.tier === 'Pro'
|
||||
? 'hidden'
|
||||
: ''} ml-1 -mt-0.5 w-3.5 h-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#A3A3A3"
|
||||
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
|
||||
>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{#if isLoaded}
|
||||
{#if rawData?.length !== 0}
|
||||
<div class="w-full m-auto mt-2">
|
||||
<div
|
||||
class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-scroll"
|
||||
>
|
||||
<table
|
||||
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
|
||||
>
|
||||
<thead>
|
||||
<TableHeader {columns} {sortOrders} {sortData} />
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{#each stockList as item, index}
|
||||
<tr
|
||||
class="sm:hover:bg-[#245073] border-b border-gray-800 sm:hover:bg-opacity-[0.2] odd:bg-odd {index +
|
||||
1 ===
|
||||
rawData?.length && data?.user?.tier !== 'Pro'
|
||||
? 'opacity-[0.1]'
|
||||
: ''}"
|
||||
>
|
||||
<td
|
||||
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{#if timePeriod === "Weekly"}
|
||||
Week of {new Date(item?.time).toLocaleString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
},
|
||||
)}
|
||||
{:else}
|
||||
{new Date(item?.time).toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
daySuffix: "2-digit",
|
||||
})}
|
||||
{/if}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.open?.toFixed(2)}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.high?.toFixed(2)}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.low?.toFixed(2)}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.close?.toFixed(2)}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.change !== null ? item?.change : "n/a"}
|
||||
</td>
|
||||
<td
|
||||
class="text-sm sm:text-[1rem] {item?.changesPercentage >=
|
||||
0 && item?.changesPercentage !== null
|
||||
? "text-[#00FC50] before:content-['+'] "
|
||||
: item?.changesPercentage < 0 &&
|
||||
item?.changesPercentage !== null
|
||||
? 'text-[#FF2F1F]'
|
||||
: 'text-white'} text-end"
|
||||
>
|
||||
{item?.changesPercentage !== null
|
||||
? item?.changesPercentage + "%"
|
||||
: "n/a"}
|
||||
</td>
|
||||
<td
|
||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||
>
|
||||
{item?.volume?.toLocaleString("en-US")}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<Infobox
|
||||
text={`No price history are available for ${$displayCompanyName}.`}
|
||||
/>
|
||||
{/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>
|
||||
</main>
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
<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>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Filter, sort and analyze all stocks to find your next
|
||||
investment.
|
||||
</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>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Keep track of your favorite stocks in real-time.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
27
src/routes/index/[tickerID]/holdings/+page.server.ts
Normal file
27
src/routes/index/[tickerID]/holdings/+page.server.ts
Normal file
@ -0,0 +1,27 @@
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
const getETFHoldings = async () => {
|
||||
const postData = {
|
||||
ticker: params.tickerID,
|
||||
};
|
||||
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch(apiURL + "/etf-holdings", {
|
||||
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 {
|
||||
getETFHoldings: await getETFHoldings(),
|
||||
};
|
||||
};
|
||||
133
src/routes/index/[tickerID]/holdings/+page.svelte
Normal file
133
src/routes/index/[tickerID]/holdings/+page.svelte
Normal file
@ -0,0 +1,133 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
etfTicker,
|
||||
numberOfUnreadNotification,
|
||||
displayCompanyName,
|
||||
} from "$lib/store";
|
||||
import { formatString } from "$lib/utils";
|
||||
import Table from "$lib/components/Table/Table.svelte";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getETFHoldings?.holdings || [];
|
||||
|
||||
const lastUpdate = new Date(data?.getETFHoldings?.lastUpdate);
|
||||
const options = { month: "short", day: "numeric", year: "numeric" };
|
||||
const formattedDate = lastUpdate?.toLocaleDateString("en-US", options);
|
||||
|
||||
const excludedRules = new Set([
|
||||
"price",
|
||||
"changesPercentage",
|
||||
"sharesNumber",
|
||||
"weightPercentage",
|
||||
]);
|
||||
|
||||
const defaultList = [
|
||||
{ name: "Price", rule: "price" },
|
||||
{ name: "% Change", rule: "changesPercentage" },
|
||||
{ name: "Shares", rule: "sharesNumber" },
|
||||
{ name: "% Weight", rule: "weightPercentage" },
|
||||
];
|
||||
|
||||
const specificRows = [
|
||||
{ name: "% Weight", rule: "weightPercentage", type: "percent" },
|
||||
{ name: "Shares", rule: "sharesNumber", type: "int" },
|
||||
];
|
||||
|
||||
function generateStatementInfoHTML() {
|
||||
if (rawData?.length > 0) {
|
||||
return `
|
||||
<span>
|
||||
The ${$displayCompanyName} holds ${rawData?.length} different assets
|
||||
and the largest one in the portfolio is ${formatString(
|
||||
rawData?.at(0)?.name,
|
||||
)}, making up ${rawData?.at(0)?.weightPercentage?.toFixed(2)}% of
|
||||
the total.
|
||||
</span>
|
||||
`;
|
||||
} else {
|
||||
return `
|
||||
<span>
|
||||
No financial data available for ${$displayCompanyName}.
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
let htmlOutput = generateStatementInfoHTML();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
|
||||
{$displayCompanyName} ({$etfTicker}) Holdings List · Stocknear
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={`Get the Holdings List of ${$displayCompanyName} (${$etfTicker}).`}
|
||||
/>
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`${$displayCompanyName} (${$etfTicker}) Holdings List · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`Get the Holdings List of ${$displayCompanyName} (${$etfTicker}).`}
|
||||
/>
|
||||
<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}) Holdings List · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`Get the Holdings List of ${$displayCompanyName} (${$etfTicker}).`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
<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"
|
||||
>
|
||||
<div class="flex justify-center m-auto h-full overflow-hidden w-full">
|
||||
<div
|
||||
class="relative flex justify-center items-center overflow-hidden w-full"
|
||||
>
|
||||
<div class="mt-5 sm:mt-0 sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto">
|
||||
<div class="flex flex-row items-center md:space-x-4 md:border-0">
|
||||
<h1 class=" text-xl sm:text-2xl font-bold">
|
||||
{$etfTicker} Holdings List
|
||||
</h1>
|
||||
{#if data?.getETFHoldings?.lastUpdate}
|
||||
<div
|
||||
class="ml-3 sm:mt-1 whitespace-nowrap text-sm sm:text-[1rem] md:ml-0"
|
||||
>
|
||||
<span class="inline">As of </span>{formattedDate}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="mt-5 mb-10">
|
||||
<Infobox text={htmlOutput} />
|
||||
</div>
|
||||
|
||||
{#if rawData?.length !== 0}
|
||||
<Table
|
||||
{data}
|
||||
{rawData}
|
||||
{excludedRules}
|
||||
{defaultList}
|
||||
{specificRows}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
182
src/routes/index/[tickerID]/options/+layout.svelte
Normal file
182
src/routes/index/[tickerID]/options/+layout.svelte
Normal file
@ -0,0 +1,182 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker } from "$lib/store";
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
export let data;
|
||||
|
||||
let displaySubSection = "overview";
|
||||
|
||||
function changeSubSection(state) {
|
||||
const subSectionMap = {
|
||||
overview: "/options",
|
||||
"hottest-contracts": "/options/hottest-contracts",
|
||||
"unusual-activity": "/options/unusual-activity",
|
||||
volatility: "/options/volatility",
|
||||
gex: "/options/gex",
|
||||
dex: "/options/dex",
|
||||
oi: "/options/oi",
|
||||
};
|
||||
|
||||
if (state !== "overview" && subSectionMap[state]) {
|
||||
displaySubSection = state;
|
||||
//goto(`/etf/${$etfTicker}${subSectionMap[state]}`);
|
||||
} else {
|
||||
displaySubSection = state;
|
||||
//goto(`/etf/${$etfTicker}/statistics`);
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($page?.url?.pathname) {
|
||||
const parts = $page?.url?.pathname.split("/");
|
||||
const sectionMap = {
|
||||
overview: "overview",
|
||||
"hottest-contracts": "hottest-contracts",
|
||||
"unusual-activity": "unusual-activity",
|
||||
volatility: "volatility",
|
||||
gex: "gex",
|
||||
dex: "dex",
|
||||
oi: "oi",
|
||||
};
|
||||
|
||||
const foundSection = parts?.find((part) =>
|
||||
Object?.values(sectionMap)?.includes(part),
|
||||
);
|
||||
|
||||
displaySubSection =
|
||||
Object?.keys(sectionMap)?.find(
|
||||
(key) => sectionMap[key] === foundSection,
|
||||
) || "overview";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden min-h-screen">
|
||||
<div class="w-full overflow-hidden m-auto">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full lg:w-3/4 lg:pr-10">
|
||||
<nav
|
||||
class="sm:ml-4 overflow-x-scroll pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<ul class="flex flex-row items-center w-full text-white">
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options`}
|
||||
on:click={() => changeSubSection("overview")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
Overview
|
||||
</a>
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/unusual-activity`}
|
||||
on:click={() => changeSubSection("unusual-activity")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection ===
|
||||
'unusual-activity'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
Unusual Activity
|
||||
</a>
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/hottest-contracts`}
|
||||
on:click={() => changeSubSection("hottest-contracts")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection ===
|
||||
'hottest-contracts'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
Hottest Contracts
|
||||
</a>
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/volatility`}
|
||||
on:click={() => changeSubSection("volatility")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection ===
|
||||
'volatility'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
Volatility
|
||||
</a>
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/oi`}
|
||||
on:click={() => changeSubSection("oi")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'oi'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
OI
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/gex`}
|
||||
on:click={() => changeSubSection("gex")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'gex'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
GEX
|
||||
</a>
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/dex`}
|
||||
on:click={() => changeSubSection("dex")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'dex'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
DEX
|
||||
</a>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="mt-2 sm:mt-0">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
|
||||
<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={`/options-flow?query=${$etfTicker}`}
|
||||
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">
|
||||
Options Flow
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Get realtime options flow and customize your screener
|
||||
</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>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Build your Stock Screener to find profitable etf.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
209
src/routes/index/[tickerID]/options/+page.server.ts
Normal file
209
src/routes/index/[tickerID]/options/+page.server.ts
Normal file
@ -0,0 +1,209 @@
|
||||
import { error, fail, redirect } from "@sveltejs/kit";
|
||||
import { validateData } from "$lib/utils";
|
||||
import { loginUserSchema, registerUserSchema } from "$lib/schemas";
|
||||
|
||||
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
|
||||
const getDailyStats = async () => {
|
||||
const postData = {
|
||||
ticker: params.tickerID,
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/options-stats-ticker", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
|
||||
const output = await response.json();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
|
||||
|
||||
const getOptionsHistoricalData = async () => {
|
||||
const postData = {
|
||||
ticker: params.tickerID,
|
||||
};
|
||||
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch(apiURL + "/options-historical-data-ticker", {
|
||||
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 {
|
||||
getDailyStats: await getDailyStats(),
|
||||
getOptionsHistoricalData: await getOptionsHistoricalData(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const actions = {
|
||||
login: async ({ url, request, locals }) => {
|
||||
|
||||
const path = url?.href?.replace("/oauth2","")
|
||||
|
||||
const { formData, errors } = await validateData(
|
||||
await request.formData(),
|
||||
loginUserSchema,
|
||||
);
|
||||
|
||||
if (errors) {
|
||||
return fail(400, {
|
||||
data: formData,
|
||||
errors: errors.fieldErrors,
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
await locals.pb
|
||||
.collection("users")
|
||||
.authWithPassword(formData.email, formData.password);
|
||||
|
||||
/*
|
||||
if (!locals.pb?.authStore?.model?.verified) {
|
||||
locals.pb.authStore.clear();
|
||||
return {
|
||||
notVerified: true,
|
||||
};
|
||||
}
|
||||
*/
|
||||
} catch (err) {
|
||||
console.log("Error: ", err);
|
||||
error(err.status, err.message);
|
||||
}
|
||||
|
||||
redirect(302, path);
|
||||
},
|
||||
|
||||
register: async ({ url, locals, request }) => {
|
||||
const path = url?.href?.replace("/oauth2","")
|
||||
|
||||
const { formData, errors } = await validateData(
|
||||
await request.formData(),
|
||||
registerUserSchema,
|
||||
);
|
||||
|
||||
if (errors) {
|
||||
return fail(400, {
|
||||
data: formData,
|
||||
errors: errors.fieldErrors,
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
let newUser = await locals.pb.collection("users").create(formData);
|
||||
/*
|
||||
await locals.pb?.collection('users').update(
|
||||
newUser?.id, {
|
||||
'freeTrial' : true,
|
||||
'tier': 'Pro', //Give new users a free trial for the Pro Subscription
|
||||
});
|
||||
*/
|
||||
await locals.pb.collection("users")?.requestVerification(formData.email);
|
||||
} catch (err) {
|
||||
console.log("Error: ", err);
|
||||
error(err.status, err.message);
|
||||
}
|
||||
|
||||
try {
|
||||
await locals.pb
|
||||
.collection("users")
|
||||
.authWithPassword(formData.email, formData.password);
|
||||
} catch (err) {
|
||||
console.log("Error: ", err);
|
||||
error(err.status, err.message);
|
||||
}
|
||||
|
||||
redirect(303, path);
|
||||
},
|
||||
|
||||
oauth2: async ({ url, locals, request, cookies }) => {
|
||||
|
||||
const path = url?.href?.replace("/oauth2","")
|
||||
const authMethods = (await locals?.pb
|
||||
?.collection("users")
|
||||
?.listAuthMethods())?.oauth2;
|
||||
|
||||
|
||||
const data = await request?.formData();
|
||||
const providerSelected = data?.get("provider");
|
||||
|
||||
if (!authMethods) {
|
||||
return {
|
||||
authProviderRedirect: "",
|
||||
authProviderState: "",
|
||||
};
|
||||
}
|
||||
const redirectURL = `${url.origin}/oauth`;
|
||||
|
||||
const targetItem = authMethods?.providers?.findIndex(
|
||||
(item) => item?.name === providerSelected,
|
||||
);
|
||||
//console.log("==================")
|
||||
//console.log(authMethods.authProviders)
|
||||
//console.log('target item is: ', targetItem)
|
||||
|
||||
const provider = authMethods.providers[targetItem];
|
||||
const authProviderRedirect = `${provider.authUrl}${redirectURL}`;
|
||||
const state = provider.state;
|
||||
const verifier = provider.codeVerifier;
|
||||
|
||||
|
||||
|
||||
cookies.set("state", state, {
|
||||
httpOnly: true,
|
||||
sameSite: "lax",
|
||||
secure: true,
|
||||
path: "/",
|
||||
maxAge: 60 * 60,
|
||||
});
|
||||
|
||||
cookies.set("verifier", verifier, {
|
||||
httpOnly: true,
|
||||
sameSite: "lax",
|
||||
secure: true,
|
||||
path: "/",
|
||||
maxAge: 60 * 60,
|
||||
});
|
||||
|
||||
cookies.set("provider", providerSelected, {
|
||||
httpOnly: true,
|
||||
sameSite: "lax",
|
||||
secure: true,
|
||||
path: "/",
|
||||
maxAge: 60 * 60,
|
||||
});
|
||||
|
||||
cookies.set("path", path, {
|
||||
httpOnly: true,
|
||||
sameSite: "lax",
|
||||
secure: true,
|
||||
path: "/",
|
||||
maxAge: 60,
|
||||
});
|
||||
|
||||
redirect(302, authProviderRedirect);
|
||||
},
|
||||
|
||||
};
|
||||
665
src/routes/index/[tickerID]/options/+page.svelte
Normal file
665
src/routes/index/[tickerID]/options/+page.svelte
Normal file
@ -0,0 +1,665 @@
|
||||
<script lang="ts">
|
||||
import { displayCompanyName, screenWidth, etfTicker } from "$lib/store";
|
||||
import DailyStats from "$lib/components/Options/DailyStats.svelte";
|
||||
import { Chart } from "svelte-echarts";
|
||||
import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
|
||||
import { onMount } from "svelte";
|
||||
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
|
||||
import { init, use } from "echarts/core";
|
||||
import { BarChart, LineChart } from "echarts/charts";
|
||||
import { GridComponent, TooltipComponent } from "echarts/components";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
|
||||
|
||||
export let data;
|
||||
let dailyStats = data?.getDailyStats;
|
||||
|
||||
let filteredList = [];
|
||||
|
||||
let displayData = "volume";
|
||||
let options;
|
||||
|
||||
let rawData = data?.getOptionsHistoricalData;
|
||||
let optionList = rawData?.slice(0, 30);
|
||||
|
||||
let dateList; //= data?.getOptionsPlotData?.dateList;
|
||||
|
||||
let callVolumeList; //= data?.getOptionsPlotData?.callVolumeList;
|
||||
let putVolumeList; //= data?.getOptionsPlotData?.putVolumeList;
|
||||
let callOpenInterestList; //= data?.getOptionsPlotData?.callOpenInterestList;
|
||||
let putOpenInterestList; //= data?.getOptionsPlotData?.putOpenInterestList;
|
||||
let priceList;
|
||||
|
||||
let displayTimePeriod = "oneYear";
|
||||
|
||||
function formatDate(dateStr) {
|
||||
// Parse the input date string (YYYY-mm-dd)
|
||||
var date = new Date(dateStr);
|
||||
|
||||
// Get month, day, and year
|
||||
var month = date.getMonth() + 1; // Month starts from 0
|
||||
var day = date.getDate();
|
||||
var year = date.getFullYear();
|
||||
|
||||
// Extract the last two digits of the year
|
||||
var shortYear = year.toString().slice(-2);
|
||||
|
||||
// Add leading zeros if necessary
|
||||
month = (month < 10 ? "0" : "") + month;
|
||||
day = (day < 10 ? "0" : "") + day;
|
||||
|
||||
var formattedDate = month + "/" + day + "/" + year;
|
||||
|
||||
return formattedDate;
|
||||
}
|
||||
|
||||
function changeVolumeOI(event) {
|
||||
displayData = event.target.value;
|
||||
}
|
||||
|
||||
function plotData(callData, putData, priceList) {
|
||||
const options = {
|
||||
animation: false,
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
hideDelay: 100,
|
||||
borderColor: "#969696", // Black border color
|
||||
borderWidth: 1, // Border width of 1px
|
||||
backgroundColor: "#313131", // Optional: Set background color for contrast
|
||||
textStyle: {
|
||||
color: "#fff", // Optional: Text color for better visibility
|
||||
},
|
||||
formatter: function (params) {
|
||||
// Get the timestamp from the first parameter
|
||||
const timestamp = params[0].axisValue;
|
||||
|
||||
// Initialize result with timestamp
|
||||
let result = timestamp + "<br/>";
|
||||
|
||||
// Sort params to ensure Vol appears last
|
||||
params.sort((a, b) => {
|
||||
if (a.seriesName === "Vol") return 1;
|
||||
if (b.seriesName === "Vol") return -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
// Add each series data
|
||||
params?.forEach((param) => {
|
||||
const marker =
|
||||
'<span style="display:inline-block;margin-right:4px;' +
|
||||
"border-radius:10px;width:10px;height:10px;background-color:" +
|
||||
param.color +
|
||||
'"></span>';
|
||||
result +=
|
||||
marker +
|
||||
param.seriesName +
|
||||
": " +
|
||||
abbreviateNumberWithColor(param.value, false, true) +
|
||||
"<br/>";
|
||||
});
|
||||
|
||||
return result;
|
||||
},
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
silent: true,
|
||||
grid: {
|
||||
left: $screenWidth < 640 ? "5%" : "2%",
|
||||
right: $screenWidth < 640 ? "5%" : "2%",
|
||||
bottom: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: dateList,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
|
||||
formatter: function (value) {
|
||||
// Assuming dates are in the format 'yyyy-mm-dd'
|
||||
const dateParts = value.split("-");
|
||||
const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
|
||||
const year = parseInt(dateParts[0]);
|
||||
const day = parseInt(dateParts[2]);
|
||||
return `${day} ${monthNames[monthIndex]} ${year}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
axisLabel: {
|
||||
show: false, // Hide y-axis labels
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
position: "right",
|
||||
axisLabel: {
|
||||
show: false, // Hide y-axis labels
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "Call",
|
||||
type: "bar",
|
||||
stack: "Put-Call Ratio",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: callData,
|
||||
itemStyle: {
|
||||
color: "#00FC50",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Put",
|
||||
type: "bar",
|
||||
stack: "Put-Call Ratio",
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: putData,
|
||||
itemStyle: {
|
||||
color: "#EE5365", //'#7A1C16'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Price", // Name for the line chart
|
||||
type: "line", // Type of the chart (line)
|
||||
yAxisIndex: 1, // Use the second y-axis on the right
|
||||
data: priceList, // iv60Data (assumed to be passed as priceList)
|
||||
itemStyle: {
|
||||
color: "#fff", // Choose a color for the line (gold in this case)
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2, // Set the width of the line
|
||||
},
|
||||
smooth: true, // Optional: make the line smooth
|
||||
showSymbol: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
return options;
|
||||
}
|
||||
|
||||
function filterDate(filteredList, displayTimePeriod) {
|
||||
const now = Date.now();
|
||||
let cutoffDate;
|
||||
|
||||
switch (displayTimePeriod) {
|
||||
case "oneWeek":
|
||||
cutoffDate = now - 7 * 24 * 60 * 60 * 1000;
|
||||
break;
|
||||
case "oneMonth":
|
||||
cutoffDate = now - 30 * 24 * 60 * 60 * 1000;
|
||||
break;
|
||||
case "threeMonths":
|
||||
cutoffDate = now - 90 * 24 * 60 * 60 * 1000;
|
||||
break;
|
||||
case "sixMonths":
|
||||
cutoffDate = now - 180 * 24 * 60 * 60 * 1000;
|
||||
break;
|
||||
case "oneYear":
|
||||
cutoffDate = now - 365 * 24 * 60 * 60 * 1000;
|
||||
break;
|
||||
default:
|
||||
throw new Error("Invalid time period");
|
||||
}
|
||||
|
||||
return filteredList?.filter((item) => {
|
||||
// Convert YYYY-MM-DD to a timestamp
|
||||
const [year, month, day] = item?.date?.split("-")?.map(Number);
|
||||
const itemTimestamp = new Date(year, month - 1, day)?.getTime();
|
||||
|
||||
return itemTimestamp >= cutoffDate;
|
||||
});
|
||||
}
|
||||
|
||||
function processPlotData(filteredList: any[]) {
|
||||
filteredList = Array.isArray(filteredList)
|
||||
? filteredList.sort((a, b) => new Date(a?.date) - new Date(b?.date))
|
||||
: [];
|
||||
|
||||
dateList = filteredList?.map((item) => item.date);
|
||||
callVolumeList = filteredList?.map((item) => item?.call_volume);
|
||||
putVolumeList = filteredList?.map((item) => item?.put_volume);
|
||||
priceList = filteredList?.map((item) => item?.price);
|
||||
|
||||
callOpenInterestList = filteredList?.map(
|
||||
(item) => item?.call_open_interest,
|
||||
);
|
||||
putOpenInterestList = filteredList?.map((item) => item?.put_open_interest);
|
||||
|
||||
// Determine the type of plot data to generate based on displayData
|
||||
if (displayData === "volume") {
|
||||
options = plotData(callVolumeList, putVolumeList, priceList);
|
||||
} else if (displayData === "openInterest") {
|
||||
options = plotData(callOpenInterestList, putOpenInterestList, priceList);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleScroll() {
|
||||
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||
if (isBottom && optionList?.length !== rawData?.length) {
|
||||
const nextIndex = optionList?.length;
|
||||
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
|
||||
optionList = [...optionList, ...filteredNewResults];
|
||||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (data?.user?.tier === "Pro") {
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
$: {
|
||||
if (displayTimePeriod || displayData) {
|
||||
// Filter the raw plot data based on the selected time period
|
||||
filteredList = filterDate(rawData, displayTimePeriod);
|
||||
// Process the filtered list to generate the plot data
|
||||
processPlotData(filteredList);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
title="Options Activity"
|
||||
description={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$etfTicker}).`}
|
||||
/>
|
||||
|
||||
<section class="w-full bg-default overflow-hidden text-white min-h-screen">
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
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">
|
||||
{#if Object?.keys(dailyStats)?.length === 0 && rawData?.length === 0}
|
||||
<Infobox text="No Options data available" />
|
||||
{/if}
|
||||
|
||||
{#if Object?.keys(dailyStats)?.length > 0}
|
||||
<div class="w-full mb-10">
|
||||
<DailyStats rawData={dailyStats} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if rawData?.length > 0}
|
||||
<div class="flex flex-row items-center w-full mt-10">
|
||||
<!--
|
||||
<select
|
||||
class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
|
||||
on:change={changeTimePeriod}
|
||||
>
|
||||
<option disabled>Choose a time period</option>
|
||||
<option value="oneWeek">1 Week</option>
|
||||
<option value="oneMonth">1 Month</option>
|
||||
<option value="threeMonths">3 Months</option>
|
||||
<option value="sixMonths">6 Months</option>
|
||||
<option value="oneYear" selected>1 Year</option>
|
||||
</select>
|
||||
-->
|
||||
|
||||
<select
|
||||
class=" w-40 select select-bordered select-sm p-0 pl-5 bg-secondary"
|
||||
on:change={changeVolumeOI}
|
||||
>
|
||||
<option disabled>Choose a category</option>
|
||||
<option value="volume" selected>Volume</option>
|
||||
<option value="openInterest">Open Interest</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="app w-full bg-default">
|
||||
{#if filteredList?.length !== 0}
|
||||
<Chart {init} {options} class="chart" />
|
||||
{:else}
|
||||
<span
|
||||
class="text-xl text-white m-auto flex justify-center items-center h-full"
|
||||
>
|
||||
<div
|
||||
class="text-white text-sm sm:text-[1rem] sm:rounded-md h-auto border border-gray-600 p-4"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
><path
|
||||
fill="#fff"
|
||||
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
|
||||
/></svg
|
||||
>
|
||||
No Options activity found
|
||||
</div>
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if optionList?.length !== 0}
|
||||
<h3 class="text-xl sm:text-2xl text-white font-bold text-start">
|
||||
Historical {$etfTicker} Data
|
||||
</h3>
|
||||
|
||||
<div class="flex justify-start items-center m-auto overflow-x-auto">
|
||||
<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"
|
||||
>
|
||||
<thead class="bg-default">
|
||||
<tr class="">
|
||||
<td class="text-white font-semibold text-sm text-start"
|
||||
>Date</td
|
||||
>
|
||||
<td class="text-white font-semibold text-sm text-end"
|
||||
>% Change</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"
|
||||
>Vol/30D</td
|
||||
>
|
||||
-->
|
||||
<!--
|
||||
<td class="text-white font-semibold text-sm text-end"
|
||||
>🐻/🐂 Prem</td
|
||||
>
|
||||
-->
|
||||
<td class="text-white font-semibold text-sm text-end"
|
||||
>Total OI</td
|
||||
>
|
||||
<td class="text-white font-semibold text-sm text-end"
|
||||
>OI Change</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"
|
||||
>Net Prem</td
|
||||
>
|
||||
<td class="text-white font-semibold text-sm text-end"
|
||||
>Total Prem</td
|
||||
>
|
||||
-->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data?.user?.tier === "Pro" ? optionList : optionList?.slice(0, 3) as item, index}
|
||||
<tr
|
||||
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800 {index +
|
||||
1 ===
|
||||
optionList?.slice(0, 3)?.length &&
|
||||
data?.user?.tier !== 'Pro'
|
||||
? 'opacity-[0.1]'
|
||||
: ''}"
|
||||
>
|
||||
<td class="text-white text-sm sm:text-[1rem] text-start">
|
||||
{formatDate(item?.date)}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] text-end">
|
||||
{#if item?.changesPercentage >= 0 && item?.changesPercentage !== null}
|
||||
<span class="text-[#00FC50]"
|
||||
>+{item?.changesPercentage >= 1000
|
||||
? abbreviateNumberWithColor(
|
||||
item?.changesPercentage,
|
||||
)
|
||||
: item?.changesPercentage?.toFixed(2)}%</span
|
||||
>
|
||||
{:else if item?.changesPercentage < 0 && item?.changesPercentage !== null}
|
||||
<span class="text-[#FF2F1F]"
|
||||
>{item?.changesPercentage <= -1000
|
||||
? abbreviateNumberWithColor(
|
||||
item?.changesPercentage,
|
||||
)
|
||||
: item?.changesPercentage?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
n/a
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{item?.putCallRatio}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{item?.volume?.toLocaleString("en-US")}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="whitespace-nowrap text-sm sm:text-[1rem] text-center"
|
||||
>
|
||||
{item?.call_volume?.toLocaleString("en-US")}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="whitespace-nowrap text-sm sm:text-[1rem] text-center"
|
||||
>
|
||||
{item?.put_volume?.toLocaleString("en-US")}
|
||||
</td>
|
||||
<!--
|
||||
<td class="text-sm sm:text-[1rem] text-white text-end">
|
||||
{item?.avgVolumeRatio?.toFixed(2)}
|
||||
</td>
|
||||
-->
|
||||
<!--
|
||||
<td class="text-sm sm:text-[1rem] text-end">
|
||||
<HoverCard.Root>
|
||||
<HoverCard.Trigger
|
||||
class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
|
||||
>
|
||||
<div class="flex items-center justify-end">
|
||||
<div
|
||||
class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="bg-red-500 h-full"
|
||||
style="width: calc(({item
|
||||
?.premium_ratio[0]} / ({item
|
||||
?.premium_ratio[0]} + {item
|
||||
?.premium_ratio[1]} + {item
|
||||
?.premium_ratio[2]})) * 100%)"
|
||||
></div>
|
||||
|
||||
<div
|
||||
class="bg-gray-300 h-full"
|
||||
style="width: calc(({item
|
||||
?.premium_ratio[1]} / ({item
|
||||
?.premium_ratio[0]} + {item
|
||||
?.premium_ratio[1]} + {item
|
||||
?.premium_ratio[2]})) * 100%)"
|
||||
></div>
|
||||
|
||||
<div
|
||||
class="bg-green-500 h-full"
|
||||
style="width: calc(({item
|
||||
?.premium_ratio[2]} / ({item
|
||||
?.premium_ratio[0]} + {item
|
||||
?.premium_ratio[1]} + {item
|
||||
?.premium_ratio[2]})) * 100%)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</HoverCard.Trigger>
|
||||
<HoverCard.Content
|
||||
class="w-auto bg-secondary border border-gray-600"
|
||||
>
|
||||
<div class="flex justify-between space-x-4">
|
||||
<div
|
||||
class="space-y-1 flex flex-col items-start text-white"
|
||||
>
|
||||
<div>
|
||||
Bearish: {@html abbreviateNumberWithColor(
|
||||
item?.premium_ratio[0],
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
Neutral: {@html abbreviateNumberWithColor(
|
||||
item?.premium_ratio[1],
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
Bullish: {@html abbreviateNumberWithColor(
|
||||
item?.premium_ratio[2],
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HoverCard.Content>
|
||||
</HoverCard.Root>
|
||||
</td>
|
||||
-->
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{@html abbreviateNumberWithColor(
|
||||
item?.total_open_interest,
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] text-end">
|
||||
{#if item?.changeOI >= 0}
|
||||
<span class="text-[#00FC50]"
|
||||
>+{item?.changeOI?.toLocaleString("en-US")}</span
|
||||
>
|
||||
{:else if item?.changeOI < 0}
|
||||
<span class="text-[#FF2F1F]"
|
||||
>{item?.changeOI?.toLocaleString("en-US")}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-white"> n/a </span>
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] text-end">
|
||||
{#if item?.changesPercentageOI >= 0}
|
||||
<span class="text-[#00FC50]"
|
||||
>+{item?.changesPercentageOI >= 1000
|
||||
? abbreviateNumberWithColor(
|
||||
item?.changesPercentageOI,
|
||||
)
|
||||
: item?.changesPercentageOI?.toFixed(2)}%</span
|
||||
>
|
||||
{:else if item?.changesPercentageOI < 0}
|
||||
<span class="text-[#FF2F1F]"
|
||||
>{item?.changesPercentageOI <= -1000
|
||||
? abbreviateNumberWithColor(
|
||||
item?.changesPercentageOI,
|
||||
)
|
||||
: item?.changesPercentageOI?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-white"> n/a </span>
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{@html abbreviateNumberWithColor(
|
||||
item?.call_premium,
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{@html abbreviateNumberWithColor(
|
||||
item?.put_premium,
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</td>
|
||||
<!--
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{@html abbreviateNumberWithColor(
|
||||
item?.net_premium,
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{@html abbreviateNumberWithColor(
|
||||
item?.total_premium,
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</td>
|
||||
-->
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<UpgradeToPro {data} />
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--Start Options Detail Desktop Modal-->
|
||||
|
||||
<style>
|
||||
.app {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
94
src/routes/index/[tickerID]/options/dex/+layout.svelte
Normal file
94
src/routes/index/[tickerID]/options/dex/+layout.svelte
Normal file
@ -0,0 +1,94 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker } from "$lib/store";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
export let data;
|
||||
|
||||
let displaySubSection = "overview";
|
||||
|
||||
function changeSubSection(state) {
|
||||
const subSectionMap = {
|
||||
dex: "/options/dex",
|
||||
strike: "/options/dex/strike",
|
||||
expiry: "/options/dex/expiry",
|
||||
};
|
||||
|
||||
if (state !== "overview" && subSectionMap[state]) {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$etfTicker}${subSectionMap[state]}`);
|
||||
} else {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$etfTicker}/statistics`);
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($page?.url?.pathname) {
|
||||
const parts = $page?.url?.pathname.split("/");
|
||||
const sectionMap = {
|
||||
overview: "overview",
|
||||
strike: "strike",
|
||||
expiry: "expiry",
|
||||
};
|
||||
|
||||
const foundSection = parts?.find((part) =>
|
||||
Object?.values(sectionMap)?.includes(part),
|
||||
);
|
||||
|
||||
displaySubSection =
|
||||
Object?.keys(sectionMap)?.find(
|
||||
(key) => sectionMap[key] === foundSection,
|
||||
) || "overview";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden min-h-screen">
|
||||
<div class="w-full overflow-hidden m-auto">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full">
|
||||
<nav
|
||||
class="sm:ml-4 overflow-x-scroll pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<ul class="flex flex-row items-center w-full text-white">
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/dex`}
|
||||
on:click={() => changeSubSection("overview")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
Overview
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/dex/strike`}
|
||||
on:click={() => changeSubSection("strike")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
By Strike
|
||||
</a>
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/dex/expiry`}
|
||||
on:click={() => changeSubSection("expiry")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
By Expiry
|
||||
</a>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="mt-2 sm:mt-0">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
51
src/routes/index/[tickerID]/options/dex/+page.server.ts
Normal file
51
src/routes/index/[tickerID]/options/dex/+page.server.ts
Normal file
@ -0,0 +1,51 @@
|
||||
|
||||
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL, user } = locals;
|
||||
|
||||
const getData = async () => {
|
||||
const postData = {
|
||||
params: params.tickerID,
|
||||
category: "overview",
|
||||
type: "",
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/options-gex-dex", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
const output = await response.json();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
|
||||
const getHistoricalPrice = async () => {
|
||||
const postData = { ticker: params.tickerID, timePeriod: "one-year" };
|
||||
const response = await fetch(apiURL + "/historical-price", {
|
||||
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 {
|
||||
getData: await getData(),
|
||||
getHistoricalPrice: await getHistoricalPrice(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
33
src/routes/index/[tickerID]/options/dex/+page.svelte
Normal file
33
src/routes/index/[tickerID]/options/dex/+page.svelte
Normal file
@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker, displayCompanyName } from "$lib/store";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import GreekExposure from "$lib/components/Options/GreekExposure.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
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.`}
|
||||
/>
|
||||
|
||||
<section
|
||||
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
|
||||
>
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if data?.getData?.length > 0}
|
||||
<GreekExposure {data} title="Delta" />
|
||||
{:else}
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mt-2">
|
||||
<Infobox text="No data is available" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,36 @@
|
||||
|
||||
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL, user } = locals;
|
||||
|
||||
const getData = async () => {
|
||||
const postData = {
|
||||
params: params.tickerID,
|
||||
category: "expiry",
|
||||
type: "dex",
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/options-gex-dex", {
|
||||
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 {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
35
src/routes/index/[tickerID]/options/dex/expiry/+page.svelte
Normal file
35
src/routes/index/[tickerID]/options/dex/expiry/+page.svelte
Normal file
@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker, displayCompanyName } from "$lib/store";
|
||||
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import GreekByExpiry from "$lib/components/Options/GreekByExpiry.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getData || [];
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
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.`}
|
||||
/>
|
||||
|
||||
<section
|
||||
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
|
||||
>
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if rawData?.length > 0}
|
||||
<GreekByExpiry {data} title="Delta" />
|
||||
{:else}
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mt-2">
|
||||
<Infobox text="No data is available" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,36 @@
|
||||
|
||||
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL, user } = locals;
|
||||
|
||||
const getData = async () => {
|
||||
const postData = {
|
||||
params: params.tickerID,
|
||||
category: "strike",
|
||||
type: "dex",
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/options-gex-dex", {
|
||||
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 {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
35
src/routes/index/[tickerID]/options/dex/strike/+page.svelte
Normal file
35
src/routes/index/[tickerID]/options/dex/strike/+page.svelte
Normal file
@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker, displayCompanyName } from "$lib/store";
|
||||
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
import GreekByStrike from "$lib/components/Options/GreekByStrike.svelte";
|
||||
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
title="Delta Exposure By Strike Price"
|
||||
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.`}
|
||||
/>
|
||||
|
||||
<section
|
||||
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
|
||||
>
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if data?.getData?.length > 0}
|
||||
<GreekByStrike {data} title="Delta" />
|
||||
{:else}
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mt-2">
|
||||
<Infobox text="No data is available" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
94
src/routes/index/[tickerID]/options/gex/+layout.svelte
Normal file
94
src/routes/index/[tickerID]/options/gex/+layout.svelte
Normal file
@ -0,0 +1,94 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker } from "$lib/store";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
export let data;
|
||||
|
||||
let displaySubSection = "overview";
|
||||
|
||||
function changeSubSection(state) {
|
||||
const subSectionMap = {
|
||||
gex: "/options/gex",
|
||||
strike: "/options/gex/strike",
|
||||
expiry: "/options/gex/expiry",
|
||||
};
|
||||
|
||||
if (state !== "overview" && subSectionMap[state]) {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$etfTicker}${subSectionMap[state]}`);
|
||||
} else {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$etfTicker}/statistics`);
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($page?.url?.pathname) {
|
||||
const parts = $page?.url?.pathname.split("/");
|
||||
const sectionMap = {
|
||||
overview: "overview",
|
||||
strike: "strike",
|
||||
expiry: "expiry",
|
||||
};
|
||||
|
||||
const foundSection = parts?.find((part) =>
|
||||
Object?.values(sectionMap)?.includes(part),
|
||||
);
|
||||
|
||||
displaySubSection =
|
||||
Object?.keys(sectionMap)?.find(
|
||||
(key) => sectionMap[key] === foundSection,
|
||||
) || "overview";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden min-h-screen">
|
||||
<div class="w-full overflow-hidden m-auto">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full">
|
||||
<nav
|
||||
class="sm:ml-4 overflow-x-scroll pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<ul class="flex flex-row items-center w-full text-white">
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/gex`}
|
||||
on:click={() => changeSubSection("overview")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
Overview
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/gex/strike`}
|
||||
on:click={() => changeSubSection("strike")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
By Strike
|
||||
</a>
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/gex/expiry`}
|
||||
on:click={() => changeSubSection("expiry")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
By Expiry
|
||||
</a>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="mt-2 sm:mt-0">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
51
src/routes/index/[tickerID]/options/gex/+page.server.ts
Normal file
51
src/routes/index/[tickerID]/options/gex/+page.server.ts
Normal file
@ -0,0 +1,51 @@
|
||||
|
||||
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL, user } = locals;
|
||||
|
||||
const getData = async () => {
|
||||
const postData = {
|
||||
params: params.tickerID,
|
||||
category: "overview",
|
||||
type: "",
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/options-gex-dex", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
const output = await response.json();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
|
||||
const getHistoricalPrice = async () => {
|
||||
const postData = { ticker: params.tickerID, timePeriod: "one-year" };
|
||||
const response = await fetch(apiURL + "/historical-price", {
|
||||
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 {
|
||||
getData: await getData(),
|
||||
getHistoricalPrice: await getHistoricalPrice(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
32
src/routes/index/[tickerID]/options/gex/+page.svelte
Normal file
32
src/routes/index/[tickerID]/options/gex/+page.svelte
Normal file
@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker, displayCompanyName } from "$lib/store";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import GreekExposure from "$lib/components/Options/GreekExposure.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
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.`}
|
||||
/>
|
||||
<section
|
||||
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
|
||||
>
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if data?.getData?.length > 0}
|
||||
<GreekExposure {data} title="Gamma" params="" />
|
||||
{:else}
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mt-2">
|
||||
<Infobox text="No data is available" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,36 @@
|
||||
|
||||
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL, user } = locals;
|
||||
|
||||
const getData = async () => {
|
||||
const postData = {
|
||||
params: params.tickerID,
|
||||
category: "expiry",
|
||||
type: "gex",
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/options-gex-dex", {
|
||||
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 {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
35
src/routes/index/[tickerID]/options/gex/expiry/+page.svelte
Normal file
35
src/routes/index/[tickerID]/options/gex/expiry/+page.svelte
Normal file
@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker, displayCompanyName } from "$lib/store";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import GreekByExpiry from "$lib/components/Options/GreekByExpiry.svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getData || [];
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
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.`}
|
||||
/>
|
||||
|
||||
<section
|
||||
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
|
||||
>
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if rawData?.length > 0}
|
||||
<GreekByExpiry {data} title="Gamma" />
|
||||
{:else}
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mt-2">
|
||||
<Infobox text="No data is available" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,36 @@
|
||||
|
||||
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL, user } = locals;
|
||||
|
||||
const getData = async () => {
|
||||
const postData = {
|
||||
params: params.tickerID,
|
||||
category: "strike",
|
||||
type: "gex",
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/options-gex-dex", {
|
||||
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 {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
35
src/routes/index/[tickerID]/options/gex/strike/+page.svelte
Normal file
35
src/routes/index/[tickerID]/options/gex/strike/+page.svelte
Normal file
@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker, displayCompanyName } from "$lib/store";
|
||||
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
import GreekByStrike from "$lib/components/Options/GreekByStrike.svelte";
|
||||
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
title="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.`}
|
||||
/>
|
||||
|
||||
<section
|
||||
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
|
||||
>
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if data?.getData?.length > 0}
|
||||
<GreekByStrike {data} title="Gamma" />
|
||||
{:else}
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mt-2">
|
||||
<Infobox text="No data is available" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,52 @@
|
||||
|
||||
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL, user } = locals;
|
||||
|
||||
const getData = async () => {
|
||||
const postData = {
|
||||
ticker: params.tickerID,
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/hottest-contracts", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
|
||||
let output = await response.json();
|
||||
output.volume = user?.tier !== "Pro" ? output?.volume?.slice(0, 3) : output?.volume;
|
||||
output.openInterest = user?.tier !== "Pro" ? output?.openInterest?.slice(0, 3) : output?.openInterest;
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
|
||||
const getHistoricalPrice = async () => {
|
||||
const postData = { ticker: params.tickerID, timePeriod: "six-months" };
|
||||
const response = await fetch(apiURL + "/historical-price", {
|
||||
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 {
|
||||
getData: await getData(),
|
||||
getHistoricalPrice: await getHistoricalPrice(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
1084
src/routes/index/[tickerID]/options/hottest-contracts/+page.svelte
Normal file
1084
src/routes/index/[tickerID]/options/hottest-contracts/+page.svelte
Normal file
File diff suppressed because it is too large
Load Diff
83
src/routes/index/[tickerID]/options/oi/+layout.svelte
Normal file
83
src/routes/index/[tickerID]/options/oi/+layout.svelte
Normal file
@ -0,0 +1,83 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker } from "$lib/store";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
export let data;
|
||||
|
||||
let displaySubSection = "strike";
|
||||
|
||||
function changeSubSection(state) {
|
||||
const subSectionMap = {
|
||||
strike: "/options/oi/strike",
|
||||
expiry: "/options/gex/expiry",
|
||||
};
|
||||
|
||||
if (state !== "overview" && subSectionMap[state]) {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$etfTicker}${subSectionMap[state]}`);
|
||||
} else {
|
||||
displaySubSection = state;
|
||||
//goto(`/stocks/${$etfTicker}/statistics`);
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($page?.url?.pathname) {
|
||||
const parts = $page?.url?.pathname.split("/");
|
||||
const sectionMap = {
|
||||
strike: "strike",
|
||||
expiry: "expiry",
|
||||
};
|
||||
|
||||
const foundSection = parts?.find((part) =>
|
||||
Object?.values(sectionMap)?.includes(part),
|
||||
);
|
||||
|
||||
displaySubSection =
|
||||
Object?.keys(sectionMap)?.find(
|
||||
(key) => sectionMap[key] === foundSection,
|
||||
) || "strike";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden min-h-screen">
|
||||
<div class="w-full overflow-hidden m-auto">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full">
|
||||
<nav
|
||||
class="sm:ml-4 overflow-x-scroll pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
|
||||
>
|
||||
<ul class="flex flex-row items-center w-full text-white">
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/oi`}
|
||||
on:click={() => changeSubSection("strike")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'strike'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
By Strike
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={`/etf/${$etfTicker}/options/oi/expiry`}
|
||||
on:click={() => changeSubSection("expiry")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'expiry'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
By Expiry
|
||||
</a>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="mt-2 sm:mt-0">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
34
src/routes/index/[tickerID]/options/oi/+page.server.ts
Normal file
34
src/routes/index/[tickerID]/options/oi/+page.server.ts
Normal file
@ -0,0 +1,34 @@
|
||||
|
||||
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL, user } = locals;
|
||||
|
||||
const getData = async () => {
|
||||
const postData = {
|
||||
params: params.tickerID,
|
||||
category: "strike"
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/options-oi", {
|
||||
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 {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
35
src/routes/index/[tickerID]/options/oi/+page.svelte
Normal file
35
src/routes/index/[tickerID]/options/oi/+page.svelte
Normal file
@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker, displayCompanyName } from "$lib/store";
|
||||
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
import OpenInterestByStrike from "$lib/components/Options/OpenInterestByStrike.svelte";
|
||||
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
title="Open Interet 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.`}
|
||||
/>
|
||||
|
||||
<section
|
||||
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
|
||||
>
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if data?.getData?.length > 0}
|
||||
<OpenInterestByStrike {data} />
|
||||
{:else}
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mt-2">
|
||||
<Infobox text="No data is available" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,34 @@
|
||||
|
||||
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
|
||||
const getData = async () => {
|
||||
const postData = {
|
||||
params: params.tickerID,
|
||||
category: "expiry"
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/options-oi", {
|
||||
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 {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
35
src/routes/index/[tickerID]/options/oi/expiry/+page.svelte
Normal file
35
src/routes/index/[tickerID]/options/oi/expiry/+page.svelte
Normal file
@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker, displayCompanyName } from "$lib/store";
|
||||
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import OpenInterestByExpiry from "$lib/components/Options/OpenInterestByExpiry.svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getData || [];
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
title="Open Interest by Expiry"
|
||||
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 bg-default overflow-hidden text-white min-h-screen pb-40"
|
||||
>
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if rawData?.length > 0}
|
||||
<OpenInterestByExpiry {data} />
|
||||
{:else}
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mt-2">
|
||||
<Infobox text="No data is available" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,49 @@
|
||||
|
||||
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL, user } = locals;
|
||||
|
||||
const getData = async () => {
|
||||
const postData = {
|
||||
ticker: params.tickerID,
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/unusual-activity", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
|
||||
let output = await response.json();
|
||||
return output;
|
||||
};
|
||||
|
||||
const getHistoricalPrice = async () => {
|
||||
const postData = { ticker: params.tickerID, timePeriod: "max" };
|
||||
const response = await fetch(apiURL + "/historical-price", {
|
||||
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 {
|
||||
getData: await getData(),
|
||||
getHistoricalPrice: await getHistoricalPrice(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker, displayCompanyName } from "$lib/store";
|
||||
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
import UnusualActivity from "$lib/components/Options/UnusualActivity.svelte";
|
||||
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
title={`${$displayCompanyName} (${$etfTicker}) - Explore Unusual Option Activity | Stocknear`}
|
||||
description={`Analyze historical unusual option trades with a minimum of 1 million dollar premium for ${$displayCompanyName} (${$etfTicker}).`}
|
||||
/>
|
||||
|
||||
<section
|
||||
class="w-full bg-default overflow-hidden text-white min-h-screen pb-40"
|
||||
>
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if data?.getData?.length > 0}
|
||||
<UnusualActivity {data} ticker={$etfTicker} />
|
||||
{:else}
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mt-2">
|
||||
<Infobox
|
||||
text="No unusual options trading activity with a premium of at least $1 million was found."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,15 @@
|
||||
<section class="w-full overflow-hidden min-h-screen">
|
||||
<div class="w-full overflow-hidden m-auto">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full">
|
||||
<div class="mt-2 sm:mt-0">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,31 @@
|
||||
|
||||
|
||||
export const load = async ({ locals, params }) => {
|
||||
const { apiKey, apiURL, user } = locals;
|
||||
|
||||
const getData = async () => {
|
||||
const postData = {
|
||||
ticker: params.tickerID,
|
||||
};
|
||||
|
||||
const response = await fetch(apiURL + "/implied-volatility", {
|
||||
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 {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
35
src/routes/index/[tickerID]/options/volatility/+page.svelte
Normal file
35
src/routes/index/[tickerID]/options/volatility/+page.svelte
Normal file
@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker, displayCompanyName } from "$lib/store";
|
||||
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
import Volatility from "$lib/components/Options/Volatility.svelte";
|
||||
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
title={`${$displayCompanyName} (${$etfTicker}) Volatility · Stocknear`}
|
||||
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 bg-default overflow-hidden text-white min-h-screen pb-40"
|
||||
>
|
||||
<div class="w-full flex h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if data?.getData?.length > 0}
|
||||
<Volatility {data} />
|
||||
{:else}
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mt-2">
|
||||
<Infobox text="No data is available" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -158,7 +158,7 @@ const sitemap = (
|
||||
? "/stocks/"
|
||||
: ticker.type === "ETF"
|
||||
? "/etf/"
|
||||
: "/crypto/";
|
||||
: "/index/";
|
||||
return `
|
||||
<url>
|
||||
<loc>${website}${path}${ticker.id}</loc>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<script>
|
||||
import { numberOfUnreadNotification } from "$lib/store";
|
||||
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
|
||||
const tabs = [
|
||||
@ -183,130 +182,117 @@
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Sitemap
|
||||
- Stocknear
|
||||
</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content="Sitemap - Stocknear" />
|
||||
<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="Sitemap - Stocknear" />
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
<SEO title="Sitemap - Stocknear | Complete Financial Market Directory" description="Navigate through Stocknear's complete collection of financial tools and market analysis resources. Access real-time stock data, ETFs, options flow, and more." />
|
||||
|
||||
<section
|
||||
class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
|
||||
>
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300">Sitemap</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main>
|
||||
<section
|
||||
class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
|
||||
aria-label="Sitemap Navigation"
|
||||
>
|
||||
<nav class="text-sm sm:text-[1rem] breadcrumbs" aria-label="Breadcrumb">
|
||||
<ul>
|
||||
<li><a href="/" class="text-gray-300">Home</a></li>
|
||||
<li class="text-gray-300" aria-current="page">Sitemap</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div
|
||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||
>
|
||||
<main class="w-full lg:w-3/4 lg:pr-10">
|
||||
<div class="mb-6 border-b-[2px]">
|
||||
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
|
||||
Sitemap
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class=" w-full bg-default m-auto text-white">
|
||||
<div class="content">
|
||||
<p class="text-[1rem] sm:text-lg">
|
||||
Explore a list of popular pages on our site. If you're searching
|
||||
for a specific stock symbol, try using the search bar for quick
|
||||
results.
|
||||
</p>
|
||||
<h2 class="text-white text-3xl font-semibold mt-8 mb-5">Pages</h2>
|
||||
<ul
|
||||
class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-xl"
|
||||
>
|
||||
{#each tabs as item}
|
||||
<li>
|
||||
<a
|
||||
class="sm:hover:underline sm:hover:underline-offset-4"
|
||||
href={item?.link}>{item?.title}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<div class="w-full overflow-hidden m-auto mt-5">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div class="relative flex justify-center items-start overflow-hidden w-full">
|
||||
<article class="w-full lg:w-3/4 lg:pr-10">
|
||||
<div class="mb-6 border-b-[2px]">
|
||||
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
|
||||
Sitemap
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside class="hidden lg:block relative fixed w-1/4 mt-4">
|
||||
<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="/pricing"
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
<div class=" w-full bg-default m-auto text-white">
|
||||
<div class="content">
|
||||
<p class="text-[1rem] sm:text-lg">
|
||||
Explore a comprehensive list of Stocknear's financial tools and resources. Find real-time stock data, market analysis, ETFs, options flow, and more. Use our search bar for quick access to specific stock symbols.
|
||||
</p>
|
||||
<h2 class="text-white text-3xl font-semibold mt-8 mb-5">Site Directory</h2>
|
||||
<nav aria-label="Site Pages">
|
||||
<ul
|
||||
class="list-outside list-disc space-y-1 p-1 pl-6 md:columns-2 md:gap-x-8 md:text-xl"
|
||||
>
|
||||
{#each tabs as item}
|
||||
<li>
|
||||
<a
|
||||
class="sm:hover:underline sm:hover:underline-offset-4"
|
||||
href={item?.link}
|
||||
title={`Visit ${item?.title} page`}
|
||||
>{item?.title}</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<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="/donation"
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
<aside class="hidden lg:block relative fixed w-1/4 mt-4">
|
||||
<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"
|
||||
>
|
||||
<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">
|
||||
Sponsor Us
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Learn more about why we're doing this here
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
href="/pricing"
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
>
|
||||
<div class="w-full flex justify-between items-center p-3 mt-3">
|
||||
<h2 class="text-start text-xl font-semibold text-white ml-3">
|
||||
Pro Subscription
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Upgrade now for unlimited access to all data and tools.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<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="/contact"
|
||||
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
|
||||
<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"
|
||||
>
|
||||
<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">
|
||||
Contact Us
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Let me know if you need something
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<a
|
||||
href="/donation"
|
||||
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">
|
||||
Sponsor Us
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Learn more about why we're doing this here
|
||||
</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="/contact"
|
||||
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">
|
||||
Contact Us
|
||||
</h2>
|
||||
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
|
||||
</div>
|
||||
<span class="text-white p-3 ml-3 mr-3">
|
||||
Let me know if you need something
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user