ui fix
This commit is contained in:
MuslemRahimi
parent
6e0e04b857
commit
ba625e1107
@ -1,6 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
|
||||
import { screenWidth } from "$lib/store";
|
||||
import {
|
||||
abbreviateNumber,
|
||||
abbreviateNumberWithColor,
|
||||
monthNames,
|
||||
} from "$lib/utils";
|
||||
import { screenWidth, setCache, getCache } from "$lib/store";
|
||||
|
||||
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
|
||||
@ -15,6 +19,18 @@
|
||||
use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
|
||||
|
||||
export let data;
|
||||
export let ticker = null;
|
||||
|
||||
let isLoaded = false;
|
||||
let optionsData = null;
|
||||
|
||||
let optionHistoryList = [];
|
||||
let selectGraphType = "Vol/OI";
|
||||
let container;
|
||||
let rawDataHistory = [];
|
||||
let strikePrice;
|
||||
let optionType;
|
||||
let dateExpiration;
|
||||
|
||||
const currentTime = new Date(
|
||||
new Date().toLocaleString("en-US", { timeZone: "America/New_York" }),
|
||||
@ -39,6 +55,23 @@
|
||||
return daysLeft + "D";
|
||||
}
|
||||
|
||||
function calculateDTE(data, dateExpiration) {
|
||||
// Convert the expiration date to a Date object
|
||||
const expirationDate = new Date(dateExpiration);
|
||||
|
||||
return data.map((item) => {
|
||||
const itemDate = new Date(item.date); // Convert item.date to a Date object
|
||||
const timeDifference = expirationDate - itemDate; // Difference in milliseconds
|
||||
const dte = Math.ceil(timeDifference / (1000 * 60 * 60 * 24)); // Convert ms to days
|
||||
|
||||
// Add the calculated DTE to the object
|
||||
return {
|
||||
...item,
|
||||
dte, // Add DTE as a new property
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
// Parse the input date string (YYYY-mm-dd)
|
||||
var date = new Date(dateStr);
|
||||
@ -60,6 +93,24 @@
|
||||
return formattedDate;
|
||||
}
|
||||
|
||||
function getScroll() {
|
||||
const scrollThreshold = container.scrollHeight * 0.8; // 80% of the container height
|
||||
|
||||
// Check if the user has scrolled to the bottom based on the threshold
|
||||
const isBottom =
|
||||
container.scrollTop + container.clientHeight >= scrollThreshold;
|
||||
|
||||
// Only load more data if at the bottom and there is still data to load
|
||||
if (isBottom && optionHistoryList?.length !== rawDataHistory?.length) {
|
||||
const nextIndex = optionHistoryList.length; // Ensure optionHistoryList is defined
|
||||
const filteredNewResults = rawDataHistory.slice(
|
||||
nextIndex,
|
||||
nextIndex + 25,
|
||||
); // Ensure rawData is defined
|
||||
optionHistoryList = [...optionHistoryList, ...filteredNewResults];
|
||||
}
|
||||
}
|
||||
|
||||
function plotData() {
|
||||
let dates = [];
|
||||
let callData = [];
|
||||
@ -255,28 +306,261 @@
|
||||
};
|
||||
});
|
||||
|
||||
function plotContractHistory() {
|
||||
let data = rawDataHistory?.sort(
|
||||
(a, b) => new Date(a?.date) - new Date(b?.date),
|
||||
);
|
||||
let dates = data?.map((item) => item?.date);
|
||||
let avgPrice = data?.map((item) => item?.mark);
|
||||
let priceList = data?.map((item) => item?.price);
|
||||
|
||||
let volumeList = data?.map((item) => item?.volume);
|
||||
let oiList = data?.map((item) => item?.open_interest);
|
||||
let ivList = data?.map((item) =>
|
||||
Math?.floor(item?.implied_volatility * 100),
|
||||
);
|
||||
|
||||
const createLineSeries = (name, data, color, yAxisIndex = 1) => ({
|
||||
name,
|
||||
type: "line",
|
||||
yAxisIndex,
|
||||
data,
|
||||
itemStyle: { color },
|
||||
lineStyle: { width: 2 },
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
});
|
||||
|
||||
const createBarSeries = (name, data, color, stack = null) => ({
|
||||
name,
|
||||
type: "bar",
|
||||
stack,
|
||||
data,
|
||||
itemStyle: { color },
|
||||
emphasis: { focus: "series" },
|
||||
});
|
||||
|
||||
let series = [];
|
||||
if (selectGraphType === "Vol/OI") {
|
||||
series = [
|
||||
createBarSeries("Volume", volumeList, "#FD7E14"),
|
||||
createBarSeries("OI", oiList, "#33B890"),
|
||||
createLineSeries("Avg Fill", avgPrice, "#FAD776"),
|
||||
createLineSeries("Stock Price", priceList, "#fff", 2),
|
||||
];
|
||||
} else {
|
||||
series = [
|
||||
createLineSeries("IV", ivList, "#B24BF3", 0),
|
||||
createLineSeries("Avg Fill", avgPrice, "#FAD776"),
|
||||
createLineSeries("Stock Price", priceList, "#fff", 2),
|
||||
];
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
// Find the matching data point in rawDataHistory based on the date
|
||||
const rawDataPoint = rawDataHistory.find(
|
||||
(item) => item.date === timestamp,
|
||||
);
|
||||
|
||||
// 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;
|
||||
});
|
||||
|
||||
// Loop through 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>';
|
||||
|
||||
// Check if the series is for IV and add a '%' sign
|
||||
const value =
|
||||
param.seriesName === "IV"
|
||||
? `${param.value}%`
|
||||
: (param.value?.toLocaleString("en-US") ?? "n/a");
|
||||
|
||||
result += marker + param.seriesName + ": " + value + "<br/>";
|
||||
});
|
||||
|
||||
if (rawDataPoint?.dte !== undefined) {
|
||||
result += `Days to Expiration : ${rawDataPoint.dte}<br/>`;
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
silent: true,
|
||||
grid: {
|
||||
left: $screenWidth < 640 ? "5%" : "2%",
|
||||
right: $screenWidth < 640 ? "5%" : "2%",
|
||||
bottom: "20%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: dates,
|
||||
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
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
position: "top",
|
||||
axisLabel: {
|
||||
show: false, // Hide y-axis labels
|
||||
},
|
||||
},
|
||||
],
|
||||
series: series,
|
||||
};
|
||||
return options;
|
||||
}
|
||||
|
||||
const getContractHistory = async (contractId) => {
|
||||
let output;
|
||||
const cachedData = getCache(contractId, "getContractHistory");
|
||||
if (cachedData) {
|
||||
output = cachedData;
|
||||
} else {
|
||||
const postData = {
|
||||
ticker: ticker,
|
||||
contract: contractId,
|
||||
};
|
||||
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch("/api/options-contract-history", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
|
||||
output = await response.json();
|
||||
|
||||
setCache(contractId, output, "getContractHistory");
|
||||
}
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
async function handleViewData(item) {
|
||||
isLoaded = false;
|
||||
selectGraphType = "Vol/OI";
|
||||
optionDetailsDesktopModal?.showModal();
|
||||
|
||||
strikePrice = item?.strike;
|
||||
optionType = item?.optionType;
|
||||
dateExpiration = item?.expiry;
|
||||
|
||||
const output = await getContractHistory(item?.optionSymbol);
|
||||
rawDataHistory = output?.history;
|
||||
|
||||
if (rawDataHistory?.length > 0) {
|
||||
rawDataHistory.forEach((entry) => {
|
||||
const matchingData = data?.getHistoricalPrice?.find(
|
||||
(d) => d?.time === entry?.date,
|
||||
);
|
||||
if (matchingData) {
|
||||
entry.price = matchingData?.close;
|
||||
}
|
||||
});
|
||||
|
||||
rawDataHistory = calculateDTE(rawDataHistory, dateExpiration);
|
||||
optionsData = plotContractHistory();
|
||||
rawDataHistory = rawDataHistory?.sort(
|
||||
(a, b) => new Date(b?.date) - new Date(a?.date),
|
||||
);
|
||||
optionHistoryList = rawDataHistory?.slice(0, 20);
|
||||
} else {
|
||||
optionsData = null;
|
||||
}
|
||||
|
||||
isLoaded = true;
|
||||
}
|
||||
|
||||
$: columns = [
|
||||
{ key: "date", label: "Date", align: "left" },
|
||||
{ key: "optionSymbol", label: "Option Chain", align: "left" },
|
||||
{ key: "dte", label: "DTE", align: "right" },
|
||||
{ key: "optionType", label: "P/C", align: "right" },
|
||||
{ key: "unusualType", label: "Type", align: "right" },
|
||||
{ key: "executionEst", label: "Exec", align: "right" },
|
||||
{ key: "sentiment", label: "Sent.", align: "right" },
|
||||
{ key: "size", label: "Size", align: "right" },
|
||||
{ key: "strike", label: "Strike", align: "right" },
|
||||
{ key: "price", label: "Spot", align: "right" },
|
||||
{ key: "premium", label: "Prem", align: "right" },
|
||||
];
|
||||
|
||||
$: sortOrders = {
|
||||
date: { order: "none", type: "date" },
|
||||
optionType: { order: "none", type: "string" },
|
||||
optionSymbol: { order: "none", type: "string" },
|
||||
unusualType: { order: "none", type: "string" },
|
||||
executionEst: { order: "none", type: "string" },
|
||||
dte: { order: "none", type: "number" },
|
||||
sentiment: { order: "none", type: "sentiment" },
|
||||
size: { order: "none", type: "number" },
|
||||
strike: { order: "none", type: "number" },
|
||||
price: { order: "none", type: "number" },
|
||||
premium: { order: "none", type: "number" },
|
||||
};
|
||||
@ -343,6 +627,19 @@
|
||||
// Sort using the generic comparison function
|
||||
displayList = [...originalData].sort(compareValues)?.slice(0, 150);
|
||||
};
|
||||
|
||||
$: {
|
||||
if (typeof window !== "undefined" && selectGraphType) {
|
||||
isLoaded = false;
|
||||
if (rawDataHistory?.length > 0) {
|
||||
optionsData = plotContractHistory();
|
||||
} else {
|
||||
optionsData = null;
|
||||
}
|
||||
|
||||
isLoaded = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section
|
||||
@ -387,21 +684,44 @@
|
||||
{formatDate(item?.date)}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-sm sm:text-[1rem] text-start whitespace-nowrap flex justify-between"
|
||||
>
|
||||
<span
|
||||
class="inline-block {item?.optionType === 'Calls'
|
||||
? 'text-[#00FC50]'
|
||||
: 'text-[#FF2F1F]'}"
|
||||
>
|
||||
{item?.optionType}
|
||||
</span>
|
||||
<label
|
||||
on:click={() => handleViewData(item)}
|
||||
on:mouseover={() =>
|
||||
getContractHistory(item?.option_symbol)}
|
||||
class=" cursor-pointer text-[#04D9FF] sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
|
||||
>
|
||||
{item?.strike}
|
||||
|
||||
{" " + item?.expiry}
|
||||
|
||||
<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-sm sm:text-[1rem] text-end whitespace-nowrap {item?.optionType ===
|
||||
'Call'
|
||||
? 'text-[#00FC50]'
|
||||
: item?.optionType === 'Put'
|
||||
? 'text-[#FF2F1F]'
|
||||
: 'text-white'} "
|
||||
>
|
||||
{item?.optionType}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
|
||||
>
|
||||
@ -429,11 +749,6 @@
|
||||
>
|
||||
{item?.size?.toLocaleString("en-US")}
|
||||
</td>
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
|
||||
>
|
||||
{item?.strike}
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] text-end whitespace-nowrap"
|
||||
@ -461,6 +776,256 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<dialog
|
||||
id="optionDetailsDesktopModal"
|
||||
class="modal {$screenWidth < 640
|
||||
? 'modal-bottom'
|
||||
: ''} bg-[#000] bg-opacity-[0.8] sm:px-5"
|
||||
>
|
||||
<div
|
||||
class="modal-box w-full {rawDataHistory?.length > 0
|
||||
? 'max-w-7xl'
|
||||
: 'w-full'} rounded-md bg-table border-t sm:border border-gray-600 min-h-48 h-auto"
|
||||
>
|
||||
<form
|
||||
method="dialog"
|
||||
class="modal-backdrop backdrop-blur-[4px] flex flex-row items-center w-full justify-between"
|
||||
>
|
||||
<p class="text-white text-[1rem] sm:text-xl font-semibold cursor-text">
|
||||
Contract: <span
|
||||
class={optionType === "Calls" ? "text-[#00FC50]" : "text-[#FF2F1F]"}
|
||||
>{ticker}
|
||||
{strikePrice}
|
||||
{optionType}
|
||||
{dateExpiration} ({daysLeft(dateExpiration)})
|
||||
</span>
|
||||
</p>
|
||||
<button
|
||||
class="cursor-pointer text-[1.8rem] text-white focus:outline-none"
|
||||
>
|
||||
<svg
|
||||
class="w-8 h-8"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="white"
|
||||
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
{#if rawDataHistory?.length > 0}
|
||||
<div
|
||||
class="border-b border-gray-600 w-full mt-2 mb-2 sm:mb-3 sm:mt-3"
|
||||
></div>
|
||||
|
||||
<div class="hidden sm:flex flex-wrap text-white pb-2">
|
||||
<div class="mr-3 whitespace-nowrap">
|
||||
{formatDate(optionHistoryList?.at(0)?.date)}:
|
||||
</div>
|
||||
<div class="mr-3 whitespace-nowrap">
|
||||
<span class="text-[var(--light-text-color)] font-normal">Vol:</span>
|
||||
{optionHistoryList?.at(0)?.volume?.toLocaleString("en-US")}
|
||||
</div>
|
||||
<div class="mr-3 whitespace-nowrap">
|
||||
<span class="text-[var(--light-text-color)] font-normal">OI:</span>
|
||||
{optionHistoryList?.at(0)?.open_interest?.toLocaleString("en-US")}
|
||||
</div>
|
||||
<div class="mr-3 whitespace-nowrap">
|
||||
<span class="text-[var(--light-text-color)] font-normal">Avg:</span>
|
||||
${optionHistoryList?.at(0)?.mark}
|
||||
</div>
|
||||
<div class="mr-3 whitespace-nowrap">
|
||||
<span class="text-[var(--light-text-color)] font-normal">Prem:</span>
|
||||
{abbreviateNumber(optionHistoryList?.at(0)?.total_premium, true)}
|
||||
</div>
|
||||
<div class="mr-3 whitespace-nowrap">
|
||||
<span class="text-[var(--light-text-color)] font-normal">IV:</span>
|
||||
{(optionHistoryList?.at(0)?.implied_volatility * 100)?.toLocaleString(
|
||||
"en-US",
|
||||
)}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $screenWidth > 640}
|
||||
<div
|
||||
class="pb-8 sm:pb-2 rounded-md bg-table border border-gray-600 overflow-hidden"
|
||||
>
|
||||
<div class="flex justify-end ml-auto w-fit mr-2 mt-2">
|
||||
{#each ["Vol/OI", "IV"] as item}
|
||||
<label
|
||||
on:click={() => (selectGraphType = item)}
|
||||
class="px-3 py-1.5 mr-2 {selectGraphType === item
|
||||
? 'bg-white text-black '
|
||||
: 'text-white bg-table text-opacity-[0.6] border border-gray-600'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
|
||||
>
|
||||
{item}
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="app w-full h-[300px] mt-5">
|
||||
{#if isLoaded}
|
||||
<Chart {init} options={optionsData} class="chart" />
|
||||
{: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-white"
|
||||
></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
bind:this={container}
|
||||
on:scroll={getScroll}
|
||||
class="h-full max-h-[500px] overflow-y-scroll overflow-x-auto"
|
||||
>
|
||||
<div class="flex justify-start items-center m-auto cursor-normal">
|
||||
{#if isLoaded}
|
||||
<table
|
||||
class="table table-pin-cols table-sm bg-table border border-gray-800 table-compact rounded-none sm:rounded-md w-full 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">Vol</td>
|
||||
<td class="text-white font-semibold text-sm text-end">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"
|
||||
>% Change OI</td
|
||||
>
|
||||
<td class="text-white font-semibold text-sm text-end"
|
||||
>Last Price</td
|
||||
>
|
||||
<td class="text-white font-semibold text-sm text-end"
|
||||
>Avg Price</td
|
||||
>
|
||||
<td class="text-white font-semibold text-sm text-end">IV</td>
|
||||
<td class="text-white font-semibold text-sm text-end"
|
||||
>Total Prem</td
|
||||
>
|
||||
<td class="text-white font-semibold text-sm text-end">GEX</td>
|
||||
<td class="text-white font-semibold text-sm text-end">DEX</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each optionHistoryList as item}
|
||||
<!-- row -->
|
||||
<tr class="odd:bg-odd border-b border-gray-800">
|
||||
<td class="text-sm sm:text-[1rem] text-start text-white">
|
||||
{formatDate(item?.date)}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{item?.volume !== null
|
||||
? item?.volume?.toLocaleString("en-US")
|
||||
: 0}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{item?.open_interest !== undefined
|
||||
? item?.open_interest?.toLocaleString("en-US")
|
||||
: "n/a"}
|
||||
</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{#if item?.changeOI >= 0 && item?.changeOI !== null}
|
||||
<span class="text-[#00FC50]"
|
||||
>+{item?.changeOI?.toLocaleString("en-US")}</span
|
||||
>
|
||||
{:else if item?.changeOI < 0 && item?.changeOI !== null}
|
||||
<span class="text-[#FF2F1F]"
|
||||
>{item?.changeOI?.toLocaleString("en-US")}</span
|
||||
>
|
||||
{:else}
|
||||
n/a
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{#if item?.changesPercentageOI > 0 && item?.changesPercentageOI !== undefined}
|
||||
<span class="text-[#00FC50]"
|
||||
>+{item?.changesPercentageOI + "%"}</span
|
||||
>
|
||||
{:else if item?.changesPercentageOI < 0 && item?.changesPercentageOI !== undefined}
|
||||
<span class="text-[#FF2F1F]"
|
||||
>{item?.changesPercentageOI + "%"}</span
|
||||
>
|
||||
{:else if item?.changesPercentageOI === 0 && item?.changesPercentageOI !== undefined}
|
||||
0%
|
||||
{:else}
|
||||
n/a
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{item?.close}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{item?.mark}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{(item?.implied_volatility * 100)?.toLocaleString(
|
||||
"en-US",
|
||||
) + "%"}
|
||||
</td>
|
||||
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{@html abbreviateNumberWithColor(
|
||||
item?.total_premium,
|
||||
false,
|
||||
true,
|
||||
)}
|
||||
</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{@html abbreviateNumberWithColor(item?.gex, false, true)}
|
||||
</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{@html abbreviateNumberWithColor(item?.dex, false, true)}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{:else}
|
||||
<div class="m-auto flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label
|
||||
class="bg-[#272727] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
>
|
||||
<span class="loading loading-spinner loading-md text-gray-400"
|
||||
></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="mt-10 flex justify-center sm:justify-start items-center w-full text-white"
|
||||
>
|
||||
No historical data available yet for the given contract
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
.app {
|
||||
height: 400px;
|
||||
|
||||
@ -978,11 +978,11 @@
|
||||
: "n/a"}
|
||||
</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{#if item?.changeOI >= 0 && item?.changeOI !== undefined}
|
||||
{#if item?.changeOI >= 0 && item?.changeOI !== null}
|
||||
<span class="text-[#00FC50]"
|
||||
>+{item?.changeOI?.toLocaleString("en-US")}</span
|
||||
>
|
||||
{:else if item?.changeOI < 0 && item?.changeOI !== undefined}
|
||||
{:else if item?.changeOI < 0 && item?.changeOI !== null}
|
||||
<span class="text-[#FF2F1F]"
|
||||
>{item?.changeOI?.toLocaleString("en-US")}</span
|
||||
>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if data?.getData?.length > 0}
|
||||
<UnusualActivity {data} />
|
||||
<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">
|
||||
|
||||
@ -978,11 +978,11 @@
|
||||
: "n/a"}
|
||||
</td>
|
||||
<td class="text-sm sm:text-[1rem] text-end text-white">
|
||||
{#if item?.changeOI >= 0 && item?.changeOI !== undefined}
|
||||
{#if item?.changeOI >= 0 && item?.changeOI !== null}
|
||||
<span class="text-[#00FC50]"
|
||||
>+{item?.changeOI?.toLocaleString("en-US")}</span
|
||||
>
|
||||
{:else if item?.changeOI < 0 && item?.changeOI !== undefined}
|
||||
{:else if item?.changeOI < 0 && item?.changeOI !== null}
|
||||
<span class="text-[#FF2F1F]"
|
||||
>{item?.changeOI?.toLocaleString("en-US")}</span
|
||||
>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
{#if data?.getData?.length > 0}
|
||||
<UnusualActivity {data} />
|
||||
<UnusualActivity {data} ticker={$stockTicker} />
|
||||
{: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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user