-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsingle-asset.html
344 lines (304 loc) · 15.7 KB
/
single-asset.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single Asset Risk</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@creativebulma/[email protected]/dist/bulma-tooltip.min.css" />
<link rel="stylesheet" href="css/bulmaswatch.min.css" />
<style>
.main {
display: flex;
min-height: 100vh;
flex-direction: column;
}
</style>
</head>
<body>
<div class="main">
<!-- Header -->
<section class="section pb-0">
<div class="columns">
<div class="column is-3" style="text-align:left;">
<button class="button is-rounded"><a href="multi-asset.html">Multiple Assets</a></button>
</div>
<div class="column is-6 has-text-centered">
<p class="title is-3">⚠ DyDx Risk Station ⚠</p>
</div>
<div class="column is-3" style="text-align:right;">
<button class="button is-rounded"><a href="sausage.html">Documentation</a></button>
</div>
</div>
<div class="columns pb-0">
<div class="column has-text-centered">
<p><i>The comprehensive DyDx risk calculator.</i></p>
</div>
</div>
</section>
<!-- Tiled Layout -->
<section class="section">
<div class="tile is-ancestor">
<!-- Contains all rows of tiles -->
<div class="tile is-vertical is-12">
<!-- Row 1: User Input & Basic Metrics -->
<div class="tile is-parent">
<!-- Coin & Params Box -->
<div class="tile is-parent">
<!-- The Selection Box -->
<!-- <div class="tile is-parent is-vertical box"> -->
<div class="tile is-parent is-vertical box">
<div class="tile is-parent">
<div class="tile is-child">
<div class="columns is-centered">
<h4 class="title is-4">Select a Contract  </h4>
<div data-tooltip="Choose from DyDx's perpetual contracts."><i class="fas fa-info-circle is-info"></i></div>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child">
<div class="columns is-centered">
<div class="field">
<div class="control">
<div class="select is-rounded">
<select id="assetSelect">
<option selected="true"></option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child">
<div class="columns" id="statusBarContainer">
<div class="column is-one-third is-offset-one-third" id="progressBarDiv"></div>
</div>
</div>
</div>
<div class="tile is-parent" id="volParamsParentDiv" style="display: none;">
<div class="tile is-parent">
<div class="tile is-child">
<div class="columns is-centered">
<h4 class="title is-4">Enter Position Size & Collateral  </h4>
<div data-tooltip="Choose from DyDx's perpetual contracts."><i class="fas fa-info-circle is-info"></i></div>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child">
<div class="columns is-centered">
<div class="column">
<label for="positionSize">Position Size</label>
<div class="has-tooltip-multiline" data-tooltip="The number of coins you are exposed to. This can be positive (e.g. +5 means you are long 5 coins) or negative (e.g. -5 means you are short 5 coins)" style="display: inline;">
<i class="fas fa-info-circle is-info"></i>
</div>
<input class="input is-rounded" type="text" id="positionSize" placeholder="e.g. -1 if short 1 coin">
</div>
<div class="column">
<label for="collateral">Account Collateral</label>
<div class="has-tooltip-multiline" data-tooltip="The amount of USDC in the DyDx account." style="display: inline;">
<i class="fas fa-info-circle is-info"></i>
</div>
<input class="input is-rounded" type="text" id="collateral" placeholder="e.g. 10000 for $10,000 USDC">
</div>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child">
<div class="columns is-centered">
<button class="button is-rounded" id="advancedOptionsButton">
Advanced Options   <i class="fas fa-arrow-down" id="advancedOptionsArrow"></i>
</button><br><br>
</div>
</div>
</div>
<div id="advancedOptions" style="display: none;">
<div class="tile is-parent">
<div class="tile is-child">
<div class="columns is-centered">
<div class="column">
<label for="annualDriftBox">Expected Annual Log-Returns</label>
<div class="has-tooltip-multiline" data-tooltip="The expected log-return of the perpetual one year from today. Log-returns is defined as ln(1+return_pct/100)." style="display: inline;">
<i class="fas fa-info-circle is-info"></i>
</div>
<input class="input is-rounded" type="text" id="annualDriftBox" placeholder="">
</div>
<div class="column">
<label for="annualVolBox">Expected Annual Volatility</label>
<div class="has-tooltip-multiline" data-tooltip="The expected standard deviation of log-returns one year from today. This default value comes from annualizing the standard deviation of hourly log-returns over the previous 30 days. Log-returns is defined as ln(1+return_pct/100)." style="display: inline;">
<i class="fas fa-info-circle is-info"></i>
</div>
<input class="input is-rounded" type="text" id="annualVolBox" placeholder="">
</div>
</div>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child">
<div class="columns is-centered">
<button class="button is-primary is-rounded" type="button" id="getPersonalStatsButton">
⚠ Get Risk Statistics ⚠
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Row 2: Probability of Stop Loss Graphs -->
<!-- <div class="tile is-parent is-vertical box" id="liqProbBox" style="display: none;"> -->
<div class="tile is-parent is-vertical" id="liqProbBox" style="display: none;">
<div class="tile is-parent">
<div class="tile is-parent" id="liquidationProbSection">
<div class="title">Liquidation Probabilities</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-parent">
<div class="tile is-child box" id="shortTermLiqProbBox">
<canvas id="shortTermLiqProbChart" width="200" height="150"></canvas>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box" id="longTermLiqProbBox">
<canvas id="longTermLiqProbChart" width="200" height="150"></canvas>
</div>
</div>
</div>
<div class="tile is-parent is-vertical">
<div class="tile is-parent">
<div class="title" id="monteCarloSection">Monte Carlo Price Simulation</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box" id="shortTermLiqProbBox">
<!-- <div class="chart-container" style="position: relative; height:40vh; width:80vw"> -->
<canvas id="monteCarloChart" width="200" height="150"></canvas>
<!-- </div> -->
<div class="tile is-parent">
<div class="tile is-child">
<div class="columns is-centered">
<div class="column">
<label for="stopLossBox">Stop Loss Price</label>
<div class="has-tooltip-multiline" data-tooltip="The price at which you would take loss on your position. This defaults to the liquidation price of the perpetual." style="display: inline;">
<i class="fas fa-info-circle is-info"></i>
</div>
<input class="input is-rounded" type="text" id="stopLossBox">
</div>
<div class="column">
<label for="takeProfitBox">Take Profit Price</label>
<div class="has-tooltip-multiline" data-tooltip="The price at which you would take profit on your position." style="display: inline;">
<i class="fas fa-info-circle is-info"></i>
</div>
<input class="input is-rounded" type="text" id="takeProfitBox" placeholder="">
</div>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child">
<div class="columns is-centered">
<div class="column">
<label for="nHoursMC">Look-Forward Hours</label>
<div class="has-tooltip-multiline" data-tooltip="The number of hours to look forward when running Monte Carlo simulations." style="display: inline;">
<i class="fas fa-info-circle is-info"></i>
</div>
<input class="input is-rounded" type="text" id="nHoursMC" placeholder="e.g. 24 for 24 hours">
</div>
<div class="column">
<label for="nCarloPaths">Number of Paths</label>
<div class="has-tooltip-multiline" data-tooltip="The number of Monte Carlo price paths to simulate." style="display: inline;">
<i class="fas fa-info-circle is-info"></i>
</div>
<input class="input is-rounded" type="text" id="nCarloPaths" placeholder="e.g. 10 for 10 Monte Carlo Paths">
</div>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child">
<div class="columns is-centered">
<button class="button is-primary is-rounded" type="button" id="runMCButton">
🎲   Run Monte Carlo Simulation   🎲
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Risk Statistics -->
<div class="tile is-parent" id="scalarCalculationsBox" style="display: none;">
<div class="tile is-parent is-vertical">
<div class="tile is-parent">
<h3 class="title">Risk Statistics</h3>
</div>
<div class="tile is-parent">
<div class="tile is-parent box">
<div class="tile is-parent">
<div class="tile is-child box">
<div class="columns is-centered">
<h4 class="title is-4">General Stats</h4>
</div>
<div class="columns is-centered">
<table class="table is-full-width">
<tbody id="scalarResultsTable"></tbody>
</table>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box" id="monteCarloResults">
<div class="columns is-centered">
<h4 class="title is-4">Monte Carlo Stats</h4>
</div>
<div class="columns is-centered">
<table class="table is-full-width">
<tbody id="mcResultsTable"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Risk Report -->
<div class="tile is-parent" id="riskReport" style="display: none;">
<div class="tile is-child">
<article class="message is-large is-primary">
<div class="message-header">
<p>Risk Synopsis</p>
</div>
<div class="message-body">
<p>
This position has a leverage ratio of <span id="levRatioSpan"></span>, and <span id="liqPriceMsgSpan"></span>
<br><br>
For more detail on how the calculations are performed, see <a href="sausage.html">how the sausage gets made</a>.
</p>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="js/footer.js"></script>
<script src="js/singleAsset.js"></script>
<script src="js/carlo.js"></script>
<script src="js/math.min.js"></script>
<script src="js/distributions.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-matrix@1"></script>
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.min.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</body>
</html>