feat: adjust colorscheme of scatterplot to display timegroups

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

Hide file tree

Showing 3 changed files with 42 additions and 36 deletions.
diff --git a/src/components/panels/AveragesPerSession.tsx b/src/components/panels/AveragesPerSession.tsx
@@ -5,15 +5,12 @@ import { useClubDataByDate } from "../../hooks/useClubDataByData";
 import { useClubsPerSession } from "../../hooks/useClubsPerSesssion";
 import { SessionContext } from "../../provider/SessionContext";
 import { GolfSwingData } from "../../types/GolfSwingData";
-import type {
-  AveragedSwing,
-  AveragedSwingRecord as AveragesBySession,
-} from "../../utils/calculateAverages";
 import { useAveragePerSession } from "../../utils/calculateAverages";
 import { BaseLabel } from "../base/BaseLabel";
 import { BaseListbox } from "../base/BaseListbox";
-import type { ClubDataForTable, YFieldValue } from "./AveragesPerSessionGraph";
+import type { ClubDataForTable } from "./AveragesPerSessionGraph";
 import { AveragesPerSessionGraph } from "./AveragesPerSessionGraph";
+import { parseDate, getPairsForYfield } from "../../utils";
 dayjs.extend(customParseFormat);
 
 export const AveragesPerSession = () => {
@@ -88,31 +85,3 @@ export const AveragesPerSession = () => {
     </div>
   );
 };
-
-// Get pairs of average / session date
-const getPairsForYfield: (
-  averages: AveragesBySession[],
-  yField: keyof AveragedSwing,
-) => { x: string; y: YFieldValue }[] = (sessions, yField) => {
-  return sessions
-    .map((session) =>
-      session.averages.map((x) => ({
-        x: parseDate(session.date),
-        y: x[yField],
-        club: x.name,
-      })),
-    )
-    .flat();
-};
-
-// Parse date to ISO8601 format using dayjs
-// might be english or german format
-const parseDate = (input: string) => {
-  if (input.includes("/")) {
-    return dayjs(input, "MM/DD/YY").format("YYYY-MM-DD");
-  } else if (input.includes(".")) {
-    return dayjs(input, "DD.MM.YY", "de").format("YYYY-MM-DD");
-  } else {
-    return input;
-  }
-};
diff --git a/src/components/panels/ShotScatterPlot.tsx b/src/components/panels/ShotScatterPlot.tsx
@@ -10,6 +10,7 @@ import { Sessions } from "../../types/Sessions";
 import { getAllDataFromSession } from "../../utils/getAllDataFromSession";
 import { BaseLabel } from "../base/BaseLabel";
 import { BaseListbox } from "../base/BaseListbox";
+import { parseDate } from "../../utils";
 
 export const ShotScatterPlot = () => {
   const { sessions } = useContext(SessionContext);
@@ -65,10 +66,14 @@ export const ShotScatterPlot = () => {
       },
       color: {
         field: "date",
+        type: "temporal",
+        scale: {
+          type: "time",
+          range: ["lightblue", "darkblue"],
+        },
         legend: {
           title: "Date",
         },
-        type: "nominal",
       },
       // Tooltip
       tooltip: [
@@ -129,7 +134,7 @@ export const ShotScatterPlot = () => {
           table: clubs[club].map((row) => ({
             x: row[xField as keyof GolfSwingData],
             y: row[yField as keyof GolfSwingData],
-            date: (row["Date"] || row["Datum"])?.split(" ")[0],
+            date: parseDate((row["Date"] || row["Datum"])?.split(" ")[0] ?? ""),
           })),
         };
       }
@@ -138,13 +143,15 @@ export const ShotScatterPlot = () => {
         table: swings.map((row) => ({
           x: row[xField as keyof GolfSwingData],
           y: row[yField as keyof GolfSwingData],
-          date: (row["Date"] || row["Datum"])?.split(" ")[0],
+          date: parseDate((row["Date"] || row["Datum"])?.split(" ")[0] ?? ""),
         })),
       };
     }
     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 { GolfSwingData } from "./types/GolfSwingData";
 import { Session } from "./types/Sessions";
+import { AveragedSwing, AveragedSwingRecord } from "./utils/calculateAverages";
 
 export const sortGolfSwingKeysForHeader = (a: string, b: string) => {
   // We want to prioritize Carry Distance, Total Distance, Club Name, Ball Spped, and Date
@@ -121,3 +124,30 @@ export const reduceSessionToDefinedValues: (session: Session) => Session = (
 
   return { ...session, results: reducedResults };
 };
+// Get pairs of average / session date
+export const getPairsForYfield: (
+  averages: AveragedSwingRecord[],
+  yField: keyof AveragedSwing,
+) => { x: string; y: YFieldValue }[] = (sessions, yField) => {
+  return sessions
+    .map((session) =>
+      session.averages.map((x) => ({
+        x: parseDate(session.date),
+        y: x[yField],
+        club: x.name,
+      })),
+    )
+    .flat();
+};
+
+// Parse date to ISO8601 format using dayjs
+// might be english or german format
+export const parseDate = (input: string) => {
+  if (input.includes("/")) {
+    return dayjs(input, "MM/DD/YY").format("YYYY-MM-DD");
+  } else if (input.includes(".")) {
+    return dayjs(input, "DD.MM.YY", "de").format("YYYY-MM-DD");
+  } else {
+    return input;
+  }
+};