This commit is contained in:
MuslemRahimi 2025-04-07 19:01:38 +02:00
parent dc43d7fb13
commit b1c682a3bf

View File

@ -334,22 +334,22 @@
const profitLossPctChange = (profitLoss / premium) * 100;
return `
<div class="flex flex-col items-start text-sm">
<div>
<span class="text-start font-semibold">Underlying Price:</span>
$${underlyingPrice}
(<span>${underlyingPctChange.toFixed(2)}%</span>)
</div>
<br>
<div class="">
<span class="text-start font-semibold">Profit or Loss:</span>
${profitLoss < 0 ? "-$" : "$"}${Math.abs(profitLoss).toLocaleString("en-US")}
(<span>${profitLossPctChange.toFixed(2)}%</span>)
</div>
</div>
`;
<div class="flex flex-col items-start text-sm">
<div>
<span class="text-start font-semibold">Underlying Price:</span>
$${underlyingPrice}
(<span>${underlyingPctChange.toFixed(2)}%</span>)
</div>
<div class="">
<span class="text-start font-semibold">Profit or Loss:</span>
${profitLoss < 0 ? "-$" : "$"}${Math.abs(profitLoss).toLocaleString("en-US")}
(<span>${profitLossPctChange.toFixed(2)}%</span>)
</div>
</div>
`;
},
},
plotOptions: {
area: {
fillOpacity: 0.2,
@ -621,257 +621,258 @@
</p>
<div class="mt-4">
<!-- Table header -->
<!-- Table container -->
<div
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"
{#if isLoaded && config}
<!-- Table container -->
<div
class="overflow-x-auto border border-gray-300 dark:border-gray-600 rounded"
>
<!-- Table head -->
<thead class="bg-gray-50 dark:bg-secondary">
<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"
<table
class="min-w-full divide-y divide-gray-200 dark:divide-gray-600"
>
<!-- Example Option Leg Row -->
<tr>
<td class="px-4 py-3 whitespace-nowrap font-semibold">
<Combobox.Root
items={searchBarData}
bind:inputValue
bind:touchedInput
<!-- Table head -->
<thead class="bg-gray-50 dark:bg-secondary">
<tr>
<th
scope="col"
class="px-4 py-1.5 text-left text-sm font-semibold"
>
<div class="relative w-full">
<Combobox.Input
on:input={search}
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"
placeholder="Search Ticker"
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
Ticker
</th>
<th
scope="col"
class="px-4 py-1.5 text-left text-sm font-semibold"
>
</td>
<td class="px-4 py-3 whitespace-nowrap">
<input
type="number"
min="1"
bind:value={selectedQuantity}
on:input={handleQuantityInput}
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"
/>
</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
>
<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>
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>
<DropdownMenu.Content
class="w-auto max-w-60 max-h-[400px] overflow-y-auto scroller relative"
<!-- Table body -->
<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 -->
<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
<div class="relative w-full">
<Combobox.Input
on:input={search}
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"
placeholder="Search Ticker"
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}
>
<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"
{#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
>
<!-- 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 "
</td>
<td class="px-4 py-3 whitespace-nowrap">
<input
type="number"
min="1"
bind:value={selectedQuantity}
on:input={handleQuantityInput}
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"
/>
</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}
</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>
<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"
>{#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">
<input
type="range"
@ -883,7 +884,7 @@
/>
</td>
-->
<!--
<!--
<td class="px-4 py-3 whitespace-nowrap">
<button class="text-gray-500 hover:text-red-500">
<svg
@ -903,20 +904,17 @@
</button>
</td>
-->
</tr>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
{#if isLoaded}
{#if config}
<div
class="shadow-sm mt-5 border border-gray-300 dark:border-gray-800 rounded"
use:highcharts={config}
></div>
{/if}
<div
class="shadow-sm mt-5 border border-gray-300 dark:border-gray-800 rounded"
use:highcharts={config}
></div>
<div class="mt-5">
<h1