1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
{% extends "layout.html" %}
{% block head %}
{{ super() }}
<script src="{{ url_for('static', filename='npm_components/chart.js/dist/chart.min.js') }}"></script>
<style>
.chart-container {
display: block;
float: none;
width: 20%;
margin-top: 0px;
margin-right:0px;
margin-left:0px;
height: auto;
}
</style>
{% endblock %}
{% block content %}
<div class="container">
<h1>{{ _('History') }}</h1>
{% if month != None %}
<h2><a href="{{ url_for("articles.history", year=year) }}"><span class="fa fa-chevron-left" aria-hidden="true"></span> {{ year }}</a></h2>
<h3>{{ month | month_name }}</h3>
{% elif year != None %}
<h2><a href="{{ url_for("articles.history") }}"><span class="fa fa-chevron-left" aria-hidden="true"></span> {{ _('all years') }}</a></h2>
<h3>{{ year }}</h3>
{% endif %}
{% if month == None %}
<div class="row">
<div class="col chart-container">
<div id="spinner" class="d-flex justify-content-center">
<div class="spinner-border" role="status"><span class="sr-only">{{ _('Loading...') }}</span></div>
</div>
<canvas id="stats-history"></canvas>
</div>
</div>
{% endif %}
{% if year != None and month != None %}
<div class="row">
<div class="col">
<ul class="list-group">
{% for date in articles_counter | sort(reverse = True) %}
{% for article in articles %}
<li class="list-group-item">{{ article.date | datetime }} - <a href="/article/{{ article.id }}">{{ article.title | safe }}</a></li>
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
{% endif %}
</div><!-- /.container -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var months = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];
var colors = ['rgba(230, 25, 75, 0.4)', 'rgba(60, 180, 75, 0.4)',
'rgba(255, 225, 25, 0.4)', 'rgba(0, 130, 200, 0.4)', 'rgba(245, 130, 48, 0.4)',
'rgba(145, 30, 180, 0.4)', 'rgba(70, 240, 240, 0.4)', 'rgba(240, 50, 230, 0.4)',
'rgba(210, 245, 60, 0.4)', 'rgba(250, 190, 190, 0.4)', 'rgba(0, 128, 128, 0.4)',
'rgb(148, 163, 209, 0.4)', 'rgba(170, 110, 40, 0.4)', 'rgb(141, 140, 255, 0.4)',
'rgba(128, 0, 0, 0.4)', 'rgba(170, 255, 195, 0.4)', 'rgba(128, 128, 0, 0.4)',
'rgba(255, 215, 180, 0.4)', 'rgba(0, 0, 128, 0.4)', 'rgb(241, 147, 241, 0.4)',
'rgba(255, 255, 255, 0.4)', 'rgb(129, 181, 255, 0.4)', 'rgb(229, 236, 202, 0.4)',
'rgb(157, 196, 241, 0.4)', 'rgb(253, 141, 211, 0.4)', 'rgb(180, 128, 253, 0.4)',
'rgb(255, 195, 129, 0.4)', 'rgb(204, 228, 230, 0.4)'];
var period = window.location.pathname.split("/history")[1]
if (period == null){
period = "";
}
if (period.split('/').length - 1 < 2) {
fetch("/stats/history.json" + period)
.then(response => response.json())
.then(result => {
var element = document.getElementById("spinner");
element.parentNode.removeChild(element);
if (period.split('/').length - 1 == 1) {
var labels = Object.keys(result).map(function(e){return months[e-1]});
} else {
var labels = Object.keys(result);
}
var ctx = document.getElementById("stats-history").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Number of aggregated articles',
data: Object.values(result),
borderWidth: 1,
backgroundColor: colors
}],
},
options: {
title: {
display: true,
text: 'Number of aggregated articles'
},
responsive: true,
onClick: function(evt) {
const points = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
if (points.length) {
const firstPoint = points[0];
var label = myChart.data.labels[firstPoint.index];
var value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
if (months.includes(label)) {
the_month = months.indexOf(label)+1;
window.location = window.location + "/" + the_month;
} else {
window.location = window.location + "/" + label;
}
}
}
},
scales: {
x: {
display: true,
},
y: {
display: true,
beginAtZero: true,
type: 'logarithmic',
}
}
});
}).catch((error) => {
console.error('Error:', error);
});
}
});
</script>
{% endblock %}
|
