Compare commits
No commits in common. 'master' and 'react' have entirely different histories.
@ -1,9 +0,0 @@
|
||||
Choose Underlying
|
||||
Choose Quote Date (i.e. from which point in time are you running the analysis)
|
||||
Choose Strike
|
||||
For each front-month-back-month combination:
|
||||
Lookup the cost to open the position
|
||||
At the front month's expiration, the back-month will have a certain DTE. Determine what IV the back-month will need in order to offset this cost, for all possible underlying prices.
|
||||
Determine the 30-day lo-hi range for IV, normalized for distance-from-the-money and time-to-expiry.
|
||||
In other words, a naive 30-day-lo-hi isn't informative, because maybe it was low due to long time-to-expiry, or high due to distance-from-the-money
|
||||
Normalize the IV that was determined to yield a profit, and see if it's higher than the bottom of the lo-hi range. If it is, it's safe; the only way to lose is for it to end-off having a lower IV than the 30-day record.
|
@ -1,21 +0,0 @@
|
||||
/* esbuild-css-modules-plugin-ns-css:src/App.module.css */
|
||||
.App-module__app_gPMrEW__001 {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
.App-module__app_gPMrEW__001 > .App-module__form_gPMrEW__001 {
|
||||
flex-direction: column;
|
||||
max-width: 30em;
|
||||
display: flex;
|
||||
}
|
||||
.App-module__app_gPMrEW__001 > .App-module__form_gPMrEW__001 > .App-module__underlyingPrice_gPMrEW__001 {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: .6em;
|
||||
display: flex;
|
||||
}
|
||||
.App-module__app_gPMrEW__001 > .App-module__form_gPMrEW__001 > .App-module__picker_gPMrEW__001 {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
}
|
@ -1,10 +0,0 @@
|
||||
// src/App.module.css
|
||||
var App_module_default = {
|
||||
"app": "App-module__app_gPMrEW__001",
|
||||
"form": "App-module__form_gPMrEW__001",
|
||||
"picker": "App-module__picker_gPMrEW__001",
|
||||
"underlyingPrice": "App-module__underlyingPrice_gPMrEW__001"
|
||||
};
|
||||
export {
|
||||
App_module_default as default
|
||||
};
|
@ -1,21 +0,0 @@
|
||||
/* esbuild-css-modules-plugin-ns-css:src/App.module.css */
|
||||
.App-module__app_gPMrEW__001 {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
.App-module__app_gPMrEW__001 > .App-module__form_gPMrEW__001 {
|
||||
flex-direction: column;
|
||||
max-width: 30em;
|
||||
display: flex;
|
||||
}
|
||||
.App-module__app_gPMrEW__001 > .App-module__form_gPMrEW__001 > .App-module__underlyingPrice_gPMrEW__001 {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: .6em;
|
||||
display: flex;
|
||||
}
|
||||
.App-module__app_gPMrEW__001 > .App-module__form_gPMrEW__001 > .App-module__picker_gPMrEW__001 {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
}
|
File diff suppressed because it is too large
Load Diff
@ -1,20 +0,0 @@
|
||||
.app {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.app > .form {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
max-width: 30em;
|
||||
}
|
||||
.app > .form > .underlyingPrice {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 0.6em;
|
||||
}
|
||||
.app > .form > .picker {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
@ -1,52 +0,0 @@
|
||||
import { Chart as ChartJS, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement } from "chart.js";
|
||||
import { Line } from 'react-chartjs-2';
|
||||
import { atom as $, useAtomValue } from 'jotai';
|
||||
import { loadable } from 'jotai/utils';
|
||||
import { useEffect } from "react";
|
||||
import { baseUrl, $selectedUnderlying, $selectedStrike, $selectedFrontExpiration, $selectedBackExpiration } from "./App";
|
||||
|
||||
ChartJS.register(LineElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement);
|
||||
|
||||
export type CalendarPrice = {
|
||||
quote_date: string,
|
||||
price: number
|
||||
};
|
||||
|
||||
const $prices = loadable<Promise<Array<CalendarPrice>>>($(async (get)=>{
|
||||
const selectedUnderlying = get($selectedUnderlying);
|
||||
const selectedStrike = get($selectedStrike);
|
||||
const selectedFrontExpiration = get($selectedFrontExpiration);
|
||||
const selectedBackExpiration = get($selectedBackExpiration);
|
||||
if(selectedUnderlying!=='' && selectedStrike!=='' && selectedFrontExpiration!=='' && selectedBackExpiration!==''){
|
||||
return await fetch(`${baseUrl}/option_quotes/${selectedUnderlying}/${selectedStrike}/${selectedFrontExpiration}/${selectedBackExpiration}`).then(x=>x.json()).catch(()=>[]);
|
||||
}
|
||||
else{
|
||||
return [];
|
||||
}
|
||||
}));
|
||||
|
||||
export function CalendarPricesChart(){
|
||||
const prices = useAtomValue($prices);
|
||||
|
||||
useEffect(()=>{ console.log(prices); },[prices])
|
||||
if(prices.state === 'hasData'){
|
||||
return (<div>
|
||||
<Line
|
||||
datasetIdKey='id'
|
||||
data={{
|
||||
labels: prices.data.map((x)=>x.quote_date.substring(0,10)),
|
||||
datasets: [
|
||||
{//@ts-ignore
|
||||
id: 1,
|
||||
label: '',
|
||||
data: prices.data.map((x)=>x.price),
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>);
|
||||
}
|
||||
else {
|
||||
return (<></>);
|
||||
}
|
||||
}
|
@ -1,27 +0,0 @@
|
||||
import { Chart as ChartJS, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement } from "chart.js";
|
||||
import { Line } from 'react-chartjs-2';
|
||||
|
||||
ChartJS.register(LineElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement);
|
||||
|
||||
export function HistoricalImpliedVolatilityChart(){
|
||||
return (<div>
|
||||
<Line
|
||||
datasetIdKey='id'
|
||||
data={{
|
||||
labels: ['Jun', 'Jul', 'Aug'],
|
||||
datasets: [
|
||||
{//@ts-ignore
|
||||
id: 1,
|
||||
label: '',
|
||||
data: [5, 6, 7],
|
||||
},
|
||||
{//@ts-ignore
|
||||
id: 2,
|
||||
label: '',
|
||||
data: [3, 2, 1],
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>);
|
||||
}
|
@ -1,55 +0,0 @@
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { atom as $, useAtom, Atom, PrimitiveAtom, useAtomValue, useSetAtom, } from 'jotai';
|
||||
import { baseUrl } from "./App";
|
||||
import { useCommand } from "./util";
|
||||
|
||||
type PickerInput = {
|
||||
$options?:PrimitiveAtom<Array<string>>,
|
||||
$isLoading?:PrimitiveAtom<boolean>,
|
||||
$selectedOptionValue?:PrimitiveAtom<string>,
|
||||
$url:Atom<string>,
|
||||
$isEnabled?:Atom<boolean>
|
||||
};
|
||||
export function Picker({
|
||||
$url,
|
||||
$options = useMemo(()=>$([]), []),
|
||||
$isLoading = useMemo(()=>$(true),[]),
|
||||
$isEnabled = useMemo(()=>$(true),[]),
|
||||
$selectedOptionValue = useMemo(()=>$(''), [])
|
||||
}: PickerInput){
|
||||
const url = useAtomValue($url);
|
||||
const options = useAtomValue($options);
|
||||
const isLoading = useAtomValue($isLoading);
|
||||
const [selectedOptionValue, setSelectedOptionValue] = useAtom($selectedOptionValue);
|
||||
const isEnabled = useAtomValue($isEnabled);
|
||||
|
||||
const handleFetchedOptions = useCommand((get,set,options)=>{
|
||||
set($options, options);
|
||||
set($isLoading, false);
|
||||
}, [$options, $isLoading]);
|
||||
|
||||
useEffect(()=>{
|
||||
if(isEnabled){
|
||||
fetch(url)
|
||||
.then(x=>x.json())
|
||||
.catch((err)=>['AAPL', 'MSFT', 'GOOG'])
|
||||
.then(handleFetchedOptions)
|
||||
}
|
||||
},[url, isEnabled])
|
||||
|
||||
return (
|
||||
<div>
|
||||
{isLoading
|
||||
?
|
||||
<span>Loading...</span>
|
||||
:
|
||||
<select value={selectedOptionValue} onChange={(e)=>{ setSelectedOptionValue(e.target.value); }}>
|
||||
<option key="" value=""></option>
|
||||
{options.map((date)=>
|
||||
<option key={date} value={date}>{date}</option>
|
||||
)}
|
||||
</select>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
@ -0,0 +1,32 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { atom as $, useAtom } from 'jotai';
|
||||
|
||||
const $dates = $<Array<string>>([]);
|
||||
const $isLoading = $<boolean>(false);
|
||||
|
||||
export function QuoteDatePicker(){
|
||||
const [dates, setDates] = useAtom($dates);
|
||||
const [isLoading, setIsLoading] = useAtom($isLoading);
|
||||
|
||||
useEffect(()=>{
|
||||
fetch('http://127.0.0.1:8234/option_quotes/AAPL/quote_dates')
|
||||
.then(x=>x.json())
|
||||
.catch((err)=>['2021-01-02', '2021-01-03', '2021-01-04'])
|
||||
.then((dates_)=>{ setDates(dates_); setIsLoading(false); })
|
||||
},[])
|
||||
|
||||
return (
|
||||
<div>
|
||||
{isLoading
|
||||
?
|
||||
<span>Loading...</span>
|
||||
:
|
||||
<select>
|
||||
{dates.map((date)=>
|
||||
<option key={date} value={date}>{date}</option>
|
||||
)}
|
||||
</select>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,23 +0,0 @@
|
||||
import { atom as $, useAtom, useAtomValue } from 'jotai';
|
||||
import { useEffect } from 'react';
|
||||
import { useCommand, useLocalAtom } from './util';
|
||||
import { baseUrl } from './App';
|
||||
|
||||
export function UnderlyingPrice({$underlying, $quoteDate}){
|
||||
const underlying = useAtomValue($underlying);
|
||||
const quoteDate = useAtomValue($quoteDate) as String;
|
||||
const $underlyingPrice = useLocalAtom('', [$underlying, $quoteDate]);
|
||||
const [underlyingPrice, setUnderlyingPrice] = useAtom($underlyingPrice);
|
||||
|
||||
const handleInit = useCommand(()=>{
|
||||
fetch(`${baseUrl}/underlying_quotes/${underlying}/${quoteDate.substring(0,10)}`).then((x)=>x.json())
|
||||
.then((rows)=>{ setUnderlyingPrice(rows[0].close.toString()); });
|
||||
},[underlying, quoteDate]);
|
||||
|
||||
//@ts-ignore
|
||||
useEffect(handleInit,[underlying, quoteDate]);
|
||||
|
||||
return (
|
||||
<span>{underlyingPrice}</span>
|
||||
);
|
||||
}
|
@ -1,96 +0,0 @@
|
||||
import { useSetAtom, atom as $ } from "jotai";
|
||||
import { useMemo } from "react";
|
||||
|
||||
// from [https://stackoverflow.com/a/14873282]
|
||||
function erf(x) {
|
||||
// save the sign of x
|
||||
var sign = (x >= 0) ? 1 : -1;
|
||||
x = Math.abs(x);
|
||||
|
||||
// constants
|
||||
var a1 = 0.254829592;
|
||||
var a2 = -0.284496736;
|
||||
var a3 = 1.421413741;
|
||||
var a4 = -1.453152027;
|
||||
var a5 = 1.061405429;
|
||||
var p = 0.3275911;
|
||||
|
||||
// A&S formula 7.1.26
|
||||
var t = 1.0/(1.0 + p*x);
|
||||
var y = 1.0 - (((((a5 * t + a4) * t) + a3) * t + a2) * t + a1) * t * Math.exp(-x * x);
|
||||
return sign * y; // erf(-x) = -erf(x);
|
||||
}
|
||||
|
||||
// produced by ChatGPT
|
||||
export function calculateImpliedVolatility({optionPrice, underlyingPrice, strikePrice, timeToExpiration, riskFreeRate=0.03, optionType='call', maxIterations = 100, tolerance = 0.0001}) {
|
||||
let iv = 0.5; // Initial guess for implied volatility
|
||||
let epsilon = 1e-6; // Small value to avoid division by zero
|
||||
|
||||
for (let i = 0; i < maxIterations; i++) {
|
||||
const optionPriceEstimate = calculateOptionPrice(underlyingPrice, strikePrice, timeToExpiration, iv, riskFreeRate, optionType);
|
||||
const vega = calculateVega(underlyingPrice, strikePrice, timeToExpiration, iv, riskFreeRate);
|
||||
const diff = optionPrice - optionPriceEstimate;
|
||||
|
||||
if (Math.abs(diff) < tolerance) {
|
||||
return iv;
|
||||
}
|
||||
|
||||
iv = iv + (diff / (vega || epsilon)); // Avoid division by zero
|
||||
}
|
||||
|
||||
return NaN; // If max iterations are reached, return NaN (no convergence)
|
||||
}
|
||||
|
||||
function calculateOptionPrice(S, K, T, impliedVolatility, r, optionType) {
|
||||
const d1 = (Math.log(S / K) + (r + (impliedVolatility ** 2) / 2) * T) / (impliedVolatility * Math.sqrt(T));
|
||||
const d2 = d1 - impliedVolatility * Math.sqrt(T);
|
||||
|
||||
if (optionType === 'call') {
|
||||
return S * Math.exp(-r * T) * cumulativeDistributionFunction(d1) - K * Math.exp(-r * T) * cumulativeDistributionFunction(d2);
|
||||
} else if (optionType === 'put') {
|
||||
return K * Math.exp(-r * T) * cumulativeDistributionFunction(-d2) - S * Math.exp(-r * T) * cumulativeDistributionFunction(-d1);
|
||||
} else {
|
||||
throw new Error('Invalid option type. Use "call" or "put".');
|
||||
}
|
||||
}
|
||||
|
||||
function calculateVega(S, K, T, impliedVolatility, r) {
|
||||
const d1 = (Math.log(S / K) + (r + (impliedVolatility ** 2) / 2) * T) / (impliedVolatility * Math.sqrt(T));
|
||||
return S * Math.sqrt(T) * probabilityDensityFunction(d1);
|
||||
}
|
||||
|
||||
function cumulativeDistributionFunction(x) {
|
||||
return 0.5 * (1 + erf(x / Math.sqrt(2)));
|
||||
}
|
||||
|
||||
function probabilityDensityFunction(x) {
|
||||
return Math.exp(-0.5 * x ** 2) / Math.sqrt(2 * Math.PI);
|
||||
}
|
||||
|
||||
// Example usage
|
||||
/*
|
||||
const optionPrice = 5.25; // Example option price
|
||||
const underlyingPrice = 50; // Example underlying stock price
|
||||
const strikePrice = 50; // Example strike price
|
||||
const timeToExpiration = 0.25; // Example time to expiration (in years)
|
||||
const riskFreeRate = 0.03; // Example risk-free interest rate
|
||||
const optionType = 'call'; // Example option type ('call' or 'put')
|
||||
|
||||
const impliedVolatility = calculateImpliedVolatility({optionPrice, underlyingPrice, strikePrice, timeToExpiration, riskFreeRate, optionType});
|
||||
console.log('Implied Volatility:', impliedVolatility);
|
||||
*/
|
||||
|
||||
export function useLocalAtom(initialValue, deps){
|
||||
return useMemo(()=>$(initialValue), deps);
|
||||
}
|
||||
|
||||
/**
|
||||
* Define a "command": a function that mutates state. It's passed `get` and `set` functions to access Jotai atoms, in addition to any other parameters.
|
||||
* The function is memoized and is returned in the form of a Jotai "set" atom. It's called like any other function.
|
||||
* @param fn The function to memoize
|
||||
* @param deps Dependency array; when to re-memoize the function
|
||||
* @returns
|
||||
*/
|
||||
export function useCommand(fn, deps){
|
||||
return useSetAtom(useMemo(()=>$(null, fn),deps));
|
||||
}
|
@ -1,6 +1,5 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2017"]
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
}
|
Loading…
Reference in New Issue