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.
1708 lines
80 KiB
1708 lines
80 KiB
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 += '<tr>'
|
|
+'<td colspan="2" class="current_year_data"><span class="data_label">'+row.c_category+'</span></td>'
|
|
+'<td class="current_year_data"><span class="value">'+convertNumberToFr(row.value)+'</span></td>'
|
|
+'</tr>';
|
|
|
|
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 += '<tr>'
|
|
+'<td>'+urll+'</td>'
|
|
+'<td class="text-center">'+convertNumberToFr(row.gev_rdata)+'</td>'
|
|
+'</tr>';
|
|
|
|
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 += '<tr>'
|
|
+'<td>'+months[parseInt(row.gev_raction)]+'</td>'
|
|
+'<td class="text-center">'+row.gev_rdata+'</td>'
|
|
+'</tr>';
|
|
|
|
total_search += parseInt(row.gev_rdata);
|
|
}
|
|
}
|
|
break;
|
|
case 'filter-type':
|
|
if (row.gev_raction != 0) {
|
|
type_data += '<tr>'
|
|
+'<td>'+row.label+'</td>'
|
|
+'<td class="text-center">'+row.gev_rdata+'</td>'
|
|
+'</tr>';
|
|
|
|
total_search += parseInt(row.gev_rdata);
|
|
}
|
|
break;
|
|
case 'filter-city':
|
|
if (row.gev_raction != 0 && row.label) {
|
|
city_data += '<tr>'
|
|
+'<td>'+row.label+'</td>'
|
|
+'<td class="text-center">'+row.gev_rdata+'</td>'
|
|
+'</tr>';
|
|
|
|
total_search += parseInt(row.gev_rdata);
|
|
}
|
|
break;
|
|
default:
|
|
|
|
}
|
|
|
|
break;
|
|
case 'faq_search':
|
|
if (row.gev_raction != 0) {
|
|
search_data += '<tr>'
|
|
+'<td class="text-center">'+row.gev_rdata+'</td>'
|
|
+'<td>'+row.gev_raction+'</td>'
|
|
+'</tr>';
|
|
|
|
total_search += parseInt(row.gev_rdata);
|
|
}
|
|
break;
|
|
case 'source_mediums':
|
|
if (row.gsm_rdata) {
|
|
search_data += '<tr>'
|
|
+'<td>'+row.gsm_rchannelgroup +'</td>'
|
|
+'<td>'+row.gsm_rdata+' <small class="text_color_blue">('+ (parseFloat(row.percentage)).toFixed(2) +'%)</small></td>'
|
|
+'</tr>';
|
|
|
|
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(' <br /><span class="stats year_value_down">(<b class="fa fa-arrow-down "></b> '+convertNumberToFr(Math.abs(data_stats))+'%)</span>');
|
|
} else {
|
|
$('.'+tbl_data['data_containers'][0]+' .value').append(' <br /><span class="year_value_up">(<b class="fa fa-arrow-up "></b> '+convertNumberToFr(Math.abs(data_stats))+'%)</span>');
|
|
}
|
|
}
|
|
/*
|
|
* data that usually depends on the filter
|
|
*/
|
|
|
|
if (tbl_data['data_name'] == 's') {
|
|
if (!months_data) {
|
|
months_data = '<tr><td>Pas de données</td></tr>';
|
|
}
|
|
if (!type_data) {
|
|
type_data = '<tr><td>Pas de données</td></tr>';
|
|
}
|
|
if (!city_data) {
|
|
city_data = '<tr><td>Pas de données</td></tr>';
|
|
}
|
|
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 = '<tr><td colspan="2">Pas de données</td></tr>';
|
|
}
|
|
$('.faq_search tbody').html(search_data);
|
|
// $('.faq_search tbody').append('<tr><td>Total</td></tr>'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 = '<tr><td>Pas de données</td></tr>';
|
|
}
|
|
$('.source_meds tbody').html(search_data);
|
|
// $('.faq_search tbody').append('<tr><td>Total</td></tr>'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 = '<tr><td colspan="2">Pas de données</td></tr>';
|
|
}
|
|
$('.url-clicks-body').html(url_clicks_data);
|
|
$('.url-clicks-body').append('<tr>'+'<td class="text-center">Total</td>'+'<td class="text-center">'+convertNumberToFr(total_url_clicks_data)+'</td>'+'</tr>');
|
|
}
|
|
|
|
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 += '<tr>'
|
|
+'<td style="background-color:'+graph_info['colors'][pie_color_index++]+'">'+' ' +'</td>'
|
|
+'<td>'+row.rtype +'</td>'
|
|
+'<td>'+convertNumberToFr(row.vis_rdata)+' <small class="text_color_blue">('+ (parseFloat(row.percentage)).toFixed(2) +'%)</small></td>'
|
|
+'</tr>';
|
|
|
|
// 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('<canvas id="'+graph_info['container_name']+'"></canvas>');
|
|
// 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('<h1 class="text-center vertical-align-gtext">Pas de données</h1>');
|
|
}
|
|
|
|
}
|
|
});
|
|
},
|
|
};//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();
|
|
});
|