add css build script

2023-06-18 22:30:00 -04:00
parent 345bded212
commit 87f5d5f6d5
12 changed files with 1292 additions and 8 deletions
@@ -2,14 +2,21 @@ import Header from './Header';
 import { HistoricalImpliedVolatilityChart } from "./HistoricalImpliedVolatilityChart";
 import { create$Picker } from './Picker';
 import { atom as $, useAtomValue } from 'jotai';
+//import './index.css';

 const baseUrl = 'http://127.0.0.1:8234';
+
+/* The following are wrapped in atoms to prevent re-creating them if App() re-runs. */
 const $underlyingsUrl = $(`${baseUrl}/option_quotes/underlyings`);
 const $underlyingPicker = create$Picker({$url:$underlyingsUrl});
 const $quoteDatePicker = create$Picker({
  $url:       $((get) => `${baseUrl}/option_quotes/${get(get($underlyingPicker).$selectedOption)}/quote_dates`), 
  $isEnabled: $((get) => get(get($underlyingPicker).$selectedOption)!=='')
 });
+const $strikePicker = create$Picker({
+  $url:       $((get) => `${baseUrl}/option_quotes/${get(get($underlyingPicker).$selectedOption)}/${get(get($quoteDatePicker).$selectedOption)}/strikes`), 
+  $isEnabled: $((get) => get(get($quoteDatePicker).$selectedOption)!=='' && get(get($underlyingPicker).$selectedOption)!=='')
+});
 const $frontMonthPicker = create$Picker({
  $url:       $((get) => `${baseUrl}/option_quotes/${get(get($underlyingPicker).$selectedOption)}/${get(get($quoteDatePicker).$selectedOption)}/expirations`), 
  $isEnabled: $((get) => get(get($quoteDatePicker).$selectedOption)!=='' && get(get($underlyingPicker).$selectedOption)!=='')
@@ -20,16 +27,18 @@ const $backMonthPicker = create$Picker({
 });

 function App() {
-  const {Picker:UnderlyingPicker, $selectedOption} = useAtomValue($underlyingPicker);
+  const {Picker:UnderlyingPicker} = useAtomValue($underlyingPicker);
  const {Picker:QuoteDatePicker} = useAtomValue($quoteDatePicker);
+  const {Picker:StrikePicker} = useAtomValue($frontMonthPicker);
  const {Picker:FrontMonthPicker} = useAtomValue($frontMonthPicker);
  const {Picker:BackMonthPicker} = useAtomValue($backMonthPicker);

  return (
-  <div>
+  <div className='flex flex-column'>
    <Header />
-    <UnderlyingPicker />
+    <div className='flex'><UnderlyingPicker /></div>
    <QuoteDatePicker />
+    <StrikePicker />
    <FrontMonthPicker />
    <BackMonthPicker />
    <HistoricalImpliedVolatilityChart />
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
@@ -2,6 +2,7 @@
 <html>
  <head>
    <title>Calendar Optimizer</title>
+    <link rel="stylesheet" src="./index.css"></link>
  </head>
  <body>
    <div id="app"></div>