var underlyingflowChart = {
chart : null,
data : null,
currency : "HKD",
navigatorUpdated : null,
colors : {line : chartColor.pairOrange, bar: chartColor.pairBlue, linehover : chartColor.pairOrange, barhover: chartColor.pairBlue},
container : "",
type : "call",
code : "",
init : function(code, type, ucurrency, callback, navUpdated){
var self = this;
this.type = type;
this.currency = ucurrency;
this.code = code;
$.getJSON('/'+lang+'/data/chart/underlyingflowChart?code='+code+'&type='+type, function(_data) {
var data = self.decode(_data);
$((self.container=='')?'#underlyingflowChartContainer':'#'+self.container).highcharts('StockChart',self.getJSON(data), function(chart){
if ($(chart.renderTo).attr("id")){
self.chart = chart;
if (callback!==undefined){
callback(chart,data);
}
if (navUpdated!==undefined){
self.navigatorUpdated = navUpdated;
}else{
self.navigatorUpdated = null;
}
if (data.length>0){
self.chart.xAxis[0].setExtremes(data[data.length-1][0]-(60*60*24*30*1*1000), data[data.length-1][0]);
}
}else{
chart.xAxis[0].setExtremes(0,0);
chart.reflow();
}
//******************
//$('#underlyingflowChart1Container, #underlyingflowChart2Container').find(".highcharts-container").attr("aria-hidden","true");
if($('#underlyingflowChartContainer').find(".link_table_a").length == 0){
var _text = [];
if (lang == "tc"){
_text[0] = "查看圖表數據";
_text[1] = "於表單查看數據";
}else if (lang == "sc"){
_text[0] = "查看图表数据";
_text[1] = "於表单查看数据";
}else{
_text[0] = "view detailed data in table";
_text[1] = "View detailed data from the table";
}
//$('#underlyingflowChart1Container, #underlyingflowChart2Container').append(''+_text[1]+'');
let url = '/'+lang+'/data/text-data/underlyingflowChart?code='+code+'&type='+type;
//genChartLink(url, $('#'+self.container));
}
//******************
if (code == "N225" || code == "DJI" || code == "NDX" || code == "SPX" || code.toUpperCase() == 'N225' || code.toUpperCase()=='XAUFIXAM' || code.toLowerCase().startsWith('cl')){
chart.series[1].setVisible(0);
}
});
});
},
decode : function(_data){
this.data = _data;
return _data;
},
setPeriod : function(_from,_to){
if (this.data.length>0){
this.chart.xAxis[0].setExtremes(Math.max(_from,this.data[0][0]), _to);
}
},
getJSON : function(data){
var dividedBy = 1000;
//var unit = "K";
var unitMap = {
tc:{
k : "千",
m : "百萬",
},
sc:{
k : "千",
m : "百万",
},
en:{
k : "K",
m : "M",
},
}
var unit = unitMap[lang].k;
var close = [];
var os = [];
var max = 0;
var self = this;
for (i = 0; i < data.length; i++) {
close.push([data[i][0], data[i][1]]);
os.push([data[i][0], data[i][2]]);
max = Math.max(Math.abs(data[i][2]),max);
}
if (max>=10000000){
dividedBy = 1000000;
unit = unitMap[lang].m;
}
return {
chart: {
events: {
redraw: function(event) {
if (self.navigatorUpdated){
self.navigatorUpdated(event.target.xAxis[0].min,event.target.xAxis[0].max);
}
}
},
renderTo: 'underlyingflowChartContainer',
marginLeft: 85,
marginRight: 85,
pinchType: "none",
},
title: {
text: `${self.code} ${self.type} fundflow chart`,
useHTML: true,
},
accessibility: {
description: `This chart represents ${self.code} ${self.type} fundflow `
},
rangeSelector: {
enabled: false,
},
plotOptions: {
line:{
lineWidth: 2,
},
},
xAxis: {
type: 'datetime',
gridLineWidth: 0,
lineWidth: 0,
tickColor: '#00000000',
labels: {
formatter: function () {
return Highcharts.dateFormat('%d/%m', this.value);
}
},
},
yAxis: [{
labels:{
align:'right',
x:-5,
y:5,
formatter: function () {
return addcomma(this.value/dividedBy)+unit;
}
},
opposite: false,
title: {
text: this.labels()[lang].yTitle1,
offset: 70,
rotation: 270,
}
}, {
labels:{
align:'left',
x:5,
y:5,
formatter: function () {
return addcomma(this.value);
}
},
opposite: true,
title: {
text: (code == "N225" || code == "DJI" || code == "NDX" )?"":this.labels()[lang].yTitle2,
offset:80,
rotation: 270,
},
}],
navigator : {
enabled : true,
baseSeries: 0,
//top:300,
margin:50,
xAxis: {
gridLineWidth: 0,
labels:{
enabled: false
}
},
yAxis: {
gridLineWidth: 0,
labels:{
enabled: false
}
},
},
scrollbar : {
enabled : false
},
tooltip: {
backgroundColor: 'none',
borderWidth: 0,
shadow: false,
useHTML: true,
padding: 0,
formatter: function() {
var stime;
var flow = addcomma((this.points[0].y/dividedBy).toFixed(2))+unit;
var last = (this.points[1])?addcomma(formatPrice(this.points[1].y)):false;
var stime;
if (Highcharts.dateFormat('%H:%M', this.points[0].x) != "00:00"){
stime = Highcharts.dateFormat('%Y-%m-%d %H:%M', this.points[0].x);
}else{
stime = Highcharts.dateFormat('%Y-%m-%d', this.points[0].x);
}
var html = '';
return html;
}
},
series : [{
type: 'column',
data: os,
color: this.colors.bar,
states: {
hover: {
color: this.colors.barhover,
}
}
},{
name : "ulast",
data : close,
yAxis: 1,
color: this.colors.line,
}],
exporting: {
enabled: false
}
};
},
labels : function (){
return {
tc :{
yTitle1 : ((this.type=="call")?"認購":((this.type=="put")?"認沽":((this.type=="bull")?"牛證":((this.type=="bear")?"熊證":((this.type=="long")?"好倉":((this.type=="short")?"淡倉":""))))))+"資金流 (百萬)",
yTitle2 : "歷史股價 "+(($.trim(this.currency)=="")?"":(" ("+ this.currency+")")),
close : "收市價",
flow : "資金流",
},
sc :{
yTitle1 : ((this.type=="call")?"认购":((this.type=="put")?"认沽":((this.type=="bull")?"牛证":((this.type=="bear")?"熊证":((this.type=="long")?"好仓":((this.type=="short")?"淡仓":""))))))+"资金流 (百万)",
yTitle2 : "历史股价 "+(($.trim(this.currency)=="")?"":(" ("+ this.currency+")")),
close : "收市价",
flow : "资金流",
},
en :{
yTitle1 : ((this.type=="call")?"Call":((this.type=="put")?"Put":((this.type=="bull")?"Bull":((this.type=="bear")?"Bear":((this.type=="long")?"Long":((this.type=="short")?"Short":""))))))+" money flow (Million)",
yTitle2 : "Historical price "+(($.trim(this.currency)=="")?"":(" ("+ this.currency+")")),
close : "Close",
flow : "Flow",
},
};
}
}