bugfixing
This commit is contained in:
MuslemRahimi
parent
0a75d24247
commit
4f302a94d5
@ -15,6 +15,5 @@ export const POST: RequestHandler = async ({ request, locals }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const output = await response.json();
|
const output = await response.json();
|
||||||
|
|
||||||
return new Response(JSON.stringify(output));
|
return new Response(JSON.stringify(output));
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,3 +1,14 @@
|
|||||||
|
function daysLeft(targetDate) {
|
||||||
|
const targetTime = new Date(targetDate).getTime();
|
||||||
|
const currentTime = new Date().getTime();
|
||||||
|
const difference = targetTime - currentTime;
|
||||||
|
|
||||||
|
const millisecondsPerDay = 1000 * 60 * 60 * 24;
|
||||||
|
const daysLeft = Math?.ceil(difference / millisecondsPerDay);
|
||||||
|
|
||||||
|
return daysLeft;
|
||||||
|
}
|
||||||
|
|
||||||
export const load = async ({ locals }) => {
|
export const load = async ({ locals }) => {
|
||||||
const getOptionsWatchlist = async () => {
|
const getOptionsWatchlist = async () => {
|
||||||
const { apiKey, apiURL, pb, user } = locals;
|
const { apiKey, apiURL, pb, user } = locals;
|
||||||
@ -21,6 +32,13 @@ export const load = async ({ locals }) => {
|
|||||||
body: JSON.stringify(postData),
|
body: JSON.stringify(postData),
|
||||||
});
|
});
|
||||||
const output = await response.json();
|
const output = await response.json();
|
||||||
|
|
||||||
|
output?.forEach((item) => {
|
||||||
|
item.dte = daysLeft(item?.date_expiration);
|
||||||
|
item.size = Math.floor(item?.cost_basis / (item?.price * 100));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
return { id: watchList?.id, optionsList: output };
|
return { id: watchList?.id, optionsList: output };
|
||||||
} else {
|
} else {
|
||||||
return { id: "", optionsList: [] };
|
return { id: "", optionsList: [] };
|
||||||
|
|||||||
@ -7,6 +7,7 @@
|
|||||||
import { screenWidth, setCache, getCache } from "$lib/store";
|
import { screenWidth, setCache, getCache } from "$lib/store";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import { toast } from "svelte-sonner";
|
import { toast } from "svelte-sonner";
|
||||||
|
import highcharts from "$lib/highcharts.ts";
|
||||||
import { mode } from "mode-watcher";
|
import { mode } from "mode-watcher";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
@ -16,7 +17,7 @@
|
|||||||
let deleteOptionsId = [];
|
let deleteOptionsId = [];
|
||||||
|
|
||||||
let isLoaded = false;
|
let isLoaded = false;
|
||||||
let configContract = null;
|
let config = null;
|
||||||
|
|
||||||
let optionHistoryList = [];
|
let optionHistoryList = [];
|
||||||
let selectGraphType = "Vol/OI";
|
let selectGraphType = "Vol/OI";
|
||||||
@ -24,6 +25,7 @@
|
|||||||
let rawDataHistory = [];
|
let rawDataHistory = [];
|
||||||
let strikePrice;
|
let strikePrice;
|
||||||
let optionType;
|
let optionType;
|
||||||
|
let optionSymbol;
|
||||||
let dateExpiration;
|
let dateExpiration;
|
||||||
let ticker;
|
let ticker;
|
||||||
|
|
||||||
@ -38,7 +40,7 @@
|
|||||||
return daysLeft;
|
return daysLeft;
|
||||||
}
|
}
|
||||||
|
|
||||||
let optionsWatchlist = data?.getOptionsWatchlist?.optionsList;
|
let rawData = data?.getOptionsWatchlist?.optionsList;
|
||||||
|
|
||||||
function reformatDate(dateString) {
|
function reformatDate(dateString) {
|
||||||
return (
|
return (
|
||||||
@ -137,17 +139,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
if (optionsWatchlist?.length !== 0) {
|
|
||||||
optionsWatchlist?.forEach((item) => {
|
|
||||||
item.dte = daysLeft(item?.date_expiration);
|
|
||||||
item.size = Math.floor(item?.cost_basis / (item?.price * 100));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
originalData = [...optionsWatchlist];
|
|
||||||
isLoaded = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
function getScroll() {
|
function getScroll() {
|
||||||
const scrollThreshold = container.scrollHeight * 0.8; // 80% of the container height
|
const scrollThreshold = container.scrollHeight * 0.8; // 80% of the container height
|
||||||
|
|
||||||
@ -166,17 +157,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const getContractHistory = async (contractId) => {
|
const getContractHistory = async () => {
|
||||||
let output;
|
let output;
|
||||||
const cachedData = getCache(contractId, "getContractHistory");
|
const cachedData = getCache(optionSymbol, "getContractHistory");
|
||||||
if (cachedData) {
|
if (cachedData) {
|
||||||
output = cachedData;
|
output = cachedData;
|
||||||
} else {
|
} else {
|
||||||
const postData = {
|
const postData = {
|
||||||
ticker: ticker,
|
ticker: ticker,
|
||||||
contract: contractId,
|
contract: optionSymbol,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
console.log(postData);
|
||||||
|
|
||||||
// make the POST request to the endpoint
|
// make the POST request to the endpoint
|
||||||
const response = await fetch("/api/options-contract-history", {
|
const response = await fetch("/api/options-contract-history", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
@ -188,7 +181,35 @@
|
|||||||
|
|
||||||
output = await response.json();
|
output = await response.json();
|
||||||
|
|
||||||
setCache(contractId, output, "getContractHistory");
|
setCache(optionSymbol, output, "getContractHistory");
|
||||||
|
}
|
||||||
|
|
||||||
|
return output;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getHistoricalPrice = async () => {
|
||||||
|
let output;
|
||||||
|
const cachedData = getCache(ticker, "getHistoricalPrice");
|
||||||
|
if (cachedData) {
|
||||||
|
output = cachedData;
|
||||||
|
} else {
|
||||||
|
const postData = {
|
||||||
|
timePeriod: "six-months",
|
||||||
|
ticker: ticker,
|
||||||
|
};
|
||||||
|
|
||||||
|
// make the POST request to the endpoint
|
||||||
|
const response = await fetch("/api/historical-price", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(postData),
|
||||||
|
});
|
||||||
|
|
||||||
|
output = await response.json();
|
||||||
|
|
||||||
|
setCache(ticker, output, "getHistoricalPrice");
|
||||||
}
|
}
|
||||||
|
|
||||||
return output;
|
return output;
|
||||||
@ -201,13 +222,18 @@
|
|||||||
|
|
||||||
strikePrice = item?.strike_price;
|
strikePrice = item?.strike_price;
|
||||||
optionType = item?.option_type;
|
optionType = item?.option_type;
|
||||||
|
ticker = item?.ticker;
|
||||||
dateExpiration = item?.date_expiration;
|
dateExpiration = item?.date_expiration;
|
||||||
const output = await getContractHistory(item?.option_symbol);
|
optionSymbol = item?.option_symbol;
|
||||||
|
const output = await getContractHistory();
|
||||||
|
const historicalPrice = await getHistoricalPrice();
|
||||||
|
|
||||||
|
console.log(historicalPrice);
|
||||||
rawDataHistory = output?.history;
|
rawDataHistory = output?.history;
|
||||||
|
|
||||||
if (rawDataHistory?.length > 0) {
|
if (rawDataHistory?.length > 0) {
|
||||||
rawDataHistory.forEach((entry) => {
|
rawDataHistory.forEach((entry) => {
|
||||||
const matchingData = data?.getHistoricalPrice?.find(
|
const matchingData = historicalPrice?.find(
|
||||||
(d) => d?.time === entry?.date,
|
(d) => d?.time === entry?.date,
|
||||||
);
|
);
|
||||||
if (matchingData) {
|
if (matchingData) {
|
||||||
@ -215,19 +241,19 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
configContract = plotContractHistory();
|
config = plotData();
|
||||||
rawDataHistory = rawDataHistory?.sort(
|
rawDataHistory = rawDataHistory?.sort(
|
||||||
(a, b) => new Date(b?.date) - new Date(a?.date),
|
(a, b) => new Date(b?.date) - new Date(a?.date),
|
||||||
);
|
);
|
||||||
optionHistoryList = rawDataHistory?.slice(0, 20);
|
optionHistoryList = rawDataHistory?.slice(0, 20);
|
||||||
} else {
|
} else {
|
||||||
configContract = null;
|
config = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
isLoaded = true;
|
isLoaded = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function plotContractHistory() {
|
function plotData() {
|
||||||
// Ensure rawDataHistory exists and sort it by date
|
// Ensure rawDataHistory exists and sort it by date
|
||||||
const sortedData =
|
const sortedData =
|
||||||
rawDataHistory?.sort((a, b) => new Date(a?.date) - new Date(b?.date)) ||
|
rawDataHistory?.sort((a, b) => new Date(a?.date) - new Date(b?.date)) ||
|
||||||
@ -503,10 +529,9 @@
|
|||||||
sortOrders[key].order =
|
sortOrders[key].order =
|
||||||
orderCycle[(currentOrderIndex + 1) % orderCycle.length];
|
orderCycle[(currentOrderIndex + 1) % orderCycle.length];
|
||||||
const sortOrder = sortOrders[key].order;
|
const sortOrder = sortOrders[key].order;
|
||||||
|
let originalData = data?.getOptionsWatchlist?.optionsList;
|
||||||
// Reset to original data when 'none' and stop further sorting
|
|
||||||
if (sortOrder === "none") {
|
if (sortOrder === "none") {
|
||||||
optionsWatchlist = [...originalData]?.slice(0, 150);
|
rawData = [...originalData]?.slice(0, 150);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -548,8 +573,21 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Sort using the generic comparison function
|
// Sort using the generic comparison function
|
||||||
optionsWatchlist = [...originalData].sort(compareValues)?.slice(0, 150);
|
rawData = [...originalData].sort(compareValues)?.slice(0, 150);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if (selectGraphType) {
|
||||||
|
isLoaded = false;
|
||||||
|
if (rawDataHistory?.length > 0) {
|
||||||
|
config = plotData();
|
||||||
|
} else {
|
||||||
|
config = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
isLoaded = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<SEO
|
<SEO
|
||||||
@ -566,292 +604,276 @@
|
|||||||
class="relative flex justify-center items-start overflow-hidden w-full"
|
class="relative flex justify-center items-start overflow-hidden w-full"
|
||||||
>
|
>
|
||||||
<main class="w-full">
|
<main class="w-full">
|
||||||
{#if isLoaded}
|
{#if rawData?.length !== 0}
|
||||||
{#if optionsWatchlist?.length !== 0}
|
<div class="flex flex-row justify-end items-center pb-2">
|
||||||
<div class="flex flex-row justify-end items-center pb-2">
|
<h2 class="font-semibold text-xl mr-auto">
|
||||||
<h2 class="font-semibold text-xl mr-auto">
|
{rawData?.length} Options
|
||||||
{optionsWatchlist?.length} Options
|
</h2>
|
||||||
</h2>
|
<a
|
||||||
<a
|
href="/options-flow"
|
||||||
href="/options-flow"
|
class="border shadow-sm text-sm border-gray-300 dark:border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded py-2 pl-3 pr-4 font-semibold sm:hover:bg-gray-100 dark:sm:hover:bg-default/60 ease-out dark:sm:hover:text-gray-300"
|
||||||
class="border shadow-sm text-sm border-gray-300 dark:border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded py-2 pl-3 pr-4 font-semibold sm:hover:bg-gray-100 dark:sm:hover:bg-default/60 ease-out dark:sm:hover:text-gray-300"
|
>
|
||||||
>
|
<Star class="inline-block w-5 h-5" />
|
||||||
<Star class="inline-block w-5 h-5" />
|
<span class="ml-1 text-sm"> Add Contracts </span>
|
||||||
<span class="ml-1 text-sm"> Add Contracts </span>
|
</a>
|
||||||
</a>
|
{#if editMode}
|
||||||
{#if editMode}
|
|
||||||
<label
|
|
||||||
on:click={handleDelete}
|
|
||||||
class="border shadow-sm text-sm border-gray-300 dark:border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded py-2 pl-3 pr-4 font-semibold sm:hover:bg-gray-100 dark:sm:hover:bg-default/60 ease-out sm:hover:text-red-500"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="inline-block w-5 h-5"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span class="ml-1 text-sm">
|
|
||||||
{numberOfChecked}
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<label
|
<label
|
||||||
on:click={() => (editMode = !editMode)}
|
on:click={handleDelete}
|
||||||
class="border shadow-sm text-sm border-gray-300 dark:border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded py-2 pl-3 pr-4 font-semibold sm:hover:bg-gray-100 dark:sm:hover:bg-default/60 ease-out sm:hover:text-gray-800 dark:sm:hover:text-gray-200"
|
class="border shadow-sm text-sm border-gray-300 dark:border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded py-2 pl-3 pr-4 font-semibold sm:hover:bg-gray-100 dark:sm:hover:bg-default/60 ease-out sm:hover:text-red-500"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
class="inline-block w-5 h-5"
|
class="inline-block w-5 h-5"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 1024 1024"
|
viewBox="0 0 24 24"
|
||||||
><path
|
><path
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"
|
d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z"
|
||||||
/><path
|
|
||||||
fill="currentColor"
|
|
||||||
d="m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"
|
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
{#if !editMode}
|
<span class="ml-1 text-sm">
|
||||||
<span class="ml-1 text-sm"> Edit </span>
|
{numberOfChecked}
|
||||||
{:else}
|
</span>
|
||||||
<span class="ml-1 text-sm"> Cancel </span>
|
|
||||||
{/if}
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
{/if}
|
||||||
|
|
||||||
<!--Start Table-->
|
<label
|
||||||
<div
|
on:click={() => (editMode = !editMode)}
|
||||||
class="w-full rounded-md overflow-hidden overflow-x-auto no-scrollbar"
|
class="border shadow-sm text-sm border-gray-300 dark:border-gray-600 mr-2 sm:ml-3 sm:mr-0 cursor-pointer inline-flex items-center justify-center space-x-1 whitespace-nowrap rounded py-2 pl-3 pr-4 font-semibold sm:hover:bg-gray-100 dark:sm:hover:bg-default/60 ease-out sm:hover:text-gray-800 dark:sm:hover:text-gray-200"
|
||||||
>
|
>
|
||||||
<table
|
<svg
|
||||||
class="table table-sm table-compact rounded-none sm:rounded-md w-full m-auto mt-2 overflow-x-auto border border-gray-300 dark:border-gray-800"
|
class="inline-block w-5 h-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
><path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"
|
||||||
|
/><path
|
||||||
|
fill="currentColor"
|
||||||
|
d="m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"
|
||||||
|
/></svg
|
||||||
>
|
>
|
||||||
<thead>
|
{#if !editMode}
|
||||||
<TableHeader {columns} {sortOrders} {sortData} />
|
<span class="ml-1 text-sm"> Edit </span>
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{#each optionsWatchlist as item, index}
|
|
||||||
<!-- row -->
|
|
||||||
<tr class=" odd:bg-[#F6F7F8] dark:odd:bg-odd">
|
|
||||||
<td
|
|
||||||
class="text-xs sm:text-sm text-start whitespace-nowrap"
|
|
||||||
>
|
|
||||||
{formatTime(item?.time)}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td
|
|
||||||
on:click={() => handleFilter(item?.id)}
|
|
||||||
class="{index % 2
|
|
||||||
? 'bg-white dark:bg-default'
|
|
||||||
: 'bg-[#F6F7F8] dark:bg-odd'} font-normal text-sm sm:text-[1rem] text-center"
|
|
||||||
>
|
|
||||||
<div class=" flex flex-row items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={deleteOptionsId?.includes(item?.id) ??
|
|
||||||
false}
|
|
||||||
class="{!editMode
|
|
||||||
? 'hidden'
|
|
||||||
: ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3"
|
|
||||||
/>
|
|
||||||
{#if !editMode}
|
|
||||||
<HoverStockChart
|
|
||||||
symbol={item?.ticker}
|
|
||||||
assetType={item?.underlying_type}
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<span
|
|
||||||
class="text-blue-800 dark:text-blue-400 cursor-pointer"
|
|
||||||
>{item?.ticker}</span
|
|
||||||
>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td
|
|
||||||
class="text-sm sm:text-[1rem] text-start whitespace-nowrap flex justify-between"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
on:click={() => handleViewData(item)}
|
|
||||||
on:mouseover={() =>
|
|
||||||
getContractHistory(item?.option_symbol)}
|
|
||||||
class="cursor-pointer flex flex-row items-center justify-between text-blue-800 dark:text-blue-400 dark:sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
{item?.put_call === "Puts" ? "P" : "C"}
|
|
||||||
{item?.strike_price}
|
|
||||||
|
|
||||||
{" " + item?.date_expiration}
|
|
||||||
</div>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class="inline-block w-4 h-4 ml-1"
|
|
||||||
viewBox="0 0 512 512"
|
|
||||||
fill="currentColor"
|
|
||||||
><path
|
|
||||||
d="M104 496H72a24 24 0 01-24-24V328a24 24 0 0124-24h32a24 24 0 0124 24v144a24 24 0 01-24 24zM328 496h-32a24 24 0 01-24-24V232a24 24 0 0124-24h32a24 24 0 0124 24v240a24 24 0 01-24 24zM440 496h-32a24 24 0 01-24-24V120a24 24 0 0124-24h32a24 24 0 0124 24v352a24 24 0 01-24 24zM216 496h-32a24 24 0 01-24-24V40a24 24 0 0124-24h32a24 24 0 0124 24v432a24 24 0 01-24 24z"
|
|
||||||
></path></svg
|
|
||||||
>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class=" text-sm sm:text-[1rem] text-center">
|
|
||||||
{reformatDate(item?.date_expiration)}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class=" text-sm sm:text-[1rem] text-center">
|
|
||||||
{item?.dte < 0 ? "expired" : item?.dte + "d"}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td
|
|
||||||
class="text-sm sm:text-[1rem] {item?.sentiment ===
|
|
||||||
'Bullish'
|
|
||||||
? 'dark:text-[#00FC50]'
|
|
||||||
: item?.sentiment === 'Bearish'
|
|
||||||
? 'dark:text-[#FF2F1F]'
|
|
||||||
: 'text-[#C6A755]'} text-center"
|
|
||||||
>
|
|
||||||
{item?.sentiment}
|
|
||||||
</td>
|
|
||||||
<td class="text-sm sm:text-[1rem] text-center">
|
|
||||||
{item?.size?.toLocaleString("en-US")}
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
class="text-sm sm:text-[1rem] text-center whitespace-nowrap"
|
|
||||||
>
|
|
||||||
{item?.execution_estimate}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class="text-sm sm:text-[1rem] text-center">
|
|
||||||
{item?.price}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class="text-sm sm:text-[1rem] text-center">
|
|
||||||
{item?.underlying_price}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td
|
|
||||||
class="text-sm sm:text-[1rem] text-center {item?.put_call ===
|
|
||||||
'Puts'
|
|
||||||
? 'dark:text-green-400'
|
|
||||||
: 'dark:text-red-400'} "
|
|
||||||
>
|
|
||||||
{abbreviateNumber(item?.cost_basis)}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td
|
|
||||||
class="text-sm sm:text-[1rem] text-center {item?.option_activity_type ===
|
|
||||||
'Sweep'
|
|
||||||
? 'dark:text-[#C6A755]'
|
|
||||||
: 'dark:text-[#976DB7]'}"
|
|
||||||
>
|
|
||||||
{item?.option_activity_type}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td
|
|
||||||
class=" text-center text-sm sm:text-[1rem] text-center"
|
|
||||||
>
|
|
||||||
{new Intl.NumberFormat("en", {
|
|
||||||
minimumFractionDigits: 0,
|
|
||||||
maximumFractionDigits: 0,
|
|
||||||
}).format(item?.volume)}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td
|
|
||||||
class=" text-center text-sm sm:text-[1rem] text-center"
|
|
||||||
>
|
|
||||||
{new Intl.NumberFormat("en", {
|
|
||||||
minimumFractionDigits: 0,
|
|
||||||
maximumFractionDigits: 0,
|
|
||||||
}).format(item?.open_interest)}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/each}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<!--End Table-->
|
|
||||||
{:else}
|
|
||||||
<div
|
|
||||||
class="flex flex-col justify-center items-center m-auto pt-8"
|
|
||||||
>
|
|
||||||
<span class=" font-bold text-2xl sm:text-3xl">
|
|
||||||
Empty Options List
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class=" text-sm sm:text-lg m-auto p-4 text-center">
|
|
||||||
Add your unusual options contracts and start tracking them
|
|
||||||
now!
|
|
||||||
</span>
|
|
||||||
{#if !data?.user}
|
|
||||||
<a
|
|
||||||
class="w-64 flex mt-10 justify-center items-center m-auto btn text-black bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
|
|
||||||
href="/register"
|
|
||||||
>
|
|
||||||
Get Started
|
|
||||||
<span
|
|
||||||
class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="w-4 h-4"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><g transform="rotate(90 12 12)"
|
|
||||||
><g fill="none"
|
|
||||||
><path
|
|
||||||
d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
|
|
||||||
/><path
|
|
||||||
fill="black"
|
|
||||||
d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
|
|
||||||
/></g
|
|
||||||
></g
|
|
||||||
></svg
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
{:else}
|
{:else}
|
||||||
<a
|
<span class="ml-1 text-sm"> Cancel </span>
|
||||||
href="/options-flow"
|
{/if}
|
||||||
class="w-64 flex mt-5 justify-center items-center m-auto btn bg-blue-700 sm:hover:bg-blue-600 border border-gray-300 dark:border-gray-600 group"
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Start Table-->
|
||||||
|
<div
|
||||||
|
class="w-full rounded-md overflow-hidden overflow-x-auto no-scrollbar"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
class="table table-sm table-compact rounded-none sm:rounded-md w-full m-auto mt-2 overflow-x-auto border border-gray-300 dark:border-gray-800"
|
||||||
|
>
|
||||||
|
<thead>
|
||||||
|
<TableHeader {columns} {sortOrders} {sortData} />
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#each rawData as item, index}
|
||||||
|
<!-- row -->
|
||||||
|
<tr class=" odd:bg-[#F6F7F8] dark:odd:bg-odd">
|
||||||
|
<td
|
||||||
|
class="text-xs sm:text-sm text-start whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{formatTime(item?.time)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
on:click={() => handleFilter(item?.id)}
|
||||||
|
class="{index % 2
|
||||||
|
? 'bg-white dark:bg-default'
|
||||||
|
: 'bg-[#F6F7F8] dark:bg-odd'} font-normal text-sm sm:text-[1rem] text-center"
|
||||||
|
>
|
||||||
|
<div class=" flex flex-row items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={deleteOptionsId?.includes(item?.id) ??
|
||||||
|
false}
|
||||||
|
class="{!editMode
|
||||||
|
? 'hidden'
|
||||||
|
: ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3"
|
||||||
|
/>
|
||||||
|
{#if !editMode}
|
||||||
|
<HoverStockChart
|
||||||
|
symbol={item?.ticker}
|
||||||
|
assetType={item?.underlying_type}
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<span
|
||||||
|
class="text-blue-800 dark:text-blue-400 cursor-pointer"
|
||||||
|
>{item?.ticker}</span
|
||||||
|
>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-sm sm:text-[1rem] text-start whitespace-nowrap flex justify-between"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
on:click={() => handleViewData(item)}
|
||||||
|
on:mouseover={() =>
|
||||||
|
getContractHistory(item?.option_symbol)}
|
||||||
|
class="cursor-pointer flex flex-row items-center justify-between text-blue-800 dark:text-blue-400 dark:sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
{item?.put_call === "Puts" ? "P" : "C"}
|
||||||
|
{item?.strike_price}
|
||||||
|
|
||||||
|
{" " + item?.date_expiration}
|
||||||
|
</div>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="inline-block w-4 h-4 ml-1"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
fill="currentColor"
|
||||||
|
><path
|
||||||
|
d="M104 496H72a24 24 0 01-24-24V328a24 24 0 0124-24h32a24 24 0 0124 24v144a24 24 0 01-24 24zM328 496h-32a24 24 0 01-24-24V232a24 24 0 0124-24h32a24 24 0 0124 24v240a24 24 0 01-24 24zM440 496h-32a24 24 0 01-24-24V120a24 24 0 0124-24h32a24 24 0 0124 24v352a24 24 0 01-24 24zM216 496h-32a24 24 0 01-24-24V40a24 24 0 0124-24h32a24 24 0 0124 24v432a24 24 0 01-24 24z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class=" text-sm sm:text-[1rem] text-center">
|
||||||
|
{reformatDate(item?.date_expiration)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class=" text-sm sm:text-[1rem] text-center">
|
||||||
|
{item?.dte < 0 ? "expired" : item?.dte + "d"}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-sm sm:text-[1rem] {item?.sentiment ===
|
||||||
|
'Bullish'
|
||||||
|
? 'dark:text-[#00FC50]'
|
||||||
|
: item?.sentiment === 'Bearish'
|
||||||
|
? 'dark:text-[#FF2F1F]'
|
||||||
|
: 'text-[#C6A755]'} text-center"
|
||||||
|
>
|
||||||
|
{item?.sentiment}
|
||||||
|
</td>
|
||||||
|
<td class="text-sm sm:text-[1rem] text-center">
|
||||||
|
{item?.size?.toLocaleString("en-US")}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="text-sm sm:text-[1rem] text-center whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{item?.execution_estimate}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="text-sm sm:text-[1rem] text-center">
|
||||||
|
{item?.price}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="text-sm sm:text-[1rem] text-center">
|
||||||
|
{item?.underlying_price}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-sm sm:text-[1rem] text-center {item?.put_call ===
|
||||||
|
'Puts'
|
||||||
|
? 'dark:text-green-400'
|
||||||
|
: 'dark:text-red-400'} "
|
||||||
|
>
|
||||||
|
{abbreviateNumber(item?.cost_basis)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-sm sm:text-[1rem] text-center {item?.option_activity_type ===
|
||||||
|
'Sweep'
|
||||||
|
? 'dark:text-[#C6A755]'
|
||||||
|
: 'dark:text-[#976DB7]'}"
|
||||||
|
>
|
||||||
|
{item?.option_activity_type}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class=" text-center text-sm sm:text-[1rem] text-center"
|
||||||
|
>
|
||||||
|
{new Intl.NumberFormat("en", {
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
maximumFractionDigits: 0,
|
||||||
|
}).format(item?.volume)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class=" text-center text-sm sm:text-[1rem] text-center"
|
||||||
|
>
|
||||||
|
{new Intl.NumberFormat("en", {
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
maximumFractionDigits: 0,
|
||||||
|
}).format(item?.open_interest)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<!--End Table-->
|
||||||
|
{:else}
|
||||||
|
<div class="flex flex-col justify-center items-center m-auto pt-8">
|
||||||
|
<span class=" font-bold text-2xl sm:text-3xl">
|
||||||
|
Empty Options List
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class=" text-sm sm:text-lg m-auto p-4 text-center">
|
||||||
|
Add your unusual options contracts and start tracking them now!
|
||||||
|
</span>
|
||||||
|
{#if !data?.user}
|
||||||
|
<a
|
||||||
|
class="w-64 flex mt-10 justify-center items-center m-auto btn text-black bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
|
||||||
|
href="/register"
|
||||||
|
>
|
||||||
|
Get Started
|
||||||
|
<span
|
||||||
|
class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
|
||||||
>
|
>
|
||||||
<span class="font-semibold text-[1rem]"
|
<svg
|
||||||
>Follow the Whales
|
class="w-4 h-4"
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
class="inline-block -mt-2 -ml-1 w-8 h-8"
|
viewBox="0 0 24 24"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
><g transform="rotate(90 12 12)"
|
||||||
viewBox="0 0 32 32"
|
|
||||||
><g fill="none"
|
><g fill="none"
|
||||||
><path
|
><path
|
||||||
fill="#00a6ed"
|
d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
|
||||||
d="M24.04 6.508C27.007 9.5 29 12.953 29 16.468c0 6.422-1.95 10.392-6.648 12.315a16 16 0 0 1-1.652-.318l-.012.582c-.105.563-.485 1.352-1.625.703c-.84-.478-2.112-1.55-2.33-4.281c-.511-1.271-.617-2.91-.733-4.969c-.164-2.91-3.078-3.89-5-4c-1.84-.105-8.316-.467-8.869-.498a15 15 0 0 1-.01-1.111c0-2.66 3.363-4.9 5.713-4.9h6.55c3.46 0 6.27 2.81 6.27 6.27c-.17 2.411 3.373 3.405 3.82.78c.492-2.896-.591-6.166-2.435-8.494c-.195-.047-.308-.047-.445.047c-1.258 1.258-2.16 1.312-3.852.914a1 1 0 0 0-.239-.103c-.228-.077-.435-.147-.331-.608c.14-.625 1.125-1.719 1.125-1.719c.773-.906 1.758-1.11 2.226-1.055c.402.047.515-.068.58-.135l.03-.029c.065-.051.133-.437.133-.437c-.164-.875.043-1.678.547-2.383c0 0 .882-1.266 1.687-1.344c.72-.07.803.37.879.768q.012.071.027.139c.334 1.535.17 1.902-.215 2.765c-.065.147-.137.308-.214.492c-.13.308-.058.434.038.605zM8.219 29.938c-1.735 0-3.64-2.438-3.11-5.922c.313.2 2.615 2.052 3.75 3.14c.329.844.11 2.782-.64 2.782"
|
|
||||||
/><path
|
/><path
|
||||||
fill="#1c1c1c"
|
fill="black"
|
||||||
d="M15.517 15a.61.61 0 0 1-.604-.604v-.758c0-.33.274-.604.604-.604s.604.274.604.604v.758a.604.604 0 0 1-.604.604"
|
d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
|
||||||
/><path
|
|
||||||
fill="#aeddff"
|
|
||||||
d="M20.706 28.208q.745.278 1.692.556q-.84.348-1.8.608q.06-.166.09-.325zm-3.973-4.468c-.107-.771-.157-1.671-.217-2.74l-.016-.281c-.164-2.911-3.766-4.61-5.687-4.719c-1.839-.105-8.138-.01-8.682 0c.339 7.399 6.034 14.639 13.885 14.095a27 27 0 0 0 3.007-.367c-1-.583-2.564-2.007-2.29-5.988"
|
|
||||||
/></g
|
/></g
|
||||||
></svg
|
></g
|
||||||
>
|
></svg
|
||||||
</span>
|
>
|
||||||
</a>
|
</span>
|
||||||
{/if}
|
</a>
|
||||||
</div>
|
{:else}
|
||||||
{/if}
|
<a
|
||||||
{:else}
|
href="/options-flow"
|
||||||
<div class="flex justify-center items-center h-80">
|
class="w-64 flex mt-5 justify-center items-center m-auto btn bg-blue-700 sm:hover:bg-blue-600 border border-gray-300 dark:border-gray-600 group"
|
||||||
<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 class="font-semibold text-[1rem]"
|
||||||
></span>
|
>Follow the Whales
|
||||||
</label>
|
<svg
|
||||||
</div>
|
class="inline-block -mt-2 -ml-1 w-8 h-8"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 32 32"
|
||||||
|
><g fill="none"
|
||||||
|
><path
|
||||||
|
fill="#00a6ed"
|
||||||
|
d="M24.04 6.508C27.007 9.5 29 12.953 29 16.468c0 6.422-1.95 10.392-6.648 12.315a16 16 0 0 1-1.652-.318l-.012.582c-.105.563-.485 1.352-1.625.703c-.84-.478-2.112-1.55-2.33-4.281c-.511-1.271-.617-2.91-.733-4.969c-.164-2.91-3.078-3.89-5-4c-1.84-.105-8.316-.467-8.869-.498a15 15 0 0 1-.01-1.111c0-2.66 3.363-4.9 5.713-4.9h6.55c3.46 0 6.27 2.81 6.27 6.27c-.17 2.411 3.373 3.405 3.82.78c.492-2.896-.591-6.166-2.435-8.494c-.195-.047-.308-.047-.445.047c-1.258 1.258-2.16 1.312-3.852.914a1 1 0 0 0-.239-.103c-.228-.077-.435-.147-.331-.608c.14-.625 1.125-1.719 1.125-1.719c.773-.906 1.758-1.11 2.226-1.055c.402.047.515-.068.58-.135l.03-.029c.065-.051.133-.437.133-.437c-.164-.875.043-1.678.547-2.383c0 0 .882-1.266 1.687-1.344c.72-.07.803.37.879.768q.012.071.027.139c.334 1.535.17 1.902-.215 2.765c-.065.147-.137.308-.214.492c-.13.308-.058.434.038.605zM8.219 29.938c-1.735 0-3.64-2.438-3.11-5.922c.313.2 2.615 2.052 3.75 3.14c.329.844.11 2.782-.64 2.782"
|
||||||
|
/><path
|
||||||
|
fill="#1c1c1c"
|
||||||
|
d="M15.517 15a.61.61 0 0 1-.604-.604v-.758c0-.33.274-.604.604-.604s.604.274.604.604v.758a.604.604 0 0 1-.604.604"
|
||||||
|
/><path
|
||||||
|
fill="#aeddff"
|
||||||
|
d="M20.706 28.208q.745.278 1.692.556q-.84.348-1.8.608q.06-.166.09-.325zm-3.973-4.468c-.107-.771-.157-1.671-.217-2.74l-.016-.281c-.164-2.911-3.766-4.61-5.687-4.719c-1.839-.105-8.138-.01-8.682 0c.339 7.399 6.034 14.639 13.885 14.095a27 27 0 0 0 3.007-.367c-1-.583-2.564-2.007-2.29-5.988"
|
||||||
|
/></g
|
||||||
|
></svg
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</main>
|
</main>
|
||||||
@ -948,7 +970,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="mt-2 border border-gray-300 dark:border-gray-800 rounded"
|
class="mt-2 border border-gray-300 dark:border-gray-800 rounded"
|
||||||
use:highcharts={configContract}
|
use:highcharts={config}
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user