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>

2 files changed, 80 insertions, 27 deletions

diff --git a/app/views/stats/index.phtml b/app/views/stats/index.phtml
index db1ccd601..dff20041d 100644
--- a/app/views/stats/index.phtml
+++ b/app/views/stats/index.phtml
@@ -69,29 +69,55 @@
 
 		<div class="stat">
 			<h2><?= _t('admin.stats.entry_per_day') ?></h2>
-			<div id="statsEntryPerDay" class="statGraph"></div>
+			<div>
+				<canvas id="statsEntriesPerDay"></canvas>
+				<script class="jsonData-stats" type="application/json">
+				<?php
+				echo json_encode(array(
+					'canvasID' 		=> 'statsEntriesPerDay',
+					'charttype' 	=> 'barWithAverage',
+					'labelBarChart' => _t('admin.stats.entry_count'),
+					'dataBarChart' 	=> $this->entryCount,
+					'labelAverage' 	=> 'Average ('.$this->average.')',
+					'dataAverage' 	=> $this->average,
+					'xAxisLabels' 	=> $this->last30DaysLabels,
+				), JSON_UNESCAPED_UNICODE);
+				?></script>
+			</div>
 		</div>
 
 		<div class="stat half">
 			<h2><?= _t('admin.stats.feed_per_category') ?></h2>
-			<div id="statsFeedPerCategory" class="statGraph"></div>
-			<div id="statsFeedPerCategoryLegend"></div>
+			<div>
+				<canvas id="statsFeedsPerCategory"></canvas>
+				<script class="jsonData-stats" type="application/json">
+				<?php
+				echo json_encode(array(
+					'canvasID' 		=> 'statsFeedsPerCategory',
+					'charttype' 	=> 'doughnut',
+					'data' 			=> $this->feedByCategory['data'],
+					'labels' 		=> $this->feedByCategory['label'],
+				), JSON_UNESCAPED_UNICODE);
+				?></script>
+			</div>
 		</div>
 
 		<div class="stat half">
 			<h2><?= _t('admin.stats.entry_per_category') ?></h2>
-			<div id="statsEntryPerCategory" class="statGraph"></div>
-			<div id="statsEntryPerCategoryLegend"></div>
+			<div>
+				<canvas id="statsEntriesPerCategory"></canvas>
+				<script class="jsonData-stats" type="application/json">
+				<?php
+				echo json_encode(array(
+					'canvasID' 		=> 'statsEntriesPerCategory',
+					'charttype' 	=> 'doughnut',
+					'data' 			=> $this->entryByCategory['data'],
+					'labels' 		=> $this->entryByCategory['label'],
+				), JSON_UNESCAPED_UNICODE);
+				?></script>
+			</div>
 		</div>
 	</div>
 </div>
 
-<script id="jsonStats" type="application/json"><?php
-echo json_encode(array(
-	'average' => $this->average,
-	'dataCount' => $this->count,
-	'feedByCategory' => $this->feedByCategory,
-	'entryByCategory' => $this->entryByCategory,
-), JSON_UNESCAPED_UNICODE);
-?></script>
-<script src="../scripts/stats.js?<?= @filemtime(PUBLIC_PATH . '/scripts/stats.js') ?>"></script>
+<script src="../scripts/statsWithChartjs.js?<?= @filemtime(PUBLIC_PATH . '/scripts/statsWithChartjs.js') ?>"></script>
diff --git a/app/views/stats/repartition.phtml b/app/views/stats/repartition.phtml
index 88086213e..2cf65b3fb 100644
--- a/app/views/stats/repartition.phtml
+++ b/app/views/stats/repartition.phtml
@@ -53,28 +53,55 @@
 
 		<div class="stat">
 			<h2><?= _t('admin.stats.entry_per_hour', $this->averageHour) ?></h2>
-			<div id="statsEntryPerHour" class="statGraph"></div>
+			<div>
+				<canvas id="statsEntriesPerHour"></canvas>
+				<script class="jsonData-stats" type="application/json">
+				<?php
+				echo json_encode(array(
+					'canvasID' 		=> 'statsEntriesPerHour',
+					'charttype' 	=> 'bar',
+					'data' 			=> $this->repartitionHour,
+					'label' 		=> _t('admin.stats.entry_count'),
+					'xAxisLabels' 	=> $this->hours24Labels
+				), JSON_UNESCAPED_UNICODE);
+				?></script>
+			</div>
 		</div>
 
 		<div class="stat half">
 			<h2><?= _t('admin.stats.entry_per_day_of_week', $this->averageDayOfWeek) ?></h2>
-			<div id="statsEntryPerDayOfWeek" class="statGraph"></div>
+			<div>
+				<canvas id="statsEntriesPerDayOfWeek"></canvas>
+				<script class="jsonData-stats" type="application/json">
+				<?php
+				echo json_encode(array(
+					'canvasID' 		=> 'statsEntriesPerDayOfWeek',
+					'charttype' 	=> 'bar',
+					'data' 			=> $this->repartitionDayOfWeek,
+					'label' 		=> _t('admin.stats.entry_count'),
+					'xAxisLabels' 	=> $this->days,
+				), JSON_UNESCAPED_UNICODE);
+				?></script>
+			</div>
 		</div>
 
 		<div class="stat half">
 			<h2><?= _t('admin.stats.entry_per_month', $this->averageMonth) ?></h2>
-			<div id="statsEntryPerMonth" class="statGraph"></div>
+			<div>
+				<canvas id="statsEntriesPerMonth"></canvas>
+				<script class="jsonData-stats" type="application/json">
+				<?php
+				echo json_encode(array(
+					'canvasID' 		=> 'statsEntriesPerMonth',
+					'charttype' 	=> 'bar',
+					'data' 			=> $this->repartitionMonth,
+					'label' 		=> _t('admin.stats.entry_count'),
+					'xAxisLabels' 	=> $this->months,
+				), JSON_UNESCAPED_UNICODE);
+				?></script>
+			</div>
 		</div>
 	</div>
 </div>
 
-<script id="jsonRepartition" type="application/json"><?php
-echo htmlspecialchars(json_encode(array(
-	'repartitionHour' => $this->repartitionHour,
-	'repartitionDayOfWeek' => $this->repartitionDayOfWeek,
-	'days' => $this->days,
-	'repartitionMonth' => $this->repartitionMonth,
-	'months' => $this->months,
-), JSON_UNESCAPED_UNICODE), ENT_NOQUOTES, 'UTF-8');
-?></script>
-<script src="../scripts/repartition.js?<?= @filemtime(PUBLIC_PATH . '/scripts/repartition.js') ?>"></script>
+<script src="../scripts/statsWithChartjs.js?<?= @filemtime(PUBLIC_PATH . '/scripts/statsWithChartjs.js') ?>"></script>