Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-10-26 16:46:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgrade chartjs to 4.x

Browse Source
This commit is contained in:
Barış Soner Uşaklı
2023-09-29 21:50:11 -04:00
parent eaa7aff329
commit fe192b926c
14 changed files with 250 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
install/package.json
View File

@@ -45,7 +45,7 @@
"bootstrap": "5.3.2", "bootstrap": "5.3.2",
"bootswatch": "5.3.2", "bootswatch": "5.3.2",
"chalk": "4.1.2", "chalk": "4.1.2",
"chart.js": "2.9.4", "chart.js": "4.4.0",
"cli-graph": "3.2.2", "cli-graph": "3.2.2",
"clipboard": "2.0.11", "clipboard": "2.0.11",
"colors": "1.4.0", "colors": "1.4.0",

154
public/scss/admin/general/dashboard.scss
View File

@@ -1,6 +1,4 @@
.dashboard { .dashboard {
max-width: 1680px;
.card { .card {
max-width: 100% !important; max-width: 100% !important;
} }
@@ -9,114 +7,70 @@
position: relative; position: relative;
background: var(--bg-body-bg); background: var(--bg-body-bg);
&.pie-chart {
max-height: 180px;
}
&.fullscreen { &.fullscreen {
width: 100%; width: 100%;
padding: 40px; padding: 40px;
.graph-legend {
top: 7rem;
left: 12rem;
}
} }
}
&.pie-chart { .graph-legend {
padding-right: 0px; @include box-header-font;
padding-left: 50px; margin: 0;
min-height: 180px;
.graph-legend { li {
top: -10px; display: flex;
left: 0px; word-wrap: break-word;
word-break: break-word;
gap: 0.5rem;
span {
flex: 1;
} }
div {
border: 1px solid;
margin-top: 2px;
width: 12px;
min-width: 12px;
height: 12px;
&.compact { &.page-views {
padding-left: 0px; border-color: rgba(220,220,220,1);
padding-top: 60px; background-color: rgba(220,220,220,0.2);
}
&.legend-down {
padding-left: 0px;
padding-top: 0px;
canvas {
margin-bottom: 25px;
} }
&.unique-visitors {
.graph-legend { border-color: rgba(151,187,205,1);
position: relative; background-color: rgba(151,187,205,0.2);
li {
float: left;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:nth-child(odd) {
margin-right: 2%;
}
}
} }
} &.guest {
} border-color: #46BFBD;
background-color: #5AD3D1;
.graph-legend { }
@include box-header-font; &.registered {
display: inline-block; border-color: #F7464A;
max-width: 100%; background-color: #FF5A5E;
position: absolute; }
top: 2rem; &.reading-posts {
left: 7rem; border-color: #46BFBD;
list-style-type: none; background-color: #5AD3D1;
padding: 0.5rem 1rem; }
margin: 0; &.on-categories {
border-color: #F7464A;
li { background-color: #FF5A5E;
div { }
border: 1px solid; &.browsing-topics {
width: 12px; border-color: #FDB45C;
height: 12px; background-color: #FFC870;
vertical-align: -41%; }
margin-bottom: 5px; &.recent {
display: inline-block; border-color: #949FB1;
margin-right: 5px; background-color: #A8B3C5;
}
&.page-views { &.unread {
border-color: rgba(220,220,220,1); border-color: #949FB1;
background-color: rgba(220,220,220,0.2); background-color: #9FB194;
}
&.unique-visitors {
border-color: rgba(151,187,205,1);
background-color: rgba(151,187,205,0.2);
}
&.guest {
border-color: #46BFBD;
background-color: #5AD3D1;
}
&.registered {
border-color: #F7464A;
background-color: #FF5A5E;
}
&.reading-posts {
border-color: #46BFBD;
background-color: #5AD3D1;
}
&.on-categories {
border-color: #F7464A;
background-color: #FF5A5E;
}
&.browsing-topics {
border-color: #FDB45C;
background-color: #FFC870;
}
&.recent {
border-color: #949FB1;
background-color: #A8B3C5;
}
&.unread {
border-color: #949FB1;
background-color: #9FB194;
}
} }
} }
} }

41
public/src/admin/advanced/errors.js
View File

@@ -1,7 +1,9 @@
'use strict'; 'use strict';
define('admin/advanced/errors', ['bootbox', 'alerts', 'Chart'], function (bootbox, alerts, Chart) { define('admin/advanced/errors', [
'bootbox', 'alerts', 'chart.js/auto',
], function (bootbox, alerts, { Chart }) {
const Errors = {}; const Errors = {};
Errors.init = function () { Errors.init = function () {
@@ -33,7 +35,7 @@ define('admin/advanced/errors', ['bootbox', 'alerts', 'Chart'], function (bootbo
dailyLabels = dailyLabels.slice(-7); dailyLabels = dailyLabels.slice(-7);
if (utils.isMobile()) { if (utils.isMobile()) {
Chart.defaults.global.tooltips.enabled = false; Chart.defaults.plugins.tooltip.enabled = false;
} }
const data = { const data = {
@@ -42,6 +44,8 @@ define('admin/advanced/errors', ['bootbox', 'alerts', 'Chart'], function (bootbo
datasets: [ datasets: [
{ {
label: '', label: '',
fill: 'origin',
tension: 0.25,
backgroundColor: 'rgba(186,139,175,0.2)', backgroundColor: 'rgba(186,139,175,0.2)',
borderColor: 'rgba(186,139,175,1)', borderColor: 'rgba(186,139,175,1)',
pointBackgroundColor: 'rgba(186,139,175,1)', pointBackgroundColor: 'rgba(186,139,175,1)',
@@ -57,6 +61,8 @@ define('admin/advanced/errors', ['bootbox', 'alerts', 'Chart'], function (bootbo
datasets: [ datasets: [
{ {
label: '', label: '',
fill: 'origin',
tension: 0.25,
backgroundColor: 'rgba(151,187,205,0.2)', backgroundColor: 'rgba(151,187,205,0.2)',
borderColor: 'rgba(151,187,205,1)', borderColor: 'rgba(151,187,205,1)',
pointBackgroundColor: 'rgba(151,187,205,1)', pointBackgroundColor: 'rgba(151,187,205,1)',
@@ -69,23 +75,20 @@ define('admin/advanced/errors', ['bootbox', 'alerts', 'Chart'], function (bootbo
}, },
}; };
notFoundCanvas.width = $(notFoundCanvas).parent().width();
tooBusyCanvas.width = $(tooBusyCanvas).parent().width();
new Chart(notFoundCanvas.getContext('2d'), { new Chart(notFoundCanvas.getContext('2d'), {
type: 'line', type: 'line',
data: data['not-found'], data: data['not-found'],
options: { options: {
responsive: true, responsive: true,
legend: { plugins: {
display: false, legend: {
display: false,
},
}, },
scales: { scales: {
yAxes: [{ y: {
ticks: { beginAtZero: true,
beginAtZero: true, },
},
}],
}, },
}, },
}); });
@@ -95,15 +98,15 @@ define('admin/advanced/errors', ['bootbox', 'alerts', 'Chart'], function (bootbo
data: data.toobusy, data: data.toobusy,
options: { options: {
responsive: true, responsive: true,
legend: { plugins: {
display: false, legend: {
display: false,
},
}, },
scales: { scales: {
yAxes: [{ y: {
ticks: { beginAtZero: true,
beginAtZero: true, },
},
}],
}, },
}, },
}); });

114
public/src/admin/dashboard.js
View File

@@ -2,8 +2,8 @@
define('admin/dashboard', [ define('admin/dashboard', [
'Chart', 'translator', 'benchpress', 'bootbox', 'alerts', 'helpers', 'chart.js/auto', 'translator', 'benchpress', 'bootbox', 'alerts', 'helpers',
], function (Chart, translator, Benchpress, bootbox, alerts, helpers) { ], function ({ Chart }, translator, Benchpress, bootbox, alerts, helpers) {
const Admin = {}; const Admin = {};
const intervals = { const intervals = {
rooms: false, rooms: false,
@@ -63,19 +63,19 @@ define('admin/dashboard', [
graphData.rooms = data; graphData.rooms = data;
const html = '<div class="text-center float-start">' + const html = '<div class="text-center">' +
'<span class="fs-5">' + helpers.formattedNumber(data.onlineRegisteredCount) + '</span>' + '<span class="fs-5">' + helpers.formattedNumber(data.onlineRegisteredCount) + '</span>' +
'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.users]]</div>' + '<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.users]]</div>' +
'</div>' + '</div>' +
'<div class="text-center float-start">' + '<div class="text-center">' +
'<span class="fs-5">' + helpers.formattedNumber(data.onlineGuestCount) + '</span>' + '<span class="fs-5">' + helpers.formattedNumber(data.onlineGuestCount) + '</span>' +
'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.guests]]</div>' + '<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.guests]]</div>' +
'</div>' + '</div>' +
'<div class="text-center float-start">' + '<div class="text-center">' +
'<span class="fs-5">' + helpers.formattedNumber(data.onlineRegisteredCount + data.onlineGuestCount) + '</span>' + '<span class="fs-5">' + helpers.formattedNumber(data.onlineRegisteredCount + data.onlineGuestCount) + '</span>' +
'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.total]]</div>' + '<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.total]]</div>' +
'</div>' + '</div>' +
'<div class="text-center float-start">' + '<div class="text-center">' +
'<span class="fs-5">' + helpers.formattedNumber(data.socketCount) + '</span>' + '<span class="fs-5">' + helpers.formattedNumber(data.socketCount) + '</span>' +
'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.connections]]</div>' + '<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.connections]]</div>' +
'</div>'; '</div>';
@@ -140,7 +140,7 @@ define('admin/dashboard', [
const trafficLabels = utils.getHoursArray(); const trafficLabels = utils.getHoursArray();
if (isMobile) { if (isMobile) {
Chart.defaults.global.tooltips.enabled = false; Chart.defaults.plugins.tooltip.enabled = false;
} }
const t = translator.Translator.create(); const t = translator.Translator.create();
@@ -158,11 +158,14 @@ define('admin/dashboard', [
t.translateKey('admin/dashboard:recent', []), t.translateKey('admin/dashboard:recent', []),
t.translateKey('admin/dashboard:unread', []), t.translateKey('admin/dashboard:unread', []),
]).then(function (translations) { ]).then(function (translations) {
const tension = 0.25;
const data = { const data = {
labels: trafficLabels, labels: trafficLabels,
datasets: [ datasets: [
{ {
label: translations[0], label: translations[0],
fill: 'origin',
tension: tension,
backgroundColor: 'rgba(220,220,220,0.2)', backgroundColor: 'rgba(220,220,220,0.2)',
borderColor: 'rgba(220,220,220,1)', borderColor: 'rgba(220,220,220,1)',
pointBackgroundColor: 'rgba(220,220,220,1)', pointBackgroundColor: 'rgba(220,220,220,1)',
@@ -173,6 +176,8 @@ define('admin/dashboard', [
}, },
{ {
label: translations[1], label: translations[1],
fill: 'origin',
tension: tension,
backgroundColor: '#ab464233', backgroundColor: '#ab464233',
borderColor: '#ab4642', borderColor: '#ab4642',
pointBackgroundColor: '#ab4642', pointBackgroundColor: '#ab4642',
@@ -183,6 +188,8 @@ define('admin/dashboard', [
}, },
{ {
label: translations[2], label: translations[2],
fill: 'origin',
tension: tension,
backgroundColor: '#ba8baf33', backgroundColor: '#ba8baf33',
borderColor: '#ba8baf', borderColor: '#ba8baf',
pointBackgroundColor: '#ba8baf', pointBackgroundColor: '#ba8baf',
@@ -193,6 +200,8 @@ define('admin/dashboard', [
}, },
{ {
label: translations[3], label: translations[3],
fill: 'origin',
tension: tension,
backgroundColor: '#f7ca8833', backgroundColor: '#f7ca8833',
borderColor: '#f7ca88', borderColor: '#f7ca88',
pointBackgroundColor: '#f7ca88', pointBackgroundColor: '#f7ca88',
@@ -203,6 +212,8 @@ define('admin/dashboard', [
}, },
{ {
label: translations[4], label: translations[4],
fill: 'origin',
tension: tension,
backgroundColor: 'rgba(151,187,205,0.2)', backgroundColor: 'rgba(151,187,205,0.2)',
borderColor: 'rgba(151,187,205,1)', borderColor: 'rgba(151,187,205,1)',
pointBackgroundColor: 'rgba(151,187,205,1)', pointBackgroundColor: 'rgba(151,187,205,1)',
@@ -227,43 +238,42 @@ define('admin/dashboard', [
data: data, data: data,
options: { options: {
responsive: true, responsive: true,
legend: {
display: true,
},
scales: { scales: {
yAxes: [{ 'left-y-axis': {
id: 'left-y-axis',
ticks: {
beginAtZero: true,
precision: 0,
},
type: 'linear',
position: 'left', position: 'left',
scaleLabel: {
display: true,
labelString: translations[0],
},
}, {
id: 'right-y-axis',
ticks: {
beginAtZero: true,
suggestedMax: 10,
precision: 0,
},
type: 'linear', type: 'linear',
position: 'right', title: {
scaleLabel: {
display: true, display: true,
labelString: translations[4], text: translations[0],
}, },
}], beginAtZero: true,
},
'right-y-axis': {
position: 'right',
type: 'linear',
title: {
display: true,
text: translations[4],
},
beginAtZero: true,
},
}, },
tooltips: { interaction: {
mode: 'x', intersect: false,
mode: 'index',
}, },
}, },
}); });
const doughnutOpts = {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: {
display: false,
},
},
};
graphs.registered = new Chart(registeredCtx, { graphs.registered = new Chart(registeredCtx, {
type: 'doughnut', type: 'doughnut',
data: { data: {
@@ -274,12 +284,7 @@ define('admin/dashboard', [
hoverBackgroundColor: ['#FF5A5E', '#5AD3D1'], hoverBackgroundColor: ['#FF5A5E', '#5AD3D1'],
}], }],
}, },
options: { options: doughnutOpts,
responsive: true,
legend: {
display: false,
},
},
}); });
graphs.presence = new Chart(presenceCtx, { graphs.presence = new Chart(presenceCtx, {
@@ -292,12 +297,7 @@ define('admin/dashboard', [
hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#A8B3C5'], hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#A8B3C5'],
}], }],
}, },
options: { options: doughnutOpts,
responsive: true,
legend: {
display: false,
},
},
}); });
graphs.topics = new Chart(topicsCtx, { graphs.topics = new Chart(topicsCtx, {
@@ -310,19 +310,11 @@ define('admin/dashboard', [
hoverBackgroundColor: [], hoverBackgroundColor: [],
}], }],
}, },
options: { options: doughnutOpts,
responsive: true,
legend: {
display: false,
},
},
}); });
updateTrafficGraph(); updateTrafficGraph();
$(window).on('resize', adjustPieCharts);
adjustPieCharts();
$('[data-action="updateGraph"]:not([data-units="custom"])').on('click', function () { $('[data-action="updateGraph"]:not([data-units="custom"])').on('click', function () {
let until = new Date(); let until = new Date();
const amount = $(this).attr('data-amount'); const amount = $(this).attr('data-amount');
@@ -398,18 +390,6 @@ define('admin/dashboard', [
}); });
} }
function adjustPieCharts() {
$('.pie-chart.legend-up').each(function () {
const $this = $(this);
if ($this.width() < 320) {
$this.addClass('compact');
} else {
$this.removeClass('compact');
}
});
}
function updateTrafficGraph(units, until, amount) { function updateTrafficGraph(units, until, amount) {
// until and amount are optional // until and amount are optional

105
public/src/admin/manage/category-analytics.js
View File

@@ -2,8 +2,8 @@
define('admin/manage/category-analytics', [ define('admin/manage/category-analytics', [
'Chart', 'categorySelector', 'chart.js/auto', 'categorySelector',
], function (Chart, categorySelector) { ], function ({ Chart }, categorySelector) {
const CategoryAnalytics = {}; const CategoryAnalytics = {};
CategoryAnalytics.init = function () { CategoryAnalytics.init = function () {
@@ -27,20 +27,26 @@ define('admin/manage/category-analytics', [
}); });
if (utils.isMobile()) { if (utils.isMobile()) {
Chart.defaults.global.tooltips.enabled = false; Chart.defaults.plugins.tooltip.enabled = false;
} }
const commonDataSetOpts = {
label: '',
fill: true,
tension: 0.25,
pointHoverBackgroundColor: '#fff',
pointBorderColor: '#fff',
};
const data = { const data = {
'pageviews:hourly': { 'pageviews:hourly': {
labels: hourlyLabels, labels: hourlyLabels,
datasets: [ datasets: [
{ {
label: '', ...commonDataSetOpts,
backgroundColor: 'rgba(186,139,175,0.2)', backgroundColor: 'rgba(186,139,175,0.2)',
borderColor: 'rgba(186,139,175,1)', borderColor: 'rgba(186,139,175,1)',
pointBackgroundColor: 'rgba(186,139,175,1)', pointBackgroundColor: 'rgba(186,139,175,1)',
pointHoverBackgroundColor: '#fff',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(186,139,175,1)', pointHoverBorderColor: 'rgba(186,139,175,1)',
data: ajaxify.data.analytics['pageviews:hourly'], data: ajaxify.data.analytics['pageviews:hourly'],
}, },
@@ -50,12 +56,10 @@ define('admin/manage/category-analytics', [
labels: dailyLabels, labels: dailyLabels,
datasets: [ datasets: [
{ {
label: '', ...commonDataSetOpts,
backgroundColor: 'rgba(151,187,205,0.2)', backgroundColor: 'rgba(151,187,205,0.2)',
borderColor: 'rgba(151,187,205,1)', borderColor: 'rgba(151,187,205,1)',
pointBackgroundColor: 'rgba(151,187,205,1)', pointBackgroundColor: 'rgba(151,187,205,1)',
pointHoverBackgroundColor: '#fff',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)', pointHoverBorderColor: 'rgba(151,187,205,1)',
data: ajaxify.data.analytics['pageviews:daily'], data: ajaxify.data.analytics['pageviews:daily'],
}, },
@@ -65,12 +69,10 @@ define('admin/manage/category-analytics', [
labels: dailyLabels.slice(-7), labels: dailyLabels.slice(-7),
datasets: [ datasets: [
{ {
label: '', ...commonDataSetOpts,
backgroundColor: 'rgba(171,70,66,0.2)', backgroundColor: 'rgba(171,70,66,0.2)',
borderColor: 'rgba(171,70,66,1)', borderColor: 'rgba(171,70,66,1)',
pointBackgroundColor: 'rgba(171,70,66,1)', pointBackgroundColor: 'rgba(171,70,66,1)',
pointHoverBackgroundColor: '#fff',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(171,70,66,1)', pointHoverBorderColor: 'rgba(171,70,66,1)',
data: ajaxify.data.analytics['topics:daily'], data: ajaxify.data.analytics['topics:daily'],
}, },
@@ -80,12 +82,10 @@ define('admin/manage/category-analytics', [
labels: dailyLabels.slice(-7), labels: dailyLabels.slice(-7),
datasets: [ datasets: [
{ {
label: '', ...commonDataSetOpts,
backgroundColor: 'rgba(161,181,108,0.2)', backgroundColor: 'rgba(161,181,108,0.2)',
borderColor: 'rgba(161,181,108,1)', borderColor: 'rgba(161,181,108,1)',
pointBackgroundColor: 'rgba(161,181,108,1)', pointBackgroundColor: 'rgba(161,181,108,1)',
pointHoverBackgroundColor: '#fff',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(161,181,108,1)', pointHoverBorderColor: 'rgba(161,181,108,1)',
data: ajaxify.data.analytics['posts:daily'], data: ajaxify.data.analytics['posts:daily'],
}, },
@@ -98,84 +98,43 @@ define('admin/manage/category-analytics', [
topicsCanvas.width = $(topicsCanvas).parent().width(); topicsCanvas.width = $(topicsCanvas).parent().width();
postsCanvas.width = $(postsCanvas).parent().width(); postsCanvas.width = $(postsCanvas).parent().width();
new Chart(hourlyCanvas.getContext('2d'), { const chartOpts = {
type: 'line', responsive: true,
data: data['pageviews:hourly'], animation: false,
options: { plugins: {
responsive: true,
animation: false,
legend: { legend: {
display: false, display: false,
}, },
scales: { },
yAxes: [{ scales: {
ticks: { y: {
beginAtZero: true, beginAtZero: true,
precision: 0,
},
}],
}, },
}, },
};
new Chart(hourlyCanvas.getContext('2d'), {
type: 'line',
data: data['pageviews:hourly'],
options: chartOpts,
}); });
new Chart(dailyCanvas.getContext('2d'), { new Chart(dailyCanvas.getContext('2d'), {
type: 'line', type: 'line',
data: data['pageviews:daily'], data: data['pageviews:daily'],
options: { options: chartOpts,
responsive: true,
animation: false,
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
precision: 0,
},
}],
},
},
}); });
new Chart(topicsCanvas.getContext('2d'), { new Chart(topicsCanvas.getContext('2d'), {
type: 'line', type: 'line',
data: data['topics:daily'], data: data['topics:daily'],
options: { options: chartOpts,
responsive: true,
animation: false,
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
precision: 0,
},
}],
},
},
}); });
new Chart(postsCanvas.getContext('2d'), { new Chart(postsCanvas.getContext('2d'), {
type: 'line', type: 'line',
data: data['posts:daily'], data: data['posts:daily'],
options: { options: chartOpts,
responsive: true,
animation: false,
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
precision: 0,
},
}],
},
},
}); });
}; };

30
public/src/admin/modules/dashboard-line-graph.js
View File

@@ -1,6 +1,8 @@
'use strict'; 'use strict';
define('admin/modules/dashboard-line-graph', ['Chart', 'translator', 'benchpress', 'api', 'hooks', 'bootbox'], function (Chart, translator, Benchpress, api, hooks, bootbox) { define('admin/modules/dashboard-line-graph', [
'chart.js/auto', 'translator', 'benchpress', 'api', 'hooks', 'bootbox',
], function ({ Chart }, translator, Benchpress, api, hooks, bootbox) {
const Graph = { const Graph = {
_current: null, _current: null,
}; };
@@ -13,7 +15,7 @@ define('admin/modules/dashboard-line-graph', ['Chart', 'translator', 'benchpress
isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMobile) { if (isMobile) {
Chart.defaults.global.tooltips.enabled = false; Chart.defaults.plugins.tooltip.enabled = false;
} }
Graph.handleUpdateControls({ set }); Graph.handleUpdateControls({ set });
@@ -26,6 +28,8 @@ define('admin/modules/dashboard-line-graph', ['Chart', 'translator', 'benchpress
datasets: [ datasets: [
{ {
label: key, label: key,
fill: true,
tension: 0.25,
backgroundColor: 'rgba(151,187,205,0.2)', backgroundColor: 'rgba(151,187,205,0.2)',
borderColor: 'rgba(151,187,205,1)', borderColor: 'rgba(151,187,205,1)',
pointBackgroundColor: 'rgba(151,187,205,1)', pointBackgroundColor: 'rgba(151,187,205,1)',
@@ -46,26 +50,20 @@ define('admin/modules/dashboard-line-graph', ['Chart', 'translator', 'benchpress
data: data, data: data,
options: { options: {
responsive: true, responsive: true,
legend: {
display: true,
},
scales: { scales: {
yAxes: [{ 'left-y-axis': {
id: 'left-y-axis',
ticks: {
beginAtZero: true,
precision: 0,
},
type: 'linear', type: 'linear',
position: 'left', position: 'left',
scaleLabel: { beginAtZero: true,
title: {
display: true, display: true,
labelString: key, text: key,
}, },
}], },
}, },
tooltips: { interaction: {
mode: 'x', intersect: false,
mode: 'index',
}, },
}, },
}); });

21
public/src/client/flags/list.js
View File

@@ -1,11 +1,11 @@
'use strict'; 'use strict';
define('forum/flags/list', [ define('forum/flags/list', [
'components', 'Chart', 'categoryFilter', 'components', 'chart.js/auto', 'categoryFilter',
'autocomplete', 'api', 'alerts', 'autocomplete', 'api', 'alerts',
'userFilter', 'userFilter',
], function ( ], function (
components, Chart, categoryFilter, components, { Chart }, categoryFilter,
autocomplete, api, alerts, autocomplete, api, alerts,
userFilter userFilter
) { ) {
@@ -255,7 +255,7 @@ define('forum/flags/list', [
}); });
if (utils.isMobile()) { if (utils.isMobile()) {
Chart.defaults.global.tooltips.enabled = false; Chart.defaults.plugins.tooltip.enabled = false;
} }
const data = { const data = {
'flags:daily': { 'flags:daily': {
@@ -282,16 +282,15 @@ define('forum/flags/list', [
options: { options: {
responsive: true, responsive: true,
animation: false, animation: false,
legend: { plugins: {
display: false, legend: {
display: false,
},
}, },
scales: { scales: {
yAxes: [{ y: {
ticks: { beginAtZero: true,
beginAtZero: true, },
precision: 0,
},
}],
}, },
}, },
}); });

58
public/src/client/ip-blacklist.js
View File

@@ -1,7 +1,8 @@
'use strict'; 'use strict';
define('forum/ip-blacklist', [
define('forum/ip-blacklist', ['Chart', 'benchpress', 'bootbox', 'alerts'], function (Chart, Benchpress, bootbox, alerts) { 'chart.js/auto', 'benchpress', 'bootbox', 'alerts',
], function ({ Chart }, Benchpress, bootbox, alerts) {
const Blacklist = {}; const Blacklist = {};
Blacklist.init = function () { Blacklist.init = function () {
@@ -52,7 +53,7 @@ define('forum/ip-blacklist', ['Chart', 'benchpress', 'bootbox', 'alerts'], funct
}); });
if (utils.isMobile()) { if (utils.isMobile()) {
Chart.defaults.global.tooltips.enabled = false; Chart.defaults.plugins.tooltip.enabled = false;
} }
const data = { const data = {
@@ -61,6 +62,8 @@ define('forum/ip-blacklist', ['Chart', 'benchpress', 'bootbox', 'alerts'], funct
datasets: [ datasets: [
{ {
label: '', label: '',
fill: 'origin',
tension: 0.25,
backgroundColor: 'rgba(186,139,175,0.2)', backgroundColor: 'rgba(186,139,175,0.2)',
borderColor: 'rgba(186,139,175,1)', borderColor: 'rgba(186,139,175,1)',
pointBackgroundColor: 'rgba(186,139,175,1)', pointBackgroundColor: 'rgba(186,139,175,1)',
@@ -88,45 +91,34 @@ define('forum/ip-blacklist', ['Chart', 'benchpress', 'bootbox', 'alerts'], funct
}, },
}; };
hourlyCanvas.width = $(hourlyCanvas).parent().width(); const chartOpts = {
dailyCanvas.width = $(dailyCanvas).parent().width(); responsive: true,
maintainAspectRatio: true,
plugins: {
legend: {
display: false,
},
},
scales: {
y: {
position: 'left',
type: 'linear',
beginAtZero: true,
},
},
};
new Chart(hourlyCanvas.getContext('2d'), { new Chart(hourlyCanvas.getContext('2d'), {
type: 'line', type: 'line',
data: data['blacklist:hourly'], data: data['blacklist:hourly'],
options: { options: chartOpts,
responsive: true,
animation: false,
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
},
}],
},
},
}); });
new Chart(dailyCanvas.getContext('2d'), { new Chart(dailyCanvas.getContext('2d'), {
type: 'line', type: 'line',
data: data['blacklist:daily'], data: data['blacklist:daily'],
options: { options: chartOpts,
responsive: true,
animation: false,
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
},
}],
},
},
}); });
}; };

10
src/views/admin/advanced/errors.tpl
View File

@@ -17,8 +17,10 @@
<div class="row"> <div class="row">
<div class="col-sm-6 text-center"> <div class="col-sm-6 text-center">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body" >
<div><canvas id="not-found" height="250"></canvas></div> <div class="position-relative" style="aspect-ratio: 2;">
<canvas id="not-found"></canvas>
</div>
</div> </div>
<div class="card-footer"><small> <div class="card-footer"><small>
<strong>[[admin/advanced/errors:figure-x, 1]]</strong> &ndash; <strong>[[admin/advanced/errors:figure-x, 1]]</strong> &ndash;
@@ -29,7 +31,9 @@
<div class="col-sm-6 text-center"> <div class="col-sm-6 text-center">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div><canvas id="toobusy" height="250"></canvas></div> <div class="position-relative" style="aspect-ratio: 2;">
<canvas id="toobusy"></canvas>
</div>
</div> </div>
<div class="card-footer"><small> <div class="card-footer"><small>
<strong>[[admin/advanced/errors:figure-x, 2]]</strong> &ndash; <strong>[[admin/advanced/errors:figure-x, 2]]</strong> &ndash;

36
src/views/admin/dashboard.tpl
View File

@@ -1,5 +1,5 @@
<div class="row dashboard px-lg-4"> <div class="row dashboard px-lg-4">
<div class="col-lg-9"> <div class="col-lg-8 col-xl-9">
<!-- IMPORT admin/partials/dashboard/graph.tpl --> <!-- IMPORT admin/partials/dashboard/graph.tpl -->
<!-- IMPORT admin/partials/dashboard/stats.tpl --> <!-- IMPORT admin/partials/dashboard/stats.tpl -->
@@ -8,13 +8,13 @@
<div class="card"> <div class="card">
<div class="card-header">[[admin/dashboard:guest-registered-users]]</div> <div class="card-header">[[admin/dashboard:guest-registered-users]]</div>
<div class="card-body"> <div class="card-body">
<div class="graph-container pie-chart legend-down"> <div class="graph-container pie-chart legend-down position-relative mb-3 px-3 mx-auto" style="aspect-ratio: 1;">
<canvas id="analytics-registered"></canvas> <canvas id="analytics-registered"></canvas>
<ul class="graph-legend border" id="analytics-legend">
<li><div class="registered"></div><span>(<span class="count"></span>) [[admin/dashboard:registered]]</span></li>
<li><div class="guest"></div><span>(<span class="count"></span>) [[admin/dashboard:guest]]</span></li>
</ul>
</div> </div>
<ul class="graph-legend list-unstyled" id="analytics-legend">
<li><div class="registered"></div><span>(<span class="count"></span>) [[admin/dashboard:registered]]</span></li>
<li><div class="guest"></div><span>(<span class="count"></span>) [[admin/dashboard:guest]]</span></li>
</ul>
</div> </div>
</div> </div>
</div> </div>
@@ -23,16 +23,16 @@
<div class="card"> <div class="card">
<div class="card-header">[[admin/dashboard:user-presence]]</div> <div class="card-header">[[admin/dashboard:user-presence]]</div>
<div class="card-body"> <div class="card-body">
<div class="graph-container pie-chart legend-down"> <div class="graph-container pie-chart legend-down position-relative mb-3 px-3 mx-auto" style="aspect-ratio: 1;">
<canvas id="analytics-presence"></canvas> <canvas id="analytics-presence"></canvas>
<ul class="graph-legend border" id="analytics-presence-legend">
<li><div class="reading-posts"></div><span>(<span class="count"></span>) [[admin/dashboard:reading-posts]]</span></li>
<li><div class="on-categories"></div><span>(<span class="count"></span>) [[admin/dashboard:on-categories]]</span></li>
<li><div class="browsing-topics"></div><span>(<span class="count"></span>) [[admin/dashboard:browsing-topics]]</span></li>
<li><div class="recent"></div><span>(<span class="count"></span>) [[admin/dashboard:recent]]</span></li>
<li><div class="unread"></div><span>(<span class="count"></span>) [[admin/dashboard:unread]]</span></li>
</ul>
</div> </div>
<ul class="graph-legend list-unstyled" id="analytics-presence-legend">
<li><div class="reading-posts"></div><span>(<span class="count"></span>) [[admin/dashboard:reading-posts]]</span></li>
<li><div class="on-categories"></div><span>(<span class="count"></span>) [[admin/dashboard:on-categories]]</span></li>
<li><div class="browsing-topics"></div><span>(<span class="count"></span>) [[admin/dashboard:browsing-topics]]</span></li>
<li><div class="recent"></div><span>(<span class="count"></span>) [[admin/dashboard:recent]]</span></li>
<li><div class="unread"></div><span>(<span class="count"></span>) [[admin/dashboard:unread]]</span></li>
</ul>
</div> </div>
</div> </div>
</div> </div>
@@ -40,17 +40,17 @@
<div class="card"> <div class="card">
<div class="card-header">[[admin/dashboard:high-presence-topics]]</div> <div class="card-header">[[admin/dashboard:high-presence-topics]]</div>
<div class="card-body"> <div class="card-body">
<div class="graph-container pie-chart legend-down"> <div class="graph-container pie-chart legend-down position-relative mb-3 px-3 mx-auto" style="aspect-ratio: 1;">
<canvas id="analytics-topics"></canvas> <canvas id="analytics-topics"></canvas>
<ul class="graph-legend border" id="topics-legend"></ul>
</div> </div>
<ul class="graph-legend list-unstyled" id="topics-legend"></ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-3"> <div class="col-lg-4 col-xl-3">
<div class="card mb-3"> <div class="card mb-3">
<div class="card-body"> <div class="card-body">
<div class="text-sm shadow-sm alert {{{ if lookupFailed }}}alert-danger{{{ else }}}{{{ if upgradeAvailable }}}alert-warning{{{ else }}}{{{ if currentPrerelease }}}alert-info{{{ else }}}alert-success{{{ end }}}{{{ end }}}{{{ end }}} version-check"> <div class="text-sm shadow-sm alert {{{ if lookupFailed }}}alert-danger{{{ else }}}{{{ if upgradeAvailable }}}alert-warning{{{ else }}}{{{ if currentPrerelease }}}alert-info{{{ else }}}alert-success{{{ end }}}{{{ end }}}{{{ end }}} version-check">
@@ -112,7 +112,7 @@
<div class="card mb-3"> <div class="card mb-3">
<div class="card-header">[[admin/dashboard:active-users]]</div> <div class="card-header">[[admin/dashboard:active-users]]</div>
<div class="card-body"> <div class="card-body">
<div id="active-users" class="stats row row-cols-2"></div> <div id="active-users" class="stats row row-cols-2 row-cols-md-1 row-cols-lg-2"></div>
</div> </div>
</div> </div>

28
src/views/admin/manage/category-analytics.tpl
View File

@@ -14,10 +14,9 @@
<div class="col-sm-6 text-center"> <div class="col-sm-6 text-center">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div><canvas id="pageviews:hourly" height="250"></canvas></div> <div class="position-relative" style="aspect-ratio: 2;">
<p> <canvas id="pageviews:hourly"></canvas>
</div>
</p>
</div> </div>
<div class="card-footer"><small>[[admin/manage/categories:analytics.pageviews-hourly]]</div> <div class="card-footer"><small>[[admin/manage/categories:analytics.pageviews-hourly]]</div>
</div> </div>
@@ -25,10 +24,9 @@
<div class="col-sm-6 text-center"> <div class="col-sm-6 text-center">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div><canvas id="pageviews:daily" height="250"></canvas></div> <div class="position-relative" style="aspect-ratio: 2;">
<p> <canvas id="pageviews:daily" height="250"></canvas>
</div>
</p>
</div> </div>
<div class="card-footer"><small>[[admin/manage/categories:analytics.pageviews-daily]]</div> <div class="card-footer"><small>[[admin/manage/categories:analytics.pageviews-daily]]</div>
</div> </div>
@@ -38,10 +36,9 @@
<div class="col-sm-6 text-center"> <div class="col-sm-6 text-center">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div><canvas id="topics:daily" height="250"></canvas></div> <div class="position-relative" style="aspect-ratio: 2;">
<p> <canvas id="topics:daily" height="250"></canvas>
</div>
</p>
</div> </div>
<div class="card-footer"><small>[[admin/manage/categories:analytics.topics-daily]]</div> <div class="card-footer"><small>[[admin/manage/categories:analytics.topics-daily]]</div>
</div> </div>
@@ -49,10 +46,9 @@
<div class="col-sm-6 text-center"> <div class="col-sm-6 text-center">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div><canvas id="posts:daily" height="250"></canvas></div> <div class="position-relative" style="aspect-ratio: 2;">
<p> <canvas id="posts:daily" height="250"></canvas>
</div>
</p>
</div> </div>
<div class="card-footer"><small>[[admin/manage/categories:analytics.posts-daily]]</div> <div class="card-footer"><small>[[admin/manage/categories:analytics.posts-daily]]</div>
</div> </div>

4
src/views/admin/partials/dashboard/graph.tpl
View File

@@ -10,8 +10,8 @@
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="graph-container" id="analytics-traffic-container"> <div class="graph-container position-relative" id="analytics-traffic-container" style="aspect-ratio: 16/9;">
<canvas id="analytics-traffic" width="100%" height="400"></canvas> <canvas id="analytics-traffic" ></canvas>
</div> </div>
<hr/> <hr/>
<div class="row"> <div class="row">

8
src/views/ip-blacklist.tpl
View File

@@ -40,14 +40,18 @@
<div class="col-sm-6"> <div class="col-sm-6">
<div class="card mb-3"> <div class="card mb-3">
<div class="card-body"> <div class="card-body">
<div><canvas id="blacklist:hourly" height="250"></canvas></div> <div class="position-relative" style="aspect-ratio: 2; max-height: initial;">
<canvas id="blacklist:hourly" style="max-height: initial;"></canvas>
</div>
</div> </div>
<div class="card-footer"><small>[[ip-blacklist:analytics.blacklist-hourly]]</small></div> <div class="card-footer"><small>[[ip-blacklist:analytics.blacklist-hourly]]</small></div>
</div> </div>
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div><canvas id="blacklist:daily" height="250"></canvas></div> <div class="position-relative" style="aspect-ratio: 2; max-height: initial;">
<canvas id="blacklist:daily" style="max-height: initial;"></canvas>
</div>
</div> </div>
<div class="card-footer"><small>[[ip-blacklist:analytics.blacklist-daily]]</small></div> <div class="card-footer"><small>[[ip-blacklist:analytics.blacklist-daily]]</small></div>
</div> </div>

1
webpack.common.js
View File

@@ -59,7 +59,6 @@ module.exports = {
admin: path.resolve(__dirname, 'build/public/src/admin'), admin: path.resolve(__dirname, 'build/public/src/admin'),
vendor: path.resolve(__dirname, 'public/vendor'), vendor: path.resolve(__dirname, 'public/vendor'),
benchpress: path.resolve(__dirname, 'node_modules/benchpressjs'), benchpress: path.resolve(__dirname, 'node_modules/benchpressjs'),
Chart: path.resolve(__dirname, 'node_modules/chart.js'),
Sortable: path.resolve(__dirname, 'node_modules/sortablejs'), Sortable: path.resolve(__dirname, 'node_modules/sortablejs'),
cropper: path.resolve(__dirname, 'node_modules/cropperjs'), cropper: path.resolve(__dirname, 'node_modules/cropperjs'),
'jquery-ui/widgets': path.resolve(__dirname, 'node_modules/jquery-ui/ui/widgets'), 'jquery-ui/widgets': path.resolve(__dirname, 'node_modules/jquery-ui/ui/widgets'),