feat: add tooltip to AveragesPerSession graph

thraizz · Aug 9, 2024 · 4845925 · 4845925
1 parent a360da2
commit 4845925
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) => ({