ui fix
This commit is contained in:
MuslemRahimi
parent
dc43d7fb13
commit
b1c682a3bf
@ -334,22 +334,22 @@
|
|||||||
const profitLossPctChange = (profitLoss / premium) * 100;
|
const profitLossPctChange = (profitLoss / premium) * 100;
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div class="flex flex-col items-start text-sm">
|
<div class="flex flex-col items-start text-sm">
|
||||||
<div>
|
<div>
|
||||||
<span class="text-start font-semibold">Underlying Price:</span>
|
<span class="text-start font-semibold">Underlying Price:</span>
|
||||||
$${underlyingPrice}
|
$${underlyingPrice}
|
||||||
(<span>${underlyingPctChange.toFixed(2)}%</span>)
|
(<span>${underlyingPctChange.toFixed(2)}%</span>)
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<div class="">
|
||||||
<div class="">
|
<span class="text-start font-semibold">Profit or Loss:</span>
|
||||||
<span class="text-start font-semibold">Profit or Loss:</span>
|
${profitLoss < 0 ? "-$" : "$"}${Math.abs(profitLoss).toLocaleString("en-US")}
|
||||||
${profitLoss < 0 ? "-$" : "$"}${Math.abs(profitLoss).toLocaleString("en-US")}
|
(<span>${profitLossPctChange.toFixed(2)}%</span>)
|
||||||
(<span>${profitLossPctChange.toFixed(2)}%</span>)
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
`;
|
||||||
`;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
plotOptions: {
|
plotOptions: {
|
||||||
area: {
|
area: {
|
||||||
fillOpacity: 0.2,
|
fillOpacity: 0.2,
|
||||||
@ -621,257 +621,258 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="mt-4">
|
<div class="mt-4">
|
||||||
<!-- Table header -->
|
{#if isLoaded && config}
|
||||||
|
<!-- Table container -->
|
||||||
<!-- Table container -->
|
<div
|
||||||
<div
|
class="overflow-x-auto border border-gray-300 dark:border-gray-600 rounded"
|
||||||
class="overflow-x-auto border border-gray-300 dark:border-gray-600 rounded"
|
|
||||||
>
|
|
||||||
<table
|
|
||||||
class="min-w-full divide-y divide-gray-200 dark:divide-gray-600"
|
|
||||||
>
|
>
|
||||||
<!-- Table head -->
|
<table
|
||||||
<thead class="bg-gray-50 dark:bg-secondary">
|
class="min-w-full divide-y divide-gray-200 dark:divide-gray-600"
|
||||||
<tr>
|
|
||||||
<th
|
|
||||||
scope="col"
|
|
||||||
class="px-4 py-1.5 text-left text-sm font-semibold"
|
|
||||||
>
|
|
||||||
Ticker
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
scope="col"
|
|
||||||
class="px-4 py-1.5 text-left text-sm font-semibold"
|
|
||||||
>
|
|
||||||
Action
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
scope="col"
|
|
||||||
class="px-4 py-1.5 text-left text-sm font-semibold"
|
|
||||||
>
|
|
||||||
Quantity
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
scope="col"
|
|
||||||
class="px-4 py-1.5 text-left text-sm font-semibold"
|
|
||||||
>
|
|
||||||
Expiration Date
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
scope="col"
|
|
||||||
class="px-4 py-1.5 text-left text-sm font-semibold"
|
|
||||||
>
|
|
||||||
Strike
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
scope="col"
|
|
||||||
class="px-4 py-1.5 text-left text-sm font-semibold"
|
|
||||||
>
|
|
||||||
Type
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
scope="col"
|
|
||||||
class="px-4 py-1.5 text-left text-sm font-semibold"
|
|
||||||
>
|
|
||||||
Price
|
|
||||||
</th>
|
|
||||||
<th scope="col" class="px-4 py-1.5 text-sm font-semibold"
|
|
||||||
></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<!-- Table body -->
|
|
||||||
<tbody
|
|
||||||
class="bg-[#F8F9FA] dark:bg-secondary divide-y divide-gray-200 dark:divide-gray-800 text-sm"
|
|
||||||
>
|
>
|
||||||
<!-- Example Option Leg Row -->
|
<!-- Table head -->
|
||||||
<tr>
|
<thead class="bg-gray-50 dark:bg-secondary">
|
||||||
<td class="px-4 py-3 whitespace-nowrap font-semibold">
|
<tr>
|
||||||
<Combobox.Root
|
<th
|
||||||
items={searchBarData}
|
scope="col"
|
||||||
bind:inputValue
|
class="px-4 py-1.5 text-left text-sm font-semibold"
|
||||||
bind:touchedInput
|
|
||||||
>
|
>
|
||||||
<div class="relative w-full">
|
Ticker
|
||||||
<Combobox.Input
|
</th>
|
||||||
on:input={search}
|
<th
|
||||||
class="text-sm controls-input bg-white dark:bg-[#2A2E39] focus:outline-hidden border border-gray-300 dark:border-gray-500 rounded placeholder:text-gray-600 dark:placeholder:text-gray-200 px-2 py-1.5 grow w-full min-w-54"
|
scope="col"
|
||||||
placeholder="Search Ticker"
|
class="px-4 py-1.5 text-left text-sm font-semibold"
|
||||||
aria-label="Search new stock"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{#if inputValue?.length !== 0 && inputValue !== selectedTicker}
|
|
||||||
<Combobox.Content
|
|
||||||
class=" z-10 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-default px-1 py-3 shadow-sm outline-hidden"
|
|
||||||
sideOffset={8}
|
|
||||||
>
|
|
||||||
{#each searchBarData as item}
|
|
||||||
<Combobox.Item
|
|
||||||
class="cursor-pointer border-b border-gray-300 dark:border-gray-500 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-hidden transition-all duration-75 data-highlighted:bg-gray-200 dark:data-highlighted:bg-primary"
|
|
||||||
value={item?.symbol}
|
|
||||||
label={item?.symbol}
|
|
||||||
on:click={(e) => changeTicker(item)}
|
|
||||||
>
|
|
||||||
<div class="flex flex-col items-start">
|
|
||||||
<span
|
|
||||||
class="text-sm text-blue-700 dark:text-blue-400"
|
|
||||||
>{item?.symbol}</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="text-xs sm:text-sm text-muted dark:text-white"
|
|
||||||
>{item?.name}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</Combobox.Item>
|
|
||||||
{:else}
|
|
||||||
<span class="block px-5 py-2 text-sm">
|
|
||||||
No results found
|
|
||||||
</span>
|
|
||||||
{/each}
|
|
||||||
</Combobox.Content>
|
|
||||||
{/if}
|
|
||||||
</Combobox.Root>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap">
|
|
||||||
<label
|
|
||||||
on:click={handleAction}
|
|
||||||
class="badge px-2 select-none rounded-md {selectedAction ===
|
|
||||||
'Buy'
|
|
||||||
? 'bg-green-100 text-green-800 dark:bg-green-300 dark:text-muted'
|
|
||||||
: 'bg-red-100 text-red-800 dark:bg-red-300 dark:text-muted'} font-semibold cursor-pointer"
|
|
||||||
>{selectedAction}</label
|
|
||||||
>
|
>
|
||||||
</td>
|
Action
|
||||||
<td class="px-4 py-3 whitespace-nowrap">
|
</th>
|
||||||
<input
|
<th
|
||||||
type="number"
|
scope="col"
|
||||||
min="1"
|
class="px-4 py-1.5 text-left text-sm font-semibold"
|
||||||
bind:value={selectedQuantity}
|
>
|
||||||
on:input={handleQuantityInput}
|
Quantity
|
||||||
class="border border-gray-300 dark:border-gray-500 rounded px-2 py-1 w-20 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
</th>
|
||||||
/>
|
<th
|
||||||
</td>
|
scope="col"
|
||||||
<td class="px-4 py-3 whitespace-nowrap">
|
class="px-4 py-1.5 text-left text-sm font-semibold"
|
||||||
<DropdownMenu.Root>
|
>
|
||||||
<DropdownMenu.Trigger asChild let:builder>
|
Expiration Date
|
||||||
<Button
|
</th>
|
||||||
builders={[builder]}
|
<th
|
||||||
class="mb-1 border border-gray-300 dark:border-none bg-white dark:bg-[#000] h-[35px] flex flex-row justify-between items-center min-w-[130px] w-[140px] sm:w-auto px-3 rounded-md truncate"
|
scope="col"
|
||||||
>
|
class="px-4 py-1.5 text-left text-sm font-semibold"
|
||||||
<span class="truncate text-sm"
|
>
|
||||||
>{formatDate(selectedDate)}</span
|
Strike
|
||||||
>
|
</th>
|
||||||
<svg
|
<th
|
||||||
class="-mr-1 ml-2 h-5 w-5 inline-block"
|
scope="col"
|
||||||
viewBox="0 0 20 20"
|
class="px-4 py-1.5 text-left text-sm font-semibold"
|
||||||
fill="currentColor"
|
>
|
||||||
style="max-width:40px"
|
Type
|
||||||
aria-hidden="true"
|
</th>
|
||||||
>
|
<th
|
||||||
<path
|
scope="col"
|
||||||
fill-rule="evenodd"
|
class="px-4 py-1.5 text-left text-sm font-semibold"
|
||||||
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"
|
Price
|
||||||
></path>
|
</th>
|
||||||
</svg>
|
<th
|
||||||
</Button>
|
scope="col"
|
||||||
</DropdownMenu.Trigger>
|
class="px-4 py-1.5 text-sm font-semibold"
|
||||||
|
></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
<DropdownMenu.Content
|
<!-- Table body -->
|
||||||
class="w-auto max-w-60 max-h-[400px] overflow-y-auto scroller relative"
|
<tbody
|
||||||
|
class="bg-[#F8F9FA] dark:bg-secondary divide-y divide-gray-200 dark:divide-gray-800 text-sm"
|
||||||
|
>
|
||||||
|
<!-- Example Option Leg Row -->
|
||||||
|
<tr>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap font-semibold">
|
||||||
|
<Combobox.Root
|
||||||
|
items={searchBarData}
|
||||||
|
bind:inputValue
|
||||||
|
bind:touchedInput
|
||||||
>
|
>
|
||||||
<!-- Dropdown items -->
|
<div class="relative w-full">
|
||||||
<DropdownMenu.Group class="pb-2"
|
<Combobox.Input
|
||||||
>{#each dateList as item}
|
on:input={search}
|
||||||
<DropdownMenu.Item
|
class="text-sm controls-input bg-white dark:bg-[#2A2E39] focus:outline-hidden border border-gray-300 dark:border-gray-500 rounded placeholder:text-gray-600 dark:placeholder:text-gray-200 px-2 py-1.5 grow w-full min-w-54"
|
||||||
on:click={() => {
|
placeholder="Search Ticker"
|
||||||
selectedDate = item;
|
aria-label="Search new stock"
|
||||||
loadData("default");
|
/>
|
||||||
}}
|
</div>
|
||||||
class="sm:hover:bg-gray-200 dark:sm:hover:bg-primary cursor-pointer "
|
{#if inputValue?.length !== 0 && inputValue !== selectedTicker}
|
||||||
>
|
<Combobox.Content
|
||||||
{formatDate(item)}
|
class=" z-10 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-default px-1 py-3 shadow-sm outline-hidden"
|
||||||
</DropdownMenu.Item>
|
sideOffset={8}
|
||||||
{/each}</DropdownMenu.Group
|
|
||||||
>
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Root>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap">
|
|
||||||
<DropdownMenu.Root>
|
|
||||||
<DropdownMenu.Trigger asChild let:builder>
|
|
||||||
<Button
|
|
||||||
builders={[builder]}
|
|
||||||
class="mb-1 border border-gray-300 dark:border-none bg-white dark:bg-[#000] h-[35px] flex flex-row justify-between items-center min-w-[130px] w-[140px] sm:w-auto px-3 rounded-md truncate"
|
|
||||||
>
|
|
||||||
<span class="truncate text-sm"
|
|
||||||
>{selectedStrike}</span
|
|
||||||
>
|
>
|
||||||
<svg
|
{#each searchBarData as item}
|
||||||
class="-mr-1 ml-2 h-5 w-5 inline-block"
|
<Combobox.Item
|
||||||
viewBox="0 0 20 20"
|
class="cursor-pointer border-b border-gray-300 dark:border-gray-500 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-hidden transition-all duration-75 data-highlighted:bg-gray-200 dark:data-highlighted:bg-primary"
|
||||||
fill="currentColor"
|
value={item?.symbol}
|
||||||
style="max-width:40px"
|
label={item?.symbol}
|
||||||
aria-hidden="true"
|
on:click={(e) => changeTicker(item)}
|
||||||
>
|
>
|
||||||
<path
|
<div class="flex flex-col items-start">
|
||||||
fill-rule="evenodd"
|
<span
|
||||||
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"
|
class="text-sm text-blue-700 dark:text-blue-400"
|
||||||
clip-rule="evenodd"
|
>{item?.symbol}</span
|
||||||
></path>
|
>
|
||||||
</svg>
|
<span
|
||||||
</Button>
|
class="text-xs sm:text-sm text-muted dark:text-white"
|
||||||
</DropdownMenu.Trigger>
|
>{item?.name}</span
|
||||||
|
>
|
||||||
<DropdownMenu.Content
|
</div>
|
||||||
class="w-auto max-w-60 max-h-[400px] overflow-y-auto scroller relative"
|
</Combobox.Item>
|
||||||
|
{:else}
|
||||||
|
<span class="block px-5 py-2 text-sm">
|
||||||
|
No results found
|
||||||
|
</span>
|
||||||
|
{/each}
|
||||||
|
</Combobox.Content>
|
||||||
|
{/if}
|
||||||
|
</Combobox.Root>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<label
|
||||||
|
on:click={handleAction}
|
||||||
|
class="badge px-2 select-none rounded-md {selectedAction ===
|
||||||
|
'Buy'
|
||||||
|
? 'bg-green-100 text-green-800 dark:bg-green-300 dark:text-muted'
|
||||||
|
: 'bg-red-100 text-red-800 dark:bg-red-300 dark:text-muted'} font-semibold cursor-pointer"
|
||||||
|
>{selectedAction}</label
|
||||||
>
|
>
|
||||||
<!-- Dropdown items -->
|
</td>
|
||||||
<DropdownMenu.Group class="pb-2">
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
<!-- Added padding to avoid overlapping with Reset button -->
|
<input
|
||||||
{#each strikeList as item}
|
type="number"
|
||||||
<DropdownMenu.Item
|
min="1"
|
||||||
on:click={() => {
|
bind:value={selectedQuantity}
|
||||||
selectedStrike = item;
|
on:input={handleQuantityInput}
|
||||||
loadData("default");
|
class="border border-gray-300 dark:border-gray-500 rounded px-2 py-1 w-20 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||||
}}
|
/>
|
||||||
class="sm:hover:bg-gray-200 dark:sm:hover:bg-primary cursor-pointer "
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<DropdownMenu.Root>
|
||||||
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
|
<Button
|
||||||
|
builders={[builder]}
|
||||||
|
class="mb-1 border border-gray-300 dark:border-none bg-white dark:bg-[#000] h-[35px] flex flex-row justify-between items-center min-w-[130px] w-[140px] sm:w-auto px-3 rounded-md truncate"
|
||||||
|
>
|
||||||
|
<span class="truncate text-sm"
|
||||||
|
>{formatDate(selectedDate)}</span
|
||||||
>
|
>
|
||||||
{item}
|
<svg
|
||||||
</DropdownMenu.Item>
|
class="-mr-1 ml-2 h-5 w-5 inline-block"
|
||||||
{/each}
|
viewBox="0 0 20 20"
|
||||||
</DropdownMenu.Group>
|
fill="currentColor"
|
||||||
</DropdownMenu.Content>
|
style="max-width:40px"
|
||||||
</DropdownMenu.Root>
|
aria-hidden="true"
|
||||||
</td>
|
>
|
||||||
<td class="px-4 py-3 whitespace-nowrap">
|
<path
|
||||||
<label
|
fill-rule="evenodd"
|
||||||
on:click={handleOptionType}
|
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"
|
||||||
class="select-none badge px-2 rounded-md bg-blue-100 text-blue-800 dark:bg-blue-300 dark:text-muted font-semibold cursor-pointer"
|
clip-rule="evenodd"
|
||||||
>{selectedOptionType}</label
|
></path>
|
||||||
>
|
</svg>
|
||||||
</td>
|
</Button>
|
||||||
<td class="px-4 py-3 whitespace-nowrap">
|
</DropdownMenu.Trigger>
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
step="0.1"
|
|
||||||
bind:value={selectedOptionPrice}
|
|
||||||
on:input={handleOptionPriceInput}
|
|
||||||
class="border border-gray-300 dark:border-gray-500 rounded px-2 py-1 w-24 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap">
|
|
||||||
<a
|
|
||||||
href={`/${["stocks", "stock"]?.includes(assetType) ? "stocks" : assetType === "etf" ? "etf" : "index"}/${selectedTicker}/options/contract-lookup?query=${optionSymbol}`}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
class="option-leg-link-to-contract"
|
|
||||||
>
|
|
||||||
<Link class="w-4 h-4 text-gray-100" />
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<!--
|
<DropdownMenu.Content
|
||||||
|
class="w-auto max-w-60 max-h-[400px] overflow-y-auto scroller relative"
|
||||||
|
>
|
||||||
|
<!-- Dropdown items -->
|
||||||
|
<DropdownMenu.Group class="pb-2"
|
||||||
|
>{#each dateList as item}
|
||||||
|
<DropdownMenu.Item
|
||||||
|
on:click={() => {
|
||||||
|
selectedDate = item;
|
||||||
|
loadData("default");
|
||||||
|
}}
|
||||||
|
class="sm:hover:bg-gray-200 dark:sm:hover:bg-primary cursor-pointer "
|
||||||
|
>
|
||||||
|
{formatDate(item)}
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
{/each}</DropdownMenu.Group
|
||||||
|
>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<DropdownMenu.Root>
|
||||||
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
|
<Button
|
||||||
|
builders={[builder]}
|
||||||
|
class="mb-1 border border-gray-300 dark:border-none bg-white dark:bg-[#000] h-[35px] flex flex-row justify-between items-center min-w-[130px] w-[140px] sm:w-auto px-3 rounded-md truncate"
|
||||||
|
>
|
||||||
|
<span class="truncate text-sm"
|
||||||
|
>{selectedStrike}</span
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="-mr-1 ml-2 h-5 w-5 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-auto max-w-60 max-h-[400px] overflow-y-auto scroller relative"
|
||||||
|
>
|
||||||
|
<!-- Dropdown items -->
|
||||||
|
<DropdownMenu.Group class="pb-2">
|
||||||
|
<!-- Added padding to avoid overlapping with Reset button -->
|
||||||
|
{#each strikeList as item}
|
||||||
|
<DropdownMenu.Item
|
||||||
|
on:click={() => {
|
||||||
|
selectedStrike = item;
|
||||||
|
loadData("default");
|
||||||
|
}}
|
||||||
|
class="sm:hover:bg-gray-200 dark:sm:hover:bg-primary cursor-pointer "
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
{/each}
|
||||||
|
</DropdownMenu.Group>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<label
|
||||||
|
on:click={handleOptionType}
|
||||||
|
class="select-none badge px-2 rounded-md bg-blue-100 text-blue-800 dark:bg-blue-300 dark:text-muted font-semibold cursor-pointer"
|
||||||
|
>{selectedOptionType}</label
|
||||||
|
>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.1"
|
||||||
|
bind:value={selectedOptionPrice}
|
||||||
|
on:input={handleOptionPriceInput}
|
||||||
|
class="border border-gray-300 dark:border-gray-500 rounded px-2 py-1 w-24 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<a
|
||||||
|
href={`/${["stocks", "stock"]?.includes(assetType) ? "stocks" : assetType === "etf" ? "etf" : "index"}/${selectedTicker}/options/contract-lookup?query=${optionSymbol}`}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
class="option-leg-link-to-contract"
|
||||||
|
>
|
||||||
|
<Link class="w-4 h-4 text-gray-100" />
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!--
|
||||||
<td class="px-4 py-3 whitespace-nowrap">
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
<input
|
<input
|
||||||
type="range"
|
type="range"
|
||||||
@ -883,7 +884,7 @@
|
|||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
-->
|
-->
|
||||||
<!--
|
<!--
|
||||||
<td class="px-4 py-3 whitespace-nowrap">
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
<button class="text-gray-500 hover:text-red-500">
|
<button class="text-gray-500 hover:text-red-500">
|
||||||
<svg
|
<svg
|
||||||
@ -903,20 +904,17 @@
|
|||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
-->
|
-->
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<!-- Add more rows as needed -->
|
<!-- Add more rows as needed -->
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if isLoaded}
|
<div
|
||||||
{#if config}
|
class="shadow-sm mt-5 border border-gray-300 dark:border-gray-800 rounded"
|
||||||
<div
|
use:highcharts={config}
|
||||||
class="shadow-sm mt-5 border border-gray-300 dark:border-gray-800 rounded"
|
></div>
|
||||||
use:highcharts={config}
|
|
||||||
></div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="mt-5">
|
<div class="mt-5">
|
||||||
<h1
|
<h1
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user