101 lines
3.0 KiB
JavaScript
101 lines
3.0 KiB
JavaScript
|
/* eslint-disable */
|
||
|
|
if (typeof jQuery === 'undefined') {
|
||
|
|
const script = document.createElement('script');
|
||
|
|
script.src = '//code.jquery.com/jquery.js';
|
||
|
|
document.head.appendChild(script);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (typeof Chart === 'undefined') {
|
||
|
|
const script = document.createElement('script');
|
||
|
|
script.src = '//cdn.jsdelivr.net/npm/chart.js';
|
||
|
|
script.onload = function () {
|
||
|
|
window.unamiChart = false;
|
||
|
|
loadUnamiStat();
|
||
|
|
};
|
||
|
|
document.head.appendChild(script);
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadUnamiStat() {
|
||
|
|
var startAt = $('#unamiChart').data('start-at');
|
||
|
|
var endAt = $('#unamiChart').data('end-at');
|
||
|
|
var unit = $('#unamiChart').data('unit');
|
||
|
|
var tz = $('#unamiChart').data('tz');
|
||
|
|
var shareId = $('#unamiChart').data('share-id');
|
||
|
|
var reload = Number($('#unamiChart').data('reload'));
|
||
|
|
if ($('#unamiChart').length) {
|
||
|
|
loadUnamiDataAjax(startAt, endAt, unit, tz, shareId);
|
||
|
|
if (reload > 0) {
|
||
|
|
setInterval(function () {
|
||
|
|
loadUnamiDataAjax(startAt, endAt, unit, tz, shareId);
|
||
|
|
}, 1000 * reload);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
alert('canvas#unamiChart does not exist!');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadUnamiDataAjax(startAt, endAt, unit, tz, shareId) {
|
||
|
|
if (startAt == 'auto') {
|
||
|
|
startAt = new Date() * 1 - 24 * 3600 * 1000;
|
||
|
|
}
|
||
|
|
if (endAt == 'auto') {
|
||
|
|
endAt = new Date() * 1;
|
||
|
|
}
|
||
|
|
var website = $('#unamiChart').data('website');
|
||
|
|
var apiUrl = $('#unamiChart').data('url');
|
||
|
|
var chartOptions = {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
legend: { position: 'top' },
|
||
|
|
scales: { x: { stacked: true }, y: { stacked: true } },
|
||
|
|
};
|
||
|
|
var url = `${apiUrl}/api/websites/${website}/pageviews?start_at=${startAt}&end_at=${endAt}&unit=${unit}&tz=${tz}&shareId=${shareId}`;
|
||
|
|
$.ajax({
|
||
|
|
method: 'GET',
|
||
|
|
url: url,
|
||
|
|
success: function (data) {
|
||
|
|
var labels = data.pageviews.map(p => {
|
||
|
|
var date = new Date(p.t);
|
||
|
|
var hours = date.getHours();
|
||
|
|
return `${hours === 0 ? 12 : hours > 12 ? hours - 12 : hours}${hours < 12 ? 'AM' : 'PM'}`;
|
||
|
|
});
|
||
|
|
|
||
|
|
var pageviewsData = data.pageviews.map(p => p.y);
|
||
|
|
var sessionsData = data.sessions.map(s => s.y);
|
||
|
|
|
||
|
|
var chartData = {
|
||
|
|
labels: labels,
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
label: 'Unique visitors',
|
||
|
|
data: sessionsData,
|
||
|
|
backgroundColor: 'rgba(38, 128, 235, 0.6)',
|
||
|
|
borderColor: 'rgba(38, 128, 235, 0.7)',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Page views',
|
||
|
|
data: pageviewsData,
|
||
|
|
backgroundColor: 'rgba(38, 128, 235, 0.4)',
|
||
|
|
borderColor: 'rgba(38, 128, 235, 0.5)',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
if (!window.unamiChart) {
|
||
|
|
var ctx = document.getElementById('unamiChart').getContext('2d');
|
||
|
|
window.unamiChart = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: chartData,
|
||
|
|
options: chartOptions,
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
window.unamiChart.data = chartData;
|
||
|
|
window.unamiChart.update('none');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function (error) {
|
||
|
|
console.log(error);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|