feat: adjust graphs on mobile display

thraizz · Aug 8, 2024 · b36619f · b36619f
1 parent 95daa71
commit b36619f
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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>
   );
 };