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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
| {% extends 'base.html.twig' %}
{% block title %}Statistiques
{% endblock %}
{% block body %}
{% block stylesheets %}
<link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css">
<link rel="stylesheet" href="{{asset('assets/css/graphiques.css')}}">
{% endblock %}
<div class="wrapper-table">
<h1>Statistiques</h1>
{# Graphique des dépenses #}
<div class="container-graphiques">
<select name="selectAnneesDepenses" id="selectAnneesDepenses" class="btn select selectAnneesDepenses" data-select="graphique-mois-depenses">
{% for a in selectAnneesDepenses %}
<option value="{{a.annee}}">{{a.annee}}</option>
{% endfor %}
</select>
<div id="graphique-depenses">
<canvas id="graphDepenses" width="600" height="400"></canvas>
</div>
<select name="selectAnneesRecettes" id="selectAnneesRecettes" class="btn select selectAnneesRecettes" data-select="graphique-mois-recettes">
{% for a in selectAnneesRecettes %}
<option value="{{a.annee}}">{{a.annee}}</option>
{% endfor %}
</select>
<div id="graphique-recettes"></div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script type="text/javascript">
const selectAnneeDepenses = document.querySelector(".selectAnneeDepenses");
const selectAnneeRecettes = document.querySelector(".selectAnneeRecettes");
const graphDepenses = document.querySelector("#graphDepenses")
const graphRecettes = document.querySelector("#graphique-recettes")
selectAnneesDepenses.addEventListener("change", (e) => {
let selectionAnnee = e.target.value;
filtreAnneeDepenses(selectionAnnee);
});
const filtreAnneeDepenses = (selectionAnnee) => {
let formData = new FormData();
formData.append("selectionAnnee", selectionAnnee);
for (let item of formData) {
console.log(item[0], item[1]);
}
let colDepenses
async function statsDepenses(colDepenses) {
let response = await fetch("/admin/statistiques", {
body: formData,
method: "POST",
cache: "no-cache",
headers: {
"X-Requested-With": "XMLHttpRequest"
}
})
colDepenses = await response.json();
return colDepenses
};
statsDepenses()
}
// Obtenir dernier mois contenu dans le select et afficher les dépenses au démarrage de la page
if (selectAnneesDepenses.value) {
let selectionAnnee = selectAnneesDepenses[0].value;
selectAnneesDepenses.value = selectionAnnee;
filtreAnneeDepenses(selectionAnnee);
}
selectAnneesDepenses.addEventListener("change", (e) => {
let selectionAnnee = e.target.value;
filtreAnneeDepenses(selectionAnnee);
});
// Graphique dépenses
const afficherGraphique = (colDepenses) => {
let graph = new Chart(graphDepenses, {
type: "bar",
data: {
labels: [
"Janv",
"Févr",
"Mars",
"Avr",
"Mai",
"Juin",
"Juil",
"Août",
"Sept",
"Oct",
"Nov",
"Déc",
],
datasets: [
{
label: "Dépenses pour l'année",
data: colDepenses,
backgroundColor: [
"red",
"blue",
"green",
"red",
"blue",
"green",
"red",
"blue",
"green",
"red",
"blue",
"green",
],
borderWidth: 1,
borderColor: ["darkcyan"]
},
]
}
})
};
afficherGraphique()
</script>
{% endblock %}
{# graphique recettes #}
{# selectAnneesRecettes.addEventListener("change", (e) => {
let selectionAnnee = e.target.value;
filtreAnneeRecettes(selectionAnnee);
});
const filtreAnneeRecettes = async (selectionAnnee) => {
let formData = new FormData();
formData.append("selectionAnnee", selectionAnnee);
for (let item of formData) {
console.log(item[0], item[1]);
}
const reponse = await fetch("/admin/statistiques", {
body: formData,
method: "POST",
cache: "no-cache",
headers: {
"X-Requested-With": "XMLHttpRequest"
}
}).then((response) => response.json()).then(data => console.log(data)).catch((error) => alert("Erreur : " + error));
return reponse;
};
}
// //Obtenir dernier mois contenu dans le select et afficher les recettes au démarrage de la page
{
# if (selectAnneesRecettes.value) {
let selectionAnnee = selectAnneesRecettes[0].value;
selectAnneesRecettes.value = selectionAnnee;
filtreAnneeRecettes(selectionAnnee);
}
#
} {
# selectAnneesRecettes.addEventListener("change", (e) => {
let selectionAnnee = e.target.value;
console.log('selection année : ', selectionAnnee)
});#} |
