PlayerStatsDrawer.tsx

src/components/PlayerGameStatsDrawer.tsx

@@ -0,0 +1,38 @@
+import type IPlayer from "../api/types/IPlayer.ts";
+import type IGame from "../api/types/IGame.ts";
+import {DialogContent, DialogTitle, Drawer, ModalClose} from "@mui/joy";
+import {type Dispatch, useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "../api/fetchApi.tsx";
+import {GetTimelineGame} from "../api/endpoints/TimeTrack.tsx";
+import type ITrackedTime from "../api/types/ITrackedTime.ts";
+import {LineChart} from "@mui/x-charts";
+import PlayerCard from "./PlayerCard.tsx";
+import GameCard from "./GameCard.tsx";
+
+export default function PlayerGameStatsDrawer({player, game, open, setOpen} : {player: IPlayer | null, game: IGame | null, open: boolean, setOpen: Dispatch<boolean>}) {
+
+    const apiUri = useContext(ApiUriContext);
+
+    const [trackedTime, setTrackedTime] = useState<ITrackedTime[]>();
+
+    useEffect(() => {
+        if(!open || !game || !player)
+            return;
+        GetTimelineGame(apiUri, player.steamId, game.appId).then(setTrackedTime);
+    }, [open]);
+
+    return (
+        <Drawer anchor={"bottom"} size={"lg"} open={open} onClose={() => setOpen(false)}>
+            <ModalClose />
+            <DialogTitle>
+                <GameCard game={game} />
+                <PlayerCard player={player} />
+            </DialogTitle>
+            <DialogContent>
+                <LineChart xAxis={[{data : trackedTime?.map(t => new Date(t.timeStamp))??[], scaleType: "utc", label: "Date"}]}
+                           series={[{data: trackedTime?.map(t => Number(t.timePlayed))??[], label: "Minutes Played"}]}
+                           sx={{height: "80%"}}/>
+            </DialogContent>
+        </Drawer>
+    );
+}