Squashed commit of the following:

commit d9209a78cff1c05be3e6a87e27cd1a5a4d5f91c5 Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Wed Jul 24 11:55:35 2024 +0200 style : UI analysis panel adjustment commit 3c2e19bdb9d97f3bb7e8ceaefd630aad64d755c4 Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Wed Jul 24 11:10:07 2024 +0200 feat : graph dot color match move classification commit 4a99ccb2fe19d3806ff320370ebc55af984d719a Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Wed Jul 24 11:09:35 2024 +0200 fix : load pgn with no moves commit 9eeb0e7f2869e544700b7da963b74f707fa6ea2f Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Wed Jul 24 00:09:03 2024 +0200 feat : add current move reference line in graph commit febb9962a0b366aeac1dc266e0470b75bd619e68 Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Tue Jul 23 23:08:17 2024 +0200 fix : handle tab change on new game commit a105239a728dc05211a0ae99d8fd56f179108a0e Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Tue Jul 23 03:46:49 2024 +0200 style : small chart UI tweaks commit 4878ebf87b4ddbac75db70619fe452a3a317ca09 Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Tue Jul 23 03:38:40 2024 +0200 feat : add eval graph commit 29c5a001da03ee288d2a2c133426b1d2ca435930 Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Tue Jul 23 00:30:25 2024 +0200 refacto : analysis directory commit a8b966cc07152bb117b8c68f54af3498ca2a5d2f Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Tue Jul 23 00:07:07 2024 +0200 style : add settings floating button commit 7edc54f09ce7d4b4c4beb310a9c7f985363ff5ee Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Sun Jul 21 22:29:48 2024 +0200 feat : tab analysis panel
2024-07-24 11:58:42 +02:00
parent 9d5b088ae9
commit 2baf9b76ad
35 changed files with 754 additions and 156 deletions
--- a/src/sections/analysis/panelBody/graphTab/index.tsx
+++ b/src/sections/analysis/panelBody/graphTab/index.tsx
@@ -0,0 +1,135 @@
+import { Box, Grid, GridProps } from "@mui/material";
+import { useAtomValue } from "jotai";
+import {
+  Area,
+  AreaChart,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { currentPositionAtom, gameEvalAtom } from "../../states";
+import { useMemo } from "react";
+import CustomTooltip from "./tooltip";
+import { ChartItemData } from "./types";
+import { PositionEval } from "@/types/eval";
+import { moveClassificationColors } from "@/lib/chess";
+import CustomDot from "./dot";
+
+export default function GraphTab(props: GridProps) {
+  const gameEval = useAtomValue(gameEvalAtom);
+  const currentPosition = useAtomValue(currentPositionAtom);
+
+  const chartData: ChartItemData[] = useMemo(
+    () => gameEval?.positions.map(formatEvalToChartData) ?? [],
+    [gameEval]
+  );
+
+  const boardMoveColor = currentPosition.eval?.moveClassification
+    ? moveClassificationColors[currentPosition.eval.moveClassification]
+    : "grey";
+
+  if (!gameEval) return null;
+
+  return (
+    <Grid
+      container
+      item
+      justifyContent="center"
+      alignItems="start"
+      height="100%"
+      {...props}
+      sx={
+        props.hidden
+          ? { display: "none" }
+          : { marginY: 1, overflow: "hidden", overflowY: "auto", ...props.sx }
+      }
+    >
+      <Box
+        width="max(35rem, 90%)"
+        maxWidth="100%"
+        height="max(8rem, 100%)"
+        maxHeight="15rem"
+        sx={{
+          backgroundColor: "#2e2e2e",
+          borderRadius: "15px",
+          overflow: "hidden",
+        }}
+      >
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart
+            width={500}
+            height={400}
+            data={chartData}
+            margin={{ top: 0, left: 0, right: 0, bottom: 0 }}
+          >
+            <XAxis dataKey="moveNb" hide stroke="red" />
+            <YAxis domain={[0, 20]} hide />
+            <Tooltip
+              content={<CustomTooltip />}
+              isAnimationActive={false}
+              cursor={{
+                stroke: "grey",
+                strokeWidth: 2,
+                strokeOpacity: 0.3,
+              }}
+            />
+            <Area
+              type="monotone"
+              dataKey="value"
+              stroke="none"
+              fill="#ffffff"
+              fillOpacity={1}
+              activeDot={<CustomDot />}
+              isAnimationActive={false}
+            />
+            <ReferenceLine
+              y={10}
+              stroke="grey"
+              strokeWidth={2}
+              strokeOpacity={0.4}
+            />
+            <ReferenceLine
+              x={currentPosition.currentMoveIdx}
+              stroke={boardMoveColor}
+              strokeWidth={4}
+              strokeOpacity={0.6}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </Box>
+    </Grid>
+  );
+}
+
+const formatEvalToChartData = (
+  position: PositionEval,
+  index: number
+): ChartItemData => {
+  const line = position.lines[0];
+
+  const chartItem: ChartItemData = {
+    moveNb: index,
+    value: 10,
+    cp: line.cp,
+    mate: line.mate,
+    moveClassification: position.moveClassification,
+  };
+
+  if (line.mate) {
+    return {
+      ...chartItem,
+      value: line.mate > 0 ? 20 : 0,
+    };
+  }
+
+  if (line.cp) {
+    return {
+      ...chartItem,
+      value: Math.max(Math.min(line.cp / 100, 10), -10) + 10,
+    };
+  }
+
+  return chartItem;
+};