extend option calculator

src/routes/etf/[tickerID]/insider/+page.svelte

@@ -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
+              <Infobox text="No data available" />
-                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>
             {/if}
           {:else}
             <div class="flex justify-center items-center h-80">

src/routes/options-calculator/+page.svelte

@@ -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 prebuiltStrategy = [
-  let strategies = [
     {
       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}
+                                      value={searchItem?.symbol}
-                                    label={item?.symbol}
+                                      label={searchItem?.symbol}
-                                    on:click={(e) => changeTicker(item)}
+                                      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>