Add card for net greeks.

advait · Mar 25, 2020 · 544dd7e · 544dd7e
1 parent dcaf553
commit 544dd7e
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 6 deletions.
diff --git a/client/src/left-drawer.tsx b/client/src/left-drawer.tsx
@@ -1,12 +1,12 @@
-import {Drawer, Theme} from "@material-ui/core";
+import {Card, Drawer, Theme} from "@material-ui/core";
 import Divider from "@material-ui/core/Divider";
 import Grid from "@material-ui/core/Grid";
 import {makeStyles} from '@material-ui/core/styles';
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import _ from "lodash";
 import React from "react";
-import {OptionLegCard} from "./option-leg-card";
+import {OptionLegCard, PortfolioSummary} from "./option-leg-card";
 import {Leg, Portfolio, portfolioEntryCost} from "./portfolio";
 
 export const drawerWidth = 350;
@@ -21,6 +21,7 @@ const drawerStyles = makeStyles((theme: Theme) => ({
   },
   drawerPaper: {
     width: drawerWidth,
+    overflowX: "hidden",
   },
   drawerTypography: {
     paddingTop: theme.spacing(2),
@@ -101,6 +102,9 @@ export function LeftDrawer(props: LeftDrawerProps) {
             <OptionLegCard leg={leg} setLeg={setLeg(i)} deleteLeg={deleteLeg(i)}/>)
         }
 
+        <PortfolioSummary
+            portfolio={props.portfolio} />
+
         <Typography className={classes.drawerTypographySmall} color="textSecondary">Entry Cost</Typography>
         <Typography
             className={classes.drawerTypographySmall}

diff --git a/client/src/option-leg-card.tsx b/client/src/option-leg-card.tsx
@@ -9,7 +9,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import clsx from 'clsx';
 import moment from "moment";
 import React, {useState} from "react";
-import {Leg, PutCall} from "./portfolio";
+import {Leg, Portfolio, PutCall} from "./portfolio";
 
 
 export type OptionLegCardProps = {
@@ -244,3 +244,143 @@ export function OptionLegCard(props: OptionLegCardProps) {
       </Card>
   )
 }
+
+export interface PortfolioSummaryProps {
+  portfolio: Portfolio,
+}
+
+// @ts-ignore
+const portfolioSummaryStyles = makeStyles((theme: Theme) => ({
+  card: {
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(1),
+    paddingTop: theme.spacing(2),
+    overflow: "visible",
+  },
+  cardHeader: {
+    cursor: "pointer",
+  },
+  expand: {
+    transform: 'rotate(0deg)',
+    marginLeft: 'auto',
+    transition: theme.transitions.create('transform', {
+      duration: theme.transitions.duration.shortest,
+    }),
+  },
+  expandOpen: {
+    transform: 'rotate(180deg)',
+  },
+  contentRow: {
+    display: "flex",
+    alignItems: "center",
+    marginBottom: theme.spacing(2),
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2),
+    justifyContent: "space-between",
+  },
+  largeButtonGroup: {
+    marginTop: theme.spacing(2),
+    flexGrow: 1,
+  },
+  largeButton: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  },
+  smallButtonGroup: {
+    marginRight: theme.spacing(2),
+  },
+  smallButton: {
+    padding: 0,
+    margin: 0,
+    minWidth: "24px",
+  },
+  descriptionValueParent: {
+    display: "flex",
+    flexShrink: 1,
+    flexBasis: "0px",
+    flexDirection: "column",
+  },
+  description: {
+    textAlign: "center",
+    fontSize: "12px",
+    color: grey[500],
+    marginTOp: "-2px",
+    marginBottom: "3px",
+  },
+  value: {
+    textAlign: "center",
+    fontSize: "0.875rem",
+  },
+}));
+
+export function PortfolioSummary(props: PortfolioSummaryProps) {
+  const classes = portfolioSummaryStyles();
+
+  return (
+      <Card className={classes.card}>
+        <Box flexDirection="row" className={classes.contentRow}>
+          <Tooltip title="Delta - how much the option value changes for every dollar increase in stock price">
+            <div className={classes.descriptionValueParent}>
+              <span className={classes.description}>&#x394;</span>
+              <span className={classes.value}>
+                0.13
+            </span>
+            </div>
+          </Tooltip>
+          <Tooltip
+              title="Delta% - how much the option value changes (as a % of max loss) for every dollar increase in stock price">
+            <div className={classes.descriptionValueParent}>
+              <span className={classes.description}>&#x394;%</span>
+              <span className={classes.value}>
+                0.13
+            </span>
+            </div>
+          </Tooltip>
+          <Tooltip
+              title="Gamma - how much Delta changes for every dollar increase in stock price">
+            <div className={classes.descriptionValueParent}>
+              <span className={classes.description}>&#x194;</span>
+              <span className={classes.value}>
+                0.13
+            </span>
+            </div>
+          </Tooltip>
+          <Tooltip
+              title="Gamma% - how much Delta% changes for every dollar increase in stock price">
+            <div className={classes.descriptionValueParent}>
+            <span className={classes.description}>
+                	&#x194;%
+            </span>
+              <span className={classes.value}>
+                22%
+              </span>
+            </div>
+          </Tooltip>
+          <Tooltip
+              title="Theta - how much the option value changes every day due to time decay">
+            <div className={classes.descriptionValueParent}>
+            <span className={classes.description}>
+              &#x3F4;
+            </span>
+              <span className={classes.value}>
+                -3.3
+            </span>
+            </div>
+          </Tooltip>
+          <Tooltip
+              title="Theta% - how much the option value changes (as a % of max loss) every day due to time decay">
+            <div className={classes.descriptionValueParent}>
+            <span className={classes.description}>
+                &#x3F4;%
+            </span>
+              <span className={classes.value}>
+                -4.3%
+            </span>
+            </div>
+          </Tooltip>
+        </Box>
+      </Card>
+  )
+}
diff --git a/client/src/portfolio.ts b/client/src/portfolio.ts
@@ -24,6 +24,7 @@ export type Leg = {
    * The value of this option leg at entry time (used to compute per-leg IV).
    */
   entryCost?: number,
+  iv: number,
 }
 
 export enum PutCall {
@@ -36,9 +37,8 @@ export enum PutCall {
  */
 export const portfolio: Portfolio = {
   legs: [
-    {quantity: -1, putCall: PutCall.CALL, k: 6, t: moment().add(120, 'days')},
-    {quantity: 1, putCall: PutCall.CALL, k: 3, t: moment().add(120, 'days')},
-    // {quantity: 1, type: LegType.CALL, k: 650, t: moment().add(1, 'year')},
+    {quantity: -1, putCall: PutCall.CALL, k: 6, t: moment().add(120, 'days'), iv: 0.7},
+    {quantity: 1, putCall: PutCall.CALL, k: 3, t: moment().add(120, 'days'), iv: 0.7},
   ],
   entryTime: moment(),
 };