228 lines
7.6 KiB
JavaScript
228 lines
7.6 KiB
JavaScript
var allCombinations;
|
|
var optionChainContext={};
|
|
|
|
$(document).ready(_=>{
|
|
dta={};
|
|
createOrderFrame();
|
|
createMasterFilterFrame();
|
|
|
|
let selectDataFirst=_=>{
|
|
return {enabled:false, tooltip:"Select a Ticker!"};
|
|
}
|
|
$("#datePicker").datepicker({beforeShowDay:selectDataFirst});
|
|
|
|
let selectedSymbol;
|
|
try {
|
|
selectedSymbol=JSON.parse(localStorage["defaults"]).Symbol;
|
|
document.getElementById("frmMasterFilter").symbolChanged(selectedSymbol);
|
|
} catch (ex) {
|
|
console.log("No symbol found to preset",ex);
|
|
}
|
|
|
|
});
|
|
|
|
|
|
let dta={};
|
|
|
|
let datesOut=(dateInp)=>{
|
|
let date=dateInp.split(':')[0];
|
|
let dte=dateInp.split(':')[1];
|
|
let attrActive="";
|
|
if (optionChainContext.selectedDate === date) {
|
|
attrActive="active";
|
|
//fillChainTable(dateInp,date);
|
|
}
|
|
|
|
return `<li class="nav-item ${attrActive}"><a href="#" id="TAB_${date}" role="tab" class="nav-link" onclick="fillChainTable('${dateInp}','${date}')">${date}<br><center>(DTE: ${dte})</center></a></li>`
|
|
}
|
|
|
|
let getCallArtifact=(callData,allColumns)=>{
|
|
let artifact="";
|
|
let classes=(callData.delta < 0.5)?" otm":" itm";
|
|
|
|
for (let i=0;i< allColumns.length;i++){
|
|
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>
|
|
`;
|
|
}
|
|
let strCallJSON=JSON.stringify(callData).replace(/"/g,"\\'");
|
|
|
|
bidFrm=Number(callData.bid).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
|
|
askFrm=Number(callData.ask).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
|
|
|
|
classes += " priceClick";
|
|
|
|
artifact+=`
|
|
<td class="${classes} ralign" onclick="myOrderFrame.addToOrder('sell','${strCallJSON}')"><a title="Sell">${bidFrm}</a></td>
|
|
<td class="${classes} ralign" onclick="myOrderFrame.addToOrder('buy','${strCallJSON}')"><a title="Buy">${askFrm}</a></td>
|
|
`;
|
|
return artifact;
|
|
}
|
|
|
|
let getPutArtifact=(putData,allColumns)=>{
|
|
let artifact="";
|
|
let classes=(putData.delta > -0.5)?" otm":" itm";
|
|
|
|
for (let i=0;i< allColumns.length;i++){
|
|
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>
|
|
`;
|
|
}
|
|
|
|
let strPutJSON=JSON.stringify(putData).replace(/"/g,"\\'");
|
|
|
|
bidFrm=Number(putData.bid).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
|
|
askFrm=Number(putData.ask).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
|
|
|
|
classes += " priceClick";
|
|
|
|
artifact+=`
|
|
<td class="${classes} ralign" onclick="myOrderFrame.addToOrder('sell','${strPutJSON}')"><a title="Sell">${bidFrm}</a></td>
|
|
<td class="${classes} ralign" onclick="myOrderFrame.addToOrder('buy','${strPutJSON}')"><a title="Buy">${askFrm}</a></td>
|
|
`;
|
|
return artifact;
|
|
}
|
|
|
|
let getStrikeArtifact=(strike)=>{
|
|
return `
|
|
<th class="center bold ">${strike}</th>
|
|
`;
|
|
}
|
|
|
|
let fillChainRow=(rowData)=>{
|
|
let theTable=document.getElementById("tblOptionChain");
|
|
let theNewRow=theTable.insertRow(-1);
|
|
let allColumns=JSON.parse(localStorage["KPIs"]);
|
|
allColumns.length=3;
|
|
|
|
theNewRow.innerHTML=getCallArtifact(rowData.call,allColumns) + getStrikeArtifact(rowData.strike) + getPutArtifact(rowData.put,allColumns);
|
|
}
|
|
|
|
let clearChainTable=()=>{
|
|
let theTable=document.getElementById("tblOptionChain");
|
|
for (let i=theTable.rows.length;i>3;i--){
|
|
theTable.deleteRow(-1);
|
|
}
|
|
}
|
|
|
|
let fillChainTable=(expirationDate,dateOnly)=>{
|
|
// Maintain Active Tab
|
|
$(".nav a").on("click", function(){
|
|
$(".nav").find(".active").removeClass("active");
|
|
$(this).parent().addClass("active");
|
|
});
|
|
|
|
clearChainTable();
|
|
optionChainContext.selectedDate=dateOnly;
|
|
let allCalls=dta.callExpDateMap[expirationDate];
|
|
let allPuts=dta.putExpDateMap[expirationDate];
|
|
//console.log(expirationDate,allCalls,allPuts);
|
|
|
|
let allStrikes=Object.keys(allCalls);
|
|
for (let i=0;i<allStrikes.length;i++){
|
|
let theStrike=allStrikes[i];
|
|
let singleStrikeCall=allCalls[theStrike][0];
|
|
let singleStrikePut=allPuts[theStrike][0];
|
|
let rowData={strike:theStrike,call:singleStrikeCall,put:singleStrikePut}
|
|
fillChainRow(rowData);
|
|
}
|
|
}
|
|
|
|
let getColumnSelection=(colNum)=>{
|
|
if (localStorage["KPIs"] === undefined) {
|
|
localStorage["KPIs"] = '{"c1":"delta","c2":"openInterest","c3":"last"}';
|
|
}
|
|
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 col-md-9" id="frmOptionChainMain">
|
|
<div class="col-md-12">
|
|
<ul class="nav nav-tabs">
|
|
${Object.keys(dta.callExpDateMap).map(datesOut).join('')}
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<table id='tblOptionChain' class="table table-sm table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="4" class='center'>CALLS</th><th></th><th colspan="4" class='center'>PUTS</th>
|
|
</tr>
|
|
<tr>
|
|
<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>
|
|
<tr><!-- Dummy row --></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
|
|
|
|
app.appendChild(newNode)
|
|
myTblOptionChain = $("#tblOptionChain")[0];
|
|
|
|
// I don't think this is needed anymore...
|
|
//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){
|
|
$(".nav").find(".active").children()[0].click();
|
|
}
|
|
}
|