From 9c19966ef93ece853fd57eab3b28bf0fa21a9c16 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Tue, 22 Mar 2022 21:05:28 -0500
Subject: [PATCH] Show fewer graph ticks on mobile so they don't overlap.
 padding

---
 web/components/analytics/charts.tsx | 10 ++++++++--
 web/pages/analytics.tsx             |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/components/analytics/charts.tsx b/web/components/analytics/charts.tsx
index 47e5b203..4bf8d52b 100644
--- a/web/components/analytics/charts.tsx
+++ b/web/components/analytics/charts.tsx
@@ -21,9 +21,11 @@ export function DailyCountChart(props: {
   }))
   const data = [{ id: 'Count', data: points, color: '#11b981' }]
 
+  const bottomAxisTicks = width && width < 600 ? 6 : undefined
+
   return (
     <div
-      className="w-full"
+      className="w-full overflow-hidden"
       style={{ height: !small && (!width || width >= 800) ? 400 : 250 }}
     >
       <ResponsiveLine
@@ -33,6 +35,7 @@ export function DailyCountChart(props: {
           type: 'time',
         }}
         axisBottom={{
+          tickValues: bottomAxisTicks,
           format: (date) => dayjs(date).format('MMM DD'),
         }}
         colors={{ datum: 'color' }}
@@ -66,9 +69,11 @@ export function DailyPercentChart(props: {
   }))
   const data = [{ id: 'Percent', data: points, color: '#11b981' }]
 
+  const bottomAxisTicks = width && width < 600 ? 6 : undefined
+
   return (
     <div
-      className="w-full"
+      className="w-full overflow-hidden"
       style={{ height: !small && (!width || width >= 800) ? 400 : 250 }}
     >
       <ResponsiveLine
@@ -81,6 +86,7 @@ export function DailyPercentChart(props: {
           format: (value) => `${value}%`,
         }}
         axisBottom={{
+          tickValues: bottomAxisTicks,
           format: (date) => dayjs(date).format('MMM DD'),
         }}
         colors={{ datum: 'color' }}
diff --git a/web/pages/analytics.tsx b/web/pages/analytics.tsx
index 3201cd37..f7aac21b 100644
--- a/web/pages/analytics.tsx
+++ b/web/pages/analytics.tsx
@@ -153,7 +153,7 @@ export function CustomAnalytics(props: {
     weekOnWeekRetention,
   } = props
   return (
-    <Col>
+    <Col className="px-2 sm:px-0">
       <Title text="Active users" />
       <p className="text-gray-500">
         An active user is a user who has traded in, commented on, or created a