feat: Add label logic to schema

thraizz · Dec 17, 2023 · 0337e57 · 0337e57
1 parent e5847ae
commit 0337e57
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 46 deletions.
diff --git a/src/AveragesScatterPlot.tsx b/src/AveragesScatterPlot.tsx
@@ -6,17 +6,10 @@ import { Label } from "./Label";
 import { StyledListbox } from "./Listbox";
 import { GolfSwingData, SessionContext } from "./SessionContext";
 import { getAllDataFromSession } from "./getAllDataFromSession";
-
-// create the spec for the scatter plot
-const spec: VisualizationSpec = {
-  $schema: "https://vega.github.io/schema/vega-lite/v5.json",
-  data: { name: "table" },
-  mark: "point",
-  encoding: {
-    x: { field: "x", type: "quantitative" },
-    y: { field: "y", type: "quantitative" },
-  },
-};
+import {
+  golfSwingDataKeysInDegrees,
+  golfSwingDataKeysInMeters,
+} from "./types/GolfSwingData";
 
 export const AveragesScatterPlot = () => {
   const { sessions } = useContext(SessionContext);
@@ -31,6 +24,42 @@ export const AveragesScatterPlot = () => {
     return [];
   }, [sessions]);
 
+  // create the spec for the scatter plot
+  const spec: VisualizationSpec = {
+    $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+    data: { name: "table" },
+    mark: "point",
+    encoding: {
+      x: {
+        axis: {
+          labelExpr: golfSwingDataKeysInMeters.includes(
+            xField as keyof GolfSwingData,
+          )
+            ? "datum.value + ' m'"
+            : golfSwingDataKeysInDegrees.includes(xField as keyof GolfSwingData)
+              ? "datum.value + ' °'"
+              : "datum.value",
+        },
+        field: "x",
+        title: xField,
+        type: "quantitative",
+      },
+      y: {
+        axis: {
+          labelExpr: golfSwingDataKeysInMeters.includes(
+            yField as keyof GolfSwingData,
+          )
+            ? "datum.value + ' m'"
+            : golfSwingDataKeysInDegrees.includes(yField as keyof GolfSwingData)
+              ? "datum.value + ' °'"
+              : "datum.value",
+        },
+        field: "y",
+        title: yField,
+        type: "quantitative",
+      },
+    },
+  };
   const averages: PlainObject = useMemo(() => {
     if (sessions) {
       return {

diff --git a/src/SessionContext.tsx b/src/SessionContext.tsx
@@ -4,40 +4,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-
-export type GolfSwingData = {
-  Schlagflächenstellung: null | number | undefined;
-  Luftdruck: number | null | undefined;
-  Schlagfläche: null | number;
-  Datum: string | null;
-  Temperatur: number | null;
-  Markierung: null | string;
-  Luftdichte: number | null;
-  Schwungbahn: null | number;
-  Drehrate: number | null;
-  "Smash Factor": number | null;
-  Drehratentyp: string | null;
-  Ballgeschwindigkeit: number | null;
-  Gesamtabweichungswinkel: number | null;
-  "Höhe des Scheitelpunkts": number | null;
-  Gesamtabweichungsdistanz: number | null;
-  Drehachse: number | null;
-  "Carry-Abweichungsdistanz": number | null;
-  Abflugrichtung: number | null;
-  Backspin: number | null;
-  Schlägername: null | string;
-  "Carry-Abweichungswinkel": number | null;
-  Sidespin: number | null;
-  Gesamtstrecke: number | null;
-  Spieler: string | null;
-  Abflugwinkel: number | null;
-  "Relative Luftfeuchtigkeit": number | null;
-  "Schl.gsch.": number | null;
-  Notiz: null | string;
-  Schlägerart: string | null;
-  Anstellwinkel: null | number;
-  "Carry-Distanz": number | null;
-};
+import { GolfSwingData } from "./types/GolfSwingData";
 
 export type Sessions = {
   [key: string]: {
@@ -73,4 +40,5 @@ const SessionProvider: React.FC<PropsWithChildren> = ({ children }) => {
   );
 };
 
-export { SessionContext, SessionProvider };
+export { GolfSwingData, SessionContext, SessionProvider };
+
diff --git a/src/types/GolfSwingData.ts b/src/types/GolfSwingData.ts
@@ -0,0 +1,48 @@
+export type GolfSwingData = {
+  Schlagflächenstellung: null | number | undefined;
+  Luftdruck: number | null | undefined;
+  Schlagfläche: null | number;
+  Datum: string | null;
+  Temperatur: number | null;
+  Markierung: null | string;
+  Luftdichte: number | null;
+  Schwungbahn: null | number;
+  Drehrate: number | null;
+  "Smash Factor": number | null;
+  Drehratentyp: string | null;
+  Ballgeschwindigkeit: number | null;
+  Gesamtabweichungswinkel: number | null;
+  "Höhe des Scheitelpunkts": number | null;
+  Gesamtabweichungsdistanz: number | null;
+  Drehachse: number | null;
+  "Carry-Abweichungsdistanz": number | null;
+  Abflugrichtung: number | null;
+  Backspin: number | null;
+  Schlägername: null | string;
+  "Carry-Abweichungswinkel": number | null;
+  Sidespin: number | null;
+  Gesamtstrecke: number | null;
+  Spieler: string | null;
+  Abflugwinkel: number | null;
+  "Relative Luftfeuchtigkeit": number | null;
+  "Schl.gsch.": number | null;
+  Notiz: null | string;
+  Schlägerart: string | null;
+  Anstellwinkel: null | number;
+  "Carry-Distanz": number | null;
+};
+
+export const golfSwingDataKeysInMeters: Array<keyof GolfSwingData> = [
+  "Carry-Distanz",
+  "Carry-Abweichungsdistanz",
+  "Gesamtstrecke",
+  "Gesamtabweichungsdistanz",
+  "Höhe des Scheitelpunkts",
+];
+
+export const golfSwingDataKeysInDegrees: Array<keyof GolfSwingData> = [
+  "Carry-Abweichungswinkel",
+  "Gesamtabweichungswinkel",
+  "Abflugrichtung",
+  "Abflugwinkel",
+];