Skip to content

Commit

Permalink
render delta hedging in print mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@mnsrulz
mnsrulz committed Sep 25, 2024
1 parent 4228e3d commit 26d8dec
Showing 1 changed file with 54 additions and 51 deletions.
105 changes: 54 additions & 51 deletions src/components/DeltaGammaHedging.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ChartsReferenceLine } from '@mui/x-charts';
import { OptionsHedgingData, useCachedDates, useDeltaGammaHedging } from "@/lib/socket";
import { getColorPallete } from "@/lib/color";
import { humanAbsCurrencyFormatter } from "@/lib/formatters";
import { useQueryState, parseAsInteger, parseAsStringEnum } from "nuqs";
import { useQueryState, parseAsInteger, parseAsStringEnum, parseAsBoolean } from "nuqs";
import { useState } from "react";

interface ITickerProps {
Expand Down Expand Up @@ -117,6 +117,7 @@ export const Expo = (props: IExpo) => {

export const DeltaGammaHedging = (props: ITickerProps) => {
const { onClose } = props;
const [printMode] = useQueryState('print', parseAsBoolean.withDefault(false));
const [dte, setDte] = useQueryState('dte', parseAsInteger.withDefault(50));
const [strikeCounts, setStrikesCount] = useQueryState('sc', parseAsInteger.withDefault(30));
const { cachedDates } = useCachedDates(props.symbol);
Expand All @@ -130,53 +131,54 @@ export const DeltaGammaHedging = (props: ITickerProps) => {
return (
<Dialog fullWidth={true} fullScreen={true} open={true} onClose={onClose} aria-labelledby="delta-hedging-dialog" >
<DialogContent style={{ padding: '8px' }}>
<FormControl sx={{ marginTop: 1 }} size="small">
<InputLabel>DTE</InputLabel>
<Select
id="dte"
value={dte}
label="DTE"
onChange={(e) => setDte(e.target.value as number)}
>
<MenuItem value={30}>30</MenuItem>
<MenuItem value={50}>50</MenuItem>
<MenuItem value={90}>90</MenuItem>
<MenuItem value={180}>180</MenuItem>
<MenuItem value={400}>400</MenuItem>
<MenuItem value={1000}>1000</MenuItem>
</Select>
</FormControl>
<FormControl sx={{ m: 1 }} size="small">
<InputLabel>Strikes</InputLabel>
<Select
id="strikes"
value={strikeCounts}
label="Strikes"
onChange={(e) => setStrikesCount(e.target.value as number)}
>
<MenuItem value={20}>20</MenuItem>
<MenuItem value={30}>30</MenuItem>
<MenuItem value={50}>50</MenuItem>
<MenuItem value={80}>80</MenuItem>
<MenuItem value={100}>100</MenuItem>
</Select>
</FormControl>
<FormControl sx={{ m: 1, minWidth: 120 }} size="small">
<InputLabel>Data Mode</InputLabel>
<Select
id="data-mode"
value={dataMode}
label="Data Mode"
onChange={(e) => setDataMode(e.target.value)}
>
<MenuItem value="Live">Live</MenuItem>
{
cachedDates.map(c => {
return <MenuItem key={c.dt} value={c.dt}>{c.dt}</MenuItem>
})
}
</Select>
</FormControl>
{!printMode && (<Box>
<FormControl sx={{ marginTop: 1 }} size="small">
<InputLabel>DTE</InputLabel>
<Select
id="dte"
value={dte}
label="DTE"
onChange={(e) => setDte(e.target.value as number)}
>
<MenuItem value={30}>30</MenuItem>
<MenuItem value={50}>50</MenuItem>
<MenuItem value={90}>90</MenuItem>
<MenuItem value={180}>180</MenuItem>
<MenuItem value={400}>400</MenuItem>
<MenuItem value={1000}>1000</MenuItem>
</Select>
</FormControl>
<FormControl sx={{ m: 1 }} size="small">
<InputLabel>Strikes</InputLabel>
<Select
id="strikes"
value={strikeCounts}
label="Strikes"
onChange={(e) => setStrikesCount(e.target.value as number)}
>
<MenuItem value={20}>20</MenuItem>
<MenuItem value={30}>30</MenuItem>
<MenuItem value={50}>50</MenuItem>
<MenuItem value={80}>80</MenuItem>
<MenuItem value={100}>100</MenuItem>
</Select>
</FormControl>
<FormControl sx={{ m: 1, minWidth: 120 }} size="small">
<InputLabel>Data Mode</InputLabel>
<Select
id="data-mode"
value={dataMode}
label="Data Mode"
onChange={(e) => setDataMode(e.target.value)}
>
<MenuItem value="Live">Live</MenuItem>
{
cachedDates.map(c => {
return <MenuItem key={c.dt} value={c.dt}>{c.dt}</MenuItem>
})
}
</Select>
</FormControl>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs
value={gexTab}
Expand All @@ -190,15 +192,16 @@ export const DeltaGammaHedging = (props: ITickerProps) => {
<Tab label="Gex" value={'GEX'}></Tab>
</Tabs>
</Box>
</Box>)}
{
isLoading ? <LinearProgress /> : data ? <Expo data={data} exposure={gexTab == DexGexType.DEX ? 'dex' : 'gex'} symbol={props.symbol} dte={dte} /> : <div>no data...</div>
}
</DialogContent>
<DialogActions>
{!printMode && (<DialogActions>
<Button variant="contained" onClick={onClose} color="secondary">
Close
</Button>
</DialogActions>
</Dialog>
</DialogActions>)}
</Dialog >
);
};

0 comments on commit 26d8dec

Please sign in to comment.