diff --git a/Gulpfile.js b/Gulpfile.js
index 9cbfec2d15..9f5c913eae 100644
--- a/Gulpfile.js
+++ b/Gulpfile.js
@@ -116,7 +116,8 @@ function jsPackages() {
require.resolve('jquery/dist/jquery.min.js'),
require.resolve('moment/min/moment.min.js'),
require.resolve('moment/locale/fr.js'),
- require.resolve('chart.js/dist/Chart.min.js'),
+ require.resolve('chartjs-adapter-moment/dist/chartjs-adapter-moment.min.js'),
+ require.resolve('chart.js/dist/chart.min.js'),
require.resolve('easymde/dist/easymde.min.js')
])
.pipe(gulp.dest('dist/js/'))
diff --git a/assets/js/charts.js b/assets/js/charts.js
index 7a1d3f2133..c9135d1b36 100644
--- a/assets/js/charts.js
+++ b/assets/js/charts.js
@@ -1,6 +1,4 @@
-(function($) {
- 'use strict'
-
+(function() {
/**
* HSV to RGB color conversion
*
@@ -54,10 +52,11 @@
var basicOptions = {
scales: {
- xAxes: [{
+ x: {
type: 'time',
time: {
parser: 'DD/MM/YYYY',
+ tooltipFormat: 'DD/MM/YYYY',
displayFormats: {
hour: 'DD MMM',
day: 'DD MMM',
@@ -67,25 +66,28 @@
year: 'YYYY'
}
}
- }],
- yAxes: [{
- ticks: {
- beginAtZero: true
- }
- }]
+ },
+ y: {
+ beginAtZero: true
+ }
},
responsive: true
}
var charts = []
- function setupChart($object, formatter) {
- var $dataX = $object.data('time')
+ var chartFormatters = {
+ 'view-graph': null,
+ 'visit-time-graph': Math.round,
+ 'users-graph': null
+ }
+ function setupChart(chartEl, formatter) {
+ var dataX = JSON.parse(chartEl.getAttribute('data-time'))
var times = []
- $dataX.forEach(function(element) {
+ dataX.forEach(function(element) {
times.push(window.moment(element).format('DD/MM/YYYY'))
})
- var allObjectData = $object.data()
+ var allObjectData = chartEl.dataset
var data = []
// Count how many graphs are displayed
var nbColors = 0
@@ -97,11 +99,12 @@
var n = 0
for (var o in allObjectData) {
if (o.indexOf('views') > -1) {
- var label = $object.data('label-' + o)
+ var label = chartEl.getAttribute('data-label-' + o)
var color = hsvToRgb(n, 100, 80)
+ var d = JSON.parse(allObjectData[o])
data.push({
label: label,
- data: formatter ? allObjectData[o].map(formatter) : allObjectData[o],
+ data: formatter ? d.map(formatter) : d,
fill: false,
backgroundColor: 'rgba(' + color.join(',') + ', 1)',
borderColor: 'rgba(' + color.join(',') + ', 0.70)',
@@ -117,9 +120,19 @@
labels: times,
datasets: data
},
- options: basicOptions
+ options: {
+ ...basicOptions,
+ scales: {
+ y: {
+ title: {
+ display: true,
+ text: chartEl.getAttribute('data-y-label')
+ }
+ }
+ }
+ }
}
- charts.push(new window.Chart($object, config))
+ charts.push(new window.Chart(chartEl, config))
}
// Switching between a graph with lines and a graph with bars
@@ -130,18 +143,21 @@
localStorage.setItem('graphType', 'line') // default value
}
- $('#graph_type_toogle').click(function() {
- if (localStorage.getItem('graphType') === 'line') {
- localStorage.setItem('graphType', 'bar')
- $(this).text(switchToLine)
- } else {
- localStorage.setItem('graphType', 'line')
- $(this).text(switchToBar)
- }
- clearCharts()
- drawCharts()
- })
- $('#graph_type_toogle').text(localStorage.getItem('graphType') === 'line' ? switchToBar : switchToLine)
+ var graphTypeToggleEl = document.getElementById('graph_type_toggle')
+ if (graphTypeToggleEl !== null) {
+ graphTypeToggleEl.addEventListener('click', function() {
+ if (localStorage.getItem('graphType') === 'line') {
+ localStorage.setItem('graphType', 'bar')
+ graphTypeToggleEl.textContent = switchToLine
+ } else {
+ localStorage.setItem('graphType', 'line')
+ graphTypeToggleEl.textContent = switchToBar
+ }
+ clearCharts()
+ drawCharts()
+ })
+ graphTypeToggleEl.textContent = localStorage.getItem('graphType') === 'line' ? switchToBar : switchToLine
+ }
// Clearing charts
function clearCharts() {
@@ -152,43 +168,37 @@
// Drawing charts
function drawCharts() {
- if ($('#view-graph').length) {
- setupChart($('#view-graph'))
- }
- if ($('#visit-time-graph').length) {
- setupChart($('#visit-time-graph'), Math.round)
- }
- if ($('#users-graph').length) {
- setupChart($('#users-graph'))
- }
- if ($('#new-users-graph').length) {
- setupChart($('#new-users-graph'))
- }
- if ($('#sessions-graph').length) {
- setupChart($('#sessions-graph'))
+ for (var g in chartFormatters) {
+ var el = document.getElementById(g)
+ if (el !== null) {
+ setupChart(el, chartFormatters[g])
+ }
}
}
drawCharts()
// Tab management
- function displayTab(tab) {
+ function displayTab(tabEl) {
+ if (tabEl === null) {
+ return
+ }
// Hide all the tabs
- $('.tabcontent').each(function() {
- $(this).hide()
+ document.querySelectorAll('.tabcontent').forEach(function(el) {
+ el.style.display = 'none'
})
// Remove "active" info from links
- $('.tablinks').each(function() {
- $(this).removeClass('active')
+ document.querySelectorAll('.tablinks').forEach(function(el) {
+ el.classList.remove('active')
})
// Show current tab and add "active" class to the link
- $('#' + $(tab).attr('id') + '-content').show()
- $(tab).addClass('active')
+ document.getElementById(tabEl.getAttribute('id') + '-content').style.display = 'block'
+ tabEl.classList.add('active')
}
- $('.tablinks').each(function() {
- $(this).click(function() {
- displayTab($(this))
+ document.querySelectorAll('.tablinks').forEach(function(el) {
+ el.addEventListener('click', function(e) {
+ displayTab(el)
})
})
- displayTab($('.tablinks').first())
-})(jQuery)
+ displayTab(document.querySelector('.tablinks'))
+})()
diff --git a/assets/scss/pages/_stats.scss b/assets/scss/pages/_stats.scss
index e3da8c7756..0b130f004f 100644
--- a/assets/scss/pages/_stats.scss
+++ b/assets/scss/pages/_stats.scss
@@ -38,7 +38,7 @@
/* Style the tab content */
.tabcontent {
- display: none;
+ /* Tab has to be displayed by default, otherwise Chart.js doesn't render the graph. */
padding: $length-6 $length-12;
diff --git a/package.json b/package.json
index 468b052eae..53cafec939 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
"homepage": "https://github.com/zestedesavoir/zds-site",
"dependencies": {
"autoprefixer": "10.2.5",
- "chart.js": "2.9.4",
+ "chart.js": "3.5.1",
+ "chartjs-adapter-moment": "1.0.0",
"cssnano": "5.0.4",
"del": "6.0.0",
"easymde": "2.10.2-360.0",
diff --git a/templates/misc/graph.part.html b/templates/misc/graph.part.html
index 25794db78f..f7960ecebe 100644
--- a/templates/misc/graph.part.html
+++ b/templates/misc/graph.part.html
@@ -8,6 +8,7 @@
{% trans graph_title %}