init

2024-02-04 15:36:28 -05:00
commit dc63f31647
33 changed files with 3423 additions and 0 deletions
@@ -0,0 +1,130 @@
+import { signal } from "@preact/signals";
+import { useCallback, useEffect } from "preact/hooks";
+import {trpc} from '../../trpc.js';
+
+const availableUnderlyings = signal([]);
+const chosenUnderlying = signal(null);
+
+const availableAsOfDates = signal([]);
+const chosenAsOfDate = signal(null);
+
+const availableExpirations = signal([]);
+const chosenExpiration = signal(null);
+
+const availableStrikes = signal([]);
+const chosenStrike = signal(null);
+
+const optionContractUplotData = signal([]);
+const underlyingUplotData = signal([]);
+
+export function CalendarOptimizer(){
+  const handleInit = useCallback(()=>{
+    trpc.getAvailableUnderlyings
+      .query()
+      .then((availableUnderlyingsResponse)=>{
+        availableUnderlyings.value = availableUnderlyingsResponse;
+      });
+  },[]);
+  const handleUnderlyingChange = useCallback((e)=>{
+    console.log(`Chose Underlying: ${e.target.value}`);
+    chosenUnderlying.value = e.target.value;
+    trpc.getAvailableAsOfDates
+      .query({underlying:e.target.value})
+      .then((getAvailableAsOfDatesResponse)=>{
+        availableAsOfDates.value = getAvailableAsOfDatesResponse;
+      });
+    trpc.getOpensForUnderlying
+      .query({underlying:e.target.value})
+      .then((getOpensForUnderlyingResponse)=>{
+        underlyingUplotData.value = getOpensForUnderlyingResponse;
+      });
+  },[]);
+  const handleAsOfDateChange = useCallback((e)=>{
+    console.log(`Chose Date: ${e.target.value}`);
+    chosenAsOfDate.value = e.target.value;
+    trpc.getExpirationsForUnderlying
+      .query({underlying:chosenUnderlying.value, asOfDate:chosenAsOfDate.value})
+      .then((getExpirationsForUnderlyingResponse)=>{
+        availableExpirations.value = getExpirationsForUnderlyingResponse;
+      });
+  },[]);
+  const handleExpirationChange = useCallback((e)=>{
+    console.log(`Chose Expiration: ${e.target.value}`);
+    chosenExpiration.value = e.target.value;
+    trpc.getStrikesForUnderlying
+      .query({underlying:chosenUnderlying.value, asOfDate:chosenAsOfDate.value, expirationDate: e.target.value})
+      .then((getStrikesForUnderlyingResponse)=>{
+        availableStrikes.value = getStrikesForUnderlyingResponse;
+      });
+  },[]);
+  const handleStrikeChange = useCallback((e)=>{
+    console.log(`Chose Strike: ${e.target.value}`);
+    chosenStrike.value = e.target.value;
+    trpc.getOpensForOptionContract
+      .query({underlying:chosenUnderlying.value, expirationDate:chosenExpiration.value, strike:parseFloat(e.target.value)})
+      .then((getOpensForOptionContractResponse)=>{
+        optionContractUplotData.value = getOpensForOptionContractResponse;
+      });
+  },[]);
+
+  useEffect(handleInit, []);
+
+  return (
+    <div>
+      <div>
+        <label>Available Underlyings</label>
+        {
+          availableUnderlyings.value.length === 0 
+          ? "Loading..." 
+          : <select onChange={handleUnderlyingChange}>
+              {availableUnderlyings.value.map((availableUnderlying)=>(
+                <option value={availableUnderlying}>{availableUnderlying}</option>
+              ))}
+            </select>
+        }
+      </div>
+      <div>
+        <label>Available "As-of" Dates</label>
+        {
+          availableAsOfDates.value.length === 0 
+          ? "Loading..." 
+          : <select onChange={handleAsOfDateChange}>
+              {availableAsOfDates.value.map((availableAsOfDate)=>(
+                <option value={availableAsOfDate}>{availableAsOfDate}</option>
+              ))}
+            </select>
+        }
+      </div>
+      <div>
+        <label>Available Expirations</label>
+        {
+          availableExpirations.value.length === 0 
+          ? "Loading..." 
+          : <select onChange={handleExpirationChange}>
+              {availableExpirations.value.map((availableExpiration)=>(
+                <option value={availableExpiration}>{availableExpiration}</option>
+              ))}
+            </select>
+        }
+      </div>
+      <div>
+        <label>Available Strikes</label>
+        {
+          availableStrikes.value.length === 0 
+          ? "Loading..." 
+          : <select onChange={handleStrikeChange}>
+              {availableStrikes.value.map((availableStrike)=>(
+                <option value={availableStrike}>{availableStrike}</option>
+              ))}
+            </select>
+        }
+      </div>
+      {/* {chosenUnderlying.value!==null && underlyingUplotData.value.length>0
+      ? <UPlot data={underlyingUplotData.value} title="Underlying" opts={uplotOpts}/>
+      : <></>}
+      {chosenUnderlying.value!==null && chosenAsOfDate.value!==null && chosenExpiration.value!==null && chosenStrike.value!==null && optionContractUplotData.value.length>0
+      ? <UPlot data={optionContractUplotData.value} title="Option Contract" opts={uplotOpts}/>
+      : <></>} */}
+    </div>
+  );
+}