You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
2.8 KiB
TypeScript
51 lines
2.8 KiB
TypeScript
import Header from './Header';
|
|
import { HistoricalImpliedVolatilityChart } from "./HistoricalImpliedVolatilityChart";
|
|
import { Picker } from './Picker';
|
|
import { atom as $, useAtomValue } from 'jotai';
|
|
import { loadable } from 'jotai/utils';
|
|
//import './index.css';
|
|
//@ts-ignore
|
|
import k from './App.module.css';
|
|
import { useEffect } from 'react';
|
|
import { CalendarPricesChart } from './CalendarPricesChart';
|
|
|
|
export const baseUrl = 'http://127.0.0.1:8234';
|
|
|
|
/* The following are wrapped in atoms to prevent re-creating them if App() re-runs. */
|
|
export const $underlyingsUrl = $(`${baseUrl}/option_quotes/underlyings`);
|
|
export const $selectedUnderlying = $('');
|
|
|
|
export const $quoteDatePickerUrl = $((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/quote_dates`);
|
|
export const $isQuoteDatePickerEnabled = $((get) => get($selectedUnderlying)!=='');
|
|
export const $selectedQuoteDate = $('');
|
|
|
|
export const $strikePickerUrl = $((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/${get($selectedQuoteDate)}/strikes`);
|
|
export const $isStrikePickerEnabled = $((get) => get($selectedQuoteDate)!=='' && get($selectedUnderlying)!=='');
|
|
export const $selectedStrike = $('');
|
|
|
|
export const $frontMonthExpirationPickerUrl = $((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/${get($selectedQuoteDate)}/expirations`);
|
|
export const $isFrontMonthExpirationPickerEnabled = $((get) => get($selectedQuoteDate)!=='' && get($selectedUnderlying)!=='');
|
|
export const $selectedFrontExpiration = $('');
|
|
|
|
export const $backMonthExpirationPickerUrl = $((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/${get($selectedQuoteDate)}/expirations`);
|
|
export const $isBackMonthExpirationPickerEnabled = $((get) => get($selectedQuoteDate)!=='' && get($selectedUnderlying)!=='');
|
|
export const $selectedBackExpiration = $('');
|
|
|
|
|
|
|
|
function App() {
|
|
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} $selectedOption={$selectedFrontExpiration} /></div>
|
|
<div className={k.picker}><label>Back Expiration</label><Picker $url={$backMonthExpirationPickerUrl} $isEnabled={$isBackMonthExpirationPickerEnabled} $selectedOption={$selectedBackExpiration} /></div>
|
|
<CalendarPricesChart />
|
|
{/* <HistoricalImpliedVolatilityChart /> */}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App; |