update hottest contract page
This commit is contained in:
MuslemRahimi
parent
b065a13743
commit
74e784b39e
@ -21,14 +21,18 @@
|
|||||||
return daysLeft + "D";
|
return daysLeft + "D";
|
||||||
}
|
}
|
||||||
|
|
||||||
let rawData = data?.getData?.map((item) => ({
|
let rawDataVolume = data?.getData?.volume?.map((item) => ({
|
||||||
...item,
|
...item,
|
||||||
dte: daysLeft(item?.date_expiration),
|
dte: daysLeft(item?.date_expiration),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
let openInterestList = rawData?.sort(
|
let rawDataOI = data?.getData?.openInterest?.map((item) => ({
|
||||||
(a, b) => b?.open_interest - a?.open_interest,
|
...item,
|
||||||
);
|
dte: daysLeft(item?.date_expiration),
|
||||||
|
}));
|
||||||
|
|
||||||
|
let volumeList = rawDataVolume;
|
||||||
|
let openInterestList = rawDataOI;
|
||||||
|
|
||||||
$: columns = [
|
$: columns = [
|
||||||
{ key: "strike_price", label: "Chain", align: "left" },
|
{ key: "strike_price", label: "Chain", align: "left" },
|
||||||
@ -64,7 +68,7 @@
|
|||||||
|
|
||||||
// Cycle through 'none', 'asc', 'desc' for the clicked key
|
// Cycle through 'none', 'asc', 'desc' for the clicked key
|
||||||
const orderCycle = ["none", "asc", "desc"];
|
const orderCycle = ["none", "asc", "desc"];
|
||||||
let originalData = rawData?.sort(
|
let originalData = rawDataVolume?.sort(
|
||||||
(a, b) => b?.open_interest - a?.open_interest,
|
(a, b) => b?.open_interest - a?.open_interest,
|
||||||
);
|
);
|
||||||
const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
|
const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
|
||||||
@ -74,8 +78,67 @@
|
|||||||
|
|
||||||
// Reset to original data when 'none' and stop further sorting
|
// Reset to original data when 'none' and stop further sorting
|
||||||
if (sortOrder === "none") {
|
if (sortOrder === "none") {
|
||||||
originalData = [...rawData]; // Reset originalData to rawData
|
originalData = [...rawDataVolume]; // Reset originalData to rawDataVolume
|
||||||
openInterestList = originalData;
|
volumeList = originalData;
|
||||||
|
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
|
||||||
|
volumeList = [...originalData].sort(compareValues);
|
||||||
|
};
|
||||||
|
|
||||||
|
const sortDataOI = (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"];
|
||||||
|
let originalData = rawDataOI?.sort(
|
||||||
|
(a, b) => b?.open_interest - a?.open_interest,
|
||||||
|
);
|
||||||
|
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 = [...rawDataOI]; // Reset originalData to rawDataOI
|
||||||
|
volumeList = originalData;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -121,12 +184,12 @@
|
|||||||
<div
|
<div
|
||||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||||
>
|
>
|
||||||
{#if rawData?.length > 0}
|
{#if rawDataVolume?.length > 0}
|
||||||
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||||
<h2
|
<h2
|
||||||
class=" flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
|
class=" flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit"
|
||||||
>
|
>
|
||||||
Hottest Contracts (Highest OI)
|
Hottest Contracts (Highest Volume)
|
||||||
</h2>
|
</h2>
|
||||||
<div class="w-full overflow-x-scroll text-white">
|
<div class="w-full overflow-x-scroll text-white">
|
||||||
<table
|
<table
|
||||||
@ -135,6 +198,176 @@
|
|||||||
<thead>
|
<thead>
|
||||||
<TableHeader {columns} {sortOrders} {sortData} />
|
<TableHeader {columns} {sortOrders} {sortData} />
|
||||||
</thead>
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#each volumeList 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 ===
|
||||||
|
volumeList?.slice(0, 3)?.length &&
|
||||||
|
data?.user?.tier !== 'Pro'
|
||||||
|
? 'opacity-[0.1]'
|
||||||
|
: ''}"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class=" text-sm sm:text-[1rem] text-start whitespace-nowrap"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class={item?.option_type === "C"
|
||||||
|
? "text-[#00FC50]"
|
||||||
|
: "text-[#FF2F1F]"}
|
||||||
|
>
|
||||||
|
{item?.option_type === "C" ? "Call" : "Put"}
|
||||||
|
</span>
|
||||||
|
<label
|
||||||
|
class="cursor-pointer text-[#04D9FF] sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
|
||||||
|
>
|
||||||
|
{item?.strike_price}
|
||||||
|
|
||||||
|
{" " + item?.date_expiration}
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="inline-block w-4 h-4"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
fill="#04D9FF"
|
||||||
|
><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-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{item?.dte}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{item?.last_price}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{item?.low_price}-{item?.high_price}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{item?.volume?.toLocaleString("en-US")}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{item?.open_interest?.toLocaleString("en-US")}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{#if item?.open_interest_change >= 0}
|
||||||
|
<span class="text-[#00FC50]"
|
||||||
|
>+{item?.open_interest_change?.toLocaleString(
|
||||||
|
"en-US",
|
||||||
|
)}</span
|
||||||
|
>
|
||||||
|
{:else}
|
||||||
|
<span class="text-[#FF2F1F]"
|
||||||
|
>{item?.open_interest_change?.toLocaleString(
|
||||||
|
"en-US",
|
||||||
|
)}</span
|
||||||
|
>
|
||||||
|
{/if}
|
||||||
|
</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">
|
||||||
|
<!-- Bar Container -->
|
||||||
|
<div
|
||||||
|
class="flex w-full max-w-28 h-5 bg-gray-200 rounded-md overflow-hidden"
|
||||||
|
>
|
||||||
|
<!-- Bearish -->
|
||||||
|
<div
|
||||||
|
class="bg-red-500 h-full"
|
||||||
|
style="width: calc(({item?.bid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<!-- Neutral -->
|
||||||
|
<div
|
||||||
|
class="bg-gray-300 h-full"
|
||||||
|
style="width: calc(({item?.mid_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 100%)"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<!-- Bullish -->
|
||||||
|
<div
|
||||||
|
class="bg-green-500 h-full"
|
||||||
|
style="width: calc(({item?.ask_volume} / ({item?.bid_volume} + {item?.mid_volume} + {item?.ask_volume})) * 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>
|
||||||
|
Bid Vol: {@html abbreviateNumberWithColor(
|
||||||
|
item?.bid_volume,
|
||||||
|
false,
|
||||||
|
true,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Mid Vol: {@html abbreviateNumberWithColor(
|
||||||
|
item?.mid_volume,
|
||||||
|
false,
|
||||||
|
true,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Ask Vol: {@html abbreviateNumberWithColor(
|
||||||
|
item?.ask_volume,
|
||||||
|
false,
|
||||||
|
true,
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</HoverCard.Content>
|
||||||
|
</HoverCard.Root>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{@html abbreviateNumberWithColor(
|
||||||
|
item?.total_premium,
|
||||||
|
false,
|
||||||
|
true,
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2
|
||||||
|
class=" flex flex-row items-center text-white text-xl sm:text-2xl font-bold w-fit mt-10"
|
||||||
|
>
|
||||||
|
Highest OI Contracts
|
||||||
|
</h2>
|
||||||
|
<div class="w-full overflow-x-scroll text-white">
|
||||||
|
<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>
|
||||||
|
<TableHeader {columns} {sortOrders} sortData={sortDataOI} />
|
||||||
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each openInterestList as item, index}
|
{#each openInterestList as item, index}
|
||||||
<tr
|
<tr
|
||||||
@ -146,9 +379,8 @@
|
|||||||
: ''}"
|
: ''}"
|
||||||
>
|
>
|
||||||
<td
|
<td
|
||||||
class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap"
|
class=" text-sm sm:text-[1rem] text-start whitespace-nowrap"
|
||||||
>
|
>
|
||||||
{item?.strike_price}
|
|
||||||
<span
|
<span
|
||||||
class={item?.option_type === "C"
|
class={item?.option_type === "C"
|
||||||
? "text-[#00FC50]"
|
? "text-[#00FC50]"
|
||||||
@ -156,7 +388,23 @@
|
|||||||
>
|
>
|
||||||
{item?.option_type === "C" ? "Call" : "Put"}
|
{item?.option_type === "C" ? "Call" : "Put"}
|
||||||
</span>
|
</span>
|
||||||
|
<label
|
||||||
|
class="cursor-pointer text-[#04D9FF] sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
|
||||||
|
>
|
||||||
|
{item?.strike_price}
|
||||||
|
|
||||||
{" " + item?.date_expiration}
|
{" " + item?.date_expiration}
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="inline-block w-4 h-4"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
fill="#04D9FF"
|
||||||
|
><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>
|
||||||
<td
|
<td
|
||||||
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
|
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user