mirror of
https://github.com/NodeBB/NodeBB.git
synced 2025-10-26 16:46:12 +01:00
refactor: use esm only import used chart types/plugins
This commit is contained in:
Barış Soner Uşaklı
@@ -1,116 +1,121 @@
|
||||
'use strict';
|
||||
import {
|
||||
Chart,
|
||||
LineController,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Tooltip,
|
||||
Filler,
|
||||
} from 'chart.js';
|
||||
|
||||
import * as bootbox from 'bootbox';
|
||||
import * as alerts from '../../modules/alerts';
|
||||
|
||||
Chart.register(
|
||||
LineController,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Tooltip,
|
||||
Filler
|
||||
);
|
||||
|
||||
|
||||
define('admin/advanced/errors', [
|
||||
'bootbox', 'alerts', 'chart.js/auto',
|
||||
], function (bootbox, alerts, { Chart }) {
|
||||
const Errors = {};
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
export function init() {
|
||||
setupCharts();
|
||||
|
||||
Errors.init = function () {
|
||||
Errors.setupCharts();
|
||||
$('[data-action="clear"]').on('click', clear404);
|
||||
}
|
||||
|
||||
$('[data-action="clear"]').on('click', Errors.clear404);
|
||||
};
|
||||
function clear404() {
|
||||
bootbox.confirm('[[admin/advanced/errors:clear404-confirm]]', function (ok) {
|
||||
if (ok) {
|
||||
socket.emit('admin.errors.clear', {}, function (err) {
|
||||
if (err) {
|
||||
return alerts.error(err);
|
||||
}
|
||||
|
||||
Errors.clear404 = function () {
|
||||
bootbox.confirm('[[admin/advanced/errors:clear404-confirm]]', function (ok) {
|
||||
if (ok) {
|
||||
socket.emit('admin.errors.clear', {}, function (err) {
|
||||
if (err) {
|
||||
return alerts.error(err);
|
||||
}
|
||||
|
||||
ajaxify.refresh();
|
||||
alerts.success('[[admin/advanced/errors:clear404-success]]');
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Errors.setupCharts = function () {
|
||||
const notFoundCanvas = document.getElementById('not-found');
|
||||
const tooBusyCanvas = document.getElementById('toobusy');
|
||||
let dailyLabels = utils.getDaysArray();
|
||||
|
||||
dailyLabels = dailyLabels.slice(-7);
|
||||
|
||||
if (utils.isMobile()) {
|
||||
Chart.defaults.plugins.tooltip.enabled = false;
|
||||
ajaxify.refresh();
|
||||
alerts.success('[[admin/advanced/errors:clear404-success]]');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const data = {
|
||||
'not-found': {
|
||||
labels: dailyLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: '',
|
||||
fill: 'origin',
|
||||
tension: 0.25,
|
||||
backgroundColor: 'rgba(186,139,175,0.2)',
|
||||
borderColor: 'rgba(186,139,175,1)',
|
||||
pointBackgroundColor: 'rgba(186,139,175,1)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(186,139,175,1)',
|
||||
data: ajaxify.data.analytics['not-found'],
|
||||
},
|
||||
],
|
||||
},
|
||||
toobusy: {
|
||||
labels: dailyLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: '',
|
||||
fill: 'origin',
|
||||
tension: 0.25,
|
||||
backgroundColor: 'rgba(151,187,205,0.2)',
|
||||
borderColor: 'rgba(151,187,205,1)',
|
||||
pointBackgroundColor: 'rgba(151,187,205,1)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(151,187,205,1)',
|
||||
data: ajaxify.data.analytics.toobusy,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
function setupCharts() {
|
||||
const notFoundCanvas = document.getElementById('not-found');
|
||||
const tooBusyCanvas = document.getElementById('toobusy');
|
||||
let dailyLabels = utils.getDaysArray();
|
||||
|
||||
new Chart(notFoundCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['not-found'],
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
dailyLabels = dailyLabels.slice(-7);
|
||||
|
||||
new Chart(tooBusyCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data.toobusy,
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
if (utils.isMobile()) {
|
||||
Chart.defaults.plugins.tooltip.enabled = false;
|
||||
}
|
||||
|
||||
const data = {
|
||||
'not-found': {
|
||||
labels: dailyLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: '',
|
||||
fill: 'origin',
|
||||
tension: 0.25,
|
||||
backgroundColor: 'rgba(186,139,175,0.2)',
|
||||
borderColor: 'rgba(186,139,175,1)',
|
||||
pointBackgroundColor: 'rgba(186,139,175,1)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(186,139,175,1)',
|
||||
data: ajaxify.data.analytics['not-found'],
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
toobusy: {
|
||||
labels: dailyLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: '',
|
||||
fill: 'origin',
|
||||
tension: 0.25,
|
||||
backgroundColor: 'rgba(151,187,205,0.2)',
|
||||
borderColor: 'rgba(151,187,205,1)',
|
||||
pointBackgroundColor: 'rgba(151,187,205,1)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(151,187,205,1)',
|
||||
data: ajaxify.data.analytics.toobusy,
|
||||
},
|
||||
},
|
||||
});
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
return Errors;
|
||||
});
|
||||
new Chart(notFoundCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['not-found'],
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
new Chart(tooBusyCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data.toobusy,
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,142 +1,151 @@
|
||||
'use strict';
|
||||
import {
|
||||
Chart,
|
||||
LineController,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Tooltip,
|
||||
Filler,
|
||||
} from 'chart.js';
|
||||
|
||||
import * as categorySelector from '../../modules/categorySelector';
|
||||
|
||||
define('admin/manage/category-analytics', [
|
||||
'chart.js/auto', 'categorySelector',
|
||||
], function ({ Chart }, categorySelector) {
|
||||
const CategoryAnalytics = {};
|
||||
Chart.register(
|
||||
LineController,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Tooltip,
|
||||
Filler
|
||||
);
|
||||
|
||||
CategoryAnalytics.init = function () {
|
||||
categorySelector.init($('[component="category-selector"]'), {
|
||||
onSelect: function (selectedCategory) {
|
||||
ajaxify.go('admin/manage/categories/' + selectedCategory.cid + '/analytics');
|
||||
},
|
||||
showLinks: true,
|
||||
template: 'admin/partials/category/selector-dropdown-right',
|
||||
});
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
export function init() {
|
||||
categorySelector.init($('[component="category-selector"]'), {
|
||||
onSelect: function (selectedCategory) {
|
||||
ajaxify.go('admin/manage/categories/' + selectedCategory.cid + '/analytics');
|
||||
},
|
||||
showLinks: true,
|
||||
template: 'admin/partials/category/selector-dropdown-right',
|
||||
});
|
||||
|
||||
const hourlyCanvas = document.getElementById('pageviews:hourly');
|
||||
const dailyCanvas = document.getElementById('pageviews:daily');
|
||||
const topicsCanvas = document.getElementById('topics:daily');
|
||||
const postsCanvas = document.getElementById('posts:daily');
|
||||
const hourlyLabels = utils.getHoursArray().map(function (text, idx) {
|
||||
return idx % 3 ? '' : text;
|
||||
});
|
||||
const dailyLabels = utils.getDaysArray().map(function (text, idx) {
|
||||
return idx % 3 ? '' : text;
|
||||
});
|
||||
const hourlyCanvas = document.getElementById('pageviews:hourly');
|
||||
const dailyCanvas = document.getElementById('pageviews:daily');
|
||||
const topicsCanvas = document.getElementById('topics:daily');
|
||||
const postsCanvas = document.getElementById('posts:daily');
|
||||
const hourlyLabels = utils.getHoursArray().map(function (text, idx) {
|
||||
return idx % 3 ? '' : text;
|
||||
});
|
||||
const dailyLabels = utils.getDaysArray().map(function (text, idx) {
|
||||
return idx % 3 ? '' : text;
|
||||
});
|
||||
|
||||
if (utils.isMobile()) {
|
||||
Chart.defaults.plugins.tooltip.enabled = false;
|
||||
}
|
||||
if (utils.isMobile()) {
|
||||
Chart.defaults.plugins.tooltip.enabled = false;
|
||||
}
|
||||
|
||||
const commonDataSetOpts = {
|
||||
label: '',
|
||||
fill: true,
|
||||
tension: 0.25,
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointBorderColor: '#fff',
|
||||
};
|
||||
|
||||
const data = {
|
||||
'pageviews:hourly': {
|
||||
labels: hourlyLabels,
|
||||
datasets: [
|
||||
{
|
||||
...commonDataSetOpts,
|
||||
backgroundColor: 'rgba(186,139,175,0.2)',
|
||||
borderColor: 'rgba(186,139,175,1)',
|
||||
pointBackgroundColor: 'rgba(186,139,175,1)',
|
||||
pointHoverBorderColor: 'rgba(186,139,175,1)',
|
||||
data: ajaxify.data.analytics['pageviews:hourly'],
|
||||
},
|
||||
],
|
||||
},
|
||||
'pageviews:daily': {
|
||||
labels: dailyLabels,
|
||||
datasets: [
|
||||
{
|
||||
...commonDataSetOpts,
|
||||
backgroundColor: 'rgba(151,187,205,0.2)',
|
||||
borderColor: 'rgba(151,187,205,1)',
|
||||
pointBackgroundColor: 'rgba(151,187,205,1)',
|
||||
pointHoverBorderColor: 'rgba(151,187,205,1)',
|
||||
data: ajaxify.data.analytics['pageviews:daily'],
|
||||
},
|
||||
],
|
||||
},
|
||||
'topics:daily': {
|
||||
labels: dailyLabels.slice(-7),
|
||||
datasets: [
|
||||
{
|
||||
...commonDataSetOpts,
|
||||
backgroundColor: 'rgba(171,70,66,0.2)',
|
||||
borderColor: 'rgba(171,70,66,1)',
|
||||
pointBackgroundColor: 'rgba(171,70,66,1)',
|
||||
pointHoverBorderColor: 'rgba(171,70,66,1)',
|
||||
data: ajaxify.data.analytics['topics:daily'],
|
||||
},
|
||||
],
|
||||
},
|
||||
'posts:daily': {
|
||||
labels: dailyLabels.slice(-7),
|
||||
datasets: [
|
||||
{
|
||||
...commonDataSetOpts,
|
||||
backgroundColor: 'rgba(161,181,108,0.2)',
|
||||
borderColor: 'rgba(161,181,108,1)',
|
||||
pointBackgroundColor: 'rgba(161,181,108,1)',
|
||||
pointHoverBorderColor: 'rgba(161,181,108,1)',
|
||||
data: ajaxify.data.analytics['posts:daily'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
hourlyCanvas.width = $(hourlyCanvas).parent().width();
|
||||
dailyCanvas.width = $(dailyCanvas).parent().width();
|
||||
topicsCanvas.width = $(topicsCanvas).parent().width();
|
||||
postsCanvas.width = $(postsCanvas).parent().width();
|
||||
|
||||
const chartOpts = {
|
||||
responsive: true,
|
||||
animation: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
new Chart(hourlyCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['pageviews:hourly'],
|
||||
options: chartOpts,
|
||||
});
|
||||
|
||||
new Chart(dailyCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['pageviews:daily'],
|
||||
options: chartOpts,
|
||||
});
|
||||
|
||||
new Chart(topicsCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['topics:daily'],
|
||||
options: chartOpts,
|
||||
});
|
||||
|
||||
new Chart(postsCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['posts:daily'],
|
||||
options: chartOpts,
|
||||
});
|
||||
const commonDataSetOpts = {
|
||||
label: '',
|
||||
fill: true,
|
||||
tension: 0.25,
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointBorderColor: '#fff',
|
||||
};
|
||||
|
||||
return CategoryAnalytics;
|
||||
});
|
||||
const data = {
|
||||
'pageviews:hourly': {
|
||||
labels: hourlyLabels,
|
||||
datasets: [
|
||||
{
|
||||
...commonDataSetOpts,
|
||||
backgroundColor: 'rgba(186,139,175,0.2)',
|
||||
borderColor: 'rgba(186,139,175,1)',
|
||||
pointBackgroundColor: 'rgba(186,139,175,1)',
|
||||
pointHoverBorderColor: 'rgba(186,139,175,1)',
|
||||
data: ajaxify.data.analytics['pageviews:hourly'],
|
||||
},
|
||||
],
|
||||
},
|
||||
'pageviews:daily': {
|
||||
labels: dailyLabels,
|
||||
datasets: [
|
||||
{
|
||||
...commonDataSetOpts,
|
||||
backgroundColor: 'rgba(151,187,205,0.2)',
|
||||
borderColor: 'rgba(151,187,205,1)',
|
||||
pointBackgroundColor: 'rgba(151,187,205,1)',
|
||||
pointHoverBorderColor: 'rgba(151,187,205,1)',
|
||||
data: ajaxify.data.analytics['pageviews:daily'],
|
||||
},
|
||||
],
|
||||
},
|
||||
'topics:daily': {
|
||||
labels: dailyLabels.slice(-7),
|
||||
datasets: [
|
||||
{
|
||||
...commonDataSetOpts,
|
||||
backgroundColor: 'rgba(171,70,66,0.2)',
|
||||
borderColor: 'rgba(171,70,66,1)',
|
||||
pointBackgroundColor: 'rgba(171,70,66,1)',
|
||||
pointHoverBorderColor: 'rgba(171,70,66,1)',
|
||||
data: ajaxify.data.analytics['topics:daily'],
|
||||
},
|
||||
],
|
||||
},
|
||||
'posts:daily': {
|
||||
labels: dailyLabels.slice(-7),
|
||||
datasets: [
|
||||
{
|
||||
...commonDataSetOpts,
|
||||
backgroundColor: 'rgba(161,181,108,0.2)',
|
||||
borderColor: 'rgba(161,181,108,1)',
|
||||
pointBackgroundColor: 'rgba(161,181,108,1)',
|
||||
pointHoverBorderColor: 'rgba(161,181,108,1)',
|
||||
data: ajaxify.data.analytics['posts:daily'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
hourlyCanvas.width = $(hourlyCanvas).parent().width();
|
||||
dailyCanvas.width = $(dailyCanvas).parent().width();
|
||||
topicsCanvas.width = $(topicsCanvas).parent().width();
|
||||
postsCanvas.width = $(postsCanvas).parent().width();
|
||||
|
||||
const chartOpts = {
|
||||
responsive: true,
|
||||
animation: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
new Chart(hourlyCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['pageviews:hourly'],
|
||||
options: chartOpts,
|
||||
});
|
||||
|
||||
new Chart(dailyCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['pageviews:daily'],
|
||||
options: chartOpts,
|
||||
});
|
||||
|
||||
new Chart(topicsCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['topics:daily'],
|
||||
options: chartOpts,
|
||||
});
|
||||
|
||||
new Chart(postsCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['posts:daily'],
|
||||
options: chartOpts,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,194 +1,215 @@
|
||||
'use strict';
|
||||
import {
|
||||
Chart,
|
||||
LineController,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Tooltip,
|
||||
Filler,
|
||||
} from 'chart.js';
|
||||
|
||||
define('admin/modules/dashboard-line-graph', [
|
||||
'chart.js/auto', 'translator', 'benchpress', 'api', 'hooks', 'bootbox',
|
||||
], function ({ Chart }, translator, Benchpress, api, hooks, bootbox) {
|
||||
const Graph = {
|
||||
_current: null,
|
||||
};
|
||||
let isMobile = false;
|
||||
import * as Benchpress from 'benchpressjs';
|
||||
import * as bootbox from 'bootbox';
|
||||
import * as translator from '../../modules/translator';
|
||||
import * as api from '../../modules/api';
|
||||
import * as hooks from '../../modules/hooks';
|
||||
|
||||
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.plugins.tooltip.enabled = false;
|
||||
}
|
||||
Chart.register(
|
||||
LineController,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Tooltip,
|
||||
Filler
|
||||
);
|
||||
|
||||
Graph.handleUpdateControls({ set });
|
||||
|
||||
const t = translator.Translator.create();
|
||||
return new Promise((resolve) => {
|
||||
t.translateKey(`admin/menu:${ajaxify.data.template.name.replace('admin/', '')}`, []).then((key) => {
|
||||
const data = {
|
||||
labels: trafficLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: key,
|
||||
fill: true,
|
||||
tension: 0.25,
|
||||
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 || [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
},
|
||||
],
|
||||
};
|
||||
let _current = null;
|
||||
let isMobile = false;
|
||||
|
||||
canvas.width = $(canvas).parent().width();
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
export function init({ set, dataset }) {
|
||||
const canvas = document.getElementById('analytics-traffic');
|
||||
const canvasCtx = canvas.getContext('2d');
|
||||
const trafficLabels = utils.getHoursArray();
|
||||
|
||||
data.datasets[0].yAxisID = 'left-y-axis';
|
||||
isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
if (isMobile) {
|
||||
Chart.defaults.plugins.tooltip.enabled = false;
|
||||
}
|
||||
|
||||
Graph._current = new Chart(canvasCtx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
'left-y-axis': {
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: key,
|
||||
},
|
||||
handleUpdateControls({ set });
|
||||
|
||||
const t = translator.Translator.create();
|
||||
return new Promise((resolve) => {
|
||||
t.translateKey(`admin/menu:${ajaxify.data.template.name.replace('admin/', '')}`, []).then((key) => {
|
||||
const data = {
|
||||
labels: trafficLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: key,
|
||||
fill: true,
|
||||
tension: 0.25,
|
||||
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 || [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
canvas.width = $(canvas).parent().width();
|
||||
|
||||
data.datasets[0].yAxisID = 'left-y-axis';
|
||||
|
||||
_current = new Chart(canvasCtx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
'left-y-axis': {
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: key,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!dataset) {
|
||||
Graph.update(set).then(resolve);
|
||||
} else {
|
||||
resolve(Graph._current);
|
||||
}
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
Graph.handleUpdateControls = ({ set }) => {
|
||||
$('[data-action="updateGraph"]:not([data-units="custom"])').on('click', function () {
|
||||
let until = new Date();
|
||||
const amount = $(this).attr('data-amount');
|
||||
if ($(this).attr('data-units') === 'days') {
|
||||
until.setHours(0, 0, 0, 0);
|
||||
if (!dataset) {
|
||||
update(set).then(resolve);
|
||||
} else {
|
||||
resolve(_current);
|
||||
}
|
||||
until = until.getTime();
|
||||
Graph.update(set, $(this).attr('data-units'), until, amount);
|
||||
|
||||
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 () {
|
||||
const targetEl = $(this);
|
||||
|
||||
Benchpress.render('admin/partials/pageviews-range-select', {}).then(function (html) {
|
||||
const 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 () {
|
||||
const date = new Date();
|
||||
const today = date.toISOString().slice(0, 10);
|
||||
date.setDate(date.getDate() - 1);
|
||||
const yesterday = date.toISOString().slice(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
|
||||
const formData = modal.find('form').serializeObject();
|
||||
const validRegexp = /\d{4}-\d{2}-\d{2}/;
|
||||
|
||||
// Input validation
|
||||
if (!formData.startRange && !formData.endRange) {
|
||||
// No range? Assume last 30 days
|
||||
Graph.update(set, 'days');
|
||||
return;
|
||||
} else if (!validRegexp.test(formData.startRange) || !validRegexp.test(formData.endRange)) {
|
||||
// Invalid Input
|
||||
modal.find('.alert-danger').removeClass('hidden');
|
||||
return false;
|
||||
}
|
||||
|
||||
let until = new Date(formData.endRange);
|
||||
until.setDate(until.getDate() + 1);
|
||||
until = until.getTime();
|
||||
const amount = (until - new Date(formData.startRange).getTime()) / (1000 * 60 * 60 * 24);
|
||||
|
||||
Graph.update(set, 'days', until, amount);
|
||||
|
||||
// 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 = ajaxify.data.query.units || 'hours',
|
||||
until = ajaxify.data.query.until,
|
||||
amount = ajaxify.data.query.count
|
||||
) => {
|
||||
if (!Graph._current) {
|
||||
return Promise.reject(new Error('[[error:invalid-data]]'));
|
||||
function handleUpdateControls({ set }) {
|
||||
$('[data-action="updateGraph"]:not([data-units="custom"])').on('click', function () {
|
||||
let until = new Date();
|
||||
const amount = $(this).attr('data-amount');
|
||||
if ($(this).attr('data-units') === 'days') {
|
||||
until.setHours(0, 0, 0, 0);
|
||||
}
|
||||
until = until.getTime();
|
||||
update(set, $(this).attr('data-units'), until, amount);
|
||||
|
||||
return new Promise((resolve) => {
|
||||
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 address bar and "View as JSON" button url
|
||||
const apiEl = $('#view-as-json');
|
||||
const newHref = $.param({
|
||||
units: units || 'hours',
|
||||
until: until,
|
||||
count: amount,
|
||||
});
|
||||
apiEl.attr('href', `${config.relative_path}/api/v3/admin/analytics/${ajaxify.data.set}?${newHref}`);
|
||||
const url = ajaxify.removeRelativePath(ajaxify.data.url.slice(1));
|
||||
ajaxify.updateHistory(`${url}?${newHref}`, true);
|
||||
hooks.fire('action:admin.dashboard.updateGraph', {
|
||||
graph: Graph._current,
|
||||
});
|
||||
resolve(Graph._current);
|
||||
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 () {
|
||||
const targetEl = $(this);
|
||||
|
||||
Benchpress.render('admin/partials/pageviews-range-select', {}).then(function (html) {
|
||||
const 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 () {
|
||||
const date = new Date();
|
||||
const today = date.toISOString().slice(0, 10);
|
||||
date.setDate(date.getDate() - 1);
|
||||
const yesterday = date.toISOString().slice(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
|
||||
const formData = modal.find('form').serializeObject();
|
||||
const validRegexp = /\d{4}-\d{2}-\d{2}/;
|
||||
|
||||
// Input validation
|
||||
if (!formData.startRange && !formData.endRange) {
|
||||
// No range? Assume last 30 days
|
||||
update(set, 'days');
|
||||
return;
|
||||
} else if (!validRegexp.test(formData.startRange) || !validRegexp.test(formData.endRange)) {
|
||||
// Invalid Input
|
||||
modal.find('.alert-danger').removeClass('hidden');
|
||||
return false;
|
||||
}
|
||||
|
||||
let until = new Date(formData.endRange);
|
||||
until.setDate(until.getDate() + 1);
|
||||
until = until.getTime();
|
||||
const amount = (until - new Date(formData.startRange).getTime()) / (1000 * 60 * 60 * 24);
|
||||
|
||||
update(set, 'days', until, amount);
|
||||
|
||||
// Update "custom range" label
|
||||
targetEl.attr('data-startRange', formData.startRange);
|
||||
targetEl.attr('data-endRange', formData.endRange);
|
||||
targetEl.html(formData.startRange + ' – ' + formData.endRange);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function update(
|
||||
set,
|
||||
units = ajaxify.data.query.units || 'hours',
|
||||
until = ajaxify.data.query.until,
|
||||
amount = ajaxify.data.query.count
|
||||
) {
|
||||
if (!_current) {
|
||||
return Promise.reject(new Error('[[error:invalid-data]]'));
|
||||
}
|
||||
|
||||
return new Promise((resolve) => {
|
||||
api.get(`/admin/analytics/${set}`, { units, until, amount }).then((dataset) => {
|
||||
if (units === 'days') {
|
||||
_current.data.xLabels = utils.getDaysArray(until, amount);
|
||||
} else {
|
||||
_current.data.xLabels = utils.getHoursArray();
|
||||
}
|
||||
|
||||
_current.data.datasets[0].data = dataset;
|
||||
_current.data.labels = _current.data.xLabels;
|
||||
_current.update();
|
||||
|
||||
// Update address bar and "View as JSON" button url
|
||||
const apiEl = $('#view-as-json');
|
||||
const newHref = $.param({
|
||||
units: units || 'hours',
|
||||
until: until,
|
||||
count: amount,
|
||||
});
|
||||
apiEl.attr('href', `${config.relative_path}/api/v3/admin/analytics/${ajaxify.data.set}?${newHref}`);
|
||||
const url = ajaxify.removeRelativePath(ajaxify.data.url.slice(1));
|
||||
ajaxify.updateHistory(`${url}?${newHref}`, true);
|
||||
hooks.fire('action:admin.dashboard.updateGraph', {
|
||||
graph: _current,
|
||||
});
|
||||
resolve(_current);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return Graph;
|
||||
});
|
||||
|
||||
@@ -1,300 +1,301 @@
|
||||
'use strict';
|
||||
import {
|
||||
Chart,
|
||||
LineController,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Tooltip,
|
||||
Filler,
|
||||
} from 'chart.js';
|
||||
|
||||
define('forum/flags/list', [
|
||||
'components', 'chart.js/auto', 'categoryFilter',
|
||||
'autocomplete', 'api', 'alerts',
|
||||
'userFilter',
|
||||
], function (
|
||||
components, { Chart }, categoryFilter,
|
||||
autocomplete, api, alerts,
|
||||
userFilter
|
||||
) {
|
||||
const Flags = {};
|
||||
const selected = new Map([
|
||||
['cids', []],
|
||||
['assignee', []],
|
||||
['targetUid', []],
|
||||
['reporterId', []],
|
||||
]);
|
||||
import * as categoryFilter from '../../modules/categoryFilter';
|
||||
import * as userFilter from '../../modules/userFilter';
|
||||
import * as autocomplete from '../../modules/autocomplete';
|
||||
import * as api from '../../modules/api';
|
||||
import * as alerts from '../../modules/alerts';
|
||||
import * as components from '../../modules/components';
|
||||
|
||||
Flags.init = function () {
|
||||
Flags.enableFilterForm();
|
||||
Flags.enableCheckboxes();
|
||||
Flags.handleBulkActions();
|
||||
Chart.register(LineController, CategoryScale, LinearScale, LineElement, PointElement, Tooltip, Filler);
|
||||
|
||||
if (ajaxify.data.filters.hasOwnProperty('cid')) {
|
||||
selected.set('cids', Array.isArray(ajaxify.data.filters.cid) ?
|
||||
ajaxify.data.filters.cid : [ajaxify.data.filters.cid]);
|
||||
}
|
||||
const selected = new Map([
|
||||
['cids', []],
|
||||
['assignee', []],
|
||||
['targetUid', []],
|
||||
['reporterId', []],
|
||||
]);
|
||||
|
||||
categoryFilter.init($('[component="category/dropdown"]'), {
|
||||
privilege: 'moderate',
|
||||
selectedCids: selected.get('cids'),
|
||||
updateButton: function ({ selectedCids: cids }) {
|
||||
selected.set('cids', cids);
|
||||
applyFilters();
|
||||
},
|
||||
});
|
||||
export function init() {
|
||||
enableFilterForm();
|
||||
enableCheckboxes();
|
||||
handleBulkActions();
|
||||
|
||||
['assignee', 'targetUid', 'reporterId'].forEach((filter) => {
|
||||
if (ajaxify.data.filters.hasOwnProperty('filter')) {
|
||||
selected.set(filter, ajaxify.data.selected[filter]);
|
||||
}
|
||||
const filterEl = $(`[component="flags/filter/${filter}"]`);
|
||||
userFilter.init(filterEl, {
|
||||
selectedUsers: selected.get(filter),
|
||||
template: 'partials/flags/filters',
|
||||
selectedBlock: `selected.${filter}`,
|
||||
onSelect: function (_selectedUsers) {
|
||||
selected.set(filter, _selectedUsers);
|
||||
},
|
||||
onHidden: function () {
|
||||
applyFilters();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
components.get('flags/list')
|
||||
.on('click', '[data-flag-id]', function (e) {
|
||||
if (['BUTTON', 'A'].includes(e.target.nodeName)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const flagId = this.getAttribute('data-flag-id');
|
||||
ajaxify.go('flags/' + flagId);
|
||||
});
|
||||
|
||||
$('#flags-daily-wrapper').one('shown.bs.collapse', function () {
|
||||
Flags.handleGraphs();
|
||||
});
|
||||
|
||||
autocomplete.user($('#filter-assignee, #filter-targetUid, #filter-reporterId'), (ev, ui) => {
|
||||
setTimeout(() => { ev.target.value = ui.item.user.uid; });
|
||||
});
|
||||
};
|
||||
|
||||
Flags.enableFilterForm = function () {
|
||||
const $filtersEl = components.get('flags/filters');
|
||||
if ($filtersEl && $filtersEl.get(0).nodeName !== 'FORM') {
|
||||
// Harmony; update hidden form and submit on change
|
||||
const filtersEl = $filtersEl.get(0);
|
||||
const formEl = filtersEl.querySelector('form');
|
||||
|
||||
filtersEl.addEventListener('click', (e) => {
|
||||
const subselector = e.target.closest('[data-value]');
|
||||
if (!subselector) {
|
||||
return;
|
||||
}
|
||||
|
||||
const name = subselector.getAttribute('data-name');
|
||||
const value = subselector.getAttribute('data-value');
|
||||
|
||||
formEl[name].value = value;
|
||||
|
||||
applyFilters();
|
||||
});
|
||||
} else {
|
||||
// Persona; parse ajaxify data to set form values to reflect current filters
|
||||
for (const filter in ajaxify.data.filters) {
|
||||
if (ajaxify.data.filters.hasOwnProperty(filter)) {
|
||||
$filtersEl.find('[name="' + filter + '"]').val(ajaxify.data.filters[filter]);
|
||||
}
|
||||
}
|
||||
$filtersEl.find('[name="sort"]').val(ajaxify.data.sort);
|
||||
|
||||
document.getElementById('apply-filters').addEventListener('click', function () {
|
||||
applyFilters();
|
||||
});
|
||||
|
||||
$filtersEl.find('button[data-target="#more-filters"]').click((ev) => {
|
||||
const textVariant = ev.target.getAttribute('data-text-variant');
|
||||
if (!textVariant) {
|
||||
return;
|
||||
}
|
||||
ev.target.setAttribute('data-text-variant', ev.target.textContent);
|
||||
ev.target.firstChild.textContent = textVariant;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function applyFilters() {
|
||||
let formEl = components.get('flags/filters').get(0);
|
||||
if (!formEl) {
|
||||
return;
|
||||
}
|
||||
if (formEl.nodeName !== 'FORM') {
|
||||
formEl = formEl.querySelector('form');
|
||||
}
|
||||
|
||||
const payload = new FormData(formEl);
|
||||
|
||||
// cid is special comes from categoryFilter module
|
||||
selected.get('cids').forEach(function (cid) {
|
||||
payload.append('cid', cid);
|
||||
});
|
||||
|
||||
// these three fields are special; comes from userFilter module
|
||||
['assignee', 'targetUid', 'reporterId'].forEach((filter) => {
|
||||
selected.get(filter).forEach(({ uid }) => {
|
||||
payload.append(filter, uid);
|
||||
});
|
||||
});
|
||||
|
||||
const length = Array.from(payload.values()).filter(Boolean);
|
||||
const qs = new URLSearchParams(payload).toString();
|
||||
|
||||
ajaxify.go('flags?' + (length ? qs : 'reset=1'));
|
||||
if (ajaxify.data.filters.hasOwnProperty('cid')) {
|
||||
selected.set('cids', Array.isArray(ajaxify.data.filters.cid) ?
|
||||
ajaxify.data.filters.cid : [ajaxify.data.filters.cid]);
|
||||
}
|
||||
|
||||
Flags.enableCheckboxes = function () {
|
||||
const flagsList = document.querySelector('[component="flags/list"]');
|
||||
const checkboxes = flagsList.querySelectorAll('[data-flag-id] input[type="checkbox"]');
|
||||
const bulkEl = document.querySelector('[component="flags/bulk-actions"] button');
|
||||
let lastClicked;
|
||||
categoryFilter.init($('[component="category/dropdown"]'), {
|
||||
privilege: 'moderate',
|
||||
selectedCids: selected.get('cids'),
|
||||
updateButton: function ({ selectedCids: cids }) {
|
||||
selected.set('cids', cids);
|
||||
applyFilters();
|
||||
},
|
||||
});
|
||||
|
||||
document.querySelector('[data-action="toggle-all"]').addEventListener('click', function () {
|
||||
const state = this.checked;
|
||||
['assignee', 'targetUid', 'reporterId'].forEach((filter) => {
|
||||
if (ajaxify.data.filters.hasOwnProperty('filter')) {
|
||||
selected.set(filter, ajaxify.data.selected[filter]);
|
||||
}
|
||||
const filterEl = $(`[component="flags/filter/${filter}"]`);
|
||||
userFilter.init(filterEl, {
|
||||
selectedUsers: selected.get(filter),
|
||||
template: 'partials/flags/filters',
|
||||
selectedBlock: `selected.${filter}`,
|
||||
onSelect: function (_selectedUsers) {
|
||||
selected.set(filter, _selectedUsers);
|
||||
},
|
||||
onHidden: function () {
|
||||
applyFilters();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
checkboxes.forEach(function (el) {
|
||||
el.checked = state;
|
||||
});
|
||||
bulkEl.disabled = !state;
|
||||
components.get('flags/list')
|
||||
.on('click', '[data-flag-id]', function (e) {
|
||||
if (['BUTTON', 'A'].includes(e.target.nodeName)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const flagId = this.getAttribute('data-flag-id');
|
||||
ajaxify.go('flags/' + flagId);
|
||||
});
|
||||
|
||||
flagsList.addEventListener('click', function (e) {
|
||||
const subselector = e.target.closest('input[type="checkbox"]');
|
||||
if (subselector) {
|
||||
// Stop checkbox clicks from going into the flag details
|
||||
e.stopImmediatePropagation();
|
||||
$('#flags-daily-wrapper').one('shown.bs.collapse', function () {
|
||||
handleGraphs();
|
||||
});
|
||||
|
||||
if (lastClicked && e.shiftKey && lastClicked !== subselector) {
|
||||
// Select all the checkboxes in between
|
||||
const state = subselector.checked;
|
||||
let started = false;
|
||||
autocomplete.user($('#filter-assignee, #filter-targetUid, #filter-reporterId'), (ev, ui) => {
|
||||
setTimeout(() => { ev.target.value = ui.item.user.uid; });
|
||||
});
|
||||
}
|
||||
|
||||
checkboxes.forEach(function (el) {
|
||||
if ([subselector, lastClicked].some(function (ref) {
|
||||
return ref === el;
|
||||
})) {
|
||||
started = !started;
|
||||
}
|
||||
export function enableFilterForm() {
|
||||
const $filtersEl = components.get('flags/filters');
|
||||
if ($filtersEl && $filtersEl.get(0).nodeName !== 'FORM') {
|
||||
// Harmony; update hidden form and submit on change
|
||||
const filtersEl = $filtersEl.get(0);
|
||||
const formEl = filtersEl.querySelector('form');
|
||||
|
||||
if (started) {
|
||||
el.checked = state;
|
||||
}
|
||||
});
|
||||
filtersEl.addEventListener('click', (e) => {
|
||||
const subselector = e.target.closest('[data-value]');
|
||||
if (!subselector) {
|
||||
return;
|
||||
}
|
||||
|
||||
const name = subselector.getAttribute('data-name');
|
||||
const value = subselector.getAttribute('data-value');
|
||||
|
||||
formEl[name].value = value;
|
||||
|
||||
applyFilters();
|
||||
});
|
||||
} else {
|
||||
// Persona; parse ajaxify data to set form values to reflect current filters
|
||||
for (const filter in ajaxify.data.filters) {
|
||||
if (ajaxify.data.filters.hasOwnProperty(filter)) {
|
||||
$filtersEl.find('[name="' + filter + '"]').val(ajaxify.data.filters[filter]);
|
||||
}
|
||||
}
|
||||
$filtersEl.find('[name="sort"]').val(ajaxify.data.sort);
|
||||
|
||||
document.getElementById('apply-filters').addEventListener('click', function () {
|
||||
applyFilters();
|
||||
});
|
||||
|
||||
$filtersEl.find('button[data-target="#more-filters"]').click((ev) => {
|
||||
const textVariant = ev.target.getAttribute('data-text-variant');
|
||||
if (!textVariant) {
|
||||
return;
|
||||
}
|
||||
ev.target.setAttribute('data-text-variant', ev.target.textContent);
|
||||
ev.target.firstChild.textContent = textVariant;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
let formEl = components.get('flags/filters').get(0);
|
||||
if (!formEl) {
|
||||
return;
|
||||
}
|
||||
if (formEl.nodeName !== 'FORM') {
|
||||
formEl = formEl.querySelector('form');
|
||||
}
|
||||
|
||||
const payload = new FormData(formEl);
|
||||
|
||||
// cid is special comes from categoryFilter module
|
||||
selected.get('cids').forEach(function (cid) {
|
||||
payload.append('cid', cid);
|
||||
});
|
||||
|
||||
// these three fields are special; comes from userFilter module
|
||||
['assignee', 'targetUid', 'reporterId'].forEach((filter) => {
|
||||
selected.get(filter).forEach(({ uid }) => {
|
||||
payload.append(filter, uid);
|
||||
});
|
||||
});
|
||||
|
||||
const length = Array.from(payload.values()).filter(Boolean);
|
||||
const qs = new URLSearchParams(payload).toString();
|
||||
|
||||
ajaxify.go('flags?' + (length ? qs : 'reset=1'));
|
||||
}
|
||||
|
||||
export function enableCheckboxes() {
|
||||
const flagsList = document.querySelector('[component="flags/list"]');
|
||||
const checkboxes = flagsList.querySelectorAll('[data-flag-id] input[type="checkbox"]');
|
||||
const bulkEl = document.querySelector('[component="flags/bulk-actions"] button');
|
||||
let lastClicked;
|
||||
|
||||
document.querySelector('[data-action="toggle-all"]').addEventListener('click', function () {
|
||||
const state = this.checked;
|
||||
|
||||
checkboxes.forEach(function (el) {
|
||||
el.checked = state;
|
||||
});
|
||||
bulkEl.disabled = !state;
|
||||
});
|
||||
|
||||
flagsList.addEventListener('click', function (e) {
|
||||
const subselector = e.target.closest('input[type="checkbox"]');
|
||||
if (subselector) {
|
||||
// Stop checkbox clicks from going into the flag details
|
||||
e.stopImmediatePropagation();
|
||||
|
||||
if (lastClicked && e.shiftKey && lastClicked !== subselector) {
|
||||
// Select all the checkboxes in between
|
||||
const state = subselector.checked;
|
||||
let started = false;
|
||||
|
||||
checkboxes.forEach(function (el) {
|
||||
if ([subselector, lastClicked].some(function (ref) {
|
||||
return ref === el;
|
||||
})) {
|
||||
started = !started;
|
||||
}
|
||||
|
||||
if (started) {
|
||||
el.checked = state;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// (De)activate bulk actions button based on checkboxes' state
|
||||
bulkEl.disabled = !Array.prototype.some.call(checkboxes, function (el) {
|
||||
return el.checked;
|
||||
});
|
||||
|
||||
lastClicked = subselector;
|
||||
}
|
||||
|
||||
// If you miss the checkbox, don't descend into the flag details, either
|
||||
if (e.target.querySelector('input[type="checkbox"]')) {
|
||||
e.stopImmediatePropagation();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function handleBulkActions() {
|
||||
document.querySelector('[component="flags/bulk-actions"]').addEventListener('click', function (e) {
|
||||
const subselector = e.target.closest('[data-action]');
|
||||
if (subselector) {
|
||||
const action = subselector.getAttribute('data-action');
|
||||
const flagIds = getSelected();
|
||||
const promises = flagIds.map((flagId) => {
|
||||
const data = {};
|
||||
if (action === 'bulk-assign') {
|
||||
data.assignee = app.user.uid;
|
||||
} else if (action === 'bulk-mark-resolved') {
|
||||
data.state = 'resolved';
|
||||
}
|
||||
return api.put(`/flags/${flagId}`, data);
|
||||
});
|
||||
|
||||
Promise.allSettled(promises).then(function (results) {
|
||||
const fulfilled = results.filter(function (res) {
|
||||
return res.status === 'fulfilled';
|
||||
}).length;
|
||||
const errors = results.filter(function (res) {
|
||||
return res.status === 'rejected';
|
||||
});
|
||||
if (fulfilled) {
|
||||
alerts.success('[[flags:bulk-success, ' + fulfilled + ']]');
|
||||
ajaxify.refresh();
|
||||
}
|
||||
|
||||
// (De)activate bulk actions button based on checkboxes' state
|
||||
bulkEl.disabled = !Array.prototype.some.call(checkboxes, function (el) {
|
||||
return el.checked;
|
||||
errors.forEach(function (res) {
|
||||
alerts.error(res.reason);
|
||||
});
|
||||
|
||||
lastClicked = subselector;
|
||||
}
|
||||
|
||||
// If you miss the checkbox, don't descend into the flag details, either
|
||||
if (e.target.querySelector('input[type="checkbox"]')) {
|
||||
e.stopImmediatePropagation();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Flags.handleBulkActions = function () {
|
||||
document.querySelector('[component="flags/bulk-actions"]').addEventListener('click', function (e) {
|
||||
const subselector = e.target.closest('[data-action]');
|
||||
if (subselector) {
|
||||
const action = subselector.getAttribute('data-action');
|
||||
const flagIds = Flags.getSelected();
|
||||
const promises = flagIds.map((flagId) => {
|
||||
const data = {};
|
||||
if (action === 'bulk-assign') {
|
||||
data.assignee = app.user.uid;
|
||||
} else if (action === 'bulk-mark-resolved') {
|
||||
data.state = 'resolved';
|
||||
}
|
||||
return api.put(`/flags/${flagId}`, data);
|
||||
});
|
||||
|
||||
Promise.allSettled(promises).then(function (results) {
|
||||
const fulfilled = results.filter(function (res) {
|
||||
return res.status === 'fulfilled';
|
||||
}).length;
|
||||
const errors = results.filter(function (res) {
|
||||
return res.status === 'rejected';
|
||||
});
|
||||
if (fulfilled) {
|
||||
alerts.success('[[flags:bulk-success, ' + fulfilled + ']]');
|
||||
ajaxify.refresh();
|
||||
}
|
||||
|
||||
errors.forEach(function (res) {
|
||||
alerts.error(res.reason);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Flags.getSelected = function () {
|
||||
const checkboxes = document.querySelectorAll('[component="flags/list"] [data-flag-id] input[type="checkbox"]');
|
||||
const payload = [];
|
||||
checkboxes.forEach(function (el) {
|
||||
if (el.checked) {
|
||||
payload.push(el.closest('[data-flag-id]').getAttribute('data-flag-id'));
|
||||
}
|
||||
});
|
||||
|
||||
return payload;
|
||||
};
|
||||
|
||||
Flags.handleGraphs = function () {
|
||||
const dailyCanvas = document.getElementById('flags:daily');
|
||||
const dailyLabels = utils.getDaysArray().map(function (text, idx) {
|
||||
return idx % 3 ? '' : text;
|
||||
});
|
||||
|
||||
if (utils.isMobile()) {
|
||||
Chart.defaults.plugins.tooltip.enabled = false;
|
||||
});
|
||||
}
|
||||
const data = {
|
||||
'flags:daily': {
|
||||
labels: dailyLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: '',
|
||||
backgroundColor: 'rgba(151,187,205,0.2)',
|
||||
borderColor: 'rgba(151,187,205,1)',
|
||||
pointBackgroundColor: 'rgba(151,187,205,1)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(151,187,205,1)',
|
||||
data: ajaxify.data.analytics,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
dailyCanvas.width = $(dailyCanvas).parent().width();
|
||||
new Chart(dailyCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['flags:daily'],
|
||||
options: {
|
||||
responsive: true,
|
||||
animation: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
export function getSelected() {
|
||||
const checkboxes = document.querySelectorAll('[component="flags/list"] [data-flag-id] input[type="checkbox"]');
|
||||
const payload = [];
|
||||
checkboxes.forEach(function (el) {
|
||||
if (el.checked) {
|
||||
payload.push(el.closest('[data-flag-id]').getAttribute('data-flag-id'));
|
||||
}
|
||||
});
|
||||
|
||||
return payload;
|
||||
}
|
||||
|
||||
export function handleGraphs() {
|
||||
const dailyCanvas = document.getElementById('flags:daily');
|
||||
const dailyLabels = utils.getDaysArray().map(function (text, idx) {
|
||||
return idx % 3 ? '' : text;
|
||||
});
|
||||
|
||||
if (utils.isMobile()) {
|
||||
Chart.defaults.plugins.tooltip.enabled = false;
|
||||
}
|
||||
const data = {
|
||||
'flags:daily': {
|
||||
labels: dailyLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: '',
|
||||
backgroundColor: 'rgba(151,187,205,0.2)',
|
||||
borderColor: 'rgba(151,187,205,1)',
|
||||
pointBackgroundColor: 'rgba(151,187,205,1)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(151,187,205,1)',
|
||||
data: ajaxify.data.analytics,
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
return Flags;
|
||||
});
|
||||
dailyCanvas.width = $(dailyCanvas).parent().width();
|
||||
new Chart(dailyCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['flags:daily'],
|
||||
options: {
|
||||
responsive: true,
|
||||
animation: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,126 +1,129 @@
|
||||
'use strict';
|
||||
import {
|
||||
Chart,
|
||||
LineController,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Tooltip,
|
||||
Filler,
|
||||
} from 'chart.js';
|
||||
|
||||
define('forum/ip-blacklist', [
|
||||
'chart.js/auto', 'benchpress', 'bootbox', 'alerts',
|
||||
], function ({ Chart }, Benchpress, bootbox, alerts) {
|
||||
const Blacklist = {};
|
||||
import * as Benchpress from 'benchpressjs';
|
||||
import * as bootbox from 'bootbox';
|
||||
import * as alerts from '../modules/alerts';
|
||||
|
||||
Blacklist.init = function () {
|
||||
const blacklist = $('#blacklist-rules');
|
||||
Chart.register(LineController, CategoryScale, LinearScale, LineElement, PointElement, Tooltip, Filler);
|
||||
|
||||
blacklist.on('keyup', function () {
|
||||
$('#blacklist-rules-holder').val(blacklist.val());
|
||||
});
|
||||
export function init() {
|
||||
const blacklist = $('#blacklist-rules');
|
||||
|
||||
$('[data-action="apply"]').on('click', function () {
|
||||
socket.emit('blacklist.save', blacklist.val(), function (err) {
|
||||
if (err) {
|
||||
return alerts.error(err);
|
||||
}
|
||||
alerts.alert({
|
||||
type: 'success',
|
||||
alert_id: 'blacklist-saved',
|
||||
title: '[[ip-blacklist:alerts.applied-success]]',
|
||||
});
|
||||
blacklist.on('keyup', function () {
|
||||
$('#blacklist-rules-holder').val(blacklist.val());
|
||||
});
|
||||
|
||||
$('[data-action="apply"]').on('click', function () {
|
||||
socket.emit('blacklist.save', blacklist.val(), function (err) {
|
||||
if (err) {
|
||||
return alerts.error(err);
|
||||
}
|
||||
alerts.alert({
|
||||
type: 'success',
|
||||
alert_id: 'blacklist-saved',
|
||||
title: '[[ip-blacklist:alerts.applied-success]]',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$('[data-action="test"]').on('click', function () {
|
||||
socket.emit('blacklist.validate', {
|
||||
rules: blacklist.val(),
|
||||
}, function (err, data) {
|
||||
if (err) {
|
||||
return alerts.error(err);
|
||||
}
|
||||
$('[data-action="test"]').on('click', function () {
|
||||
socket.emit('blacklist.validate', {
|
||||
rules: blacklist.val(),
|
||||
}, function (err, data) {
|
||||
if (err) {
|
||||
return alerts.error(err);
|
||||
}
|
||||
|
||||
Benchpress.render('admin/partials/blacklist-validate', data).then(function (html) {
|
||||
bootbox.alert(html);
|
||||
});
|
||||
Benchpress.render('admin/partials/blacklist-validate', data).then(function (html) {
|
||||
bootbox.alert(html);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Blacklist.setupAnalytics();
|
||||
setupAnalytics();
|
||||
}
|
||||
|
||||
export function setupAnalytics() {
|
||||
const hourlyCanvas = document.getElementById('blacklist:hourly');
|
||||
const dailyCanvas = document.getElementById('blacklist:daily');
|
||||
const hourlyLabels = utils.getHoursArray().map(function (text, idx) {
|
||||
return idx % 3 ? '' : text;
|
||||
});
|
||||
const dailyLabels = utils.getDaysArray().slice(-7).map(function (text, idx) {
|
||||
return idx % 3 ? '' : text;
|
||||
});
|
||||
|
||||
if (utils.isMobile()) {
|
||||
Chart.defaults.plugins.tooltip.enabled = false;
|
||||
}
|
||||
|
||||
const data = {
|
||||
'blacklist:hourly': {
|
||||
labels: hourlyLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: '',
|
||||
fill: 'origin',
|
||||
tension: 0.25,
|
||||
backgroundColor: 'rgba(186,139,175,0.2)',
|
||||
borderColor: 'rgba(186,139,175,1)',
|
||||
pointBackgroundColor: 'rgba(186,139,175,1)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(186,139,175,1)',
|
||||
data: ajaxify.data.analytics.hourly,
|
||||
},
|
||||
],
|
||||
},
|
||||
'blacklist:daily': {
|
||||
labels: dailyLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: '',
|
||||
fill: 'origin',
|
||||
tension: 0.25,
|
||||
backgroundColor: 'rgba(151,187,205,0.2)',
|
||||
borderColor: 'rgba(151,187,205,1)',
|
||||
pointBackgroundColor: 'rgba(151,187,205,1)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(151,187,205,1)',
|
||||
data: ajaxify.data.analytics.daily,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
Blacklist.setupAnalytics = function () {
|
||||
const hourlyCanvas = document.getElementById('blacklist:hourly');
|
||||
const dailyCanvas = document.getElementById('blacklist:daily');
|
||||
const hourlyLabels = utils.getHoursArray().map(function (text, idx) {
|
||||
return idx % 3 ? '' : text;
|
||||
});
|
||||
const dailyLabels = utils.getDaysArray().slice(-7).map(function (text, idx) {
|
||||
return idx % 3 ? '' : text;
|
||||
});
|
||||
|
||||
if (utils.isMobile()) {
|
||||
Chart.defaults.plugins.tooltip.enabled = false;
|
||||
}
|
||||
|
||||
const data = {
|
||||
'blacklist:hourly': {
|
||||
labels: hourlyLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: '',
|
||||
fill: 'origin',
|
||||
tension: 0.25,
|
||||
backgroundColor: 'rgba(186,139,175,0.2)',
|
||||
borderColor: 'rgba(186,139,175,1)',
|
||||
pointBackgroundColor: 'rgba(186,139,175,1)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(186,139,175,1)',
|
||||
data: ajaxify.data.analytics.hourly,
|
||||
},
|
||||
],
|
||||
const chartOpts = {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
position: 'left',
|
||||
type: 'linear',
|
||||
beginAtZero: true,
|
||||
},
|
||||
'blacklist:daily': {
|
||||
labels: dailyLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: '',
|
||||
backgroundColor: 'rgba(151,187,205,0.2)',
|
||||
borderColor: 'rgba(151,187,205,1)',
|
||||
pointBackgroundColor: 'rgba(151,187,205,1)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(151,187,205,1)',
|
||||
data: ajaxify.data.analytics.daily,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const chartOpts = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
position: 'left',
|
||||
type: 'linear',
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
new Chart(hourlyCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['blacklist:hourly'],
|
||||
options: chartOpts,
|
||||
});
|
||||
|
||||
new Chart(dailyCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['blacklist:daily'],
|
||||
options: chartOpts,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
return Blacklist;
|
||||
});
|
||||
new Chart(hourlyCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['blacklist:hourly'],
|
||||
options: chartOpts,
|
||||
});
|
||||
|
||||
new Chart(dailyCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data['blacklist:daily'],
|
||||
options: chartOpts,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="graph-container position-relative" id="analytics-traffic-container" style="aspect-ratio: 16/9;">
|
||||
<div class="graph-container position-relative" id="analytics-traffic-container" style="aspect-ratio: 2;">
|
||||
<canvas id="analytics-traffic" ></canvas>
|
||||
</div>
|
||||
<hr/>
|
||||
|
||||
Reference in New Issue
Block a user