begin get prices over time

dist/index.js

@@ -36718,9 +36718,23 @@ var $isStrikePickerEnabled = atom((get) => get($selectedQuoteDate) !== "" && get
 var $selectedStrike = atom("");
 var $frontMonthExpirationPickerUrl = atom((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/${get($selectedQuoteDate)}/expirations`);
 var $isFrontMonthExpirationPickerEnabled = atom((get) => get($selectedQuoteDate) !== "" && get($selectedUnderlying) !== "");
+var $selectedFrontExpiration = atom("");
 var $backMonthExpirationPickerUrl = atom((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/${get($selectedQuoteDate)}/expirations`);
 var $isBackMonthExpirationPickerEnabled = atom((get) => get($selectedQuoteDate) !== "" && get($selectedUnderlying) !== "");
+var $selectedBackExpiration = atom("");
+var $prices = atom((get) => {
+  const selectedUnderlying = get($selectedUnderlying);
+  const selectedStrike = get($selectedStrike);
+  const selectedFrontExpiration = get($selectedFrontExpiration);
+  const selectedBackExpiration = get($selectedBackExpiration);
+  if (selectedUnderlying !== "" && selectedStrike !== "" && selectedFrontExpiration !== "" && selectedBackExpiration !== "") {
+    return fetch(`${baseUrl}/option_quotes/${selectedUnderlying}/${selectedStrike}/${selectedFrontExpiration}/${selectedBackExpiration}`).then((x) => x.json()).catch(() => []);
+  } else {
+    return Promise.resolve([]);
+  }
+});
 function App() {
+  const prices = useAtomValue($prices);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: App_module_default.app, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Header_default, {}),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: App_module_default.picker, children: [
@@ -36737,11 +36751,11 @@ function App() {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: App_module_default.picker, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { children: "Front Expiration" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Picker, { $url: $frontMonthExpirationPickerUrl, $isEnabled: $isFrontMonthExpirationPickerEnabled })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Picker, { $url: $frontMonthExpirationPickerUrl, $isEnabled: $isFrontMonthExpirationPickerEnabled, $selectedOption: $selectedFrontExpiration })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: App_module_default.picker, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { children: "Back Expiration" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Picker, { $url: $backMonthExpirationPickerUrl, $isEnabled: $isBackMonthExpirationPickerEnabled })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Picker, { $url: $backMonthExpirationPickerUrl, $isEnabled: $isBackMonthExpirationPickerEnabled, $selectedOption: $selectedBackExpiration })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HistoricalImpliedVolatilityChart, {})
   ] });

src/App.tsx

@@ -1,7 +1,7 @@
 import Header from './Header';
 import { HistoricalImpliedVolatilityChart } from "./HistoricalImpliedVolatilityChart";
 import { Picker } from './Picker';
-import { atom as $ } from 'jotai';
+import { atom as $, useAtomValue } from 'jotai';
 //import './index.css';
 //@ts-ignore
 import k from './App.module.css';
@@ -22,19 +22,36 @@ const $selectedStrike = $('');
 
 const $frontMonthExpirationPickerUrl = $((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/${get($selectedQuoteDate)}/expirations`);
 const $isFrontMonthExpirationPickerEnabled = $((get) => get($selectedQuoteDate)!=='' && get($selectedUnderlying)!=='');
+const $selectedFrontExpiration = $('');
 
 const $backMonthExpirationPickerUrl = $((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/${get($selectedQuoteDate)}/expirations`);
 const $isBackMonthExpirationPickerEnabled = $((get) => get($selectedQuoteDate)!=='' && get($selectedUnderlying)!=='');
+const $selectedBackExpiration = $('');
+
+const $prices = $((get)=>{
+  const selectedUnderlying = get($selectedUnderlying);
+  const selectedStrike = get($selectedStrike);
+  const selectedFrontExpiration = get($selectedFrontExpiration);
+  const selectedBackExpiration = get($selectedBackExpiration);
+  if(selectedUnderlying!=='' && selectedStrike!=='' && selectedFrontExpiration!=='' && selectedBackExpiration!==''){
+    return fetch(`${baseUrl}/option_quotes/${selectedUnderlying}/${selectedStrike}/${selectedFrontExpiration}/${selectedBackExpiration}`).then(x=>x.json()).catch(()=>[]);
+  }
+  else{
+    return Promise.resolve([]);
+  }
+});
 
 function App() {
+  const prices = useAtomValue($prices);
+
   return (
   <div className={k.app}>
     <Header />
     <div className={k.picker}><label>Underlying</label><Picker $url={$underlyingsUrl} $selectedOption={$selectedUnderlying} /></div>
     <div className={k.picker}><label>Quote Date</label><Picker $url={$quoteDatePickerUrl} $isEnabled={$isQuoteDatePickerEnabled} $selectedOption={$selectedQuoteDate}/></div>
     <div className={k.picker}><label>Strike</label><Picker $url={$strikePickerUrl} $isEnabled={$isStrikePickerEnabled} $selectedOption={$selectedStrike}/></div>
-    <div className={k.picker}><label>Front Expiration</label><Picker $url={$frontMonthExpirationPickerUrl} $isEnabled={$isFrontMonthExpirationPickerEnabled} /></div>
+    <div className={k.picker}><label>Front Expiration</label><Picker $url={$frontMonthExpirationPickerUrl} $isEnabled={$isFrontMonthExpirationPickerEnabled} $selectedOption={$selectedFrontExpiration} /></div>
-    <div className={k.picker}><label>Back Expiration</label><Picker $url={$backMonthExpirationPickerUrl} $isEnabled={$isBackMonthExpirationPickerEnabled} /></div>
+    <div className={k.picker}><label>Back Expiration</label><Picker $url={$backMonthExpirationPickerUrl} $isEnabled={$isBackMonthExpirationPickerEnabled} $selectedOption={$selectedBackExpiration} /></div>
     <HistoricalImpliedVolatilityChart />
   </div>
   );