├── .gitignore
├── README.md
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── CodingChallenge.vue
    └── main.js
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue project that implemements options strategy risk and reward analysis. 
 2 | ## Table of Contents
 3 | -#installation
 4 | -#usage
 5 | ##Installation
 6 | To install this project, follow these steps:
 7 | 1. Clone the repository.
 8 | 2. Navigate to the project directory.
 9 | 3. Install dependencies with `npm install` and Chart.js (npm install chart.js).
10 | 
11 | ## Usage
12 | Here are some examples of how to use this project:
13 | 1. Run: Start your Vue application (npm run serve if using Vue CLI).
14 | 2. Interaction: Input details for each options contract (strike price, type, bid, ask), click "Generate Chart" to see the risk & reward graph, and view the max profit, max loss, and break-even points.
15 | 
16 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-challenge",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "chart.js": "^4.4.3",
12 |     "core-js": "^3.8.3",
13 |     "vue": "^2.6.14"
14 |   },
15 |   "devDependencies": {
16 |     "@babel/core": "^7.12.16",
17 |     "@babel/eslint-parser": "^7.12.16",
18 |     "@vue/cli-plugin-babel": "~5.0.0",
19 |     "@vue/cli-plugin-eslint": "~5.0.0",
20 |     "@vue/cli-service": "~5.0.0",
21 |     "eslint": "^7.32.0",
22 |     "eslint-plugin-vue": "^8.0.3",
23 |     "vue-template-compiler": "^2.6.14"
24 |   },
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "parserOptions": {
35 |       "parser": "@babel/eslint-parser"
36 |     },
37 |     "rules": {}
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions",
42 |     "not dead"
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cook-blacklegsanji/aries-vue-challenge/03bf952ed2a6820b109ef84f8d2c7b950bb425d0/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <CodingChallenge :optionsData="sampleData" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import CodingChallenge from './components/CodingChallenge.vue'
 9 | 
