lucasvbr/meeting-app
1
0
Fork 0
mirror of https://github.com/LucasVbr/meeting-app.git synced 2026-05-13 17:21:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Laurian-Dufrechou
2023-05-20 19:27:52 +02:00
parent 97be61a48d
commit ace8284c6a
8 changed files with 19055 additions and 4135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+15025
View File
File diff suppressed because it is too large Load Diff
package.json
+2 -2
View File
@@ -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
+21 -22
View File
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Line } from 'react-chartjs-2';
import React, { useEffect, useState } from "react";
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',
'Février',
'Mars',
'Avril',
'Mai',
'Juin',
'Juillet',
'Août',
'Septembre',
'Octobre',
'Novembre',
'Décembre',
"Janvier",
"Février",
"Mars",
"Avril",
"Mai",
"Juin",
"Juillet",
"Août",
"Septembre",
"Octobre",
"Novembre",
"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,
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
// fill: true,
// backgroundColor: "rgba(75, 192, 192, 0.6)",
// borderColor: "rgba(75, 192, 192, 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
+36 -24
View File
@@ -1,18 +1,34 @@
import React, { useEffect, useState } from 'react';
import { Bar } from 'react-chartjs-2';
import React, { useEffect, useState } from "react";
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',
'Février',
'Mars',
'Avril',
'Mai',
'Juin',
'Juillet',
'Août',
'Septembre',
'Octobre',
'Novembre',
'Décembre',
"Janvier",
"Février",
"Mars",
"Avril",
"Mai",
"Juin",
"Juillet",
"Août",
"Septembre",
"Octobre",
"Novembre",
"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)',
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: "rgba(75, 192, 192, 0.6)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
},
],
@@ -79,7 +95,3 @@ const BarChart = () => {
};
export default BarChart;
src/components/graph/LineChart.tsx
+97 -59
View File
@@ -1,70 +1,108 @@
import React, { useEffect, useState } from 'react';
import { Line } from 'react-chartjs-2';
import React, { useEffect, useState } from "react";
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
+10 -8
View File
@@ -1,18 +1,20 @@
import React, { useEffect, useState } from 'react';
import { Pie } from 'react-chartjs-2';
import React, { useEffect, useState } from "react";
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'],
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#C0C0C0'],
backgroundColor: ["#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
+18 -17
View File
@@ -1,25 +1,26 @@
import Head from 'next/head';
import Navbar from '@/components/Navbar';
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 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';
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>
<>
<Head>
<title>{websiteName}</title>
</Head>
<Box>
<PieChart/>
<BarChart/>
<LineChart />
</Box>
</>
<Box>
{/* <PieChart /> */}
{/* <BarChart /> */}
<LineChart />
</Box>
</>
);
}
yarn.lock
+3846 -4003
View File
File diff suppressed because it is too large Load Diff