fix(react-chartjs version ): Fixed react-chartjs version outdated

package.json

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

src/components/graph/AreaChart.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
-import { Line } from 'react-chartjs-2';
+import { Line } from "react-chartjs-2";
 
 const AreaChart = ({ userId }) => {
   const [likeData, setLikeData] = useState([]);
@@ -8,12 +8,11 @@ const AreaChart = ({ userId }) => {
     // 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);
+        console.error("Failed to fetch like data:", error);
       }
     };
 
@@ -36,18 +35,18 @@ const AreaChart = ({ userId }) => {
   // Obtenir les étiquettes des mois de l'année
   const getMonthLabels = () => {
     const monthLabels = [
-      'Janvier',
+      "Janvier",
-      'Février',
+      "Février",
-      'Mars',
+      "Mars",
-      'Avril',
+      "Avril",
-      'Mai',
+      "Mai",
-      'Juin',
+      "Juin",
-      'Juillet',
+      "Juillet",
-      'Août',
+      "Août",
-      'Septembre',
+      "Septembre",
-      'Octobre',
+      "Octobre",
-      'Novembre',
+      "Novembre",
-      'Décembre',
+      "Décembre",
     ];
 
     return monthLabels;
@@ -58,12 +57,12 @@ const AreaChart = ({ userId }) => {
     labels: getMonthLabels(),
     datasets: [
       {
-        label: 'Nombre de likes',
+        label: "Nombre de likes",
         data: countLikesByMonth(),
-        fill: true,
+        // fill: true,
-        backgroundColor: 'rgba(75, 192, 192, 0.6)',
+        // backgroundColor: "rgba(75, 192, 192, 0.6)",
-        borderColor: 'rgba(75, 192, 192, 1)',
+        // borderColor: "rgba(75, 192, 192, 1)",
-        borderWidth: 1,
+        // borderWidth: 1,
       },
     ],
   };
@@ -80,4 +79,4 @@ const AreaChart = ({ userId }) => {
   return <Line data={data} options={options} />;
 };
 
-export default AreaChart;
+export default AreaChart;

src/components/graph/BarChart.tsx

@@ -1,18 +1,34 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
-import { Bar } from 'react-chartjs-2';
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
 
 const BarChart = () => {
   const [userData, setUserData] = useState([]);
-
+  ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend
+  );
   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 response = await fetch("/api/users");
         const data = await response.json();
         setUserData(data);
       } catch (error) {
-        console.error('Failed to fetch user data:', error);
+        console.error("Failed to fetch user data:", error);
       }
     };
 
@@ -35,18 +51,18 @@ const BarChart = () => {
   // Obtenir les étiquettes des mois de l'année
   const getMonthLabels = () => {
     const monthLabels = [
-      'Janvier',
+      "Janvier",
-      'Février',
+      "Février",
-      'Mars',
+      "Mars",
-      'Avril',
+      "Avril",
-      'Mai',
+      "Mai",
-      'Juin',
+      "Juin",
-      'Juillet',
+      "Juillet",
-      'Août',
+      "Août",
-      'Septembre',
+      "Septembre",
-      'Octobre',
+      "Octobre",
-      'Novembre',
+      "Novembre",
-      'Décembre',
+      "Décembre",
     ];
 
     return monthLabels;
@@ -57,10 +73,10 @@ const BarChart = () => {
     labels: getMonthLabels(),
     datasets: [
       {
-        label: 'Nombre de créations',
+        label: "Nombre de créations",
         data: countCreationsByMonth(),
-        backgroundColor: 'rgba(75, 192, 192, 0.6)',
+        backgroundColor: "rgba(75, 192, 192, 0.6)",
-        borderColor: 'rgba(75, 192, 192, 1)',
+        borderColor: "rgba(75, 192, 192, 1)",
         borderWidth: 1,
       },
     ],
@@ -79,7 +95,3 @@ const BarChart = () => {
 };
 
 export default BarChart;
-
-
-
-

src/components/graph/LineChart.tsx

@@ -1,70 +1,108 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
-import { Line } from 'react-chartjs-2';
+import { Line } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { NotificationType } from "@prisma/client";
 
 const LineChart = () => {
   const [chartData, setChartData] = useState(null);
 
+  ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend
+  );
+
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: "top" as const,
+      },
+      title: {
+        display: true,
+        text: "Chart.js Line Chart",
+      },
+    },
+  };
+
+  const fetchData = async () => {
+    try {
+      const response = await fetch(
+        `/api/notification?where={"type" :"${NotificationType.NEW_MATCH}"}`
+      );
+      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);
+    }
+  };
+
   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} />;
+  if (!chartData) {
+    return null;
+  }
+  return <Line options={options} data={chartData} />;
 };
 
-export default LineChart;
+export default LineChart;

src/components/graph/PieChart.tsx

@@ -1,18 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
-import { Pie } from 'react-chartjs-2';
+import { Pie } from "react-chartjs-2";
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
 
 const PieChart = () => {
   const [userData, setUserData] = useState([]);
+  ChartJS.register(ArcElement, Tooltip, Legend);
 
   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 response = await fetch("/api/users");
         const data = await response.json();
         setUserData(data);
       } catch (error) {
-        console.error('Failed to fetch user data:', error);
+        console.error("Failed to fetch user data:", error);
       }
     };
 
@@ -39,12 +41,12 @@ const PieChart = () => {
 
   // Préparer les données pour le chart
   const data = {
-    labels: ['MALE', 'FEMALE', 'OTHER', 'UNKNOWN'],
+    labels: ["MALE", "FEMALE", "OTHER", "UNKNOWN"],
     datasets: [
       {
         data: countGenders(),
-        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#C0C0C0'],
+        backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#C0C0C0"],
-        hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#C0C0C0'],
+        hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#C0C0C0"],
       },
     ],
   };
@@ -52,4 +54,4 @@ const PieChart = () => {
   return <Pie data={data} />;
 };
 
-export default PieChart;
+export default PieChart;

src/pages/graphique.tsx

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