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

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){