Skip to content

Commit eb57f83

Browse files
TheoLandemaineTheoLandemaine
committed
Edit design stats && add button to access to stats
1 parent 760e314 commit eb57f83

3 files changed

Lines changed: 65 additions & 60 deletions

File tree

‎front-end/src/components/blog/DisplayArticles.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,13 @@
1313
<Add class="!fill-light-primary" />
1414
</span>
1515
</button>
16+
<button
17+
type="submit"
18+
@click="router.push('/app/blog/stats')"
19+
class="font-bold rounded-lg text-xs md:text-sm px-3 py-2 focus:outline-none gap-2 bg-blue-700"
20+
>
21+
<span class="text-white"> Voir les statistiques </span>
22+
</button>
1623
</div>
1724

1825
<div class="mt-8 md:mt-10">

front-end/src/components/blog/Stats.vue renamed to front-end/src/components/blog/StatsArticles.vue

Lines changed: 57 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,37 @@
11
<template>
2-
<div class="w-full">
3-
<h1 class="w-full text-center mb-8">Stats des répartitions d'articles</h1>
4-
<div class="w-full relative block">
5-
<canvas id="chart1" width="300" height="300"></canvas>
2+
<div class="w-full h-auto grid grid-cols-2 gap-10 m-5">
3+
<div class="flex flex-col items-center">
4+
<h1 class="text-3xl text-black mb-5 dark:text-white">Nombres d'articles par type</h1>
5+
<div class="border border-gray-500 p-3 rounded-xl dark:border-white">
6+
<canvas id="chart1" width="300" height="300"></canvas>
7+
</div>
68
</div>
7-
<h1 class="w-full text-center mt-12 mb-8">
8-
Stats des événements qui ont connu le plus de participation
9-
</h1>
10-
<div class="w-full relative block">
11-
<canvas id="chart2" width="300" height="300"></canvas>
9+
<div class="flex flex-col items-center">
10+
<h1 class="text-3xl text-black mb-5 dark:text-white">
11+
Événements avec le plus de participants
12+
</h1>
13+
<div class="border border-gray-500 p-3 rounded-xl dark:border-white">
14+
<canvas id="chart2" width="300" height="300"></canvas>
15+
</div>
1216
</div>
13-
<h1 class="w-full text-center mt-12 mb-8">
14-
Top 10 des étudiants qui créent le plus d'articles
15-
</h1>
16-
<div class="w-full relative block">
17-
<canvas id="chart3" width="300" height="300"></canvas>
17+
<div class="flex flex-col items-center">
18+
<h1 class="text-3xl text-black mb-5 dark:text-white">
19+
Étudiants ayant créé le plus d'articles
20+
</h1>
21+
<div class="border border-gray-500 p-3 rounded-xl dark:border-white">
22+
<canvas id="chart3" width="300" height="300"></canvas>
23+
</div>
1824
</div>
19-
<h1 class="w-full text-center mt-12 mb-8">Top 10 des étudiants qui participent le plus</h1>
20-
<div class="w-full relative block">
21-
<canvas id="chart4" width="300" height="300"></canvas>
25+
<div class="flex flex-col items-center">
26+
<h1 class="text-3xl text-black mb-5 dark:text-white">Étudiants participant aux évènements</h1>
27+
<div class="border border-gray-500 p-3 rounded-xl dark:border-white">
28+
<canvas id="chart4" width="300" height="300"></canvas>
29+
</div>
2230
</div>
2331
</div>
2432
</template>
2533

2634
<script lang="ts" setup>
27-
import { useUserStore } from '@/store/modules/user.store';
2835
import { onMounted } from 'vue';
2936
import { useArticleStore } from '@/store/modules/article.store';
3037
import {
@@ -54,9 +61,6 @@ ChartJS.register(
5461
5562
const createCharts = async () => {
5663
const articleStore = useArticleStore();
57-
const userStore = useUserStore();
58-
const articles = userStore.myArticles;
59-
const users = userStore.relatedProfiles;
6064
const articles2 = articleStore.getArticle();
6165
const response = await articles2;
6266
const types = response.map((article) => article.type);
@@ -70,16 +74,14 @@ const createCharts = async () => {
7074
}
7175
7276
const categoryCount = countCategories(types);
73-
console.log(categoryCount);
7477
7578
const articleWithMostParticipants = await articleStore.getArticleWithMostParticipants();
7679
const articleData = articleWithMostParticipants.map((article) => ({
7780
title: article.title,
7881
participants: article.nombreparticipant,
7982
}));
80-
console.log(articleWithMostParticipants);
8183
82-
const ctx1 = document.getElementById('chart1').getContext('2d');
84+
const ctx1 = (document.getElementById('chart1') as HTMLCanvasElement).getContext('2d');
8385
new ChartJS(ctx1, {
8486
type: 'doughnut',
8587
data: {
@@ -89,9 +91,9 @@ const createCharts = async () => {
8991
label: "Nombre d'articles",
9092
data: Object.values(categoryCount),
9193
backgroundColor: [
92-
'rgba(75, 192, 192, 0.6)',
93-
'rgba(192, 75, 75, 0.6)',
94-
'rgba(75, 192, 75, 0.6)',
94+
'rgba(75, 192, 192, 1)',
95+
'rgba(192, 75, 75, 1)',
96+
'rgba(75, 192, 75, 1)',
9597
],
9698
borderColor: 'rgba(75, 192, 192, 1)',
9799
borderWidth: 1,
@@ -114,7 +116,7 @@ const createCharts = async () => {
114116
},
115117
});
116118
117-
const ctx2 = document.getElementById('chart2').getContext('2d');
119+
const ctx2 = (document.getElementById('chart2') as HTMLCanvasElement).getContext('2d');
118120
new ChartJS(ctx2, {
119121
type: 'doughnut',
120122
data: {
@@ -124,11 +126,11 @@ const createCharts = async () => {
124126
label: 'Nombre de participants',
125127
data: articleData.map((article) => article.participants),
126128
backgroundColor: [
127-
'rgba(75, 192, 192, 0.6)',
128-
'rgba(192, 75, 75, 0.6)',
129-
'rgba(75, 192, 75, 0.6)',
130-
'rgba(255, 159, 64, 0.6)',
131-
'rgba(54, 162, 235, 0.6)',
129+
'rgba(75, 192, 192, 1)',
130+
'rgba(192, 75, 75, 1)',
131+
'rgba(75, 192, 75, 1)',
132+
'rgba(255, 159, 64, 1)',
133+
'rgba(54, 162, 235, 1)',
132134
],
133135
borderColor: 'rgba(75, 192, 192, 1)',
134136
borderWidth: 1,
@@ -159,9 +161,7 @@ const createCharts = async () => {
159161
return `${firstName} ${lastName} (${count} articles créés)`;
160162
});
161163
162-
console.log(formattedCreators);
163-
164-
const ctx3 = document.getElementById('chart3').getContext('2d');
164+
const ctx3 = (document.getElementById('chart3') as HTMLCanvasElement).getContext('2d');
165165
new ChartJS(ctx3, {
166166
type: 'doughnut',
167167
data: {
@@ -173,16 +173,16 @@ const createCharts = async () => {
173173
return parseInt(creator.substring(countIndex, creator.length - 14));
174174
}), // Count
175175
backgroundColor: [
176-
'rgba(75, 192, 192, 0.6)',
177-
'rgba(192, 75, 75, 0.6)',
178-
'rgba(75, 192, 75, 0.6)',
179-
'rgba(255, 159, 64, 0.6)',
180-
'rgba(54, 162, 235, 0.6)',
181-
'rgba(255, 99, 132, 0.6)',
182-
'rgba(153, 102, 255, 0.6)',
183-
'rgba(255, 206, 86, 0.6)',
184-
'rgba(75, 192, 192, 0.6)',
185-
'rgba(192, 75, 75, 0.6)',
176+
'rgba(75, 192, 192, 1)',
177+
'rgba(192, 75, 75, 1)',
178+
'rgba(75, 192, 75, 1)',
179+
'rgba(255, 159, 64, 1)',
180+
'rgba(54, 162, 235, 1)',
181+
'rgba(255, 99, 132, 1)',
182+
'rgba(153, 102, 255, 1)',
183+
'rgba(255, 206, 86, 1)',
184+
'rgba(75, 192, 192, 1)',
185+
'rgba(192, 75, 75, 1)',
186186
],
187187
borderColor: 'rgba(75, 192, 192, 1)',
188188
borderWidth: 1,
@@ -213,9 +213,7 @@ const createCharts = async () => {
213213
return `${firstName} ${lastName} ${count}`;
214214
});
215215
216-
console.log(formattedParticipants);
217-
218-
const ctx4 = document.getElementById('chart4').getContext('2d');
216+
const ctx4 = (document.getElementById('chart4') as HTMLCanvasElement).getContext('2d');
219217
new ChartJS(ctx4, {
220218
type: 'doughnut',
221219
data: {
@@ -224,16 +222,16 @@ const createCharts = async () => {
224222
{
225223
data: formattedParticipants.map((participant) => participant.split(' ')[2]), // Count
226224
backgroundColor: [
227-
'rgba(75, 192, 192, 0.6)',
228-
'rgba(192, 75, 75, 0.6)',
229-
'rgba(75, 192, 75, 0.6)',
230-
'rgba(255, 159, 64, 0.6)',
231-
'rgba(54, 162, 235, 0.6)',
232-
'rgba(255, 99, 132, 0.6)',
233-
'rgba(153, 102, 255, 0.6)',
234-
'rgba(255, 206, 86, 0.6)',
235-
'rgba(75, 192, 192, 0.6)',
236-
'rgba(192, 75, 75, 0.6)',
225+
'rgba(75, 192, 192, 1)',
226+
'rgba(192, 75, 75, 1)',
227+
'rgba(75, 192, 75, 1)',
228+
'rgba(255, 159, 64, 1)',
229+
'rgba(54, 162, 235, 1)',
230+
'rgba(255, 99, 132, 1)',
231+
'rgba(153, 102, 255, 1)',
232+
'rgba(255, 206, 86, 1)',
233+
'rgba(75, 192, 192, 1)',
234+
'rgba(192, 75, 75, 1)',
237235
],
238236
borderColor: 'rgba(75, 192, 192, 1)',
239237
borderWidth: 1,

‎front-end/src/views/BlogStatsView.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
</template>
44

55
<script lang="ts" setup>
6-
import Stats from '@/components/blog/Stats.vue';
6+
import Stats from '@/components/blog/StatsArticles.vue';
77
</script>

0 commit comments

Comments
 (0)