Skip to content

Commit 2a039a0

Browse files
author
pseudocode88
committed
Add custom position size builder
1 parent e8046e8 commit 2a039a0

File tree

4 files changed

+147
-10
lines changed

4 files changed

+147
-10
lines changed

‎calc.js‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function cachePSBuilderSelectors() {
2828
el.psBuilder.sl = $('#txt-sl');
2929
el.psBuilder.tp = $('#txt-tp');
3030
el.psBuilder.lev = $('#txt-lev');
31-
31+
el.psBuilder.ps = $('#txt-ps');
3232
}
3333

3434
function cacheAccountSettingsSelectors() {
@@ -47,11 +47,40 @@ function eventBindings() {
4747
function eventBindingsForPSBuilder() {
4848
el.psBuilder.sl.on("keyup", calc);
4949
el.psBuilder.tp.on("keyup", calc);
50+
el.psBuilder.lev.on("keyup", calc);
51+
el.psBuilder.ps.on("keyup", calc);
5052
}
5153

5254
function calc() {
5355
data.psBuilder.sl = el.psBuilder.sl.val();
5456
data.psBuilder.tp = el.psBuilder.tp.val();
57+
data.psBuilder.lev = el.psBuilder.lev.val() || 1;
58+
data.psBuilder.ps = el.psBuilder.ps.val();
59+
60+
data.psBuilder.margin = data.psBuilder.ps / data.psBuilder.lev;
61+
data.psBuilder.margin = data.psBuilder.margin.toFixed(2);
62+
63+
data.psBuilder.risk = ((data.psBuilder.sl / 100) * data.psBuilder.lev) * data.psBuilder.margin
64+
data.psBuilder.risk = data.psBuilder.risk.toFixed(2);
65+
66+
data.psBuilder.gain = ((data.psBuilder.tp / 100) * data.psBuilder.lev) * data.psBuilder.margin
67+
data.psBuilder.gain = data.psBuilder.gain.toFixed(2);
68+
69+
// $('#lbl-ps').html(data.psBuilder.ps);
70+
$('#lbl-risk').html(data.psBuilder.risk);
71+
$('#lbl-gain').html(data.psBuilder.gain);
72+
// $('#lbl-lev').html(data.psBuilder.lev);
73+
$('#lbl-margin').html(data.psBuilder.margin);
74+
75+
if (data.psBuilder.risk < data.accountSettings.minRiskAmt) {
76+
$('#lbl-risk').removeClass('clr-warning clr-danger').addClass('clr-success');
77+
} else if (data.psBuilder.risk > data.accountSettings.minRiskAmt && data.psBuilder.risk < data.accountSettings.maxRiskAmt) {
78+
$('#lbl-risk').removeClass('clr-danger clr-success').addClass('clr-warning');
79+
} else {
80+
$('#lbl-risk').removeClass('clr-success clr-warning').addClass('clr-danger');
81+
}
82+
83+
// Suggestions
5584

5685
var riskLevels = {
5786
l: Math.floor(data.accountSettings.capital * ((data.accountSettings.minRisk - 1) / 100)),
@@ -129,12 +158,17 @@ function updateAccountSettingsData() {
129158
data.accountSettings.takerFee = $('#txt-taker-fee').val();
130159

131160
db.accountSettings.findOne({ exchange: 'default' }, (err, docs) => {
161+
var minRiskAmt = parseFloat(data.accountSettings.capital) * (parseFloat(data.accountSettings.minRisk) / 100),
162+
maxRiskAmt = parseFloat(data.accountSettings.capital) * (parseFloat(data.accountSettings.maxRisk) / 100);
163+
132164
if (!docs) {
133165
db.accountSettings.insert({
134166
exchange: 'default',
135167
capital: parseFloat(data.accountSettings.capital),
136168
minRisk: parseFloat(data.accountSettings.minRisk),
169+
minRiskAmt: minRiskAmt,
137170
maxRisk: parseFloat(data.accountSettings.maxRisk),
171+
maxRiskAmt: maxRiskAmt,
138172
makerFee: parseFloat(data.accountSettings.makerFee),
139173
takerFee: parseFloat(data.accountSettings.takerFee)
140174
})
@@ -145,7 +179,9 @@ function updateAccountSettingsData() {
145179
exchange: 'default',
146180
capital: parseFloat(data.accountSettings.capital),
147181
minRisk: parseFloat(data.accountSettings.minRisk),
182+
minRiskAmt: minRiskAmt,
148183
maxRisk: parseFloat(data.accountSettings.maxRisk),
184+
maxRiskAmt: maxRiskAmt,
149185
makerFee: parseFloat(data.accountSettings.makerFee),
150186
takerFee: parseFloat(data.accountSettings.takerFee)
151187
})
@@ -181,7 +217,9 @@ $(window).on('load', () => {
181217
if (docs) {
182218
data.accountSettings.capital = parseFloat(docs.capital);
183219
data.accountSettings.minRisk = parseFloat(docs.minRisk);
220+
data.accountSettings.minRiskAmt = parseFloat(docs.minRiskAmt);
184221
data.accountSettings.maxRisk = parseFloat(docs.maxRisk);
222+
data.accountSettings.maxRiskAmt = parseFloat(docs.maxRiskAmt);
185223
data.accountSettings.makerFee = parseFloat(docs.makerFee);
186224
data.accountSettings.takerFee = parseFloat(docs.takerFee);
187225
}

‎index.css‎

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -202,13 +202,26 @@ input[type=text]:focus {
202202
color: var(--content-secondary);
203203
}
204204

205+
.Section h3 {
206+
margin: 0;
207+
font-size: 16px;
208+
color: var(--content-secondary);
209+
}
210+
205211
.Section p.sub-label {
206212
color: var(--content-muted);
207213
font-size: 14px;
208214
line-height: 1.4;
209215
margin: 0;
210216
}
211217

218+
.BestPostion {
219+
font-size: 16px;
220+
font-weight: 600;
221+
line-height: 1.4;
222+
color: var(--content-success);
223+
}
224+
212225
.RList {
213226
width: 100%;
214227
}
@@ -217,7 +230,7 @@ input[type=text]:focus {
217230
width: 100%;
218231
justify-content: space-between;
219232
border-bottom: 1px solid var(--static-border-primary);
220-
padding: 0 0 6px 0;
233+
padding: 10px 0;
221234
}
222235

223236
.RList-Title p {
@@ -298,7 +311,7 @@ h1 {
298311
hr {
299312
border: 0;
300313
border-top: 1px solid var(--static-border-primary);
301-
margin: 24px 0;
314+
margin: 8px 0;
302315
}
303316

304317
input[type=range] {
@@ -312,6 +325,17 @@ input[type=range] {
312325
margin: 16px 0;
313326
}
314327

328+
.InlineFlag {
329+
padding: 16px;
330+
background-color: var(--int-support-warning-secondary-default);
331+
border-radius: 8px;
332+
}
333+
334+
.InlineFlag p {
335+
font-size: 14px;
336+
font-weight: 500;
337+
}
338+
315339
/** Button **/
316340
button {
317341
border-radius: 100px;
@@ -378,4 +402,43 @@ button {
378402

379403
.FormAccountSettings-ButtonGroup button:first-child {
380404
width: 70%;
405+
}
406+
407+
.PositionSize {
408+
width: 100%;
409+
padding: 0;
410+
border-radius: 16px;
411+
box-sizing: border-box;
412+
}
413+
414+
.PositionSize-Item {
415+
padding: 12px 0;
416+
width: 100%;
417+
border-bottom: 1px solid var(--static-border-primary);
418+
}
419+
420+
.PositionSize-Item:first-child {
421+
padding-top: 0;
422+
}
423+
424+
.PositionSize-Item:last-child {
425+
border: 0;
426+
}
427+
428+
.PositionSize-Item p {
429+
font-size: 14px;
430+
font-weight: 600;
431+
}
432+
433+
.PositionSize-Item-Label {
434+
width: 100%;
435+
color: var(--content-primary);
436+
margin: 0;
437+
}
438+
439+
.PositionSize-Item-Value {
440+
width: 100%;
441+
color: var(--content-secondary);
442+
margin: 0;
443+
text-align: right;
381444
}

‎index.html‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,29 @@ <h2>Position Size Builder</h2>
2222
settings.</p>
2323
</div>
2424

25+
<div class="PositionSize fc">
26+
<!-- <div class="PositionSize-Item fr">
27+
<p class="PositionSize-Item-Label">Position Size</p>
28+
<p id="lbl-ps" class="PositionSize-Item-Value">0</p>
29+
</div> -->
30+
<div class="PositionSize-Item fr">
31+
<p class="PositionSize-Item-Label">Capital Risk</p>
32+
<p id="lbl-risk" class="PositionSize-Item-Value">0</p>
33+
</div>
34+
<div class="PositionSize-Item fr">
35+
<p class="PositionSize-Item-Label">Potential Gain</p>
36+
<p id="lbl-gain" class="PositionSize-Item-Value">0</p>
37+
</div>
38+
<!-- <div class="PositionSize-Item fr">
39+
<p class="PositionSize-Item-Label">Leverage</p>
40+
<p id="lbl-lev" class="PositionSize-Item-Value">0</p>
41+
</div> -->
42+
<div class="PositionSize-Item fr">
43+
<p class="PositionSize-Item-Label">Margin</p>
44+
<p id="lbl-margin" class="PositionSize-Item-Value">0</p>
45+
</div>
46+
</div>
47+
2548
<div class="fr f-wrap-24">
2649
<div class="strech">
2750
<label>Stop Loss %</label>
@@ -33,13 +56,25 @@ <h2>Position Size Builder</h2>
3356
<input type="text" id="txt-tp" value="1" />
3457
</div>
3558

36-
<!-- <div>
59+
<div class="strech">
3760
<label>Leverage</label>
38-
<input type="text" id="txt-lev" value="1" />
39-
</div> -->
61+
<input type="text" id="txt-lev" value="10" />
62+
</div>
63+
</div>
64+
65+
<div class="strech">
66+
<label>Position Size</label>
67+
<input type="text" id="txt-ps" value="100" />
4068
</div>
4169

42-
<div class="RList">
70+
</section>
71+
72+
<section class="Section">
73+
<div class="RList fc f-wrap-12">
74+
<h2>Position Size Suggestion</h2>
75+
<p class="BestPostion">Best position size range: <span id="best-position">30 - 90</span></p>
76+
<p class="sub-label">Below is a list of different position sizes calculated based on your risk per trade</p>
77+
<div>
4378
<div class="fr RList-Title">
4479
<p>Risk</p>
4580
<p class="RList-Label-right">Size</p>
@@ -81,7 +116,7 @@ <h2>Position Size Builder</h2>
81116
<p id="xh-margin" class="RList-Label-right">0</p>
82117
</div>
83118
</div>
84-
119+
</div>
85120
</div>
86121
</section>
87122

‎index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ const { app, BrowserWindow } = require('electron');
33
const createWindow = () => {
44
const win = new BrowserWindow({
55
width: 520,
6-
height: 768,
6+
minWidth: 520,
7+
height: 1000,
78
webPreferences: {
89
nodeIntegration: true,
910
contextIsolation: false
1011
}
1112
})
1213

13-
win.resizable = false;
14+
win.resizable = true;
1415
win.setAlwaysOnTop(true);
1516

1617
win.loadFile('index.html')

0 commit comments

Comments
 (0)