').addClass('col-lg-6 col-12');
var breakdownChart = new gapi.analytics.googleCharts.DataChart({
query: {
'dimensions': 'ga:date',
'metrics': 'ga:sessions',
'start-date': start_date,
'end-date': 'yesterday'
},
chart: {
type: 'LINE',
container: $analytics_chart_2[0],
options: {
title: 'All',
width: '100%',
tooltip: {isHtml: true},
}
}
});
$analytics_chart_2.appendTo($analytics_components);
// 5. Chart table
var $analytics_chart_1 = $('
').addClass('col-lg-6 col-12');
var mainChart = new gapi.analytics.googleCharts.DataChart({
query: {
'dimensions': 'ga:medium',
'metrics': 'ga:sessions',
'sort': '-ga:sessions',
'max-results': '6'
},
chart: {
type: 'TABLE',
container: $analytics_chart_1[0],
options: {
width: '100%'
}
}
});
$analytics_chart_1.appendTo($analytics_components);
// Events handling & animations
var table_row_listener;
viewSelector.on('change', function(ids) {
var options = {query: {ids: ids}};
activeUsers.set({ids: ids}).execute();
mainChart.set(options).execute();
breakdownChart.set(options).execute();
if (table_row_listener) { google.visualization.events.removeListener(table_row_listener); }
});
mainChart.on('success', function(response) {
var chart = response.chart;
var dataTable = response.dataTable;
table_row_listener = google.visualization.events.addListener(chart, 'select', function() {
var options;
if (chart.getSelection().length) {
var row = chart.getSelection()[0].row;
var medium = dataTable.getValue(row, 0);
options = {
query: {
filters: 'ga:medium==' + medium,
},
chart: {
options: {
title: medium,
}
}
};
} else {
options = {
chart: {
options: {
title: 'All',
}
}
};
delete breakdownChart.get().query.filters;
}
breakdownChart.set(options).execute();
});
});
// Add CSS animation to visually show the when users come and go.
activeUsers.once('success', function() {
var element = this.container.firstChild;
var timeout;
this.on('change', function(data) {
element = this.container.firstChild;
var animationClass = data.delta > 0 ? 'is-increasing' : 'is-decreasing';
element.className += (' ' + animationClass);
clearTimeout(timeout);
timeout = setTimeout(function() {
element.className = element.className.replace(/ is-(increasing|decreasing)/g, '');
}, 3000);
});
});
},
/*
* Credits to https://github.com/googleanalytics/ga-dev-tools
* This is the Active Users component that polls
* the number of active users on Analytics each 5 secs
*/
analytics_create_components: function() {
gapi.analytics.createComponent('ActiveUsers', {
initialize: function() {
this.activeUsers = 0;
gapi.analytics.auth.once('signOut', this.handleSignOut_.bind(this));
},
execute: function() {
// Stop any polling currently going on.
if (this.polling_) {
this.stop();
}
this.render_();
// Wait until the user is authorized.
if (gapi.analytics.auth.isAuthorized()) {
this.pollActiveUsers_();
} else {
gapi.analytics.auth.once('signIn', this.pollActiveUsers_.bind(this));
}
},
stop: function() {
clearTimeout(this.timeout_);
this.polling_ = false;
this.emit('stop', {activeUsers: this.activeUsers});
},
render_: function() {
var opts = this.get();
// Render the component inside the container.
this.container = typeof opts.container === 'string' ?
document.getElementById(opts.container) : opts.container;
this.container.innerHTML = opts.template || this.template;
this.container.querySelector('b').innerHTML = this.activeUsers;
},
pollActiveUsers_: function() {
var options = this.get();
var pollingInterval = (options.pollingInterval || 5) * 1000;
if (isNaN(pollingInterval) || pollingInterval < 5000) {
throw new Error('Frequency must be 5 seconds or more.');
}
this.polling_ = true;
gapi.client.analytics.data.realtime
.get({ids:options.ids, metrics:'rt:activeUsers'})
.then(function(response) {
var result = response.result;
var newValue = result.totalResults ? +result.rows[0][0] : 0;
var oldValue = this.activeUsers;
this.emit('success', {activeUsers: this.activeUsers});
if (newValue !== oldValue) {
this.activeUsers = newValue;
this.onChange_(newValue - oldValue);
}
if (this.polling_) {
this.timeout_ = setTimeout(this.pollActiveUsers_.bind(this), pollingInterval);
}
}.bind(this));
},
onChange_: function(delta) {
var valueContainer = this.container.querySelector('b');
if (valueContainer) { valueContainer.innerHTML = this.activeUsers; }
this.emit('change', {activeUsers: this.activeUsers, delta: delta});
if (delta > 0) {
this.emit('increase', {activeUsers: this.activeUsers, delta: delta});
} else {
this.emit('decrease', {activeUsers: this.activeUsers, delta: delta});
}
},
handleSignOut_: function() {
this.stop();
gapi.analytics.auth.once('signIn', this.handleSignIn_.bind(this));
},
handleSignIn_: function() {
this.pollActiveUsers_();
gapi.analytics.auth.once('signOut', this.handleSignOut_.bind(this));
},
template:
'
' +
'Active Users: ' +
'
'
});
},
// Utility functions
addLoader: function(selector) {
var loader = '
';
selector.html("
" + loader + "
");
},
getValue: function(d) { return d[1]; },
format_number: function(value, type, digits, symbol) {
if (type === 'currency') {
return this.render_monetary_field(value, this.currency_id);
} else {
return field_utils.format[type](value || 0, {digits: digits}) + ' ' + symbol;
}
},
formatValue: function (value) {
var formatter = field_utils.format.float;
var formatedValue = formatter(value, undefined, FORMAT_OPTIONS);
return formatedValue;
},
render_monetary_field: function(value, currency_id) {
var currency = session.get_currency(currency_id);
var formatted_value = field_utils.format.float(value || 0, {digits: currency && currency.digits});
if (currency) {
if (currency.position === "after") {
formatted_value += currency.symbol;
} else {
formatted_value = currency.symbol + formatted_value;
}
}
return formatted_value;
},
});
core.action_registry.add('backend_dashboard', Dashboard);
return Dashboard;
});