Chart.defaults.global.animation.duration = 900;
Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = false;
var the_chart = {}, page_loader = app.get_loader2('Loading...');
var base_url = app.get_vars().baseurl;
var date_range;
var start_date = '30daysAgo';
var end_date = 'yesterday';
// load a locale
numeral.register('locale', 'fr', {
delimiters: {
thousands: ' ',
decimal: ','
},
abbreviations: {
thousand: 'k',
million: 'm',
billion: 'b',
trillion: 't'
},
ordinal : function (number) {
return number === 1 ? 'er' : 'ème';
},
currency: {
symbol: 'MGA'
}
});
function convertNumberToFr(number){
return (number % 1 == 1)? numeral(number).format('0,0.00') : numeral(number).format('0,0');
}
// switch between locales
numeral.locale('fr');
var dashboard = (function ($, window, jQuery) {
var _vars_ = {};
var activeUsers;
/*
* initialize the daterangepicker, set the default date range to 30 days ago from current date
*/
$('.datetimepicker').daterangepicker({
autoApply: true,
locale: {
format: 'DD/MM/YYYY',
// cancelLabel : dashboard_data.cancel,
// applyLabel : 'Appliquer le filtre',
"daysOfWeek": 'di_lu_ma_me_je_ce_sa'.split('_'),
"monthNames": 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_')
},
defaultDate : moment().subtract(30, 'days'),
startDate: moment().subtract(30, 'days'),
endDate: moment().subtract(1, 'days'),
maxDate: moment().subtract(1, 'days'),
});
return {
"set_vars": function (options) {
$.extend(_vars_, options || {});
},
"get_vars" : function(){
return _vars_;
},
"initEventListeners" : function(){
// Filter dashboard data
$('button#filter_dashboard_data').on('click', function(event) {
event.preventDefault();
$('.tab-pane.active').prepend(page_loader);
app.btn_loader('#filter_dashboard_data');
date_range = ($('#ga_date_range').val()).split(' - ');
start_date = date_range[0];
end_date = date_range[1];
// set user type filter
// $('string/element/array/function/jQuery object/string, context')
// console.log(utype);
var utype_cb = $('.user-filter:checked').toArray();
var utype_filter = [];
var utype = '';
if (utype_cb.length >= 3 || utype_cb.length == 0) {
utype = '1_2_3';
} else {
for (var i = 0; i < utype_cb.length; i++) {
utype_filter.push(utype_cb[i].value);
}
utype = utype_filter.join('_');
}
data_categories1 = [];
data_categories2 = [];
switch ($('li.active>a.statistics-tabs').attr('id')) {
case 'general-tabb':
$('span.box_values').html(0);
$('span.box_values_total').html(0);
break;
case 'abonnes-tabb':
break;
case 'recherches-tabb':
utype = 'none';
data_categories3 = [
];
break;
default:
}
data_categories1 = [
'users_and_date', 'sessions', 'session_duration', 'bounceRate', 'pageviews', 'uniquePageviews', 'event_views', 'users_and_browsers', 'users_and_device_category',
'f_contact_email_category',
'y_registrations',
'f_subscribers',
'f30days_reservations_per_subs',
'y_events',
'y_reservations',
'f30days_reservations',
'y_cancellations',
'f30days_cancellations',
'f_events_per_status',
// 'visitor_types'
];
data_categories2 = [
'y_registrations',
'f_subscribers',
'f30days_reservations_per_subs',
'y_events',
'y_reservations',
'f30days_reservations',
'y_cancellations',
'f30days_cancellations',
'f_events_per_status',
'f_searches',
'faq_searches',
// 'source_mediums',
'source_mediums_graph'
];
dashboard.filter_dashboard_data(start_date, end_date, data_categories1, utype);
dashboard.filter_dashboard_data(start_date, end_date, data_categories2, 'none');
app.rmbtn_loader('#filter_dashboard_data');
// if (data_categories1.length >0) {
// } else {
// app.rmbtn_loader('#filter_dashboard_data');
// }
app.remove_loader();
});
// Load data on tab click
$('.statistics-tabs').on('click', function(event) {
event.preventDefault();
if (!$(this).hasClass('graphs_loaded')) {
$('.tab-pane').prepend(page_loader);
start_date = '30daysAgo';
end_date = 'yesterday';
data_categories = [];
switch (this.id) {
case 'general-tabb':
data_categories = [
'users_and_date', 'sessions', 'session_duration', 'bounceRate', 'pageviews', 'uniquePageviews', 'event_views', 'users_and_browsers', 'users_and_device_category'
// 'visitor_types'
];
break;
case 'abonnes-tabb':
break;
case 'recherches-tabb':
break;
default:
}
$(this).addClass('graphs_loaded');
if (data_categories.length >0) {
dashboard.filter_dashboard_data(start_date, end_date, data_categories, '1_2_3');
} else {
// $('.page-loader2').remove();
}
} else {
// $('.page-loader2').remove();
}
app.remove_loader();
});
// set data triggers for each graph
$('.chart-btn-holder').on('click', 'button:not(.total_u_data)', function() {
// remove users to get chart data name
chart_data_name = ((this.id).split('___'))[0];
chart_user_type = ((this.id).split('___'))[1];
$(this).toggleClass('disable-btn');
// do not disable all, at least 1 trigger should remain active
var len = ($('#'+chart_data_name+'_triggers .disable-btn').toArray()).length;
if (len == 3) {
$(this).removeClass('disable-btn');
} else {
the_chart[chart_data_name+'-chart'].data.datasets.forEach(function(ds) {
if(ds.label == chart_user_type){
ds.hidden = !ds.hidden;
}
});
the_chart[chart_data_name+'-chart'].update();
}
});
$('a#export_dashboard_data').on('click', function(event) {
// set the export url in the export button
$('.tab-pane.active').prepend(app.get_loader2('Exporting...'));
app.btn_loader('#export_dashboard_data');
ddate_range = ($('#ga_date_range').val()).split(' - ');
sstart = ddate_range[0];
sstart = sstart.replace(/\//g, '-');
eend = ddate_range[1];
eend = eend.replace(/\//g, '-');
$('a#export_dashboard_data').attr('href',base_url+'export_dashboard/'+sstart+'/'+eend);
setTimeout(function(){
app.rmbtn_loader('#export_dashboard_data');
}, 1000);
app.remove_loader();
});
},
/*
* filter dashboard data, by date range or by user type(if supported)
*/
"filter_dashboard_data" : function(start, end, data_categories, user_type) {
start = start.replace(/\//g, '-');
end = end.replace(/\//g, '-');
data_categories.forEach(function(row, i){
if (user_type != 'none') {
/*
* dashboard graphs
*/
switch (row) {
case 'users_and_date':
dashboard.graph.users_and_date(start, end, 100000, user_type)
break;
// case 'visitor_types':
// dashboard.graph.visitor_types(start, end, 2)
// break;
case 'sessions':
dashboard.graph.sessions(start, end, 100000, user_type)
break;
case 'session_duration':
dashboard.graph.session_duration(start, end, 100000, user_type)
break;
case 'pageviews':
dashboard.graph.pageviews(start, end, 100000, user_type)
break;
case 'uniquePageviews':
dashboard.graph.uniquePageviews(start, end, 100000, user_type)
break;
case 'event_views':
dashboard.graph.event_views(start, end, 100000, user_type)
break;
case 'bounceRate':
dashboard.graph.bounceRate(start, end, 100000, user_type)
break;
case 'users_and_browsers':
dashboard.graph.users_and_browsers(start, end, 10)
break;
case 'users_and_device_category':
dashboard.graph.users_and_device_category(start, end, 10)
break;
case 'source_mediums_graph':
dashboard.graph.source_mediums_graph(start, end, 10)
break;
case 'f_contact_email_category':
dashboard.table.f_contact_email_category(start, end);
break;
default:
}
} else {
/*
* dashboard tables
*/
switch (row) {
case 'y_contact_emails':
dashboard.table.y_contact_emails(start, end);
break;
case 'f_url_clicks':
dashboard.table.f_url_clicks(start, end);
break;
case 'y_registrations':
dashboard.table.y_registrations(start, end);
break;
case 'f_subscribers':
dashboard.table.f_subscribers('30daysago', 'yesterday');
break;
case 'y_events':
dashboard.table.y_events(start, end);
break;
// case 'f30days_events':
// dashboard.table.f30days_events('30daysago', 'yesterday');
// break;
case 'y_reservations':
dashboard.table.y_reservations(start, end);
break;
case 'y_reservations_per_subs':
dashboard.table.y_reservations_per_subs(start, end);
break;
case 'f30days_reservations_per_subs':
dashboard.table.f30days_reservations_per_subs(start, end);
break;
case 'f30days_reservations':
dashboard.table.f30days_reservations(start, end);
break;
case 'y_cancellations':
dashboard.table.y_cancellations(start, end);
break;
case 'f30days_cancellations':
dashboard.table.f30days_cancellations(start, end);
break;
case 'f_events_per_status':
dashboard.table.f_events_per_status(start, end);
break;
case 'f_searches':
dashboard.table.f_searches(start, end);
break;
case 'faq_searches':
dashboard.table.faq_searches(start, end);
break;
case 'f_contact_email_category':
dashboard.table.f_contact_email_category(start, end);
break;
case 'source_mediums_graph':
dashboard.graph.source_mediums_graph(start, end, 10)
break;
case 'source_mediums':
dashboard.table.source_mediums(start, end);
break;
default:
}
}
});
},
/*
* initialize tables to be generated
*/
"generate_tables" : function(start, end) {
data_categories = [
'y_contact_emails',
'f_url_clicks',
'y_registrations',
'f_subscribers',
'y_events',
// 'f30days_events',
'y_reservations',
'f30days_reservations',
'y_reservations_per_subs',
'f30days_reservations_per_subs',
'y_cancellations',
'f30days_cancellations',
'f_events_per_status',
'f_contact_email_category',
'f_searches',
'faq_searches',
// 'source_mediums'
];
dashboard.filter_dashboard_data(start, end, data_categories, 'none');
},
/*
* initialize info required to generate tables
*/
"table": {
/*
* general tab - liens cliques
* contact email category data
*/
"f_contact_email_category": function(start, end){
var tbl_data = {
data_name: 'contact_cat',
data_cat: 'filtered',
/*
1 - Confirmation de réservation
2 - Communications
3 - Inscription sur liste d'attente
4 - Informations sur un événement
5 - Problèmes de connexion
6 - Problèmes de réservation
*/
data_containers: [
'contact_cat1', 'contact_cat2',
'contact_cat3', 'contact_cat4',
'contact_cat5', 'contact_cat6'
],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
/*
* general tab - liens cliques
* url clicks
*/
"f_url_clicks": function(start, end){
var tbl_data = {
data_name: 'url_clicks',
data_cat: 'filtered',
data_containers: [],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
/*
* general tab - liens cliques
* yearly contact emails
*/
"y_contact_emails": function(start, end){
var tbl_data = {
data_name: 'y_contact',
data_cat: 'yearly',
data_containers: ['y_contact_cur_year', 'y_contact_prev_year'],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
/*
* abonnes tab first row - Nombre d'inscriptions (Nouveau qui a confirmé son formulaire de première inscription)
* yearly registrations
*/
"y_registrations": function(start, end){
var tbl_data = {
data_name: 'y0',
data_cat: 'yearly',
data_containers: ['y0_cur_year', 'y0_prev_year'],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
/*
* abonnes tab first row - Nombre d'inscriptions (Nouveau qui a confirmé son formulaire de première inscription)
* subscribers per interval based on filter
*/
"f_subscribers": function(start, end){
var tbl_data = {
data_name: 'fsubs',
data_cat: 'filtered',
data_containers: ['fsubs_interval'],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
/*
* abonnes tab 2nd row - Nombre d'événements par statuts (prochainement, en cours, complets, terminés, passés, archivés) total + /année
* yearly event count
*/
"y_events": function(start, end){
var tbl_data = {
data_name: 'y1',
data_cat: 'yearly',
data_containers: ['y1_cur_year', 'y1_prev_year'],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
"f30days_events": function(start, end){
var tbl_data = {
data_name: 'f_y1',
data_cat: 'filtered',
data_containers: ['f_y1_interval'],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
/*
* abonnes tab 2nd row - Nombre d'événements par statuts (prochainement, en cours, complets, terminés, passés, archivés) total + /année
* number of events per backoffice status
*/
"f_events_per_status": function(start, end){
var tbl_data = {
data_name: 'fevents',
data_cat: 'filtered',
data_containers: ['fevents_proc', 'fevents_en', 'fevents_com', 'fevents_ter', 'fevents_pas', 'fevents_arc'],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
/*
* abonnes tab 3rd row - Nombre de réservations effectuées (par abonnés)
* yearly reservations per subscriber
*/
"y_reservations_per_subs": function(start, end){
var tbl_data = {
data_name: 'y2',
data_cat: 'yearly',
data_containers: ['y2_cur_year', 'y2_prev_year'],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
"f30days_reservations_per_subs": function(start, end){
var tbl_data = {
data_name: 'f_y2',
data_cat: 'filtered',
data_containers: ['f_y2_interval'],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
/*
* abonnes tab 4th row - Nombre de places réservées
* yearly reservations
*/
"y_reservations": function(start, end){
var tbl_data = {
data_name: 'y3',
data_cat: 'yearly',
data_containers: ['y3_cur_year', 'y3_prev_year'],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
"f30days_reservations": function(start, end){
var tbl_data = {
data_name: 'f_y3',
data_cat: 'filtered',
data_containers: ['f_y3_interval'],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
/*
* abonnes tab 5th row - Nombre d'annulations effectuées (annulation totale de réservation)
* yearly cancellations
*/
"y_cancellations": function(start, end){
var tbl_data = {
data_name: 'y4',
data_cat: 'yearly',
data_containers: ['y4_cur_year', 'y4_prev_year'],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
"f30days_cancellations": function(start, end){
var tbl_data = {
data_name: 'f_y4',
data_cat: 'filtered',
data_containers: ['f_y4_interval'],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
/*
* recherches tab
* searches
*/
"f_searches": function(start, end){
var tbl_data = {
data_name: 's',
data_cat: 'filtered',
data_containers: [
// types
// 's_', 's_', 's_', 's_', 's_' 's_'
],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
/*
* recherches tab
* faq searches
*/
"faq_searches": function(start, end){
var tbl_data = {
data_name: 'faq_search',
data_cat: 'filtered',
data_containers: [],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
/*
* recherches tab
* source mediums
*/
"source_mediums": function(start, end){
var tbl_data = {
data_name: 'source_mediums',
data_cat: 'filtered',
data_containers: [],
};
dashboard.get_tbl_data(start, end, tbl_data);
},
},
/*
* Get table data from database based on the info defined in "dashboard.table"
*/
"get_tbl_data" : function(start, end, tbl_data) {
$.ajax({
type: 'POST',
// url: base_url+'get_dashboard_table_data/'+tbl_data['data_name']+'/'+start+'/2017-11-01',
url: base_url+'get_dashboard_table_data/'+tbl_data['data_name']+'/'+start+'/'+end,
async: false,
dataType : 'json',
data : {type : "get_tbl_data"},
success: function(data) {
c = 0;
var url_clicks_data = '',
total_url_clicks_data = 0,
months_data = '',
type_data = '',
city_data = '',
search_data = '',
total_search = 0,
total_cat_filtered = 0;
contact_cat_data = '';
try {
/*
* Get table data from database based on the info defined in "dashboard.table"
*/
var prev_year_value=0;
var cur_year_value=0;
data.forEach(function(row, value){
switch (tbl_data['data_cat']) {
/*
* data from current and previous year
* expected rows are 2, 0 is for the current year, 1 is for the prev year
*/
case 'yearly':
// console.log(row);
switch (c) {
case 0:
break;
case 1:
break;
default:
}
if (c != 2) {
// console.log(tbl_data['data_containers'][c]);
// console.log(row.value);
var cur_year_val = $('.'+tbl_data['data_containers'][0]+' .data_year').html();
var prev_year_val = $('.'+tbl_data['data_containers'][1]+' .data_year').html();
if (cur_year_val == row.data_year) {
cur_year_value=parseFloat(row.value);
$('.'+tbl_data['data_containers'][0]+' .data_year').html((row.data_year));
$('.'+tbl_data['data_containers'][0]+' .value').html(convertNumberToFr(row.value));
} else if (prev_year_val == row.data_year) {
prev_year_value=parseFloat(row.value);
$('.'+tbl_data['data_containers'][1]+' .data_year').html((row.data_year));
$('.'+tbl_data['data_containers'][1]+' .value').html(convertNumberToFr(row.value));
}
}
break;
/*
* data that usually depends on the filter
*/
case 'filtered':
switch (tbl_data['data_name']) {
case 'fsubs':
case 'f_y1':
case 'f_y2':
case 'f_y3':
case 'f_y4':
if (row.value) {
if (row.dinterval) {
// $('.'+tbl_data['data_containers'][c]+' .interval').html(row.dinterval);
$('.'+tbl_data['data_containers'][c++]+' .value').html(convertNumberToFr(row.value));
} else {
// $('.'+tbl_data['data_containers'][c]+' .interval').html(row.dinterval);
$('.'+tbl_data['data_containers'][c++]+' .value').html(convertNumberToFr(row.value));
}
} else {
$('.'+tbl_data['data_containers'][c++]+' .value').html(0);
}
break;
case 'fevents':
// console.log(row);
// 0=Being Created, 1=Published, 2=Open, 3=Locked, 4=Closed, 5=Archived, 6=Deleted, 7=Terminated
// data_containers: ['fevents_proc', 'fevents_en', 'fevents_com', 'fevents_ter', 'fevents_pas', 'fevents_arc'],
$('.fevents_'+ row.bostat +' .value').html(convertNumberToFr(row.value));
break;
case 'contact_cat':
// console.log(row);
/*
1 - Confirmation de réservation
2 - Communications
3 - Inscription sur liste d'attente
4 - Informations sur un événement
5 - Problèmes de connexion
6 - Problèmes de réservation
*/
total_cat_filtered += parseInt(row.value);
contact_cat_data += ''
+'| '+row.c_category+' | '
+''+convertNumberToFr(row.value)+' | '
+'
';
break;
case 'url_clicks':
urll = (row.gev_raction).replace('https://preprod.wylog.com/lemonde-res', '');
urll = urll.replace('https://preprod.wylog.com/lemonde-dev/', '');
urll = urll.replace('https://preprod.wylog.com/lemonde-client/', '');
urll = urll.replace('localhost/', '');
urll = urll.replace('https://evenements-abonnes.lemonde.fr/', '');
url_clicks_data += ''
+'| '+urll+' | '
+''+convertNumberToFr(row.gev_rdata)+' | '
+'
';
total_url_clicks_data += parseInt(row.gev_rdata);
break;
case 's':
var months = ['Tous les mois', 'Janvier', 'Février', 'Mars', 'Avril', 'Mai',
'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
switch (row.gev_rdatalabel) {
case 'filter-month':
if (row.gev_raction != 0) {
if (months[parseInt(row.gev_raction)]) {
months_data += ''
+'| '+months[parseInt(row.gev_raction)]+' | '
+''+row.gev_rdata+' | '
+'
';
total_search += parseInt(row.gev_rdata);
}
}
break;
case 'filter-type':
if (row.gev_raction != 0) {
type_data += ''
+'| '+row.label+' | '
+''+row.gev_rdata+' | '
+'
';
total_search += parseInt(row.gev_rdata);
}
break;
case 'filter-city':
if (row.gev_raction != 0 && row.label) {
city_data += ''
+'| '+row.label+' | '
+''+row.gev_rdata+' | '
+'
';
total_search += parseInt(row.gev_rdata);
}
break;
default:
}
break;
case 'faq_search':
if (row.gev_raction != 0) {
search_data += ''
+'| '+row.gev_rdata+' | '
+''+row.gev_raction+' | '
+'
';
total_search += parseInt(row.gev_rdata);
}
break;
case 'source_mediums':
if (row.gsm_rdata) {
search_data += ''
+'| '+row.gsm_rchannelgroup +' | '
+''+row.gsm_rdata+' ('+ (parseFloat(row.percentage)).toFixed(2) +'%) | '
+'
';
total_search += parseInt(row.gsm_rdata);
}
break;
default:
}
break;
}
});
if (tbl_data['data_cat'] == 'yearly') {
// analyze data
// calculate percentage
// console.log(cur_year_value);
// console.log(prev_year_value);
data_stats = (Math.round(((prev_year_value-cur_year_value)/(prev_year_value))*100));
// console.log(percentage);
$('.'+tbl_data['data_containers'][0]+' .value .stats').remove();
$('.'+tbl_data['data_containers'][0]+' .value br').remove();
if (cur_year_value < prev_year_value) {
$('.'+tbl_data['data_containers'][0]+' .value').append('
( '+convertNumberToFr(Math.abs(data_stats))+'%)');
} else {
$('.'+tbl_data['data_containers'][0]+' .value').append('
( '+convertNumberToFr(Math.abs(data_stats))+'%)');
}
}
/*
* data that usually depends on the filter
*/
if (tbl_data['data_name'] == 's') {
if (!months_data) {
months_data = '| Pas de données |
';
}
if (!type_data) {
type_data = '| Pas de données |
';
}
if (!city_data) {
city_data = '| Pas de données |
';
}
if (!total_search) {
total_search = 0;
}
$('.filter-month tbody').html(months_data);
$('.filter-type tbody').html(type_data);
$('.filter-city tbody').html(city_data);
$('.total-search .value').html(total_search);
// console.log(months_data);
// console.log(type_data);
// console.log(city_data);
}
if (tbl_data['data_name'] == 'faq_search') {
if (!total_search) {
total_search = 0;
}
if (!search_data) {
search_data = '| Pas de données |
';
}
$('.faq_search tbody').html(search_data);
// $('.faq_search tbody').append('| Total |
'total_search);
// console.log(months_data);
// console.log(type_data);
// console.log(city_data);
}
if (tbl_data['data_name'] == 'source_mediums') {
if (!total_search) {
total_search = 0;
}
if (!search_data) {
search_data = '| Pas de données |
';
}
$('.source_meds tbody').html(search_data);
// $('.faq_search tbody').append('| Total |
'total_search);
// console.log(months_data);
// console.log(type_data);
// console.log(city_data);
}
if (tbl_data['data_name'] == 'url_clicks') {
if (!url_clicks_data) {
url_clicks_data = '| Pas de données |
';
}
$('.url-clicks-body').html(url_clicks_data);
$('.url-clicks-body').append(''+'| Total | '+''+convertNumberToFr(total_url_clicks_data)+' | '+'
');
}
if (tbl_data['data_name'] == 'contact_cat'){
$('.total_cat_filtered .value').html(total_cat_filtered);
$('.formulai_table tbody').html(contact_cat_data);
}
} catch (e) {
// console.log(e);
}
}
});
},
/*
* initialize the graphs to be generated
*/
"generate_graphs" : function(start, end) {
data_categories = [
'users_and_date',
// 'visitor_types',
'sessions',
'session_duration',
'bounceRate',
'pageviews',
'uniquePageviews',
'event_views',
'users_and_browsers',
'users_and_device_category',
'source_mediums_graph'
];
dashboard.filter_dashboard_data(start, end, data_categories, '1_2_3');
},
/*
* graph informations
*/
"graph": {
/*
* first tab -> Visiteurs graph
*/
"users_and_date": function(start, end, limit, user_categories){
// visitors graph
var graph_info = {
data_name: 'visitors',
db_tbl_abbrev: 'vis',
user_categories: user_categories,
color_Nouveaux: ['#f5a9a9'],
color_Connus: ['#9cbce6'],
color_Connectés: ['#97caa7'],
fill: false,
container_name: 'visitors-chart',
graph_type: 'line',
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].y;
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return `${label}: `+value;
}
} // end callbacks:
}, //end tooltips
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
// Convert the number to a string and splite the string every 3 charaters from the end
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return value;
}
}
}],
xAxes: [{
ticks: {
}
}]
},
legend: {
position: 'right'
},
animation: {
}
},
};
dashboard._query_ga_data(start, end, graph_info);
},
/*
* first tab -> Sessions Uniques / Utilisateurs
*/
"sessions": function(start, end, limit, user_categories){
var graph_info = {
data_name: 'sessions',
db_tbl_abbrev: 'sess',
user_categories: user_categories,
color_Nouveaux: ['#f5a9a9'],
color_Connus: ['#9cbce6'],
color_Connectés: ['#97caa7'],
fill: false,
container_name: 'sessions-chart',
graph_type: 'line',
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].y;
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return `${label}: `+value;
}
} // end callbacks:
}, //end tooltips
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
// Convert the number to a string and splite the string every 3 charaters from the end
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return value;
}
}
}],
xAxes: [{
ticks: {
}
}]
},
legend: {
position: 'right'
}
},
};
dashboard._query_ga_data(start, end, graph_info);
},
/*
* first tab -> Durée Moyenne de Session par utilisateurs (En Secondes)
*/
"session_duration": function(start, end, limit, user_categories){
// browser and users graph
var graph_info = {
data_name: 'session_duration',
db_tbl_abbrev: 'sess',
user_categories: user_categories,
color_Nouveaux: ['#f5a9a9'],
color_Connus: ['#9cbce6'],
color_Connectés: ['#97caa7'],
fill: false,
container_name: 'session_duration-chart',
graph_type: 'line',
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].y;
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return `${label}: `+value;
}
} // end callbacks:
}, //end tooltips
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
// Convert the number to a string and splite the string every 3 charaters from the end
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return value;
}
}
}],
xAxes: [{
ticks: {
}
}]
},
legend: {
position: 'right'
}
},
};
dashboard._query_ga_data(start, end, graph_info);
},
/*
* first tab -> Nombre total de pages vuess
*/
"pageviews": function(start, end, limit, user_categories){
// browser and users graph
var graph_info = {
data_name: 'pageviews',
db_tbl_abbrev: 'pv',
user_categories: user_categories,
color_Nouveaux: ['#f5a9a9'],
color_Connus: ['#9cbce6'],
color_Connectés: ['#97caa7'],
fill: false,
container_name: 'pageviews-chart',
graph_type: 'line',
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].y;
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return `${label}: `+value;
}
} // end callbacks:
}, //end tooltips
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
// Convert the number to a string and splite the string every 3 charaters from the end
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return value;
}
}
}],
xAxes: [{
ticks: {
}
}]
},
legend: {
position: 'right'
}
},
};
dashboard._query_ga_data(start, end, graph_info);
},
/*
* first tab -> Nombre total de pages vues par visiteur unique
*/
"uniquePageviews": function(start, end, limit, user_categories){
// browser and users graph
var graph_info = {
data_name: 'unique_pageviews',
db_tbl_abbrev: 'pv',
user_categories: user_categories,
color_Nouveaux: ['#f5a9a9'],
color_Connus: ['#9cbce6'],
color_Connectés: ['#97caa7'],
fill: false,
container_name: 'unique_pageviews-chart',
graph_type: 'line',
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].y;
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return `${label}: `+value;
}
} // end callbacks:
}, //end tooltips
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
// Convert the number to a string and splite the string every 3 charaters from the end
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return value;
}
}
}],
xAxes: [{
ticks: {
}
}]
},
legend: {
position: 'right'
}
},
};
dashboard._query_ga_data(start, end, graph_info);
},
/*
* first tab -> Nombre de total d'evenements vus
*/
"event_views": function(start, end, limit, user_categories){
// browser and users graph
var graph_info = {
data_name: 'event_views',
db_tbl_abbrev: 'ev',
user_categories: user_categories,
color_Nouveaux: ['#f5a9a9'],
color_Connus: ['#9cbce6'],
color_Connectés: ['#97caa7'],
fill: false,
container_name: 'event_views-chart',
graph_type: 'line',
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].y;
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return `${label}: `+value;
}
} // end callbacks:
}, //end tooltips
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
// Convert the number to a string and splite the string every 3 charaters from the end
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return value;
}
}
}],
xAxes: [{
ticks: {
}
}]
},
legend: {
position: 'right'
}
},
};
dashboard._query_ga_data(start, end, graph_info);
},
/*
* first tab -> Taux de rebond global
*/
"bounceRate": function(start, end, limit, user_categories){
// browser and users graph
var graph_info = {
data_name: 'bounceRate',
db_tbl_abbrev: 'bcr',
user_categories: user_categories,
color_Nouveaux: ['#f5a9a9'],
color_Connus: ['#9cbce6'],
color_Connectés: ['#97caa7'],
fill: false,
container_name: 'bounceRate-chart',
graph_type: 'line',
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].y;
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return `${label}: `+value;
}
} // end callbacks:
}, //end tooltips
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
// Convert the number to a string and splite the string every 3 charaters from the end
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return value;
}
}
}],
xAxes: [{
ticks: {
}
}]
},
legend: {
position: 'right'
}
},
};
dashboard._query_ga_data(start, end, graph_info);
},
/*
* first tab -> Navigateurs Web
*/
"users_and_browsers": function(start, end, limit){
// browser and users graph
var graph_info = {
data_name: 'users_browsers',
db_tbl_abbrev: 'br',
user_categories: 'none',
container_name: 'browsers-chart',
graph_type: 'pie',
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
var value = data.datasets[0].data[tooltipItem.index];
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return `${label}: `+value;
}
} // end callbacks:
}, //end tooltips
legend: {
display: false,
position: 'right'
}
},
colors: [
'rgb(255, 139, 3)',
'rgb(255, 230, 3)',
'rgb(167, 255, 3)',
'rgb(27, 163, 0)',
'rgb(3, 255, 187)',
'rgb(3, 217, 255)',
'rgb(3, 126, 255)',
'rgb(4, 48, 161)',
'rgb(114, 3, 255)',
'rgb(255, 3, 33)',
'rgb(220, 3, 255)',
'rgb(125, 0, 0)',
],
};
dashboard._query_ga_data(start, end, graph_info);
},
/*
* first tab -> Type de device
*/
"users_and_device_category": function(start, end, limit){
// browser and users graph
var graph_info = {
data_name: 'users_and_device_category',
db_tbl_abbrev: 'dv',
user_categories: 'none',
container_name: 'device-categories-chart',
graph_type: 'pie',
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
var value = data.datasets[0].data[tooltipItem.index];
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return `${label}: `+value;
}
} // end callbacks:
}, //end tooltips
legend: {
display: false,
position: 'right'
}
},
colors: [
'rgb(255, 139, 3)',
'rgb(255, 230, 3)',
'rgb(167, 255, 3)',
'rgb(27, 163, 0)',
'rgb(3, 255, 187)',
'rgb(3, 217, 255)',
'rgb(3, 126, 255)',
'rgb(4, 48, 161)',
'rgb(114, 3, 255)',
'rgb(255, 3, 33)',
'rgb(220, 3, 255)',
'rgb(125, 0, 0)',
],
};
dashboard._query_ga_data(start, end, graph_info);
},
"source_mediums_graph": function(start, end, limit){
// browser and users graph
var graph_info = {
data_name: 'source_mediums_graph',
db_tbl_abbrev: 'gsm',
user_categories: 'none',
container_name: 'source_mediums_graph-chart',
graph_type: 'pie',
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
var value = data.datasets[0].data[tooltipItem.index];
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(' ');
return `${label}: `+value;
}
} // end callbacks:
}, //end tooltips
legend: {
display: false,
position: 'right'
}
},
colors: [
'rgb(255, 139, 3)',
'rgb(255, 230, 3)',
'rgb(167, 255, 3)',
'rgb(27, 163, 0)',
'rgb(3, 255, 187)',
'rgb(3, 217, 255)',
'rgb(3, 126, 255)',
'rgb(4, 48, 161)',
'rgb(114, 3, 255)',
'rgb(255, 3, 33)',
'rgb(220, 3, 255)',
'rgb(125, 0, 0)',
],
};
dashboard._query_ga_data(start, end, graph_info);
},
/*
* first tab -> currently not in use
*/
// "visitor_types": function(start, end, limit){
// // browser and users graph
// var graph_info = {
// data_name: 'users_and_device_category',
// db_tbl_abbrev: 'vistype',
// user_categories: 'none',
//
// container_name: 'visitors-type-chart',
// graph_type: 'pie',
// data_name: 'visitors_type',
// options: {
// legend: {
// position: 'bottom'
// }
// },
// colors: [],
// };
// dashboard._query_ga_data(start, end, graph_info);
// },
},
"_query_ga_data" : function(start, end, graph_info) {
$.ajax({
type: 'POST',
url: base_url+'get_ga_data/'+graph_info['data_name']+'/'+graph_info['db_tbl_abbrev']+'/'+graph_info['user_categories']+'/'+start+'/'+end,
async: false,
dataType : 'json',
data : {type : "get_ga_data"},
success: function(data) {
// reset the box values
// console.log(00);
// prepare graph data
var data_label = [];
var datasets = {
[graph_info['data_name']]: []
};
var ga_data = {}, db_tbl_abbrev = graph_info['db_tbl_abbrev'];
var data_user_totals = {};
var days_count = 0, table_data = '';
var pie_color_index = 0;
try {
data.forEach(function(row, value){
if (graph_info['graph_type'] != 'pie') {
// console.log(row);
switch (graph_info['user_categories']) {
/*Get all users*/
case '1':
if (row.user_type == 'Nouveaux') {
days_count++;
}
break;
case '2':
if (row.user_type == 'Connus') {
days_count++;
}
break;
case '1_2':
if (row.user_type == 'Connus') {
days_count++;
}
break;
default:
if (row.user_type == 'Connectés') {
days_count++;
}
}
// avoid duplicates in data label
if (!inArray(row[db_tbl_abbrev+'_rdate'], data_label)) {
data_label.push(row[db_tbl_abbrev+'_rdate']);
}
/*Get bounce rate total box data*/
if (
graph_info['data_name'] == 'bounceRate' && row['user_type'] != 'Connectés'
) {
/*Get the data in sessions value*/
if (data_user_totals[graph_info['data_name']+'___total_sess_data']) {
// get total data for all users
data_user_totals[graph_info['data_name']+'___total_sess_br'] += parseInt(row['sess_br']);
data_user_totals[graph_info['data_name']+'___total_sess_data'] += parseInt(row['sess_rdata']);
} else {
data_user_totals[graph_info['data_name']+'___total_sess_br'] = parseInt(row['sess_br']);
data_user_totals[graph_info['data_name']+'___total_sess_data'] = parseInt(row['sess_rdata']);
}
}
/*Get bounce rate user box data*/
if (
graph_info['data_name'] == 'bounceRate'
) {
/*Get the data in sessions value*/
if (data_user_totals[`${row['user_type']}__sess_data`]) {
// get total data for all users
data_user_totals[`${row['user_type']}__sess_br`] += parseInt(row['sess_br']);
data_user_totals[`${row['user_type']}__sess_data`] += parseInt(row['sess_rdata']);
} else {
data_user_totals[`${row['user_type']}__sess_br`] = parseInt(row['sess_br']);
data_user_totals[`${row['user_type']}__sess_data`] = parseInt(row['sess_rdata']);
}
}
// get total data for all users
if (data_user_totals[graph_info['data_name']+'___Total_u_data']) {
// get total data for all users
if (row[db_tbl_abbrev+'_rdata'] != null) {
data_user_totals[graph_info['data_name']+'___Total_u_data'] += parseInt(row[db_tbl_abbrev+'_rdata']);
}
} else {
if (row[db_tbl_abbrev+'_rdata'] != null) {
data_user_totals[graph_info['data_name']+'___Total_u_data'] = parseInt(row[db_tbl_abbrev+'_rdata']);
}
}
// get the totals for each user in each box
if (ga_data[row['user_type']]) {
// get total data for individual users
data_user_totals[row['user_type']] += parseInt((row[db_tbl_abbrev+'_rdata'])?row[db_tbl_abbrev+'_rdata']:0);
ga_data[row['user_type']].push({
t : row[db_tbl_abbrev+'_rdate'],
y : parseInt((row[db_tbl_abbrev+'_rdata'])?(row[db_tbl_abbrev+'_rdata']):0)
});
} else {
ga_data[row['user_type']] = [];
// get total data for individual users
data_user_totals[row['user_type']] = parseInt((row[db_tbl_abbrev+'_rdata'])?row[db_tbl_abbrev+'_rdata']:0);
ga_data[row['user_type']].push({
t : row[db_tbl_abbrev+'_rdate'],
y : parseInt((row[db_tbl_abbrev+'_rdata'])?row[db_tbl_abbrev+'_rdata']:0)
});
}
} else {
if (!ga_data['all']) {
ga_data['all'] = [];
}
// insert table data
table_data += ''
+'| '+' ' +' | '
+''+row.rtype +' | '
+''+convertNumberToFr(row.vis_rdata)+' ('+ (parseFloat(row.percentage)).toFixed(2) +'%) | '
+'
';
// avoid duplicates in data label
if (!inArray(row[db_tbl_abbrev+'_rdate'], data_label)) {
data_label.push(row['rtype']);
}
ga_data['all'].push(row['vis_rdata']);
}
})
// insert table data for some graphs
switch (graph_info['data_name']) {
case 'users_browsers':
$('.nav_web tbody').html(table_data);
break;
case 'users_and_device_category':
$('.type_dev tbody').html(table_data);
break;
case 'source_mediums_graph':
$('.source_meds tbody').html(table_data);
break;
default:
}
// prepare datasets
for (var key in ga_data) {
// console.log(graph_info['data_name']);
// console.log('#'+graph_info['data_name']+'___'+key);
// console.log(Math.round(data_user_totals[key]));
//
// console.log(key);
// console.log(data_user_totals[graph_info['data_name']+'___Total_u_data']);
// set dataset triggers button values
users_total = convertNumberToFr(Math.round(data_user_totals[key]/days_count));
accu_users_total = convertNumberToFr(Math.round(data_user_totals[key]));
graph_total = convertNumberToFr(Math.round(data_user_totals[graph_info['data_name']+'___Total_u_data']/days_count));
accu_graph_total = convertNumberToFr(Math.round(data_user_totals[graph_info['data_name']+'___Total_u_data']));
switch (graph_info['data_name']) {
case 'session_duration':
$('#'+graph_info['data_name']+'___'+key+' span.box_values').html(users_total);
$('#'+graph_info['data_name']+'___Total_u_data'+' span.box_values').html(graph_total);
break;
case 'bounceRate':
$('#'+graph_info['data_name']+'___'+key+' span.box_values').html(
Math.round((data_user_totals[`${key}__sess_br`]/data_user_totals[`${key}__sess_data`])*100)
);
$('#'+graph_info['data_name']+'___Total_u_data'+' span.box_values').html(
Math.round((data_user_totals[`${graph_info['data_name']}___total_sess_br`]/data_user_totals[`${graph_info['data_name']}___total_sess_data`])*100)
);
break;
default:
$('#'+graph_info['data_name']+'___'+key+' span.box_values').html(users_total);
$('#'+graph_info['data_name']+'___'+key+' span.box_values_total').html(accu_users_total);
$('#'+graph_info['data_name']+'___Total_u_data'+' span.box_values').html(graph_total);
$('#'+graph_info['data_name']+'___Total_u_data'+' span.box_values_total').html(accu_graph_total);
}
// prepare datasets color
if (graph_info['graph_type'] != 'line') {
// if bar or pie, assign colors to each bar or slice
for (var i = 0; i < ga_data[key].length; i++) {
switch (graph_info['graph_type']) {
case 'bar':
// use the default color that was set for each metric
if (i < (ga_data[key].length)) {
graph_info['color_'+key].push(graph_info['color_'+key][0]);
}
break;
case 'pie':
// use random colors
// rgb(156, 83, 24)
if (i < (ga_data[key].length)) {
graph_info['color_'+key] = graph_info['colors'];
}
break;
default:
}
}
}
if (ga_data.hasOwnProperty(key)) {
datasets[graph_info['data_name']].push({
label: key,
fill: graph_info['fill'],
data: ga_data[key],
borderColor: graph_info['color_'+key],
backgroundColor: graph_info['color_'+key]
});
}
}
var stat_btn = ($('#'+graph_info['data_name']+'_triggers .stat_btn').toArray());
for (var i = 0; i < stat_btn.length; i++) {
// console.log(stat_btn[i].id);
// console.log($(stat_btn[i].id + ' .box_values').html())
box_val = parseInt($('#'+stat_btn[i].id + ' .box_values').html());
// console.log(box_val);
if (box_val == 0) {
$('#'+stat_btn[i].id).attr('disabled', 'disabled');
$('#'+stat_btn[i].id).addClass('disable-btn');
} else {
$('#'+stat_btn[i].id).removeAttr('disabled');
$('#'+stat_btn[i].id).removeClass('disable-btn');
}
}
// reset the graph container
$('#'+graph_info['container_name']).remove();
$('#'+graph_info['container_name']+'-container').html('');
// prepare graph details
var ctx = document.getElementById(graph_info['container_name']).getContext('2d');
// graph it!
the_chart[graph_info['container_name']] = new Chart(ctx,{
type: graph_info['graph_type'],
options: graph_info['options'],
data: {
datasets: datasets[graph_info['data_name']],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: data_label
},
});
console.log(the_chart[graph_info['container_name']].data);
} catch (e) {
$('#'+graph_info['container_name']).remove();
$('#'+graph_info['container_name']+'-container').append('Pas de données
');
}
}
});
},
};//end of return
// Pass in jQuery.
})(jQuery, this);
function inArray(needle, haystack) {
var length = haystack.length;
for(var i = 0; i < length; i++) {
if(haystack[i] == needle) return true;
}
return false;
}
$(document).ready(function() {
dashboard.generate_graphs(start_date, end_date);
dashboard.generate_tables(start_date, end_date);
app.remove_loader();
dashboard.initEventListeners();
});