From b36619f8cd914a6dff40160c9ff23eb4406314ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aron=20Sch=C3=BCler?= <aron.schueler@ambient.digital>
Date: Thu, 8 Aug 2024 22:52:29 +0200
Subject: [PATCH] feat: adjust graphs on mobile display

---
 .../panels/AveragesPerSessionGraph.tsx        | 33 ++++++++++++++-----
 src/components/panels/ShotDispersion.tsx      | 16 ++++++++-
 src/components/panels/ShotScatterPlot.tsx     | 16 ++++++++-
 3 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/src/components/panels/AveragesPerSessionGraph.tsx b/src/components/panels/AveragesPerSessionGraph.tsx
index 9bf513d..7727520 100644
--- a/src/components/panels/AveragesPerSessionGraph.tsx
+++ b/src/components/panels/AveragesPerSessionGraph.tsx
@@ -8,14 +8,14 @@ import {
 export type YFieldValue = string | number | null | undefined;
 export type ClubDataForTable =
   | {
-      x: string | null | undefined;
-      y: YFieldValue;
-    }[]
+    x: string | null | undefined;
+    y: YFieldValue;
+  }[]
   | {
-      x: string | null | undefined;
-      y: YFieldValue;
-      club: string;
-    }[];
+    x: string | null | undefined;
+    y: YFieldValue;
+    club: string;
+  }[];
 
 export const AveragesPerSessionGraph = ({
   yField,
@@ -61,9 +61,26 @@ export const AveragesPerSessionGraph = ({
       title: "Club",
     };
   }
+
+  const specForMobile: VisualizationSpec = {
+    ...spec,
+    // Don't show action buttons on mobile
+    config: {
+      view: { stroke: "transparent" },
+      legend: {
+        orient: "bottom",
+      },
+    },
+  };
+
   return (
     <div className="block h-[400px] w-full">
-      <VegaLite spec={spec} data={{ table: data }} />
+      <div className="hidden lg:block">
+        <VegaLite spec={spec} data={{ table: data }} />
+      </div>
+      <div className="h-[400px] w-full lg:hidden">
+        <VegaLite spec={specForMobile} data={{ table: data }} />
+      </div>
     </div>
   );
 };
diff --git a/src/components/panels/ShotDispersion.tsx b/src/components/panels/ShotDispersion.tsx
index 187a2e3..cc5b3fc 100644
--- a/src/components/panels/ShotDispersion.tsx
+++ b/src/components/panels/ShotDispersion.tsx
@@ -41,13 +41,27 @@ export const ShotDispersion = () => {
     },
   };
 
+  const specForMobile: VisualizationSpec = {
+    ...spec,
+    // Don't show action buttons on mobile
+    config: {
+      view: { stroke: "transparent" },
+      legend: {
+        orient: "bottom",
+      },
+    },
+  };
+
   return (
     <div className="flex h-auto flex-col gap-3 rounded-xl bg-white p-4">
       <SettingsForm />
       <h4 className="mb-4 text-xl font-bold text-gray-800">Shot Dispersion</h4>
-      <div className="block h-[400px] w-full">
+      <div className="hidden h-[400px] w-full lg:block">
         <Vega spec={spec} data={{ table: shots }} />
       </div>
+      <div className="h-[400px] w-full lg:hidden">
+        <Vega spec={specForMobile} data={{ table: shots }} />
+      </div>
     </div>
   );
 };
diff --git a/src/components/panels/ShotScatterPlot.tsx b/src/components/panels/ShotScatterPlot.tsx
index 4b05395..7cf364a 100644
--- a/src/components/panels/ShotScatterPlot.tsx
+++ b/src/components/panels/ShotScatterPlot.tsx
@@ -80,6 +80,17 @@ export const ShotScatterPlot = () => {
     },
   };
 
+  const specForMobile: VisualizationSpec = {
+    ...spec,
+    // Don't show action buttons on mobile
+    config: {
+      view: { stroke: "transparent" },
+      legend: {
+        orient: "bottom",
+      },
+    },
+  };
+
   const clubs: {
     [key: string]: GolfSwingData[];
   } = useMemo(() => {
@@ -170,9 +181,12 @@ export const ShotScatterPlot = () => {
           </div>
         </div>
       </div>
-      <div className="block h-[400px] w-full">
+      <div className="hidden h-[400px] w-full lg:block">
         <Vega spec={spec} data={data} />
       </div>
+      <div className="h-[400px] w-full lg:hidden">
+        <Vega spec={specForMobile} data={data} />
+      </div>
     </div>
   );
 };