angular.module('ngPriceApp', ['ngSanitize'])
.controller("PriceDataCtrl", ['$compile', '$scope', '$http', '$q', '$timeout', '$filter', function ($compile, $scope, $http, $q, $timeout, $filter) {
$scope.DownloadedFile = '';
$scope.priceVars={
SelectedCompany: "ALL",
SelectedMarket : "1"
}
$scope.auth = undefined;
$scope.$watchCollection('priceVars', (n, o)=>{
$scope.DownloadedFile = undefined;
});
function LoadData() {
blockUI('priceDataDiv');
$http({
method: 'GET',
url: siteRoot + 'Download/LoadPriceData',
params: { ticker: $scope.priceVars.SelectedCompany, period: $scope.priceVars.SelectPeriods, sID: $scope.priceVars.SelectedMarket },
}).then(function (res) {
$scope.DownloadedFile = res.data;
}, (error) => { unblockUI('priceDataDiv'); console.log(error.data); })
.then(function () {
unblockUI('priceDataDiv');
});
}
function GetSymbolFile(PSM) {
blockUI('priceDataDiv');
$http({
method: 'GET',
url: siteRoot + 'Common/GetSymbolFile',
params: { SM: $scope.priceVars.SelectedMarket },
}).then(function (res) {
$scope.SymbolFile = res.data.file;
$scope.Companies = [];
debugger;
$scope.Companies.push({ 'Name': res.data.companies[0].StockMarket, 'Ticker': res.data.companies[0].StockMarket, 'Type': "sector" });
var sectors = $filter('unique')(res.data.companies.map(function (v) { return v.SectorID; }));
angular.forEach(sectors, function (value, key) {
var arr = $filter('filter')(res.data.companies, { SectorID: value },true);
//var arr = $.grep(res.data.companies, (el) => { if (el.SectorID === value) return el; }).clean();
$scope.Companies.push({ 'Name': arr[0].Sector, 'Ticker': arr[0].SectorAbbr, 'Type': "sector" });
angular.forEach(arr, function (v, i) {
$scope.Companies.push({ 'Name': v.Company, 'Ticker': v.Ticker, 'Type': "company" });
});
});
}, (error) => { unblockUI('priceDataDiv'); console.log(error.data); }).then(function () {
unblockUI('priceDataDiv');
});
$scope.priceVars.SelectedCompany = "ALL";
}
function BindTimePeriods(MID) {
$http({
method: 'GET',
url: siteRoot + 'Common/Timeperiods',
params: { sId: $scope.priceVars.SelectedMarket },
}).then(function (res) {
$scope.TimePeriods = res.data;
$scope.priceVars.SelectPeriods = $scope.TimePeriods[0].Value;
}, (error) => { console.log(error.data); });
}
$scope.MarketBind = function (data, auth) {
$scope.auth = Number(auth);
$scope.StockMarkets = data;
}
$scope.UpdateStocks = function (SMID) {
GetSymbolFile(SMID);
BindTimePeriods(SMID);
}
$scope.LoadFile = function () {
$scope.DownloadedFile ='';
if ($scope.priceVars.SelectPeriods === "AllHistorical" && $scope.auth < 2) {
var url = $filter('getURL')('/authuser/' + $scope.auth);
$scope.DownloadedFile = "<p class='bold'> <a title='" + $filter('getLabel')('lblPremiumOnly') + "' href='" + $filter('getURL')('/authuser/' + $scope.auth) + "'><img src=\"/Content/Theme/images/lockimages/dpd.png\" /></a> </p>";
} else {
LoadData();
}
$timeout(() => {
$compile(angular.element(document.getElementById('downloadFileBody')))($scope);
}, 200);
}
$timeout(function () {
$scope.UpdateStocks($scope.priceVars.SelectedMarket)
});
}])
.controller("periodicReportCtrl", ['$compile', '$scope', '$http', '$q', '$timeout', '$filter', function ($compile, $scope, $http, $q, $timeout, $filter) {
let self = this;
$scope.reportDates = {};
$scope.stockMarketID = "0";
$scope.reportTyeps = {};
$scope.reportTypeID = "0";
$scope.reportType = undefined;
$scope.reportDate = "";
$scope.loadingDates = false;
let reportExists = undefined;
let chartData = [];
$scope.periodicReportModel = {};
$scope.reportPath = undefined;
$scope.noDataFound = undefined;
$scope.init = ((model) => {
let d = model.ReportDateString;
$scope.reportTypes = model.ReprotTypes;
$scope.stockMarketID = model.StockMarketID.toString();
$scope.reportTypeID = model.ReportTypeID.toString();
//$scope.ReportPath = model.ReportPath;
reportExists = parseInt(model.ReportExists);
$scope.$watchGroup(['stockMarketID', 'reportTypeID'], function (newValue, oldValue) {
$scope.noDataFound = undefined;
if ($scope.reportTypeID) {
$scope.reportType = $.grep($scope.reportTypes, (r) => { if (r.ReportTypeID === parseInt($scope.reportTypeID)) return r; }).firstOrDefault().ReportTypeT;
}
if (newValue[0] === "0" || newValue[1] !== oldValue[1]) {
$scope.reportDates = {};
$scope.reportDate = "";
}
if (oldValue[0] && newValue[0] !== "0") {
loadDates(d);
d = undefined;
}
});
if (!model.ReportDateString) return;
if (reportExists > 0) {
loadReportData(model);
} else {
loadReportHtml(model);
}
});
$scope.viewReport = (($event) => {
window.location.href = siteRoot + "Download/PeriodicalReport?pageID=126&m=" + $scope.stockMarketID + "&t=" + $scope.reportTypeID + "&d=" + $scope.reportDate.substring(0, 10);
});
function loadDates(reportDate) {
$scope.loadingDates = true;
$http({
url: '/download/getreportdate',
method: 'post',
data: { sid: $scope.stockMarketID, rid: $scope.reportTypeID }
}).then((res) => {
$timeout(() => {
$scope.reportDates = res.data;
});
if (reportDate)
$scope.reportDate = reportDate;
}, (error) => { console.log(error.data); })
.then(() => {
$scope.loadingDates = false;
});
}
function loadReportData(model) {
blockUI('collapseOne');
$http({
url: siteRoot + 'download/loadperiodicreport',
method: 'post',
data: { smid: model.StockMarketID, rtid: model.ReportTypeID, d: model.ReportDateString }
}).then((res) => {
$scope.periodicReportModel = res.data;
}, (error) => { console.log(error.data); })
.finally(() => {
$scope.periodicReportModel.chart !== undefined && $scope.periodicReportModel.chart.map((elem) => {
chartData.push([
parseInt(elem.Date.slice(6, -2)),
elem.Close
]);
$timeout(() => { createChart(chartData); });
});
unblockUI('collapseOne');
});
}
function loadReportHtml(model) {
$http({
url: model.ReportPath,
method: 'get',
dataType: 'application/html'
})
.then((res) => {
$scope.reportHtml = res.data;
}, (data) => {
$scope.noDataFound = $filter('getLabel')('lblNoDataFound');
});
}
function createChart(chartData) {
new Highcharts.stockChart('marketChart', {
chart: {
borderColor: '#777',
borderWidth: 1,
borderRadius: 0,
plotBackgroundColor: '',
padding: 5,
panning: false
},
yAxis: [{
gridLineColor: '#ececec',
lineColor: '#ccc',
lineWidth: 1,
className: 'ltr',
labels: {
align: 'left',
formatter: function () {
return $filter('WNOrDec')(this.value, 0);
},
x: 5,
style: {
color: '#eee',
}
}
}],
legend: {
enabled: false
},
xAxis: {
range: 12 * 30 * 24 * 3600 * 1000,
labels: {
formatter: function () {
return Highcharts.dateFormat('%d/%m %y', this.value);
},
style: {
color: '#eee'
}
}
},
title: {
text: ''
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
navigator: {
enabled: false
},
exporting: {
enabled: false
},
tooltip: {
style: {
opacity: '1.0'
},
formatter: function () {
var tooltipHtml = '';
tooltipHtml = '<div class="col-md-12 padding-5 custom-tooltip ltr"><p><b>' + $filter('getLabel')('lblDate') + ': </b> ' + Highcharts.dateFormat('%b %e, %Y', new Date(this.points[0].x)) + ' </p>';
var primary = $.grep(this.points, function (elem) { return elem.series.name === 'primary'; }).firstOrDefault();
if (!angular.isFunction(primary)) {
tooltipHtml += '<p style="color:' + primary.series.color + '"><b>' + $filter('getLabel')('lblClosing') + ': </b>' + $filter('AbbrOrWNOrDec')(primary.y, 2) + "</p>";
}
return tooltipHtml;
}
},
series: [{
name: 'primary',
id: 'primary',
data: chartData,
color: '#52658f',
type: 'line',
lineWidth: 1,
threshold: null,
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}]
});
}
}])
.controller("specialReportIndicesCtrl", ['$compile', '$scope', '$http', '$q', '$timeout', '$filter', function ($compile, $scope, $http, $q, $timeout, $filter) {
let self = this;
let marketInfoData = [], maretCapCompanies = [], tradingDistribution = [];
$scope.init = ((marketInfo, marketCapCompanies, tDistribution) => {
marketInfoData = marketInfo;
marketCapIndices();
marketIndices();
/// market cap companies
maretCapCompanies = marketCapCompanies;
createCapCompanies();
///trading distribution
tradingDistribution = tDistribution;
createDistribution();
});
function marketCapIndices() {
let chartData = [], chartCats = [];
let marketCapSet = $.grep(marketInfoData, (elem) => {
if (elem.CapSizeID !== 0 || elem.SortOrder === 0) {
return elem;
}
}).clean().sort(sortBy('Change', true));
marketCapSet.map((elem) => {
chartCats.push(elem.StockMarket);
});
chartCats.map((cat) => {
let mObj = $.grep(marketCapSet, (elem) => { if (elem.StockMarket === cat) return elem; }).firstOrDefault();
let color = mObj.Change > 0 ? '#35b121' : '#ef4c36';
chartData.push({ y: parseFloat(mObj.Change), color: color });
});
Highcharts.chart('marketCapIndicesChart', {
chart: {
type: 'column',
borderColor: "#3a3a3a",
borderRadius: 1,
borderWidth: 1,
backgroundColor: "#000",
panning: false,
marginBottom: 60,
events: {
load: function (event) {
//$timeout(() => { exportChart(event.target); });
}
}
},
exporting: {
enabled: false
},
title: {
align: 'center',
floating: false,
margin: 15,
style: {},
text: $filter('getLabel')('lblMarketCapIndices'),
useHTML: true
},
watermark: {
yAxis: 285,
xAxis:2
},
subtitle: {
align: 'center',
floating: false,
style: { "color": "#eee" },
text: $filter('getLabel')('lblDailyPerformance'),
useHTML: true,
},
yAxis: [{
gridLineColor: '#3a3a3a',
lineColor: '#3a3a3a',
lineWidth: 1,
title: '',
className: 'ltr',
labels: {
formatter: function () {
let factor = parseInt(this.value) === parseFloat(this.value) ? 0 : 2;
return $filter('WNOrDec')(this.value, factor) + '%';
},
style: {
color: '#eee',
}
}
}],
legend: {
enabled: false
},
xAxis: {
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#eee'
}
},
categories: chartCats
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return `<div class="col-md-12 padding-5 custom-tooltip ltr defualt-color"><strong>${this.x}</strong>
<p><b>${$filter("getLabel")("lblClosing")}: </b><label>${$filter("AbbrOrWNOrDec")(this.y, 2)}%</label></p>
</div>`;
}
},
series: [{
name: 'cap indices',
data: chartData,
dataLabels: {
enabled: true,
formatter: function () {
return `<span style="color:#ADADAD;">${$filter('number')(this.y, 2)}%</span>`;
},
useHTML: true
}
}]
}, function (chart) {
});
}
function exportChart(chart) {
html2canvas(document.getElementById('marketCapIndicesChart'), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
var img = canvas.toDataURL().replace(/^data[:]image\/(png|jpg|jpeg)[;]base64,/i, "");
$.ajax({
"type": "POST",
"url": "image/uploadchart",
"data": {
"imageData": img
}
}).done(function (res) {
console.log(res);
});
},
width: chart.chartWidth,
height: chart.chartHeight
});
}
function marketIndices() {
let chartData = [], chartCats = [];
let marketInfoSet = $.grep(marketInfoData, (elem) => {
if (elem.CapSizeID === 0) {
return elem;
}
}).clean().sort(sortBy('Change',true));
marketInfoSet.map((elem) => {
chartCats.push(elem.StockMarket);
});
chartCats.map((cat) => {
let mObj = $.grep(marketInfoSet, (elem) => { if (elem.StockMarket === cat) return elem; }).firstOrDefault();
let color = mObj.Change > 0 ? '#35b121' : '#ef4c36';
chartData.push({ y: parseFloat(mObj.Change), color: color });
});
Highcharts.chart('marketIndicesChart', {
chart: {
type: 'column',
borderColor: "#3a3a3a",
borderRadius: 1,
borderWidth: 1,
backgroundColor: "#ADADAD",
panning: false
},
exporting: {
enabled: false
},
watermark: {
yAxis: 335,
xAxis:2
},
title: {
align: 'center',
floating: false,
margin: 15,
style: {},
text: $filter('getLabel')('lbSectorIndices'),
useHTML: true
},
subtitle: {
align: 'center',
floating: false,
style: { "color": "#eee" },
text: $filter('getLabel')('lblDailyPerformance'),
useHTML: true,
},
yAxis: [{
gridLineColor: '#3a3a3a',
lineColor: '#3a3a3a',
lineWidth: 1,
title: '',
className: 'ltr',
labels: {
formatter: function () {
let factor = parseInt(this.value) === parseFloat(this.value) ? 0 : 2;
return $filter('WNOrDec')(this.value, factor) + '%';
},
style: {
color: '#eee',
}
}
}],
legend: {
enabled: false
},
xAxis: {
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#eee'
}
},
categories: chartCats
},
credits: {
enabled: false
},
tooltip: {
style: {
opacity: '1.0'
},
formatter: function () {
return `<div class="col-md-12 padding-5 custom-tooltip ltr defualt-color"><strong>${this.x}</strong>
<p style="color:${this.color};"><b>${$filter("getLabel")("lblClosing")}: </b><span class="text-color">${$filter("AbbrOrWNOrDec")(this.y, 2)}%</span></p>
</div>`;
}
},
series: [{
name: 'Market Indices',
data: chartData,
dataLabels: {
enabled: true,
formatter: function () {
let factor = parseInt(this.y) === parseFloat(this.y) ? 0 : 2;
return `<p style="color:#ADADAD;"><b>${$filter('number')(this.y, factor)}%`;
},
useHTML: true
}
}]
});
}
function createCapCompanies() {
let candleStick = [], volume = [];
maretCapCompanies.map((elem) => {
let color = (parseFloat(elem.Opening) - parseFloat(elem.Closing)) < 0 ? '#42f450' : '#f41c04';
candleStick.push({ x: parseInt(elem.Date.slice(6, -2)), open: elem.Opening, high: elem.Highest, low: elem.Lowest, close: elem.Closing, color: color })
volume.push([parseInt(elem.Date.slice(6, -2)), elem.Volume]);
});
var groupingUnits = [['week', [1]], ['month', [1, 2, 3, 4, 6]]];
Highcharts.stockChart('topMarketCapChart', {
chart: {
borderColor: "#ccc",
borderRadius: 1,
borderWidth: 1,
backgroundColor: null,
panning: false,
marginBottom: 50
},
watermark: {
yAxis: 335,
xAxis:2
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
navigator: {
enabled: false
},
exporting: {
enabled: false
},
rangeSelector: {
enabled: false,
selected: 1
},
title: {
text: maretCapCompanies.firstOrDefault().StockMarket
},
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%d/%m/%y', this.value);
},
style: {
color: '#eee'
}
}
},
tooltip: {
shared: true,
formatter: function () {
var tooltipHtml = '<div class="col-md-12 padding-5 custom-tooltip ltr">';
var volume = $.grep(this.points, function (elem) { return elem.series.name === "Volume" }).firstOrDefault();
tooltipHtml += `<div class="display-table"><div class="col-md-12 tooltip-body"><p><b>${$filter('getLabel')('lblDate')}<b>: ${$filter('date')(volume.x, 'dd/MM/yyyy')}</p>`;
var cS = $.grep(this.points, function (elem) { return elem.series.name === "candlestick" }).firstOrDefault();
if (!angular.isFunction(cS)) {
tooltipHtml += `<p>${$filter('getLabel')('lblOpen')}: </label><span style="color:${cS.series.options.color}">${$filter('number')(cS.point.open, 2)}</p>`;
tooltipHtml += `<p>${$filter('getLabel')('lblHigh')}: </label><span style="color:${cS.series.options.color}">${$filter('number')(cS.point.high, 2)}</p>`;
tooltipHtml += `<p>${$filter('getLabel')('lblLow')}: </label><span style="color:${cS.series.options.color}">${$filter('number')(cS.point.low, 2)}</p>`;
tooltipHtml += `<p>${$filter('getLabel')('lblClose')}: </label><span style="color:${cS.series.options.color}">${$filter('number')(cS.point.close, 2)}</p>`;
}
if (!angular.isFunction(volume)) {
tooltipHtml += `<p><b> ${$filter('getLabel')('lblVolume')}: </b><b style="color:${volume.series.color}">${$filter('AbbrOrWNOrDec')(volume.y, 2)}</b></p></div></div>`;
}
tooltipHtml += '</div>';
return tooltipHtml;
}
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: $filter('getLabel')('lblIndex'),
},
height: '55%',
lineWidth: 2,
resize: {
enabled: true
}
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: $filter('getLabel')('lblVolume'),
},
top: '60%',
height: '40%',
offset: 0,
lineWidth: 2,
labels: {
formatter: function () {
let factor = parseInt(this.value) === parseFloat(this.value) ? 0 : 2;
return $filter('AbbrOrWNOrDec')(this.value, factor);
},
style: {
color: '#eee'
}
},
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.dataMin) - (Math.floor(this.dataMin) / 10),
increment = Math.ceil((this.dataMax - this.dataMin) / 2);
if (this.dataMax !== null && this.dataMin !== null) {
for (tick; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
}
return positions;
}
}],
series: [{
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
color: Highcharts.getOptions().colors[9],
dataGrouping: {
units: groupingUnits
}
}, {
type: 'candlestick',
name: 'candlestick',
color: Highcharts.getOptions().colors[5],
data: candleStick,
dataGrouping: {
units: groupingUnits
}
}]
});
}
function createDistribution() {
let cats = [];
let chartSeries = [];
cats = tradingDistribution.map((elem) => { return elem.Sector; }).uniqueArray();
chartSeries.push({
name: 'Volume',
options: {
name: $filter('getLabel')('lblVolume')
},
data: $.map(tradingDistribution, (el) => { return el.Volme; })
});
chartSeries.push({
name: 'Value',
options: {
name: $filter('getLabel')('lblValue')
},
data: $.map(tradingDistribution, (el) => { return el.Value; })
});
chartSeries.push({
name: 'Transaction',
options: {
name: $filter('getLabel')('lblTransaction')
},
data: $.map(tradingDistribution, (el) => { return el.Transaction; })
});
Highcharts.chart('dailyTradingDistribution', {
chart: {
type: 'column',
borderColor: "#3a3a3a",
borderRadius: 1,
borderWidth: 1,
backgroundColor: "#000",
panning: false
},
watermark: {
yAxis: 335,
xAxis:2
},
title: {
text: $filter('getLabel')('lblDailyTradingActvity')
},
subtitle: {
text: ''
},
xAxis: {
categories: cats,
crosshair: true
},
yAxis: {
lineColor: '#3a3a3a',
lineWidth: 1,
title: {
text: ''
},
labels: {
formatter: function () {
let factor = parseInt(this.value) === parseFloat(this.value) ? 0 : 2;
return `${$filter('number')(this.value, factor)}%`;
},
style: {
color: '#eee'
}
},
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 5);
if (this.dataMax !== null && this.dataMin !== null) {
for (tick; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
}
return positions;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
floating: true,
backgroundColor: '#FFFFFF',
labelFormatter: function () {
return this.userOptions.options.name
}
},
tooltip: {
headerFormat: `<div class="col-md-12 padding-5 custom-tooltip ltr"><strong>{point.key}</strong><table class="display-table">`,
pointFormat: `<tr><td style="color:{series.color};padding:0">{series.name}: </td>
<td style="padding:0"><b>{point.y:.1f}%</b></td></tr>`,
footerFormat: `</table></div>`,
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: chartSeries
});
}
}])
.controller("specialReportGCCCtrl", ['$compile', '$scope', '$http', '$q', '$timeout', '$filter', function ($compile, $scope, $http, $q, $timeout, $filter) {
$scope.init = ((marketCapDist, volumDist, dailyGCCMarketPerf, marketsPerf) => {
marketCapDistributionFunc(marketCapDist);
volumeDistributionFunc(volumDist);
dailyGCCStockMarketPerformanceFunc(dailyGCCMarketPerf);
dailyGCCStockMarketsPerformanceFunc(marketsPerf);
});
function marketCapDistributionFunc(marketCapDistribution) {
let chartData = [];
marketCapDistribution.map((elem) => {
chartData.push([elem.Abbr, elem.MarketCap]);
});
Highcharts.chart('dailyMarketCapReviewChart', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
watermark: {
yAxis:240
},
title: {
text: $filter('getLabel')('lblDailyMarketCapDistribution')
},
tooltip: {
formatter: function () {
let factor = parseInt(this.point.percentage) === parseFloat(this.point.percentage) ? 0 : 2;
return `<b>${this.point.name}</b> <span style="color:${this.point.color}"> ${$filter('WNOrDec')(this.point.percentage, factor)}%</span>`;
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 40,
dataLabels: {
enabled: true,
useHTML: true,
formatter: function () {
let factor = parseInt(this.point.percentage) === parseFloat(this.point.percentage) ? 0 : 2;
return `<div><div class="col-md-6"><strong>${this.point.name}</strong></div><div class="col-md-6"> ${$filter('WNOrDec')(this.point.percentage, factor)}%</div></div>`;
}
}
}
},
series: [{
type: 'pie',
name: 'Market Cap Review',
data: chartData
}]
});
}
function volumeDistributionFunc(volumeDistribution) {
let chartData = [];
volumeDistribution.map((elem) => {
chartData.push([elem.Abbr, elem.Volume]);
});
Highcharts.chart('dailyVolumeDistributionChart', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
watermark: {
yAxis: 240
},
title: {
text: $filter('getLabel')('lblDailyVolumeDistribution')
},
tooltip: {
formatter: function () {
let factor = parseInt(this.point.percentage) === parseFloat(this.point.percentage) ? 0 : 2;
return `${this.point.name} <span style="color:${this.point.color}"> ${$filter('WNOrDec')(this.point.percentage, factor)}%</span>`;
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 40,
dataLabels: {
enabled: true,
useHTML: true,
formatter: function () {
let factor = parseInt(this.point.percentage) === parseFloat(this.point.percentage) ? 0 : 2;
return `<div><div class="col-md-6 no-margin"><strong>${this.point.name}</strong></div><div class="col-md-6 no-margin"> ${$filter('WNOrDec')(this.point.percentage, factor)}%</div></div>`;
}
}
}
},
series: [{
type: 'pie',
name: 'Volume Distribution',
data: chartData
}]
});
}
function dailyGCCStockMarketPerformanceFunc(gccDailyStockMarketPerf) {
let chartData = [], chartCats = [];
let marketInfoSet = gccDailyStockMarketPerf.sort(sortBy('ChangePer',true));
gccDailyStockMarketPerf.map((elem) => {
chartCats.push(elem.Abbr);
});
chartCats.map((cat) => {
let mObj = $.grep(gccDailyStockMarketPerf, (elem) => { if (elem.Abbr === cat) return elem; }).firstOrDefault();
let color = mObj.ChangePer > 0 ? '#35b121' : '#ef4c36';
chartData.push({ y: parseFloat(mObj.ChangePer), color: color });
});
Highcharts.chart('dailyMarketPerformanceChart', {
chart: {
type: 'column',
borderColor: "#3a3a3a",
borderRadius: 1,
borderWidth: 1,
backgroundColor: "#000",
panning: false
},
watermark: {
yAxis: 275,
xAxis:2
},
title: {
align: 'center',
floating: false,
margin: 15,
style: {},
text: $filter('getLabel')('lblGCCDailyStockMarketsPerformance'),
useHTML: true
},
subtitle: {
align: 'center',
floating: false,
style: { "color": "#eee" },
text: '',
useHTML: true,
},
yAxis: [{
gridLineColor: '#3a3a3a',
lineColor: '#3a3a3a',
lineWidth: 1,
title: '',
className: 'ltr',
labels: {
formatter: function () {
return $filter('WNOrDec')(this.value, 2) + '%';
},
style: {
color: '#eee',
}
}
}],
legend: {
enabled: false
},
xAxis: {
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#eee'
}
},
categories: chartCats
},
credits: {
enabled: false
},
tooltip: {
style: {
opacity: '1.0'
},
formatter: function () {
return `<div class="col-md-12 padding-5 custom-tooltip ltr defualt-color"><strong>${this.x}</strong>
<p style="color:${this.color};"><b>${$filter("getLabel")("lblClosing")}: </b><span class="text-color">${$filter("AbbrOrWNOrDec")(this.y, 2)}%</span></p>
</div>`;
}
},
plotOptions: {
series: {
labels: {
style: {
color: '#eee'
}
}
}
},
series: [{
name: 'Market Indices',
data: chartData,
dataLabels: {
enabled: true,
formatter: function () {
let factor = parseInt(this.y) === parseFloat(this.y) ? 0 : 2;
return `<span class="${$filter('successclass')(this.y)}">${$filter('number')(this.y, factor)}%</span>`;
},
useHTML: true
}
}]
});
}
function dailyGCCStockMarketsPerformanceFunc(performanceData) {
let chartData = [], markets = [], perfChartSeries = [];
performanceData.map((el) => { markets.push(el.StockMarket); });
angular.forEach(markets.uniqueArray(), function (market) {
let tempData = [];
performanceData.map((m) => { if (m.StockMarket === market) tempData.push([parseInt(m.Date.slice(6, -2)), m.Closing]); })
perfChartSeries.push({
id: market,
name: market,
aname: market,
data: tempData,
turboThreshold: 0,
compare: 'percent',
showInNavigator: true,
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
});
});
let perfChart = Highcharts.stockChart('gccStockMarketsPerfChart', {
chart: {
borderColor: '#ccc',
borderWidth: 1,
plotBackgroundColor: ''
},
watermark: {
yAxis: 290,
xAxis:2
},
title: {
text: $filter('getLabel')('lblGCCStockMarketsPerformance')
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 25,
enabled: true
},
scrollbar: {
enabled: false
},
navigator: {
enabled: false
},
rangeSelector: {
enabled: false,
},
scrollbar: {
enabled: false
},
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%d %b %y', this.value);
}
}
},
yAxis: {
lineWidth: 1,
labels: {
x: -5,
y: -7,
formatter: function () {
return $filter('WNOrDec')(this.value, 2) + '%';
}
},
opposite: false
},
tooltip: {
formatter: function () {
var tooltipHtml = '<ul class="highcharts-gb-tooltip"><li class="text-bold text-capitalize">' + $filter('getLabel')('lblDate') + ': </li><li>' + $filter('date')(this.points[0].x, 'dd/MM/yyyy') + "</li></ul>";
for (var i = 0; i < this.points.length; i++) {
var point = this.points[i];
if (point.series.options.cname === undefined)
tooltipHtml += "<ul class=\"highcharts-gb-tooltip\"><li style='color:" + point.color + ";' class=\"text-bold text-capitalize\">" + point.series.options.aname + ":</li><li>" + $filter('WNOrDec')(point.y, 2) + "</li><li class='" + $filter('successclass')(point.point.change) + "'> (" + $filter("WNOrDec")(point.point.change, 2) + " %)</li></ul>";
else
tooltipHtml += "<ul class=\"highcharts-gb-tooltip\"><li style='color:" + point.color + ";' class=\"text-bold text-capitalize\">" + point.series.options.cname + ":</li><li class='" + $filter('successclass')(point.y) + "'>" + $filter("WNOrDec")(point.y, 2) + " %</li></ul>";
}
return tooltipHtml;
},
borderWidth: 0,
shadow: false,
useHTML: true
},
plotOptions: {
series: {
labels: {
style: {
color: '#eee'
}
}
}
},
series: perfChartSeries
});
}
}])
;