extend option calculator
This commit is contained in:
MuslemRahimi
parent
697b431171
commit
f106cf5878
@ -4,6 +4,7 @@
|
||||
import { getPartyForPoliticians } from "$lib/utils";
|
||||
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
|
||||
export let data;
|
||||
|
||||
@ -420,12 +421,7 @@
|
||||
</label>
|
||||
{/if}
|
||||
{:else}
|
||||
<h2
|
||||
class="pl-4 pr-4 flex justify-center items-center text-md sm:text-lg text-center text-slate-200"
|
||||
>
|
||||
No trading history available for {$displayCompanyName}. Likely
|
||||
no corrupt politican has interest in this stock.
|
||||
</h2>
|
||||
<Infobox text="No data available" />
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
|
||||
export let data;
|
||||
let isLoaded = true;
|
||||
let shouldUpdate = false;
|
||||
|
||||
let config = null;
|
||||
let selectedStrategy = "Long Call";
|
||||
@ -45,8 +46,7 @@
|
||||
|
||||
let inputValue = selectedTicker;
|
||||
let touchedInput = false;
|
||||
|
||||
let strategies = [
|
||||
let prebuiltStrategy = [
|
||||
{
|
||||
name: "Long Call",
|
||||
sentiment: "Bullish",
|
||||
@ -89,9 +89,12 @@
|
||||
{ name: "Short Straddle", sentiment: "Neutral" },
|
||||
*/
|
||||
];
|
||||
let description = strategies?.at(0)?.description;
|
||||
|
||||
function changeStrategy(strategy) {
|
||||
let userStrategy = [];
|
||||
|
||||
let description = prebuiltStrategy?.at(0)?.description;
|
||||
|
||||
async function changeStrategy(strategy) {
|
||||
selectedStrategy = strategy?.name;
|
||||
description = strategy?.description;
|
||||
|
||||
@ -122,7 +125,7 @@
|
||||
selectedAction = null;
|
||||
}
|
||||
|
||||
config = plotData();
|
||||
await loadData("default");
|
||||
}
|
||||
|
||||
const payoffFunctions = {
|
||||
@ -431,6 +434,7 @@
|
||||
}
|
||||
|
||||
config = plotData();
|
||||
shouldUpdate = true;
|
||||
}
|
||||
|
||||
function handleOptionPriceInput(event) {
|
||||
@ -445,6 +449,7 @@
|
||||
// Set a new debounce timeout (1 second)
|
||||
debounceTimeout = setTimeout(() => {
|
||||
config = plotData();
|
||||
shouldUpdate = true;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
@ -461,6 +466,7 @@
|
||||
// Set a new debounce timeout (1 second)
|
||||
debounceTimeout = setTimeout(() => {
|
||||
config = plotData();
|
||||
shouldUpdate = true;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
@ -515,7 +521,7 @@
|
||||
selectedOptionPrice = output?.history?.at(-1)?.mark;
|
||||
|
||||
config = plotData();
|
||||
|
||||
shouldUpdate = true;
|
||||
isLoaded = true;
|
||||
}
|
||||
|
||||
@ -561,6 +567,25 @@
|
||||
if (debounceTimeout) clearTimeout(debounceTimeout);
|
||||
});
|
||||
|
||||
$: {
|
||||
if (shouldUpdate) {
|
||||
shouldUpdate = false;
|
||||
userStrategy = [
|
||||
{
|
||||
ticker: selectedTicker,
|
||||
action: selectedAction,
|
||||
quantity: selectedQuantity,
|
||||
date: selectedDate,
|
||||
strike: selectedStrike,
|
||||
optionType: selectedOptionType,
|
||||
optionPrice: selectedOptionPrice,
|
||||
},
|
||||
];
|
||||
|
||||
console.log(userStrategy);
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($mode) {
|
||||
config = plotData();
|
||||
@ -601,7 +626,7 @@
|
||||
|
||||
<div class="mt-5 mb-5 w-fulll">
|
||||
<div class="flex flex-wrap gap-3 mt-4">
|
||||
{#each strategies as strategy}
|
||||
{#each prebuiltStrategy as strategy}
|
||||
<div
|
||||
on:click={() => changeStrategy(strategy)}
|
||||
class="{selectedStrategy === strategy?.name
|
||||
@ -694,7 +719,7 @@
|
||||
<tbody
|
||||
class="bg-[#F8F9FA] dark:bg-secondary divide-y divide-gray-200 dark:divide-gray-800 text-sm"
|
||||
>
|
||||
<!-- Example Option Leg Row -->
|
||||
{#each userStrategy as item}
|
||||
<tr>
|
||||
<td class="px-4 py-3 whitespace-nowrap font-semibold">
|
||||
<Combobox.Root
|
||||
@ -707,29 +732,29 @@
|
||||
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"
|
||||
aria-label="Search Ticker"
|
||||
/>
|
||||
</div>
|
||||
{#if inputValue?.length !== 0 && inputValue !== selectedTicker}
|
||||
{#if inputValue?.length !== 0 && inputValue !== item?.ticker}
|
||||
<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}
|
||||
{#each searchBarData as searchItem}
|
||||
<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)}
|
||||
value={searchItem?.symbol}
|
||||
label={searchItem?.symbol}
|
||||
on:click={(e) => changeTicker(searchItem)}
|
||||
>
|
||||
<div class="flex flex-col items-start">
|
||||
<span
|
||||
class="text-sm text-blue-700 dark:text-blue-400"
|
||||
>{item?.symbol}</span
|
||||
>{searchItem?.symbol}</span
|
||||
>
|
||||
<span
|
||||
class="text-xs sm:text-sm text-muted dark:text-white"
|
||||
>{item?.name}</span
|
||||
>{searchItem?.name}</span
|
||||
>
|
||||
</div>
|
||||
</Combobox.Item>
|
||||
@ -745,11 +770,11 @@
|
||||
<td class="px-4 py-3 whitespace-nowrap">
|
||||
<label
|
||||
on:click={handleAction}
|
||||
class="badge px-2 select-none rounded-md {selectedAction ===
|
||||
class="badge px-2 select-none rounded-md {item?.action ===
|
||||
'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
|
||||
>{item?.action}</label
|
||||
>
|
||||
</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap">
|
||||
@ -858,7 +883,7 @@
|
||||
<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
|
||||
>{item?.optionType}</label
|
||||
>
|
||||
</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap">
|
||||
@ -881,40 +906,8 @@
|
||||
/>
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<!--
|
||||
<td class="px-4 py-3 whitespace-nowrap">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
value="0.30"
|
||||
class="accent-blue-500 w-24"
|
||||
/>
|
||||
</td>
|
||||
-->
|
||||
<!--
|
||||
<td class="px-4 py-3 whitespace-nowrap">
|
||||
<button class="text-gray-500 hover:text-red-500">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5-4h4m-4 0a1 1 0 00-1 1v1h6V4a1 1 0 00-1-1m-4 0h4"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
-->
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
<!-- Add more rows as needed -->
|
||||
</tbody>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user