10 | 
11 | export default {
12 |   name: 'App',
13 |   components: {
14 |     CodingChallenge
15 |   },
16 |   data() {
17 |     return {
18 |       sampleData: [
19 |         {
20 |           strike_price: 100,
21 |           type: 'Call',
22 |           bid: 10.05,
23 |           ask: 12.04,
24 |           long_short: 'long',
25 |           expiration_date: '2025-12-17'
26 |         },
27 |         {
28 |           strike_price: 102.50,
29 |           type: 'Call',
30 |           bid: 12.10,
31 |           ask: 14,
32 |           long_short: 'long',
33 |           expiration_date: '2025-12-17'
34 |         },
35 |         {
36 |           strike_price: 103,
37 |           type: 'Put',
38 |           bid: 14,
39 |           ask: 15.50,
40 |           long_short: 'short',
41 |           expiration_date: '2025-12-17'
42 |         },
43 |         {
44 |           strike_price: 105,
45 |           type: 'Put',
46 |           bid: 16,
47 |           ask: 18,
48 |           long_short: 'long',
49 |           expiration_date: '2025-12-17'
50 |         }
51 |       ]
52 |     };
53 |   }
54 | };
55 | </script>
56 | 
57 | <style>
58 | #app {
59 |   font-family: Arial, Helvetica, sans-serif;
60 |   display: flex;
61 |   flex-direction: column;
62 |   align-items: center;
63 |   justify-content: center;
64 | }
65 | 
66 | h1 {
67 |   margin-bottom: 20px;
68 |   text-align: center;
69 | }
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cook-blacklegsanji/aries-vue-challenge/03bf952ed2a6820b109ef84f8d2c7b950bb425d0/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/CodingChallenge.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div class="input-section">
  4 |       <h1>Options Profit Calculator</h1>
  5 |       <div v-for="(option, index) in options" :key="index" class="option-input">
  6 |         <div class="option-fields">
  7 |           <label class="option-label">Option {{ index + 1 }}:</label>
  8 |           <div class="field-group">
  9 |           </div>
 10 |           <div class="field-group">
 11 |             <label class="field-label">Strike Price:</label>
 12 |             <input type="number" v-model="option.strike_price" class="field-input" />
 13 |           </div>
 14 |           <div class="field-group">
 15 |             <label class="field-label">Buy/Sell:</label>
 16 |             <select v-model="option.long_short" class="field-input">
 17 |               <option value="long">Long</option>
 18 |               <option value="short">Short</option>
 19 |             </select>
 20 |           </div>
 21 |           <div class="field-group">
 22 |             <label class="field-label">Bid:</label>
 23 |             <input type="number" step="0.01" v-model="option.bid" class="field-input" />
 24 |           </div>
 25 |           <div class="field-group">
 26 |             <label class="field-label">Ask:</label>
 27 |             <input type="number" step="0.01" v-model="option.ask" class="field-input" />
 28 |           </div>
 29 |         </div>
 30 |       </div>
 31 |       <button @click="generateChart" class="generate-button">Generate Chart</button>
 32 |     </div>
 33 |     <div class="chart-section">
 34 |       <h2>Risk & Reward Graph</h2>
 35 |       <div class="chart-container">
 36 |         <canvas ref="myChart"></canvas>
 37 |       </div>
 38 |       <div class="stats">
 39 |         <p><strong>Max Profit:</strong> {{ maxProfit.toFixed(2) }}</p>
 40 |         <p><strong>Max Loss:</strong> {{ maxLoss.toFixed(2) }}</p>
 41 |         <p><strong>Break-Even Points:</strong> {{ breakEvenPoints.join(', ') }}</p>
 42 |       </div>
 43 |     </div>
 44 |   </div>
 45 | </template>
 46 | 
 47 | <script>
 48 |   import Chart from 'chart.js/auto';
 49 | 
 50 |   export default {
 51 |     props: {
 52 |       optionsData: {
 53 |         type: Array,
 54 |         required: true
 55 |       }
 56 |     },
 57 |     data() {
 58 |       return {
 59 |         options: [],
 60 |         underlyingPrices: Array.from({ length: 101 }, (_, i) => 80 + i), // Generate underlying prices from 80 to 180
 61 |         myChart: null,
 62 |         maxProfit: 0,
 63 |         maxLoss: 0,
 64 |         breakEvenPoints: []
 65 |       };
 66 |     },
 67 |     created() {
 68 |       // Initialize options with provided data
 69 |       this.options = this.optionsData.map(option => ({
 70 |         strike_price: option.strike_price,
 71 |         type: option.type,
 72 |         bid: option.bid,
 73 |         ask: option.ask,
 74 |         long_short: option.long_short,
 75 |         expiration_date: option.expiration_date
 76 |       }));
 77 |     },
 78 |     methods: {
 79 |       generateChart() {
 80 |         // Calculate profit/loss for each underlying price
 81 |         const profitLossData = this.calculateProfitLoss();
 82 | 
 83 |         // Ensure the chart is destroyed before re-rendering
 84 |         if (this.myChart) {
 85 |           this.myChart.destroy();
 86 |         }
 87 | 
 88 |         // Render the chart
 89 |         this.myChart = new Chart(this.$refs.myChart.getContext('2d'), {
 90 |           type: 'line',
 91 |           data: {
 92 |             labels: this.underlyingPrices.map(price => price.toString()),
 93 |             datasets: [{
 94 |               label: 'Profit/Loss',
 95 |               data: profitLossData,
 96 |               borderColor: 'rgb(75, 192, 192)',
 97 |               backgroundColor: 'rgba(75, 192, 192, 0.2)',
 98 |               borderWidth: 2,
 99 |               pointRadius: 0, // Hide points to keep the chart clean
100 |               fill: true
101 |             }]
102 |           },
103 |           options: {
104 |             scales: {
105 |               x: {
106 |                 title: {
107 |                   display: true,
108 |                   text: 'Underlying Price at Expiry'
109 |                 }
110 |               },
111 |               y: {
112 |                 title: {
113 |                   display: true,
114 |                   text: 'Profit/Loss'
115 |                 }
116 |               }
117 |             },
118 |             plugins: {
119 |               legend: {
120 |                 display: false // Hide legend for cleaner look
121 |               },
122 |               tooltip: {
123 |                 callbacks: {
124 |                   label: function(tooltipItem) {
125 |                     return tooltipItem.raw.toFixed(2); // Format tooltip to show profit/loss as decimal
126 |                   }
127 |                 }
128 |               }
129 |             }
130 |           }
131 |         });
132 | 
133 |         // Calculate and update max profit, max loss, and break-even points
134 |         this.calculateMaxProfitLoss(profitLossData);
135 |       },
136 |       calculateProfitLoss() {
137 |         const profitLossData = [];
138 | 
139 |         // Iterate over each underlying price
140 |         for (let price of this.underlyingPrices) {
141 |           let totalProfitLoss = 0;
142 | 
143 |           // Calculate profit/loss for each option contract
144 |           for (let option of this.options) {
145 |             let profitLoss = 0;
146 |             const strikePrice = option.strike_price;
147 |             const quantity = 1; // Assuming quantity is 1 for each option
148 | 
149 |             if (option.long_short === 'long') {
150 |               // Long call/put
151 |               profitLoss += Math.max(price - strikePrice - option.ask, 0) * quantity;
152 |             } else if (option.long_short === 'short') {
153 |               // Short call/put
154 |               profitLoss += Math.min(strikePrice - price - option.bid, 0) * quantity;
155 |             }
156 | 
157 |             totalProfitLoss += profitLoss;
158 |           }
159 | 
160 |           profitLossData.push(totalProfitLoss);
161 |         }
162 | 
163 |         return profitLossData;
164 |       },
165 |       calculateMaxProfitLoss(profitLossData) {
166 |         // Max Profit is the maximum value in profitLossData
167 |         this.maxProfit = Math.max(...profitLossData);
168 | 
169 |         // Max Loss is the minimum value in profitLossData
170 |         this.maxLoss = Math.min(...profitLossData);
171 | 
172 |         // Calculate Break-Even Points (where profit/loss is 0)
173 |         this.breakEvenPoints = this.underlyingPrices.filter((price, index) => {
174 |           return profitLossData[index] === 0;
175 |         });
176 |       }
177 |     }
178 |   };
179 | </script>
180 | 
181 | <style scoped>
182 | .field-input{
183 |   width: 150px;
184 |   padding: 8px;
185 |   border: 1px solid #ccc;
186 |   border-radius: 4px;
187 |   font-size: 14px;
188 |   outline: none;
189 |   padding-inline: 0px !important;
190 |   padding-left:2px;
191 | }
192 | 
193 | 
194 | .container {
195 |   max-width: 800px;
196 |   margin: 0 auto;
197 |   padding: 20px;
198 | }
199 | 
200 | .input-section {
201 |   background-color: #f0f0f0;
202 |   padding: 20px;
203 |   border-radius: 8px;
204 |   margin-bottom: 20px;
205 |   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
206 | }
207 | 
208 | .option-input {
209 |   margin-bottom: 10px;
210 | }
211 | 
212 | .option-fields {
213 |   display: grid;
214 |   grid-template-columns: 1fr 1fr;
215 |   gap: 10px;
216 | }
217 | 
218 | .option-label {
219 |   font-weight: bold;
220 | }
221 | 
222 | .field-group {
223 |   display: flex;
224 |   align-items: center;
225 |   justify-content: space-between;
226 | }
227 | 
228 | .field-label {
229 |   width: 120px;
230 | }
231 | 
232 | 
233 | 
234 | .generate-button {
235 |   background-color: #4CAF50;
236 |   color: white;
237 |   border: none;
238 |   padding: 10px 20px;
239 |   text-align: center;
240 |   text-decoration: none;
241 |   display: inline-block;
242 |   font-size: 16px;
243 |   margin-top: 10px;
244 |   cursor: pointer;
245 |   border-radius: 4px;
246 |   transition: background-color 0.3s ease;
247 | }
248 | 
249 | .generate-button:hover {
250 |   background-color: #45a049;
251 | }
252 | 
253 | .chart-section {
254 |   background-color: #fff;
255 |   padding: 20px;
256 |   border-radius: 8px;
257 |   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
258 | }
259 | 
260 | .chart-container {
261 |   position: relative;
262 |   height: 400px; /* Adjust height as needed */
263 | }
264 | 
265 | .stats {
266 |   margin-top: 20px;
267 |   text-align: center;
268 | }
269 | 
270 | @media (max-width: 768px) {
271 |   .option-fields {
272 |     grid-template-columns: 1fr;
273 |   }
274 |   .field-label {
275 |     width: 100%;
276 |   }
277 |   .field-input {
278 |     width: 100%;
279 |   }
280 | }
281 | </style>
282 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | module.exports = defineConfig({
3 |   transpileDependencies: true
4 | })
5 | 


--------------------------------------------------------------------------------