diff --git a/src/AveragesScatterPlot.tsx b/src/AveragesScatterPlot.tsx index 043b979..ee3594c 100644 --- 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 index 3df1867..4f148c3 100644 --- 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 = ({ children }) => { ); }; -export { SessionContext, SessionProvider }; +export { GolfSwingData, SessionContext, SessionProvider }; + diff --git a/src/types/GolfSwingData.ts b/src/types/GolfSwingData.ts new file mode 100644 index 0000000..4b79a47 --- /dev/null +++ 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 = [ + "Carry-Distanz", + "Carry-Abweichungsdistanz", + "Gesamtstrecke", + "Gesamtabweichungsdistanz", + "Höhe des Scheitelpunkts", +]; + +export const golfSwingDataKeysInDegrees: Array = [ + "Carry-Abweichungswinkel", + "Gesamtabweichungswinkel", + "Abflugrichtung", + "Abflugwinkel", +];