// CHANGE RANGESELECTOR'S VALUE
// chart.rangeSelector.buttons[2].setState(3);
// chart.rangeSelector.clickButton(2,{ type:'month', count:'6' } ,tru
/**
* Tdtrader Component<BR>
* <BR><BR><img src=/tk/lib/components/w/img/tdtrader.png width=30% style="border:1px lime dashed;padding:20px">
* <BR><BR><a href="/tk/lib/components/w/html/tdtrader.html">DEMO</a>
*/
class Tdtrader extends HTMLElement {
constructor() {
wc.group("Tdtrader.constructor")
super();
wc.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
wc.group("Tdtrader.observedAttributes");
this.observables = [];
wc.groupEnd();
return this.observables;
};
/**
* Called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
wc.group("Tdtrader.connectedCallback")
let self = this;
this.hc = [];
// ADD A RANDOM ID IF NONE EXIST
if (!this.id) {
this.id = this.constructor.name.toLowerCase() + "-" + wc.uid();
}
// GET PROPERTIES AND INTERESTING ELEMENTS
this._initialize();
// ADD COMPONENT MARKTOP
this.innerHTML = this._template()
this.symbols = wc.getSearchParam("symbols").toUpperCase().split(",");
for (var i = 0; i < this.symbols.length; i++) {
this._chart(this.symbols[i]);
}
// HIDE CHART NAVIGATOR
if (0) {
let elements = ".highcharts-grid.highcharts-xaxis-grid.highcharts-navigator-xaxis, .highcharts-navigator, .highcharts-axis-labels.highcharts-xaxis-labels.highcharts-navigator-xaxis";
$(elements).toggle()
//let h = $(".highcharts-container").height()
//$(".highcharts-container").height(h-40)
$(".highcharts-container").hover(function(){
$(elements).toggle();
//$(".highcharts-container").height(h)
}, function(){
$(elements).toggle();
//$(".highcharts-container").height(h-40)
});
}
this._ws();
// ADD STATS AND OTHER FINAL STUFF
this._finalize();
ga('send', {'hitType': 'event','eventCategory': 'wc-connected','eventAction': 'connected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
wc.groupEnd();
};
/**
* Initial Markup
* @private
* @_template
*/
_template() {
wc.group("Tdtrader.template");
var temp = this.dom.content;
wc.groupEnd();
return temp;
};
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
wc.group("Tdtrader.attributeChangedCallback:", attr, oldval, newval);
this.properties = this.properties || [];
let obs = Tdtrader.observedAttributes;
for (let i = 0; i < obs.length; i++) {
if (newval) {
this.properties[obs[i]] = newval;
}
}
// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
try {
switch(attr)
{
case "header":
//this.querySelector("h1").innerHTML = newval;
break;
default:
break;
}
} catch(e) {
wc.warn(e.name + ' > ' + e.message);
}
wc.groupEnd();
};
/**
* Stores DOM elements of interest for future use
* @private
* @_fetchElements
*/
_fetchElements() {
wc.group("Tdtrader._fetchElements");
this.dom = this.dom || [];
this.dom.content = this.innerHTML;
wc.groupEnd();
};
/**
* Component attributes are _fetched and defaults are set if undefined
* @private
* @_fetchAttributes
*/
_fetchAttributes() {
wc.group("Tdtrader._fetchAttributes");
this.properties = {
uparam : "",
cname : "Tdtrader",
author : "Mel M. Heravi, Ph.D.",
version : "1.0"
};
// SAVE WIDGET SPECIFIC PROPERTIES
this.propertiesW = [];
// SAVE ALL OTHER PROPERTIES
let attrs = wc.getAttributes(this)
for (var key in attrs) {
let attr = this.getAttribute(key) || this.properties.key;
this.properties[key] = this.getAttribute(key);
this.propertiesW[key] = this.getAttribute(key);
wc.log(key + ": " + attrs[key]);
}
// SET ALL INITIAL ATTRIBUTES
for (var key in this.properties) {
switch(key)
{
case "header":
break;
default:
break;
}
}
wc.log("ATTRIBUTES: ", this.properties);
wc.groupEnd();
};
/**
* configure the instance object and artifacts
* @configure
* @param {string} data use data if exist else use 'this.properties.cfg' parameter
*/
configure(data) {
wc.group("Tdtrader.configure:", data);
// IF JSON VARIABLE (data) IS PROVIDED
if (data) {
this._process(data);
} else {
let self = this;
$.getJSON(this.properties.cfg, function(data) {
self._process(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
});
}
wc.groupEnd();
};
/**
* _process the instance object and artifacts
* @private
* @_process
*/
_process(data) {
wc.group("Tdtrader._process:", data);
// DO WHATEVER WITH THE DATA
wc.groupEnd();
};
/**
* Initialize component
* @private
* @_initialize
*/
_initialize() {
wc.group("Tdtrader._initialize:", this.id);
// FETCH ALL INTERESTING ELEMENTS
this._fetchElements();
// FETCH ALL ATTRIBUTES
this._fetchAttributes();
wc.groupEnd();
};
/**
* Save data for analytics and final wrap up
* @private
* @_finalize
*/
_finalize() {
wc.group("Tdtrader._finalize:", this.id);
this.classList.add("wc");
// ADD ANALYTICS HERE
wc.setStats(this, this.properties.cname, this.properties.version);
// SHOW IT NOW (NO FLICKERS)
this.style.visibility = "visible";
wc.groupEnd();
};
/**
* Invoked When component is removed. Usually with a .remove() function call
* @disconnectedCallback
*/
disconnectedCallback() {
wc.group("Tdtrader.disconnectedCallback")
ga('send', {'hitType': 'event','eventCategory': 'wc-disconnected','eventAction': 'disconnected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
wc.groupEnd();
};
/**
* Destroy the instance object and artifacts
* @destroy
*/
destroy() {
wc.group("Tdtrader.destroy");
// FREE ALL MEMORY
// you should delete all created objects here
// FREE POINTER
delete this;
// REMOVE ITEM FROM DOM
this.parentNode.removeChild(this);
ga('send', {'hitType': 'event','eventCategory': 'wc-destroyed','eventAction': 'distroy','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
wc.groupEnd();
};
/**
* @_chart
*/
_chart(symbol) {
wc.group("Tdtrader._chart:", symbol);
// SMOOTH LINES
Highcharts.seriesTypes.line.prototype.getPointSpline = Highcharts.seriesTypes.spline.prototype.getPointSpline;
let self = this;
if (symbol.charAt(0) == "$") {
}
let columns = wc.getSearchParam("columns") || 4
$("#tdtrader-chart-container").append(`
<div class="col-md-${columns}">
<div class="chart-header wc-font-m" style="font-size:12px;">
${symbol}:
<span class="${symbol}-price price">---</span>
</div>
<div class="border mb-4" id="tdtrader-chart-container-${symbol}">${symbol}</div>
</div>`);
// Create the chart
this.hc[symbol] = Highcharts.stockChart(`tdtrader-chart-container-${symbol}`, {
chart: {
height: '41%',
spacingTop: 0,
spacingRight: 0,
spacingBottom: 0,
spacingLeft: 0,
plotBorderWidth: 0,
margin: [0,0,0,0]
},
credits: {
enabled: false
},
navigator: {
enabled: true
},
scrollbar: {
enabled: false
},
title: {
text: null,
},
time: {
useUTC: false
},
xAxis: {
labels: {
style: {
fontSize: '8px',
color: '#666'
}
}
},
rangeSelector: {
height: 10,
padding: 0,
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
count: 10,
type: 'minute',
text: '10M'
}, {
count: 15,
type: 'minute',
text: '15M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true,
selected: 2
},
tooltip: {
shared: true,
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.y:.4f}',
style: {
fontSize: '9px',
},
},
exporting: {
enabled: false
},
series: [{
showInLegend: false,
name: symbol,
tooltip: {
valueSuffix: ' HHH'
},
marker: {
enabled: false,
radius: 3
},
data: (function () {
// generate an array of random data
var data = [];
var time = (new Date()).getTime();
var i;
for (i = -900; i <= 0; i += 1) {
data.push([
time + i * 1000, null
]);
}
return data;
}())
}]
});
this.hc[symbol]
wc.groupEnd();
}
/**
* @_point
*/
_point(symbol, x, y, o) {
wc.group("Tdtrader._point:", symbol, x, y);
this.price = this.price || [];
var series = this.hc[symbol].series[0];
if (symbol.charAt(0) == "$") {
symbol = "\\" + symbol;
}
var cls = "price-gray;"
var extra = " | " + o;
if (o < 0.0) {
cls = "price-red";
} else if (o > 0) {
cls = "price-green";
}
$(`.${symbol}-price`)
.removeClass("price-red price-green price-gray")
.addClass(cls)
.html(y.toFixed(2) + extra)
series.addPoint([x, y], true, true);
wc.groupEnd();
}
/**
* @_ws
*/
_ws() {
wc.group("Tdtrader._ws");
let self = this;
websocket.start(function (values) {
for (var i = 0; i < values.data[0].content.length; i++) {
let val = values.data[0].content[i];
let s = val["key"] // symbol
let x = val["50"]; // time
let y = val["2"]; // price
let o = val["29"]; // NET CHANGE
if (x && y && o) {
self._point(s, x, y, o);
}
}
});
wc.groupEnd();
}
/**
* @_test
* w = document.querySelector("wc-tdtrader")._test(1610291844600)
*/
_test() {
wc.group("Tdtrader._test");
for (var i = 0; i < this.symbols.length; i++) {
let s = this.symbols[i];
let time = (new Date()).getTime();
let y = Math.round(Math.random() * 100);
this._point(s, time, y)
}
setTimeout(() => {
this._test();
}, 500);
console.groupEnd();
};
}
window.customElements.define('wc-tdtrader', Tdtrader);