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

Création de la pages graphiques et des liens pour y acceder

Browse Source
This commit is contained in:
burgu
2023-05-22 17:03:06 +02:00
parent fcb305285b
commit 9dfe0cedff
5 changed files with 169 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Navbar.tsx
+2
View File
@@ -24,6 +24,8 @@ export default function Navbar({ variant = "fixed" }: Props) {
<Link href={"/dashboard"}>Tableau de bord</Link> <Link href={"/dashboard"}>Tableau de bord</Link>
<Link href={"/profile"}>Profil</Link> <Link href={"/profile"}>Profil</Link>
<Link href={"/map"}>Carte</Link> <Link href={"/map"}>Carte</Link>
<Link href={"/graphique"}>Statistiques</Link>
</> </>
); );
src/components/layout/dashboard/left_panel/LeftPanel.tsx
+8
View File
@@ -11,6 +11,7 @@ import { useRouter } from "next/router";
import { AiFillMessage } from "react-icons/ai"; import { AiFillMessage } from "react-icons/ai";
import { BsFillPersonFill } from "react-icons/bs"; import { BsFillPersonFill } from "react-icons/bs";
import { BsGraphUp } from "react-icons/bs";
import { BiLogOut } from "react-icons/bi"; import { BiLogOut } from "react-icons/bi";
import { FaMapMarkedAlt } from "react-icons/fa"; import { FaMapMarkedAlt } from "react-icons/fa";
@@ -71,6 +72,13 @@ export default function LeftPanel(props) {
onClickHandler={() => router.push("/profile")}> onClickHandler={() => router.push("/profile")}>
Profil Profil
</LeftPanelButton> </LeftPanelButton>
<LeftPanelButton
leftIcon={<BsGraphUp />}
onClickHandler={() => router.push("/graphique")}>
Statistiques
</LeftPanelButton>
<LeftPanelButton <LeftPanelButton
variant={"outline"} variant={"outline"}
leftIcon={<BiLogOut />} leftIcon={<BiLogOut />}
src/pages/graphique.tsx
+154 -16
View File
@@ -5,32 +5,170 @@ 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,
Flex,
Grid,
GridItem,
Item,
Stat,
Text,
StatLabel,
StatNumber,
StatHelpText,
StatArrow,
StatGroup,
} from "@chakra-ui/react";
import LeftPanelButton from "@/components/layout/dashboard/left_panel/LeftPanelButton";
import { AiFillMessage } from "react-icons/ai";
import { BsFillPersonFill } from "react-icons/bs";
import { AiFillHome } from "react-icons/ai";
import { BiLogOut } from "react-icons/bi";
import { FaMapMarkedAlt } from "react-icons/fa";
import { useRouter } from "next/router";
import { websiteName } from "@/lib/constants"; import { websiteName } from "@/lib/constants";
import { useRef, useEffect } from "react"; import { useRef, useEffect } from "react";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import { useQuery } from "@tanstack/react-query";
import type { Session } from "@/models/auth/Session"; import type { Session } from "@/models/auth/Session";
import { Role } from "@prisma/client"; import { Role } from "@prisma/client";
export default function Graphique() { export default function Graphique() {
const { data: session, status } = useSession({ required: true }); const { data: session, status } = useSession({ required: true });
const { user } = session as unknown as Session; const router = useRouter();
const {
isLoading,
isError,
data: userData,
error,
} = useQuery({
queryKey: ["user"],
enabled: status === "authenticated",
queryFn: async () => {
const { user } = session as unknown as Session;
return fetch(`/api/users/${user.id}`)
.then((res) => res.json())
.catch((err) => {
return err;
});
},
});
return ( return (
<> <>
<Head> <Grid templateColumns={'repeat(5, 1fr)'}
<title>{websiteName}</title> templateRows={'repeat(2, 1fr)'}
</Head> gap={5}
{user.role === Role.ADMIN ? ( minH={'100vh'}>
<Box> <GridItem area={'1 / 1 / 3 / 2'}
<PieChart /> width={"20vw"}
<BarChart /> height={"100%"}
<LineChart /> borderRadius={0}
</Box> padding={"0px"}
) : ( bg={"#faf9ff"}>
// pour récupérer les notifs d'un user
//fetch(`/api/users/${user.id}?include=Notification`) <Flex direction={"column"} height={"100%"} margin={"10%"} >
<></> <Flex
)} gap={2}
direction={"column"}
mt={"1vh"}
spacing={3.5}
alignContent={"bottom"}>
<LeftPanelButton
leftIcon={<AiFillHome />}
onClickHandler={() => router.push("/dashboard")}>
Accueil
</LeftPanelButton>
<LeftPanelButton
leftIcon={<FaMapMarkedAlt />}
onClickHandler={() => router.push("/map")}>
Carte
</LeftPanelButton>
<LeftPanelButton
leftIcon={<BsFillPersonFill />}
onClickHandler={() => router.push("/profile")}>
Profil
</LeftPanelButton>
<LeftPanelButton
variant={"outline"}
leftIcon={<BiLogOut />}
onClickHandler={() => signOut({ callbackUrl: "/" })}>
Déconnexion
</LeftPanelButton>
</Flex>
</Flex>
</GridItem>
<GridItem area={'1 / 2 / 3 / 5'}>
<Box py={5}
margin={"20px"}
align={"center"}>
<Box py={5}>
<Text align={"center"} color={"#805AD5"} fontSize={"1.5rem"}>
Bénéfices
</Text>
</Box>
<Stat>
<StatLabel>Recette dus aux abonnements </StatLabel>
<StatNumber>0.00€</StatNumber>
<StatHelpText>Mai 2022 - Mai 2023</StatHelpText>
</Stat>
<Box py={10}>
<Text align={"center"} color={"#805AD5"} fontSize={"1.5rem"}>
Infos des échanges
</Text>
</Box>
<StatGroup>
<Stat>
<StatLabel>Messages envoyés</StatLabel>
<StatNumber>345,670</StatNumber>
<StatHelpText>
<StatArrow type='increase' />
23.36%
</StatHelpText>
</Stat>
<Stat>
<StatLabel> Matchs </StatLabel>
<StatNumber>45</StatNumber>
<StatHelpText>
<StatArrow type='decrease' />
9.05%
</StatHelpText>
</Stat>
</StatGroup>
<Box>
<Text align={"center"} color={"#805AD5"} fontSize={"2rem"} >
Date de création des comptes depuis l'ouverture.
</Text>
<BarChart />
</Box>
</Box>
</GridItem>
<GridItem area={'1 / 5 / 3 / 6'}
bg={"#805AD5"}
borderRadius={20}>
<Box py={5}>
<Text align={"center"} color={"#FAF9FF"} fontSize={"2rem"}>
Proportion du genre des utilisateurs.
</Text>
<Box py={20}
bg={"#FAF9FF"}
borderRadius={20}
margin={"5px"}>
<PieChart />
</Box>
</Box>
</GridItem>
</Grid>
</> </>
); );
} }
src/pages/map.tsx
+2 -1
View File
@@ -37,7 +37,7 @@ export default function Map() {
enabled: status === "authenticated", enabled: status === "authenticated",
queryFn: async () => { queryFn: async () => {
const { user } = session as unknown as Session; const { user } = session as unknown as Session;
console.log(loggedUser.location.length);
return fetch(`/api/users/${user.id}`) return fetch(`/api/users/${user.id}`)
.then((res) => { .then((res) => {
return res.json(); return res.json();
@@ -56,6 +56,7 @@ export default function Map() {
} = useQuery({ } = useQuery({
queryKey: ["listBars"], queryKey: ["listBars"],
refetchOnWindowFocus: false, refetchOnWindowFocus: false,
enabled: Boolean(loggedUser) && loggedUser.location.length > 0, enabled: Boolean(loggedUser) && loggedUser.location.length > 0,
queryFn: async () => { queryFn: async () => {
///Utiliser api de noratim ///Utiliser api de noratim
yarn.lock
+3 -3
View File
@@ -1073,10 +1073,10 @@
dependencies: dependencies:
glob "7.1.7" glob "7.1.7"
"@next/swc-darwin-arm64@13.2.3": "@next/swc-win32-x64-msvc@13.2.3":
version "13.2.3" version "13.2.3"
resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.2.3.tgz" resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.2.3.tgz"
integrity sha512-TXOubiFdLpMfMtaRu1K5d1I9ipKbW5iS2BNbu8zJhoqrhk3Kp7aRKTxqFfWrbliAHhWVE/3fQZUYZOWSXVQi1w== integrity sha512-aLG2MaFs4y7IwaMTosz2r4mVbqRyCnMoFqOcmfTi7/mAS+G4IMH0vJp4oLdbshqiVoiVuKrAfqtXj55/m7Qu1Q==
"@nodelib/fs.scandir@2.1.5": "@nodelib/fs.scandir@2.1.5":
version "2.1.5" version "2.1.5"