Added support for underlying securities

adamhwang · May 13, 2024 · 76f634c · 76f634c
1 parent be00f57
commit 76f634c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "react-dom": "^17.0.2",
     "react-financial-charts": "^1.3.2",
     "react-icons": "^4.8.0",
-    "react-option-charts": "^0.1.2",
+    "react-option-charts": "^0.2.0",
     "sass": "^1.59.3",
     "use-immer": "^0.8.1"
   },

diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
@@ -40,31 +40,35 @@ const Editor: FunctionComponent = () => {
           />
         </div>
         <div className="col-2 px-1 px-sm-2">
-          <input
-            className="form-control form-control-sm"
-            aria-label={`leg ${i + 1} DTE`}
-            type="number"
-            value={o.dte}
-            onChange={(e) =>
-              setOptionLegs((draft) => {
-                draft[i].dte = +e.target.value;
-              })
-            }
-          />
+          {o.callPut !== "underlying" ? (
+            <input
+              className="form-control form-control-sm"
+              aria-label={`leg ${i + 1} DTE`}
+              type="number"
+              value={o.dte}
+              onChange={(e) =>
+                setOptionLegs((draft) => {
+                  draft[i].dte = +e.target.value;
+                })
+              }
+            />
+          ) : null}
         </div>
         <div className="col-2 px-1 px-sm-2">
-          <input
-            className="form-control form-control-sm"
-            aria-label={`leg ${i + 1} volatility`}
-            type="number"
-            value={o.v}
-            onChange={(e) =>
-              setOptionLegs((draft) => {
-                draft[i].v = +e.target.value;
-              })
-            }
-            step=".05"
-          />
+          {o.callPut !== "underlying" ? (
+            <input
+              className="form-control form-control-sm"
+              aria-label={`leg ${i + 1} volatility`}
+              type="number"
+              value={o.v}
+              onChange={(e) =>
+                setOptionLegs((draft) => {
+                  draft[i].v = +e.target.value;
+                })
+              }
+              step=".05"
+            />
+          ) : null}
         </div>
         <div className="col-2 px-1 px-sm-2">
           <select
@@ -73,12 +77,16 @@ const Editor: FunctionComponent = () => {
             value={o.callPut}
             onChange={(e) =>
               setOptionLegs((draft) => {
-                draft[i].callPut = e.target.value as "call" | "put";
+                draft[i].callPut = e.target.value as
+                  | "call"
+                  | "put"
+                  | "underlying";
               })
             }
           >
             <option>call</option>
             <option>put</option>
+            <option>underlying</option>
           </select>
         </div>
         <div className="col-2 px-1 px-sm-2 text-center text-sm-start">