Skip to content

Commit 458cb48

Browse files
SmartDev555SmartDev555
committed
risk-reward graph
0 parents  commit 458cb48

31 files changed

+8798
-0
lines changed

‎.eslintrc.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es2021": true,
5+
"amd": true,
6+
"node": true,
7+
"jest": true
8+
},
9+
"extends": [
10+
"eslint:recommended",
11+
"plugin:react/recommended",
12+
"plugin:prettier/recommended",
13+
"plugin:@typescript-eslint/recommended"
14+
],
15+
"overrides": [],
16+
"parser": "@typescript-eslint/parser",
17+
"parserOptions": {
18+
"ecmaVersion": "latest",
19+
"sourceType": "module"
20+
},
21+
"plugins": ["react", "@typescript-eslint"],
22+
"rules": {
23+
"prettier/prettier": ["warn"],
24+
"no-unused-vars": ["warn"],
25+
"no-debugger": ["warn"],
26+
"react/react-in-jsx-scope": "off",
27+
"react/no-children-prop": "off",
28+
"@typescript-eslint/no-explicit-any": "off",
29+
"@typescript-eslint/no-non-null-assertion": "off",
30+
"@typescript-eslint/no-empty-function": "off"
31+
}
32+
}

‎.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.prettierrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"semi": true,
3+
"tabWidth": 2,
4+
"singleQuote": true,
5+
"trailingComma": "none",
6+
"jsxBracketSameLine": true,
7+
"endOfLine": "lf"
8+
}

‎README.md

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
## What I've done
2+
- Installed TailwindCss and HeadlessUI for styling
3+
- Installed Echarts for drawing graph
4+
- User can select one option among four default options
5+
- User can test with custom option
6+
7+
![img.png](img.png)
8+
9+
## How I've done
10+
11+
- Used this algorithm to calculate x axes and y axes values to draw chart
12+
```typescript
13+
export const generateChartData = (option: OptionStrategy): ChartData => {
14+
const { strike_price, type, bid, ask, long_short, expiration_date } = option;
15+
16+
const priceX: string[] = [];
17+
const profitLossY: number[] = [];
18+
19+
const dateRange = getExpiryPriceRange(expiration_date);
20+
21+
for (let price = 0; price <= dateRange; price++) {
22+
let profit = 0;
23+
24+
if (type === OptionStrategyTypeEnum.Call) {
25+
profit =
26+
long_short === OptionStrategyLongShortEnum.Long
27+
? Math.max(0, price - strike_price) - ask
28+
: Math.min(0, strike_price - price) + bid;
29+
} else if (type === OptionStrategyTypeEnum.Put) {
30+
profit =
31+
long_short === OptionStrategyLongShortEnum.Long
32+
? Math.max(0, strike_price - price) - ask
33+
: Math.min(0, price - strike_price) + bid;
34+
}
35+
36+
priceX.push(moment().add(price, 'day').format('YYYY-MM-DD'));
37+
profitLossY.push(profit);
38+
}
39+
40+
return {
41+
x: priceX,
42+
y: profitLossY
43+
};
44+
};
45+
```
46+
47+
- Used this algorithm to calculate the risk-reward ratio and profit probability
48+
```typescript
49+
export const getRiskRewardRatio = (
50+
profitLoss: number[]
51+
): {
52+
ratio: string;
53+
maxProfit: number;
54+
maxLoss: number;
55+
} => {
56+
const maxProfit = Math.max(...profitLoss);
57+
const maxLoss = Math.min(...profitLoss);
58+
59+
const ratio = maxProfit / Math.abs(maxLoss);
60+
61+
return {
62+
ratio: `1 : ${Math.floor(ratio)}`,
63+
maxProfit,
64+
maxLoss
65+
};
66+
};
67+
```
68+
```typescript
69+
export const getProfitProbability = (profitLoss: number[]): string => {
70+
const totalScenarios = profitLoss.length;
71+
const profitableScenarios = profitLoss.filter((profit) => profit > 0).length;
72+
73+
return ((profitableScenarios / totalScenarios) * 100).toFixed(0);
74+
};
75+
```
76+
77+
78+
## How to run
79+
80+
- Install packages:
81+
```bash
82+
npm install
83+
```
84+
- Run project on localhost:8000
85+
```bash
86+
npm run dev
87+
```
88+
- Testing
89+
```bash
90+
npm run test
91+
```
92+
93+
node version: 16.15.0
94+

‎img.png

116 KB
Loading

‎index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>React Starter</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)