From 960bf03ac1d6cf01923c22be94d914d158fe23bc Mon Sep 17 00:00:00 2001
From: LAKHAN BAHETI <lakhanbaheti9@gmail.com>
Date: Tue, 30 Jan 2024 17:15:23 +0530
Subject: [PATCH] fix: x-axis labels overlapping in mobile view

---
 .../analytics/scope-and-demand/scope.tsx      |   2 +-
 .../scope-and-demand/year-wise-issues.tsx     | 112 +++++++++++-------
 2 files changed, 68 insertions(+), 46 deletions(-)

diff --git a/web/components/analytics/scope-and-demand/scope.tsx b/web/components/analytics/scope-and-demand/scope.tsx
index ea1a51937..c37543e45 100644
--- a/web/components/analytics/scope-and-demand/scope.tsx
+++ b/web/components/analytics/scope-and-demand/scope.tsx
@@ -65,7 +65,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
                   );
               },
             }}
-            margin={{ top: 20 }}
+            margin={{ top: 20, right: 20 }}
             theme={{
               axis: {},
             }}
diff --git a/web/components/analytics/scope-and-demand/year-wise-issues.tsx b/web/components/analytics/scope-and-demand/year-wise-issues.tsx
index 2a62c99d4..19505717f 100644
--- a/web/components/analytics/scope-and-demand/year-wise-issues.tsx
+++ b/web/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -6,54 +6,76 @@ import emptyGraph from "public/empty-state/empty_graph.svg";
 import { IDefaultAnalyticsResponse } from "@plane/types";
 // constants
 import { MONTHS_LIST } from "constants/calendar";
+import { useEffect, useState } from "react";
 
 type Props = {
   defaultAnalytics: IDefaultAnalyticsResponse;
 };
 
-export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="rounded-[10px] border border-custom-border-200 py-3">
-    <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
-    {defaultAnalytics.issue_completed_month_wise.length > 0 ? (
-      <LineGraph
-        data={[
-          {
-            id: "issues_closed",
-            color: "rgb(var(--color-primary-100))",
-            data: Object.entries(MONTHS_LIST).map(([index, month]) => ({
-              x: month.shortTitle,
-              y:
-                defaultAnalytics.issue_completed_month_wise.find((data) => data.month === parseInt(index, 10))?.count ||
-                0,
-            })),
-          },
-        ]}
-        customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map((data) => data.count)}
-        height="300px"
-        colors={(datum) => datum.color}
-        curve="monotoneX"
-        margin={{ top: 20 }}
-        enableSlices="x"
-        sliceTooltip={(datum) => (
-          <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
-            {datum.slice.points[0].data.yFormatted}
-            <span className="text-custom-text-200"> issues closed in </span>
-            {datum.slice.points[0].data.xFormatted}
-          </div>
-        )}
-        theme={{
-          background: "rgb(var(--color-background-100))",
-        }}
-        enableArea
-      />
-    ) : (
-      <div className="px-7 py-4">
-        <ProfileEmptyState
-          title="No Data yet"
-          description="Close issues to view analysis of the same in the form of a graph."
-          image={emptyGraph}
+export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) => {
+  // states
+  const [width, setWidth] = useState(window.innerWidth);
+  useEffect(() => {
+    // event listener to update the width
+    window.addEventListener("resize", () => {
+      if (width <= 768 && window.innerWidth > 768) {
+        setWidth(window.innerWidth);
+      } else if (width >= 768 && window.innerWidth < 768) {
+        setWidth(window.innerWidth);
+      }
+    });
+  }, []);
+
+  return (
+    <div className="rounded-[10px] border border-custom-border-200 py-3">
+      <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
+      {defaultAnalytics.issue_completed_month_wise.length > 0 ? (
+        <LineGraph
+          data={[
+            {
+              id: "issues_closed",
+              color: "rgb(var(--color-primary-100))",
+              data: Object.entries(MONTHS_LIST).map(([index, month]) => ({
+                x: month.shortTitle,
+                y:
+                  defaultAnalytics.issue_completed_month_wise.find((data) => data.month === parseInt(index, 10))
+                    ?.count || 0,
+              })),
+            },
+          ]}
+          axisBottom={{
+            // if width is less than 768px, rotate the x-axis labels
+            ...(width < 768 && {
+              tickRotation: -45,
+            }),
+          }}
+          customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map((data) => data.count)}
+          height="300px"
+          colors={(datum) => datum.color}
+          curve="monotoneX"
+          margin={{ top: 20, right: 20 }}
+          enableSlices="x"
+          sliceTooltip={(datum) => (
+            <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+              {datum.slice.points[0].data.yFormatted}
+              <span className="text-custom-text-200"> issues closed in </span>
+              {datum.slice.points[0].data.xFormatted}
+            </div>
+          )}
+          theme={{
+            background: "rgb(var(--color-background-100))",
+          }}
+          enableArea
         />
-      </div>
-    )}
-  </div>
-);
+      ) : (
+        <div className="px-7 py-4">
+          <ProfileEmptyState
+            title="No Data yet"
+            description="Close issues to view analysis of the same in the form of a graph."
+            image={emptyGraph}
+          />
+        </div>
+      )}
+    </div>
+  );
+};