feat: adjust club averages to show deviation

.eslintrc.cjs

@@ -15,6 +15,7 @@ module.exports = {
       "warn",
       { allowConstantExport: true },
     ],
+    "@typescript-eslint/no-explicit-any": "off",
     "prettier/prettier": "error",
   },
 };

src/components/ClubStats.tsx

@@ -22,19 +22,14 @@ export const ClubStats = ({ average }: { average: AveragedSwing }) => {
             0
           ).toPrecision(3) + "m",
       },
-      //   {
-      //     name: "Deviation Distance",
-      //     stat:
-      //       (
-      //         average?.["Total Deviation Distance"] ||
-      //         average?.["Gesamtabweichungsdistanz"] ||
-      //         0
-      //       ).toPrecision(3) + "m",
-      //   },
       {
-        name: "Smash Factor",
-        stat: (average?.["Smash Factor"] || 0).toPrecision(2),
+        name: "Deviation Distance",
+        stat: getDeviationString(average),
       },
+      // {
+      //   name: "Smash Factor",
+      //   stat: (average?.["Smash Factor"] || 0).toPrecision(2),
+      // },
     ],
     [average],
   );
@@ -66,3 +61,12 @@ export const ClubStats = ({ average }: { average: AveragedSwing }) => {
     </div>
   );
 };
+
+const getDeviationString = (average: AveragedSwing) => {
+  const deviation =
+    average?.["Total Deviation Distance"] ||
+    average?.["Gesamtabweichungsdistanz"] ||
+    0;
+
+  return deviation > 0 ? `${deviation}m left` : `${Math.abs(deviation)}m right`;
+};

src/components/panels/Last30DaysAverages.tsx

@@ -2,7 +2,7 @@ import { useAveragedSwings } from "../../utils/calculateAverages";
 import { ClubStats } from "../ClubStats";
 import { IQRNote } from "../IQRNote";
 
-export const Last30DaysAverages = () => {
+export const AverageOverview = () => {
   const averages = useAveragedSwings();
 
   return (

src/provider/SettingsContext.tsx

@@ -1,8 +1,11 @@
 import { PropsWithChildren, createContext, useState } from "react";
 
+import { ClubAverageStat } from "./settings.utils";
+
 export type SettingsType = {
   useIQR: boolean;
   useAboveAverageShots: boolean;
+  clubAverageStats: ClubAverageStat[];
 };
 
 interface SettingsContextProps {
@@ -11,14 +14,19 @@ interface SettingsContextProps {
 }
 
 export const SettingsContext = createContext<SettingsContextProps>({
-  settings: { useIQR: false, useAboveAverageShots: false },
-  setSettings: () => {},
+  settings: {
+    useIQR: false,
+    useAboveAverageShots: false,
+    clubAverageStats: [] as any,
+  },
+  setSettings: () => { },
 });
 
 export const SettingsProvider = ({ children }: PropsWithChildren) => {
   const [settings, setSettings] = useState<SettingsType>({
     useIQR: false,
     useAboveAverageShots: false,
+    clubAverageStats: ["CARRY_DISTANCE"],
   });
 
   return (

src/provider/settings.utils.ts

@@ -0,0 +1,8 @@
+export const CLUB_AVERAGE_STATS = [
+  "CARRY_DISTANCE",
+  "TOTAL_DISTANCE",
+  "TOTAL_DEVIATION_DISTANCE",
+  "SMASH_FACTOR",
+];
+
+export type ClubAverageStat = (typeof CLUB_AVERAGE_STATS)[number];

src/views/Dashboard.tsx

@@ -1,6 +1,6 @@
 import { Link } from "react-router-dom";
 import { BasePageLayout } from "../components/base/BasePageLayout";
-import { Last30DaysAverages } from "../components/panels/Last30DaysAverages";
+import { AverageOverview } from "../components/panels/Last30DaysAverages";
 import { SettingsForm } from "../components/panels/SettingsForm";
 import { useSelectedSessions } from "../hooks/useSelectedSessions";
 import { dashboardRoutes } from "../routes";
@@ -10,7 +10,7 @@ export const Dashboard = () => (
     <SettingsForm />
     <NoSessionSelectedHint />
     <div className="rounded-md bg-white p-4">
-      <Last30DaysAverages />
+      <AverageOverview />
     </div>
     <div className="flex gap-4">
       <Link to={dashboardRoutes.visualization} className="btn">