From 4845925c48aa1e981be332c5bf506e76c7494cc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aron=20Sch=C3=BCler?= <aron.schueler@ambient.digital>
Date: Fri, 9 Aug 2024 18:53:56 +0200
Subject: [PATCH] feat: add tooltip to AveragesPerSession graph

---
 src/components/panels/AveragesPerSession.tsx  |  5 ++++-
 .../panels/AveragesPerSessionGraph.tsx        | 20 +++++++++----------
 src/components/panels/ShotScatterPlot.tsx     |  2 --
 src/utils.ts                                  |  7 +++++--
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/panels/AveragesPerSession.tsx b/src/components/panels/AveragesPerSession.tsx
index d28dad5..d52c7c3 100644
--- a/src/components/panels/AveragesPerSession.tsx
+++ b/src/components/panels/AveragesPerSession.tsx
@@ -38,13 +38,16 @@ export const AveragesPerSession = () => {
         return Object.entries(clubDataByDate)?.map((x) => ({
           x: parseDate(x[0]),
           y: x[1],
+          club,
         }));
       } else {
         return getPairsForYfield(averages, yField);
       }
     }
     return [];
-  }, [sessions, clubSelected, clubDataByDate, averages, yField]);
+  }, [sessions, clubSelected, clubDataByDate, averages, yField, club]);
+
+  console.log(averagesByDate);
 
   return (
     <div className="flex h-auto w-full flex-col gap-3 rounded-xl bg-white p-4">
diff --git a/src/components/panels/AveragesPerSessionGraph.tsx b/src/components/panels/AveragesPerSessionGraph.tsx
index 59c13e9..17bbd57 100644
--- a/src/components/panels/AveragesPerSessionGraph.tsx
+++ b/src/components/panels/AveragesPerSessionGraph.tsx
@@ -6,16 +6,11 @@ import {
 } from "../../types/GolfSwingData";
 
 export type YFieldValue = string | number | null | undefined;
-export type ClubDataForTable =
-  | {
-      x: string | null | undefined;
-      y: YFieldValue;
-    }[]
-  | {
-      x: string | null | undefined;
-      y: YFieldValue;
-      club: string;
-    }[];
+export type ClubDataForTable = {
+  x: string | null | undefined;
+  y: YFieldValue;
+  club: string;
+}[];
 
 export const AveragesPerSessionGraph = ({
   yField,
@@ -52,6 +47,11 @@ export const AveragesPerSessionGraph = ({
         title: yField,
         type: "quantitative",
       },
+      tooltip: [
+        { field: "x", title: "Date", type: "temporal", format: "%b %d %Y" },
+        { field: "y", title: yField, format: ".2f" },
+        { field: "club", title: "Club" },
+      ],
     },
   };
   if (data.length && "club" in data[0]) {
diff --git a/src/components/panels/ShotScatterPlot.tsx b/src/components/panels/ShotScatterPlot.tsx
index 27cc1b2..332845b 100644
--- a/src/components/panels/ShotScatterPlot.tsx
+++ b/src/components/panels/ShotScatterPlot.tsx
@@ -150,8 +150,6 @@ export const ShotScatterPlot = () => {
     return { table: [] };
   }, [sessions, xField, yField, clubs, club]);
 
-  console.log(data);
-
   return (
     <div className="flex h-auto flex-col gap-3 rounded-xl bg-white p-4">
       <h4 className="mb-4 text-xl font-bold text-gray-800">
diff --git a/src/utils.ts b/src/utils.ts
index 6b0c39f..84dc374 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,5 +1,8 @@
 import dayjs from "dayjs";
-import { YFieldValue } from "./components/panels/AveragesPerSessionGraph";
+import {
+  ClubDataForTable,
+  YFieldValue,
+} from "./components/panels/AveragesPerSessionGraph";
 import { GolfSwingData } from "./types/GolfSwingData";
 import { Session } from "./types/Sessions";
 import { AveragedSwing, AveragedSwingRecord } from "./utils/calculateAverages";
@@ -128,7 +131,7 @@ export const reduceSessionToDefinedValues: (session: Session) => Session = (
 export const getPairsForYfield: (
   averages: AveragedSwingRecord[],
   yField: keyof AveragedSwing,
-) => { x: string; y: YFieldValue }[] = (sessions, yField) => {
+) => ClubDataForTable = (sessions, yField) => {
   return sessions
     .map((session) =>
       session.averages.map((x) => ({