joe/OptiTrainer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Selectable column information

Browse Source
This commit is contained in:
Joe Tretter
2020-04-30 17:29:31 -05:00
parent dc5841f2a9
commit 5b747069dd
4 changed files with 88 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/css/optiTrainer.css
View File

@@ -105,6 +105,8 @@ body {
#frmOrder ul li {
border-top:1px solid blue;
font-family: monospace;
font-size: 12px;
}
#frmOrder div.orderItemLine2 {
@@ -148,7 +150,12 @@ body {
position:absolute;
left:300;
top:80px;
width:800px;
min-width:800px;
}
.btn-myColSelection {
padding-top: 0;
padding-bottom: 0;
}
.ralign { text-align:right; }
@@ -172,8 +179,8 @@ body {
}
.plusMinusContainer{
position: absolute;
margin-top: -20;
left: 250;
margin-top: -17;
left: 238;
}
.priceClick {

66
client/js/optiTrainer.js
View File

@@ -31,7 +31,10 @@ let getCallArtifact=(callData,allColumns)=>{
let classes=(callData.delta < 0.5)?" otm":" itm";
for (let i=0;i< allColumns.length;i++){
let cellValue=Number(callData[allColumns[i]]).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
let cellValue=callData[allColumns["c"+(i+1)]];
if (!isNaN(cellValue)) {
cellValue=Number(cellValue).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
}
artifact+=`
<td class="${classes} ralign">${cellValue}</td>
@@ -56,7 +59,10 @@ let getPutArtifact=(putData,allColumns)=>{
let classes=(putData.delta > -0.5)?" otm":" itm";
for (let i=0;i< allColumns.length;i++){
let cellValue=Number(putData[allColumns[i]]).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
let cellValue=putData[allColumns["c"+(i+1)]];
if (!isNaN(cellValue)) {
cellValue=Number(cellValue).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
}
artifact+=`
<td class="${classes} ralign">${cellValue}</td>
@@ -86,7 +92,8 @@ let getStrikeArtifact=(strike)=>{
let fillChainRow=(rowData)=>{
let theTable=document.getElementById("tblOptionChain");
let theNewRow=theTable.insertRow(-1);
let allColumns=["delta","theta","vega"];
let allColumns=JSON.parse(localStorage["KPIs"]);
allColumns.length=3;
theNewRow.innerHTML=getCallArtifact(rowData.call,allColumns) + getStrikeArtifact(rowData.strike) + getPutArtifact(rowData.put,allColumns);
}
@@ -121,13 +128,49 @@ let fillChainTable=(expirationDate,dateOnly)=>{
}
}
let getColumnSelection=(colNum)=>{
if (localStorage["KPIs"] === undefined) {
localStorage["KPIs"] = '{"c1":"delta","c2":"theta","c3":"vega"}';
}
let displayColumnKPIs=JSON.parse(localStorage["KPIs"]);
let selectedValue=displayColumnKPIs["c"+colNum];
let capitalize=(theOption)=>{
// add a blank before each Upper Case letter
let optionText=theOption.replace(/([A-Z])/g, ' $1').trim();
// make the first letter upper case
optionText= optionText.charAt(0).toUpperCase() + optionText.substring(1);
return(optionText);
}
let allOptions=Object.keys(dta.callExpDateMap[Object.keys(dta.callExpDateMap)[0]][Object.keys(dta.callExpDateMap[Object.keys(dta.callExpDateMap)[0]])[0]][0]);
allOptions=allOptions.sort();
let me=`
<div class="dropdown myColDropDown">
<button class="btn btn-default dropdown-toggle btn-myColSelection" type="button" id="colMenu" + ${colNum} data-toggle="dropdown" aria-expanded="false">${capitalize(selectedValue)}<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="colMenu" + ${colNum}>
`;
for (let i=0; i<allOptions.length;i++){
let theOption=allOptions[i];
if ((theOption==="bid") || (theOption === "ask")) { continue; } // bid and ask are fix.
me += `<li role="presentation"><a role="menuitem" tabindex="-1" onclick="myTblOptionChain.changeColKPI(${colNum}, '${theOption}')">${capitalize(theOption)}</a></li>`;
}
me += `
</ul>
</div>
`;
return(me);
}
let displayOptionChain=()=>{
let app=window.document.getElementById('app');
$("#wrapperOptionChain").remove();
let newNode=document.createElement("div");
newNode.setAttribute("id","wrapperOptionChain");
newNode.innerHTML=`
<div class="container-fluid " id="frmOptionChainMain">
<div class="container-fluid col-md-9" id="frmOptionChainMain">
<div class="col-md-12">
<ul class="nav nav-tabs">
${Object.keys(dta.callExpDateMap).map(datesOut).join('')}
@@ -140,7 +183,7 @@ let displayOptionChain=()=>{
<th colspan="4" class='center'>CALLS</th><th></th><th colspan="4" class='center'>PUTS</th>
</tr>
<tr>
<th class='ralign'>Delta</th><th class='ralign'>Theta</th><th class='ralign'>Vega</th><th class='ralign'>Bid</th><th class='ralign'>Ask</th><th class='center'>Strike</th><th class='ralign'>Delta</th><th class='ralign'>Theta</th><th class='ralign'>Vega</th><th class='ralign'>Bid</th><th class='ralign'>Ask</th>
<th class='ralign'>${getColumnSelection(1)}</th><th class='ralign'>${getColumnSelection(2)}</th><th class='ralign'>${getColumnSelection(3)}</th><th class='ralign'>Bid</th><th class='ralign'>Ask</th><th class='center'>Strike</th><th class='ralign'>${getColumnSelection(1)}</th><th class='ralign'>${getColumnSelection(2)}</th><th class='ralign'>${getColumnSelection(3)}</th><th class='ralign'>Bid</th><th class='ralign'>Ask</th>
</tr>
</thead>
<tbody>
@@ -151,7 +194,20 @@ let displayOptionChain=()=>{
</div>
`;
app.appendChild(newNode)
myTblOptionChain = $("#tblOptionChain")[0];
myTblOptionChain.allColumns=["delta","theta","vega"];
myTblOptionChain.changeColKPI=(colNum, kpi)=>{
console.log("ChangeKPI",colNum,kpi);
let displayColumnKPIs=JSON.parse(localStorage["KPIs"]);
displayColumnKPIs["c"+colNum]=kpi;
localStorage["KPIs"]=JSON.stringify(displayColumnKPIs);
displayOptionChain();
}
// "click" the date if it's the context dte
if ($(".nav").find(".active").children().length > 0){

18
client/js/orderFrame.js
View File

@@ -55,13 +55,27 @@ let createOrderFrame=()=>{
me.parentElement.removeChild(me);
}
let splitOptionDetails=(input)=>{
let symbolRest=input.split("_");
let symbol=symbolRest[0];
let putCall=(symbolRest[1].indexOf("P")>-1)?"P":"C";
let dateStrike = symbolRest[1].split(putCall);
let date = dateStrike[0].replace(/(..)(..)(..)/,"20$3-$1-$2");
let strike = dateStrike[1];
return({symbol:symbol, putCall:putCall, date:date, strike:strike });
}
let optionDetails=splitOptionDetails(optionData.symbol);
me.innerHTML=`
<a class='danger' onclick='this.parentElement.removeFromOrder();'>[X]</a> <b>${myMasterFilter.selectedDate}|${myMasterFilter.selectedTime.substr(0,5)}</b>|<span class="opentype${openType}">${openType}</span>@<span class="singlePrice">${Math.abs(me.singleCostAmount).toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2})}</span>|<span class='quantity'>${me.quantity}</span>
<a class='danger' onclick='this.parentElement.removeFromOrder();'>[X]</a> <b>${myMasterFilter.selectedDate}|${myMasterFilter.selectedTime.substr(0,5)}</b>|<span class="opentype${openType}">${((openType==="buy")?" ":"") + openType}</span>@<span class="singlePrice">${Math.abs(me.singleCostAmount).toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2}).padStart(7,"\xa0")}</span>|<span class='quantity'>${me.quantity}</span>
<div class='plusMinusContainer'>
<a class='plusMinus' onclick='this.parentElement.parentElement.increaseQty();'>[+]</a><a class='plusMinus' onclick='this.parentElement.parentElement.decreaseQty();'>[-]</a>
</div>
<div class='orderItemLine2'>
${optionData.symbol} =&gt; <span class='totalCost'>${me.totalCostAmount.toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2})}</span>
${optionDetails.symbol} ${optionDetails.date} ${optionDetails.putCall} ${optionDetails.strike} =&gt; <span class='totalCost'>${me.totalCostAmount.toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2})}</span>
</div>
`;