Stats: replace flotr2 with chart.js (#3858)

* include Chart.js

* page: main statistics. Flotr.js replaced with Chart.js

* main stats + repartition

* Delete: repartition.js + stats.js

* delete flotr2

* add libs in README

* polish

* code polish

* fixed amount of week days and months

* added manget link for LibreJS

* added: @license-end

* phpcbf + jshint formatting

* delete old code

* fix stats

* fix Comments

* finally I found the issue and fixed its best

* fix the month stats

* Whitespace fixes

* Remove flotr2

* Rename to chart.min.js

* Remove console.log

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

1 files changed, 194 insertions, 0 deletions

diff --git a/p/scripts/statsWithChartjs.js b/p/scripts/statsWithChartjs.js
new file mode 100644
index 000000000..0ca511132
--- /dev/null
+++ b/p/scripts/statsWithChartjs.js
@@ -0,0 +1,194 @@
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
+"use strict";
+/* globals Chart */
+/* jshint esversion:6, strict:global */
+
+function initCharts() {
+	if (!window.Chart) {
+		if (window.console) {
+			console.log('FreshRSS is waiting for Chart.js...');
+		}
+		window.setTimeout(initCharts, 25);
+		return;
+	}
+
+	const jsonData = document.getElementsByClassName('jsonData-stats');
+
+	var jsonDataParsed;
+	var chartConfig;
+
+	for (var i = 0; i < jsonData.length; i++) {
+		jsonDataParsed = JSON.parse(jsonData[i].innerHTML);
+
+		switch(jsonDataParsed.charttype) {
+			case 'bar':
+				chartConfig = jsonChartBar(jsonDataParsed.label, jsonDataParsed.data, jsonDataParsed.xAxisLabels);
+				break;
+			case 'doughnut':
+				chartConfig = jsonChartDoughnut(jsonDataParsed.labels, jsonDataParsed.data);
+				break;
+			case 'barWithAverage':
+				chartConfig = jsonChartBarWithAvarage(jsonDataParsed.labelBarChart, jsonDataParsed.dataBarChart, jsonDataParsed.labelAverage, jsonDataParsed.dataAverage, jsonDataParsed.xAxisLabels);
+		}
+
+		new Chart(
+			document.getElementById(jsonDataParsed.canvasID),
+			chartConfig
+		);
+	}
+
+	if (window.console) {
+		console.log('Chart.js finished');
+	}
+}
+
+function jsonChartBar(label, data, xAxisLabels = '') {
+	return {
+		type: 'bar',
+		data: {
+			labels: xAxisLabels,
+			datasets: [{
+				label: label,
+				backgroundColor: '#0062BD',
+				borderColor: '#0062BD',
+				data: data,
+				barPercentage: 1.0,
+				categoryPercentage: 1.0,
+				order: 2,
+			}]
+		},
+		options: {
+			scales: {
+				y: {
+					beginAtZero: true
+				},
+				x: {
+					grid: {
+						display: false,
+					}
+				}
+			},
+			plugins: {
+				legend: {
+					display: false,
+				}
+			}
+		}
+	};
+}
+
+function jsonChartDoughnut(labels, data) {
+	return {
+		type: 'doughnut',
+		data: {
+			labels: labels,
+			datasets: [{
+				backgroundColor: [
+					'#0b84a5',  //petrol
+					'#f6c85f', // sand
+					'#6f4e7c', //purple
+					'#9dd866', //green
+					'#ca472f', //red
+					'#ffa056', //orange
+					'#8dddd0', // turkis
+					'#f6c85f', // sand
+					'#6f4e7c', //purple
+					'#9dd866', //green
+					'#ca472f', //red
+					'#ffa056', //orange
+					'#8dddd0', // turkis
+				],
+				data: data,
+			}]
+		},
+		options: {
+			layout: {
+				padding: 20,
+			},
+			plugins: {
+				legend: {
+					position: 'bottom',
+					align: 'start',
+				}
+			}
+		}
+	};
+}
+
+function jsonChartBarWithAvarage(labelBarChart, dataBarChart, labelAverage, dataAverage, xAxisLabels = '') {
+	return {
+		type: 'bar',
+		data: {
+			datasets: [
+				{
+					// bar chart layout
+					label: labelBarChart,
+					backgroundColor: '#0062BD',
+					borderColor: '#0062BD',
+					data: dataBarChart,
+					barPercentage: 1.0,
+					categoryPercentage: 1.0,
+					order: 2,
+				},
+				{
+					// average line chart
+					type: 'line',
+					label: labelAverage,  // Todo: i18n
+					borderColor: 'rgb(192,216,0)',
+					data: {
+						'-30' : dataAverage,
+						'-1' : dataAverage,
+					},
+					order: 1,
+				}
+			]
+		},
+
+		options: {
+			scales: {
+				y: {
+					beginAtZero: true,
+				},
+				x: {
+					ticks: {
+						callback: function(val){
+							if (xAxisLabels.length > 0) {
+								return xAxisLabels[val];
+							} else {
+								return val;
+							}
+						}
+					},
+					grid: {
+						display: false,
+					}
+				}
+			},
+			elements: {
+				point: {
+					radius: 0,
+				}
+			},
+			plugins: {
+				tooltip: {
+					callbacks: {
+						title: function(tooltipitem) {
+							if (xAxisLabels.length > 0) {
+								return xAxisLabels[tooltipitem[0].dataIndex];
+							} else {
+								return tooltipitem[0].label;
+							}
+						}
+					}
+				},
+				legend: {
+					display: false,
+				}
+			}
+		}
+	};
+}
+
+initCharts();
+
+// @license-end