39 lines
1.7 KiB
TypeScript
39 lines
1.7 KiB
TypeScript
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"}]}
|
|
yAxis={[{label: "Minutes Played", scaleType: "linear", min: 0}]}
|
|
series={[{data: trackedTime?.map(t => Number(t.timePlayed))??[], label: game?.name}]}
|
|
sx={{height: "80%"}}/>
|
|
</DialogContent>
|
|
</Drawer>
|
|
);
|
|
} |