From 26d8dec445b6180ae26976e034bd86fc79eecf46 Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Tue, 24 Sep 2024 23:34:29 -0400
Subject: [PATCH] render delta hedging in print mode

---
 src/components/DeltaGammaHedging.tsx | 105 ++++++++++++++-------------
 1 file changed, 54 insertions(+), 51 deletions(-)

diff --git a/src/components/DeltaGammaHedging.tsx b/src/components/DeltaGammaHedging.tsx
index b906c24..c9a414d 100644
--- a/src/components/DeltaGammaHedging.tsx
+++ b/src/components/DeltaGammaHedging.tsx
@@ -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 {
@@ -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);
@@ -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}
@@ -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 >
     );
 };
\ No newline at end of file