You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
442 lines
12 KiB
442 lines
12 KiB
|
|
!function ($) {
|
|
"use strict";
|
|
|
|
var Dashboard = function () { };
|
|
|
|
Dashboard.prototype.initCharts = function () {
|
|
setTimeout(function () {
|
|
LoadChartData();
|
|
}, 10);
|
|
},
|
|
|
|
//initializing
|
|
Dashboard.prototype.init = function () {
|
|
// date picker
|
|
$('#dash-daterange').flatpickr({
|
|
mode: "range",
|
|
defaultDate: [moment().subtract(1, 'months').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
|
|
});
|
|
|
|
// calendar
|
|
$('#calendar-widget').flatpickr({
|
|
inline: true,
|
|
shorthandCurrentMonth: true
|
|
});
|
|
|
|
// charts
|
|
this.initCharts();
|
|
},
|
|
|
|
|
|
$.Dashboard = new Dashboard, $.Dashboard.Constructor = Dashboard
|
|
|
|
}(window.jQuery),
|
|
//initializing main application module
|
|
function ($) {
|
|
"use strict";
|
|
$.Dashboard.init();
|
|
}(window.jQuery);
|
|
|
|
function iframeRefresh(e) {
|
|
var c = $(e);
|
|
c.attr("src", c.attr("src"));
|
|
}
|
|
|
|
function LoadChartData() {
|
|
$("#loading-div").removeAttr('style');
|
|
window.Apex = {
|
|
chart: {
|
|
parentHeightOffset: 0,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
grid: {
|
|
padding: {
|
|
left: 20,
|
|
right: 0
|
|
}
|
|
},
|
|
colors: ["#5369f8", "#43d39e", "#f77e53", "#ffbe0b"],
|
|
tooltip: {
|
|
theme: 'dark',
|
|
x: { show: false }
|
|
}
|
|
};
|
|
|
|
var AgentWiseTxn;
|
|
var Response;
|
|
//get data for chart from db
|
|
var dataToSend = { MethodName: 'GetDashboardData', DateRange: $('#dash-daterange').val() };
|
|
var options = {
|
|
url: 'Dashboard2.aspx?',
|
|
data: dataToSend,
|
|
dataType: 'JSON',
|
|
type: 'POST',
|
|
async: false,
|
|
success:
|
|
function (response) {
|
|
/* debugger;*/
|
|
$('#todaysSent').text(response.TodaysSent);
|
|
$('#todaysPaid').text(response.TodaysPaid);
|
|
$('#mobileSent').text(response.MobileSent);
|
|
$('#todaysRegistration').text(response.TodaysRegistration);
|
|
$('#todaysMobileRegistration').text(response.TodaysMobileRegistration);
|
|
$('#todaysMobileActivation').text(response.TodaysMobileActivation);
|
|
AgentWiseTxn = response.AgentWiseTxn;
|
|
Response = response;
|
|
},
|
|
error: function (result) {
|
|
debugger;
|
|
console.log(Message);
|
|
if (result.Message) {
|
|
alert(result.Message);
|
|
|
|
/// iframeRefresh('#mainFrame');
|
|
}
|
|
else
|
|
alert("Due to unexpected errors we were unable to load data");
|
|
}
|
|
};
|
|
$.ajax(options);
|
|
|
|
var loadDate = true;
|
|
|
|
console.log(Response);
|
|
if (Response.Message != null && Response.Message != '') {
|
|
alert(Response.Message);
|
|
loadDate = false;
|
|
// location.reload();
|
|
|
|
// return;
|
|
}
|
|
|
|
if (loadDate) {
|
|
//Compliance/OFAC Hold Transactions
|
|
$('#complianceHoldCount').text(Response.ComplianceData.OFACComplianceTxns);
|
|
$('#complianceHoldCountMobile').text(Response.ComplianceData.OFACComplianceMobileTxns);
|
|
|
|
//Customer Count data
|
|
$('#totalCustomerCount').text(Response.CustomerData.TotalCustomers);
|
|
$('#mobileCustomerCount').text(Response.CustomerData.MobileCustomers);
|
|
$('#mobileCustomerCount').text(Response.CustomerData.MobileCustomers);
|
|
|
|
//Agent wise transaction show
|
|
let html = '';
|
|
if (AgentWiseTxn.length > 0) {
|
|
$('#tableAgentWise tbody').empty();
|
|
$('#tableAgentWisePopup tbody').empty();
|
|
}
|
|
for (var i = 0; i < 4; i++) {
|
|
html += '<tr>';
|
|
html += '<td>' + (i + 1).toString() + '</td>';
|
|
html += '<td>' + AgentWiseTxn[i].BranchName + '</td>';
|
|
html += '<td>' + AgentWiseTxn[i].CurrentMonth + '</td>';
|
|
html += '<td>' + AgentWiseTxn[i].PreviousMonth + '</td>';
|
|
html += '</tr>';
|
|
}
|
|
|
|
$('#tableAgentWise tbody').append(html);
|
|
|
|
//populate popup for all agent list
|
|
html = '';
|
|
for (var j = 0; j < AgentWiseTxn.length; j++) {
|
|
html += '<tr>';
|
|
html += '<td>' + (j + 1).toString() + '</td>';
|
|
html += '<td>' + AgentWiseTxn[j].BranchName + '</td>';
|
|
html += '<td>' + AgentWiseTxn[j].CurrentMonth + '</td>';
|
|
html += '<td>' + AgentWiseTxn[j].PreviousMonth + '</td>';
|
|
html += '</tr>';
|
|
}
|
|
$('#tableAgentWisePopup tbody').append(html);
|
|
|
|
//user wise txn
|
|
html = '';
|
|
if (Response.UserWiseTxn.length > 0) {
|
|
$('#tableUserWise tbody').empty();
|
|
$('#tableUserWisePopup tbody').empty();
|
|
|
|
var count = 4
|
|
if (Response.UserWiseTxn.length < count)
|
|
count = Response.UserWiseTxn.length;
|
|
|
|
for (i = 0; i < count; i++) {
|
|
html += '<tr>';
|
|
html += '<td>' + (i + 1).toString() + '</td>';
|
|
html += '<td>' + Response.UserWiseTxn[i].UserName + '</td>';
|
|
html += '<td>' + Response.UserWiseTxn[i].TxnCount + '</td>';
|
|
html += '</tr>';
|
|
}
|
|
|
|
$('#tableUserWise tbody').append(html);
|
|
}
|
|
|
|
|
|
//populate popup for all agent list
|
|
html = '';
|
|
for (j = 0; j < Response.UserWiseTxn.length; j++) {
|
|
html += '<tr>';
|
|
html += '<td>' + (j + 1).toString() + '</td>';
|
|
html += '<td>' + Response.UserWiseTxn[j].UserName + '</td>';
|
|
html += '<td>' + Response.UserWiseTxn[j].TxnCount + '</td>';
|
|
html += '</tr>';
|
|
}
|
|
$('#tableUserWisePopup tbody').append(html);
|
|
|
|
//lawson card
|
|
html = '';
|
|
if (Response.LawsonSummary.length > 0) {
|
|
$('#tableLawsonSummary tbody').empty();
|
|
}
|
|
for (i = 0; i < Response.LawsonSummary.length; i++) {
|
|
html += '<tr>';
|
|
html += '<td>' + (i + 1).toString() + '</td>';
|
|
html += '<td>' + Response.LawsonSummary[i].lDescription + '</td>';
|
|
html += '<td>' + Response.LawsonSummary[i].lCount + '</td>';
|
|
html += '</tr>';
|
|
}
|
|
|
|
$('#tableLawsonSummary tbody').append(html);
|
|
}
|
|
//day wise transaction charts
|
|
var options2 = {
|
|
chart: {
|
|
type: 'area',
|
|
height: 45,
|
|
width: 90,
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
series: [{
|
|
data: [25, 66, 41, 85, 63, 25, 44, 12, 36, 9, 54]
|
|
}],
|
|
stroke: {
|
|
width: 2,
|
|
curve: 'smooth'
|
|
},
|
|
markers: {
|
|
size: 0
|
|
},
|
|
colors: ["#727cf5"],
|
|
tooltip: {
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
type: "vertical",
|
|
shadeIntensity: 1,
|
|
inverseColors: false,
|
|
opacityFrom: 0.45,
|
|
opacityTo: 0.05,
|
|
stops: [45, 100]
|
|
},
|
|
}
|
|
}
|
|
|
|
new ApexCharts(document.querySelector("#today-sent"), $.extend({}, options2, {
|
|
series: [{
|
|
data: $.map(Response.SevenDaysSent, function (v) {
|
|
return v.TxnCount;
|
|
})
|
|
}]
|
|
})).render();
|
|
new ApexCharts(document.querySelector("#today-paid"), $.extend({}, options2, {
|
|
series: [{
|
|
data: $.map(Response.SevenDaysPaid, function (v) {
|
|
return v.TxnCount;
|
|
})
|
|
}], colors: ['#f77e53']
|
|
})).render();
|
|
//new ApexCharts(document.querySelector("#today-cancel"), $.extend({}, options2, {
|
|
// series: [{
|
|
// data: $.map(Response.SevenDaysCancel, function (v) {
|
|
// return v.TxnCount;
|
|
// })
|
|
// }], colors: ['#43d39e']
|
|
//})).render();
|
|
new ApexCharts(document.querySelector("#today-mobile-sent"), $.extend({}, options2, {
|
|
series: [{
|
|
data: $.map(Response.SevenDaysMobileSent, function (v) {
|
|
return v.TxnCount;
|
|
})
|
|
}], colors: ['#ffbe0b']
|
|
})).render();
|
|
|
|
|
|
new ApexCharts(document.querySelector("#today-registration"), $.extend({}, options2, {
|
|
series: [{
|
|
data: $.map(Response.SevenDaysRegistration, function (v) {
|
|
return v.RegCount;
|
|
})
|
|
}], colors: ['#00A800']
|
|
})).render();
|
|
|
|
new ApexCharts(document.querySelector("#today-mobile-registration"), $.extend({}, options2, {
|
|
series: [{
|
|
data: $.map(Response.SevenDaysMobileRegistration, function (v) {
|
|
return v.RegCount;
|
|
})
|
|
}], colors: ['#0bc6ff']
|
|
})).render();
|
|
|
|
new ApexCharts(document.querySelector("#today-mobile-activation"), $.extend({}, options2, {
|
|
series: [{
|
|
data: $.map(Response.SevenDaysMobileActivation, function (v) {
|
|
return v.RegCount;
|
|
})
|
|
}], colors: ['#8f7a0d']
|
|
})).render();
|
|
|
|
function getDaysInMonth(month, year) {
|
|
var date = new Date(year, month, 1);
|
|
var days = [];
|
|
var idx = 0;
|
|
while (date.getMonth() === month && idx < 15) {
|
|
var d = new Date(date);
|
|
days.push(d.getDate() + " " + d.toLocaleString('en-us', { month: 'short' }));
|
|
date.setDate(date.getDate() + 1);
|
|
idx += 1;
|
|
}
|
|
return days;
|
|
}
|
|
|
|
var labels = Response.Months;
|
|
|
|
//Counter/mobile transaction
|
|
var optionsCounterMobileTxn = {
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '70%',
|
|
},
|
|
expandOnClick: false
|
|
}
|
|
},
|
|
chart: {
|
|
height: 300,
|
|
type: 'donut'
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: 'right',
|
|
horizontalAlign: 'left',
|
|
itemMargin: {
|
|
horizontal: 6,
|
|
vertical: 3
|
|
}
|
|
},
|
|
series: $.map(Response.BranchTxn, function (v) {
|
|
return v.TxnCount;
|
|
}),
|
|
labels: $.map(Response.BranchTxn, function (v) {
|
|
return v.BranchName;
|
|
}),
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}],
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (value) { return value }
|
|
},
|
|
}
|
|
}
|
|
|
|
var chart = new ApexCharts(
|
|
document.querySelector("#counter-mobile-transaction"),
|
|
optionsCounterMobileTxn
|
|
);
|
|
|
|
chart.render();
|
|
|
|
|
|
|
|
//transaction statics
|
|
var optionstransaction = {
|
|
chart: {
|
|
height: 329,
|
|
type: 'line'
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 4
|
|
},
|
|
series: [{
|
|
name:'Txn Count',
|
|
data: Response.MonthsValues
|
|
}],
|
|
zoom: {
|
|
enabled: false
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
|
|
distributed: true,
|
|
xaxis: {
|
|
type: 'string',
|
|
categories: labels,
|
|
tooltip: {
|
|
enabled: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
labels: {
|
|
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: function (val) {
|
|
return val
|
|
}
|
|
}
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
type: "vertical",
|
|
shadeIntensity: 1,
|
|
inverseColors: false,
|
|
opacityFrom: 0.7,
|
|
opacityTo: 0.05,
|
|
stops: [45, 100]
|
|
},
|
|
},
|
|
}
|
|
|
|
|
|
var charttransaction = new ApexCharts(
|
|
document.querySelector("#revenue-chart"),
|
|
optionstransaction
|
|
);
|
|
|
|
charttransaction.render();
|
|
$('#loading-div').hide();
|
|
}
|