refactor: abstract out some client side dashboard code into modules, analytics subpages for users, topics, and logins
Julian Lam
4 years ago
parent
079a13d41a
commit
f561799f74
@ -0,0 +1,14 @@
|
||||
'use strict';
|
||||
|
||||
define('admin/dashboard/logins', ['admin/modules/dashboard-line-graph'], (graph) => {
|
||||
const ACP = {};
|
||||
|
||||
ACP.init = () => {
|
||||
graph.init({
|
||||
set: 'logins',
|
||||
dataset: ajaxify.data.dataset,
|
||||
});
|
||||
};
|
||||
|
||||
return ACP;
|
||||
});
|
||||
@ -0,0 +1,14 @@
|
||||
'use strict';
|
||||
|
||||
define('admin/dashboard/topics', ['admin/modules/dashboard-line-graph'], (graph) => {
|
||||
const ACP = {};
|
||||
|
||||
ACP.init = () => {
|
||||
graph.init({
|
||||
set: 'topics',
|
||||
dataset: ajaxify.data.dataset,
|
||||
});
|
||||
};
|
||||
|
||||
return ACP;
|
||||
});
|
||||
@ -0,0 +1,14 @@
|
||||
'use strict';
|
||||
|
||||
define('admin/dashboard/users', ['admin/modules/dashboard-line-graph'], (graph) => {
|
||||
const ACP = {};
|
||||
|
||||
ACP.init = () => {
|
||||
graph.init({
|
||||
set: 'registrations',
|
||||
dataset: ajaxify.data.dataset,
|
||||
});
|
||||
};
|
||||
|
||||
return ACP;
|
||||
});
|
||||
@ -0,0 +1,177 @@
|
||||
'use strict';
|
||||
|
||||
define('admin/modules/dashboard-line-graph', ['Chart', 'translator', 'benchpress', 'api'], function (Chart, translator, Benchpress, api) {
|
||||
const Graph = {
|
||||
_current: null,
|
||||
};
|
||||
let isMobile = false;
|
||||
|
||||
Graph.init = ({ set, dataset }) => {
|
||||
const canvas = document.getElementById('analytics-traffic');
|
||||
const canvasCtx = canvas.getContext('2d');
|
||||
const trafficLabels = utils.getHoursArray();
|
||||
|
||||
isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (isMobile) {
|
||||
Chart.defaults.global.tooltips.enabled = false;
|
||||
}
|
||||
|
||||
var t = translator.Translator.create();
|
||||
t.translateKey(`admin/menu:${ajaxify.data.template.name.replace('admin/', '')}`, []).then((key) => {
|
||||
const data = {
|
||||
labels: trafficLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: key,
|
||||
backgroundColor: 'rgba(151,187,205,0.2)',
|
||||
borderColor: 'rgba(151,187,205,1)',
|
||||
pointBackgroundColor: 'rgba(151,187,205,1)',
|
||||
pointHoverBackgroundColor: 'rgba(151,187,205,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(151,187,205,1)',
|
||||
data: dataset,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
canvas.width = $(canvas).parent().width();
|
||||
|
||||
data.datasets[0].yAxisID = 'left-y-axis';
|
||||
|
||||
Graph._current = new Chart(canvasCtx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
display: true,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
id: 'left-y-axis',
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
precision: 0,
|
||||
},
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: key,
|
||||
},
|
||||
}],
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'x',
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
$('[data-action="updateGraph"]:not([data-units="custom"])').on('click', function () {
|
||||
var until = new Date();
|
||||
var amount = $(this).attr('data-amount');
|
||||
if ($(this).attr('data-units') === 'days') {
|
||||
until.setHours(0, 0, 0, 0);
|
||||
}
|
||||
until = until.getTime();
|
||||
Graph.update(set, $(this).attr('data-units'), until, amount);
|
||||
$('[data-action="updateGraph"]').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
require(['translator'], function (translator) {
|
||||
translator.translate('[[admin/dashboard:page-views-custom]]', function (translated) {
|
||||
$('[data-action="updateGraph"][data-units="custom"]').text(translated);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$('[data-action="updateGraph"][data-units="custom"]').on('click', function () {
|
||||
var targetEl = $(this);
|
||||
|
||||
Benchpress.render('admin/partials/pageviews-range-select', {}).then(function (html) {
|
||||
var modal = bootbox.dialog({
|
||||
title: '[[admin/dashboard:page-views-custom]]',
|
||||
message: html,
|
||||
buttons: {
|
||||
submit: {
|
||||
label: '[[global:search]]',
|
||||
className: 'btn-primary',
|
||||
callback: submit,
|
||||
},
|
||||
},
|
||||
}).on('shown.bs.modal', function () {
|
||||
var date = new Date();
|
||||
var today = date.toISOString().substr(0, 10);
|
||||
date.setDate(date.getDate() - 1);
|
||||
var yesterday = date.toISOString().substr(0, 10);
|
||||
|
||||
modal.find('#startRange').val(targetEl.attr('data-startRange') || yesterday);
|
||||
modal.find('#endRange').val(targetEl.attr('data-endRange') || today);
|
||||
});
|
||||
|
||||
function submit() {
|
||||
// NEED TO ADD VALIDATION HERE FOR YYYY-MM-DD
|
||||
var formData = modal.find('form').serializeObject();
|
||||
var validRegexp = /\d{4}-\d{2}-\d{2}/;
|
||||
|
||||
// Input validation
|
||||
if (!formData.startRange && !formData.endRange) {
|
||||
// No range? Assume last 30 days
|
||||
Graph.update(set, 'days');
|
||||
$('[data-action="updateGraph"]').removeClass('active');
|
||||
$('[data-action="updateGraph"][data-units="days"]').addClass('active');
|
||||
return;
|
||||
} else if (!validRegexp.test(formData.startRange) || !validRegexp.test(formData.endRange)) {
|
||||
// Invalid Input
|
||||
modal.find('.alert-danger').removeClass('hidden');
|
||||
return false;
|
||||
}
|
||||
|
||||
var until = new Date(formData.endRange);
|
||||
until.setDate(until.getDate() + 1);
|
||||
until = until.getTime();
|
||||
var amount = (until - new Date(formData.startRange).getTime()) / (1000 * 60 * 60 * 24);
|
||||
|
||||
Graph.update(set, 'days', until, amount);
|
||||
$('[data-action="updateGraph"]').removeClass('active');
|
||||
targetEl.addClass('active');
|
||||
|
||||
// Update "custom range" label
|
||||
targetEl.attr('data-startRange', formData.startRange);
|
||||
targetEl.attr('data-endRange', formData.endRange);
|
||||
targetEl.html(formData.startRange + ' – ' + formData.endRange);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
Graph.update = (set, units, until, amount) => {
|
||||
if (!Graph._current) {
|
||||
return;
|
||||
}
|
||||
|
||||
api.get(`/admin/analytics/${set}`, { units, until, amount }).then((dataset) => {
|
||||
if (units === 'days') {
|
||||
Graph._current.data.xLabels = utils.getDaysArray(until, amount);
|
||||
} else {
|
||||
Graph._current.data.xLabels = utils.getHoursArray();
|
||||
}
|
||||
|
||||
Graph._current.data.datasets[0].data = dataset;
|
||||
Graph._current.data.labels = Graph._current.data.xLabels;
|
||||
Graph._current.update();
|
||||
|
||||
// Update the View as JSON button url
|
||||
var apiEl = $('#view-as-json');
|
||||
var newHref = $.param({
|
||||
units: units || 'hours',
|
||||
until: until,
|
||||
count: amount,
|
||||
});
|
||||
apiEl.attr('href', `${config.relative_path}/api/v3/admin/analytics/${ajaxify.data.set}?${newHref}`);
|
||||
});
|
||||
};
|
||||
|
||||
return Graph;
|
||||
});
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="row dashboard">
|
||||
<div class="col-xs-12">
|
||||
<!-- IMPORT admin/partials/dashboard/graph.tpl -->
|
||||
<!-- IMPORT admin/partials/dashboard/stats.tpl -->
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="row dashboard">
|
||||
<div class="col-xs-12">
|
||||
<!-- IMPORT admin/partials/dashboard/graph.tpl -->
|
||||
<!-- IMPORT admin/partials/dashboard/stats.tpl -->
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="row dashboard">
|
||||
<div class="col-xs-12">
|
||||
<!-- IMPORT admin/partials/dashboard/graph.tpl -->
|
||||
<!-- IMPORT admin/partials/dashboard/stats.tpl -->
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,33 @@
|
||||
<div class="panel panel-default" id="analytics-panel">
|
||||
<div class="panel-heading">
|
||||
[[admin/dashboard:forum-traffic]]
|
||||
<div class="pull-right">
|
||||
<a id="view-as-json" href="{config.relative_path}/api/v3/admin/analytics/{set}?type=hourly"><i class="fa fa-terminal"></i></a>
|
||||
<i class="fa fa-expand"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="graph-container" id="analytics-traffic-container">
|
||||
<canvas id="analytics-traffic" width="100%" height="400"></canvas>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="row">
|
||||
<div class="col-sm-3 hidden-xs text-center pageview-stats">
|
||||
<div><strong id="pageViewsThirty">{{{ if summary.month }}}{./summary.month}{{{ else }}}0{{{ end }}}</strong></div>
|
||||
<div><a href="#" class="updatePageviewsGraph" data-action="updateGraph" data-units="days" data-amount="30">[[admin/dashboard:page-views-thirty]]</a></div>
|
||||
</div>
|
||||
<div class="col-sm-3 text-center pageview-stats">
|
||||
<div><strong id="pageViewsSeven">{{{ if summary.week }}}{./summary.week}{{{ else }}}0{{{ end }}}</strong></div>
|
||||
<div><a href="#" class="updatePageviewsGraph" data-action="updateGraph" data-units="days" data-amount="7">[[admin/dashboard:page-views-seven]]</a></div>
|
||||
</div>
|
||||
<div class="col-sm-3 hidden-xs text-center pageview-stats">
|
||||
<div><strong id="pageViewsPastDay">{{{ if summary.day }}}{./summary.day}{{{ else }}}0{{{ end }}}</strong></div>
|
||||
<div><a href="#" class="updatePageviewsGraph active" data-action="updateGraph" data-units="hours">[[admin/dashboard:page-views-last-day]]</a></div>
|
||||
</div>
|
||||
<div class="col-sm-3 text-center pageview-stats">
|
||||
<div><strong><i class="fa fa-clock-o"></i></strong></div>
|
||||
<div><a href="#" class="updatePageviewsGraph" data-action="updateGraph" data-units="custom">[[admin/dashboard:page-views-custom]]</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,49 @@
|
||||
<div class="row">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="text-right">[[admin/dashboard:stats.yesterday]]</th>
|
||||
<th class="text-right">[[admin/dashboard:stats.today]]</th>
|
||||
<th></th>
|
||||
<th class="text-right">[[admin/dashboard:stats.last-week]]</th>
|
||||
<th class="text-right">[[admin/dashboard:stats.this-week]]</th>
|
||||
<th></th>
|
||||
<th class="text-right">[[admin/dashboard:stats.last-month]]</th>
|
||||
<th class="text-right">[[admin/dashboard:stats.this-month]]</th>
|
||||
<th></th>
|
||||
<th class="text-right">[[admin/dashboard:stats.all]]</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- BEGIN stats -->
|
||||
<tr>
|
||||
<td>
|
||||
<strong>
|
||||
{{{ if ../href }}}
|
||||
<a href="{../href}">{../name}</a>
|
||||
{{{ else }}}
|
||||
{../name}
|
||||
{{{ end }}}
|
||||
</strong>
|
||||
</td>
|
||||
<td class="text-right formatted-number">{stats.yesterday}</td>
|
||||
<td class="text-right formatted-number">{stats.today}</td>
|
||||
<td class="{stats.dayTextClass}"><small>{stats.dayIncrease}%</small></td>
|
||||
|
||||
<td class="text-right formatted-number">{stats.lastweek}</td>
|
||||
<td class="text-right formatted-number">{stats.thisweek}</td>
|
||||
<td class="{stats.weekTextClass}"><small>{stats.weekIncrease}%</small></td>
|
||||
|
||||
<td class="text-right formatted-number">{stats.lastmonth}</td>
|
||||
<td class="text-right formatted-number">{stats.thismonth}</td>
|
||||
<td class="{stats.monthTextClass}"><small>{stats.monthIncrease}%</small></td>
|
||||
|
||||
<td class="text-right formatted-number">{stats.alltime}</td>
|
||||
</tr>
|
||||
<!-- END stats -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue