Create Line Pie Bar Chart

package.json

@@ -21,6 +21,7 @@
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "bcrypt": "^5.1.0",
+    "chart.js": "^2.9.4",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",
     "form-data": "^4.0.0",
@@ -33,6 +34,7 @@
     "next": "13.2.3",
     "next-auth": "^4.20.1",
     "react": "18.2.0",
+    "react-chartjs-2": "^2.11.1",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.5",
     "react-icons": "^4.8.0",

prisma/schema.prisma

@@ -53,7 +53,7 @@ model User {
   UserDislikesID String[] @db.ObjectId
   UserDislikes   User[]   @relation("Dislikes", fields: [UserDislikesID], references: [id])
 
-  // Les personnes qui aiment l'utilisateur
+  // Les personnes qui aiment pas l'utilisateur
   OtherUserDislikesID String[] @db.ObjectId
   OtherUserDislikes   User[]   @relation("Dislikes", fields: [OtherUserDislikesID], references: [id])
 

src/components/graph/AreaChart.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+import { Line } from 'react-chartjs-2';
+
+const AreaChart = ({ userId }) => {
+  const [likeData, setLikeData] = useState([]);
+
+  useEffect(() => {
+    // Fonction pour récupérer les données des likes depuis le backend pour un utilisateur spécifique
+    const fetchLikeData = async () => {
+      try {
+
+        const response = await fetch(`/api/likes?userId=${userId}`);
+        const data = await response.json();
+        setLikeData(data);
+      } catch (error) {
+        console.error('Failed to fetch like data:', error);
+      }
+    };
+
+    fetchLikeData();
+  }, [userId]);
+
+  // Compter le nombre de likes par mois pour un utilisateur spécifique
+  const countLikesByMonth = () => {
+    const monthCounts = Array(12).fill(0);
+
+    likeData.forEach((like) => {
+      const likeDate = new Date(like.date);
+      const monthIndex = likeDate.getMonth();
+      monthCounts[monthIndex]++;
+    });
+
+    return monthCounts;
+  };
+
+  // Obtenir les étiquettes des mois de l'année
+  const getMonthLabels = () => {
+    const monthLabels = [
+      'Janvier',
+      'Février',
+      'Mars',
+      'Avril',
+      'Mai',
+      'Juin',
+      'Juillet',
+      'Août',
+      'Septembre',
+      'Octobre',
+      'Novembre',
+      'Décembre',
+    ];
+
+    return monthLabels;
+  };
+
+  // Préparer les données pour le graphique
+  const data = {
+    labels: getMonthLabels(),
+    datasets: [
+      {
+        label: 'Nombre de likes',
+        data: countLikesByMonth(),
+        fill: true,
+        backgroundColor: 'rgba(75, 192, 192, 0.6)',
+        borderColor: 'rgba(75, 192, 192, 1)',
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  const options = {
+    scales: {
+      y: {
+        beginAtZero: true,
+        stepSize: 1,
+      },
+    },
+  };
+
+  return <Line data={data} options={options} />;
+};
+
+export default AreaChart;

src/components/graph/BarChart.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import { Bar } from 'react-chartjs-2';
+
+const BarChart = () => {
+  const [userData, setUserData] = useState([]);
+
+  useEffect(() => {
+    // Fonction pour récupérer les données des utilisateurs depuis le backend
+    const fetchUserData = async () => {
+      try {
+        const response = await fetch('/api/users');
+        const data = await response.json();
+        setUserData(data);
+      } catch (error) {
+        console.error('Failed to fetch user data:', error);
+      }
+    };
+
+    fetchUserData();
+  }, []);
+
+  // Compter le nombre de créations par mois
+  const countCreationsByMonth = () => {
+    const monthCounts = Array(12).fill(0);
+
+    userData.forEach((user) => {
+      const creationDate = new Date(user.createdAt);
+      const monthIndex = creationDate.getMonth();
+      monthCounts[monthIndex]++;
+    });
+
+    return monthCounts;
+  };
+
+  // Obtenir les étiquettes des mois de l'année
+  const getMonthLabels = () => {
+    const monthLabels = [
+      'Janvier',
+      'Février',
+      'Mars',
+      'Avril',
+      'Mai',
+      'Juin',
+      'Juillet',
+      'Août',
+      'Septembre',
+      'Octobre',
+      'Novembre',
+      'Décembre',
+    ];
+
+    return monthLabels;
+  };
+
+  // Préparer les données pour le graphique
+  const data = {
+    labels: getMonthLabels(),
+    datasets: [
+      {
+        label: 'Nombre de créations',
+        data: countCreationsByMonth(),
+        backgroundColor: 'rgba(75, 192, 192, 0.6)',
+        borderColor: 'rgba(75, 192, 192, 1)',
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  const options = {
+    scales: {
+      y: {
+        beginAtZero: true,
+        stepSize: 1,
+      },
+    },
+  };
+
+  return <Bar data={data} options={options} />;
+};
+
+export default BarChart;
+
+
+
+

src/components/graph/LineChart.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { Line } from 'react-chartjs-2';
+
+const LineChart = () => {
+  const [chartData, setChartData] = useState(null);
+
+  useEffect(() => {
+    // Fonction pour récupérer les données depuis le backend
+    const fetchData = async () => {
+      try {
+
+        const response = await fetch('/api/data');
+        const data = await response.json();
+
+        // Traiter les données pour compter le nombre de likes et de matchs par date
+        const likesByDate = {};
+        const matchesByDate = {};
+
+        data.forEach((entry) => {
+          const date = entry.date;
+          const likes = entry.likes;
+          const matches = entry.matches;
+
+          if (likesByDate[date]) {
+            likesByDate[date] += likes;
+          } else {
+            likesByDate[date] = likes;
+          }
+
+          if (matchesByDate[date]) {
+            matchesByDate[date] += matches;
+          } else {
+            matchesByDate[date] = matches;
+          }
+        });
+
+        // Préparer les données pour le graphique
+        const chartData = {
+          labels: Object.keys(likesByDate),
+          datasets: [
+            {
+              label: 'Nombre total de likes',
+              data: Object.values(likesByDate),
+              fill: false,
+              borderColor: 'rgba(75, 192, 192, 1)',
+              tension: 0.1,
+            },
+            {
+              label: 'Nombre total de matchs',
+              data: Object.values(matchesByDate),
+              fill: false,
+              borderColor: 'rgba(192, 75, 192, 1)',
+              tension: 0.1,
+            },
+          ],
+        };
+
+        setChartData(chartData);
+      } catch (error) {
+        console.error('Failed to fetch data:', error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return <Line data={chartData} />;
+};
+
+export default LineChart;

src/components/graph/PieChart.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import { Pie } from 'react-chartjs-2';
+
+const PieChart = () => {
+  const [userData, setUserData] = useState([]);
+
+  useEffect(() => {
+    // Fonction pour récupérer les données des utilisateurs depuis le backend
+    const fetchUserData = async () => {
+      try {
+        const response = await fetch('/api/users');
+        const data = await response.json();
+        setUserData(data);
+      } catch (error) {
+        console.error('Failed to fetch user data:', error);
+      }
+    };
+
+    fetchUserData();
+  }, []);
+
+  // Compter le nombre de chaque genre
+  const countGenders = () => {
+    const genders = {
+      MALE: 0,
+      FEMALE: 0,
+      OTHER: 0,
+      UNKNOWN: 0,
+    };
+
+    userData.forEach((user) => {
+      if (user.gender in genders) {
+        genders[user.gender]++;
+      }
+    });
+
+    return Object.values(genders);
+  };
+
+  // Préparer les données pour le chart
+  const data = {
+    labels: ['MALE', 'FEMALE', 'OTHER', 'UNKNOWN'],
+    datasets: [
+      {
+        data: countGenders(),
+        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#C0C0C0'],
+        hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#C0C0C0'],
+      },
+    ],
+  };
+
+  return <Pie data={data} />;
+};
+
+export default PieChart;

src/pages/graphique.tsx

@@ -0,0 +1,25 @@
+import Head from 'next/head';
+import Navbar from '@/components/Navbar';
+
+import BarChart from '@/components/graph/BarChart'
+import PieChart from '@/components/graph/PieChart';
+import LineChart from '@/components/graph/LineChart';
+
+import {Box} from '@chakra-ui/react';
+import {websiteName} from '@/lib/constants';
+import { useRef, useEffect } from 'react';
+
+export default function Graphique() {
+
+  return (
+      <>
+        <Head><title>{websiteName}</title></Head>
+
+        <Box>
+            <PieChart/>
+            <BarChart/>
+            <LineChart />
+        </Box>
+      </>
+  );
+}