From 655d3d9939d27828d1b6c4e09bd3a5251146a538 Mon Sep 17 00:00:00 2001
From: Jiro <jkobadev811@gmail.com>
Date: Mon, 4 Nov 2024 04:16:39 -0800
Subject: [PATCH 1/4] fix analytics chart responsive issue

---
 src/components/AreaChart/AreaChart.tsx | 54 +++++++++++++-------------
 src/components/styles/AreaChart.scss   | 14 +++++++
 2 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
index 6add2bfe2..a1fc50f82 100644
--- a/src/components/AreaChart/AreaChart.tsx
+++ b/src/components/AreaChart/AreaChart.tsx
@@ -141,34 +141,36 @@ const AreaChart: React.FC<AreaChartProps> = ({
   ];
 
   return (
-    <Box display='flex' mt={2.5} width={width}>
-      <Box className='chartContainer'>
-        <Chart
-          options={options}
-          series={series}
-          type='area'
-          width='100%'
-          height={height}
-        />
-        <Box className='categoryValues' mt={-5}>
-          {categories.map((val, ind) => (
-            <p key={ind}>{val}</p>
-          ))}
+    <Box width={1}>
+      <Box mt={2.5} width={width} className='areaChartContainer'>
+        <Box className='chartContainer'>
+          <Chart
+            options={options}
+            series={series}
+            type='area'
+            width='100%'
+            height={height}
+          />
+          <Box className='categoryValues' mt={-5} gridGap={8}>
+            {categories.map((val, ind) => (
+              <p key={ind}>{val}</p>
+            ))}
+          </Box>
         </Box>
-      </Box>
-      {yAxisValues && (
-        <Box className='yAxis'>
-          {yAxisValues.map((value, index) => (
-            <p key={index}>
-              {// this is to show small numbers less than 0.0001
+        {yAxisValues && (
+          <Box className='yAxis'>
+            {yAxisValues.map((value, index) => (
+              <p key={index}>
+                {// this is to show small numbers less than 0.0001
 
-              `${yAxisTicker === '$' ? yAxisTicker : ''}${
-                value > 0.0001 ? formatCompact(value) : formatNumber(value)
-              }${yAxisTicker === '%' ? yAxisTicker : ''}`}
-            </p>
-          ))}
-        </Box>
-      )}
+                `${yAxisTicker === '$' ? yAxisTicker : ''}${
+                  value > 0.0001 ? formatCompact(value) : formatNumber(value)
+                }${yAxisTicker === '%' ? yAxisTicker : ''}`}
+              </p>
+            ))}
+          </Box>
+        )}
+      </Box>
     </Box>
   );
 };
diff --git a/src/components/styles/AreaChart.scss b/src/components/styles/AreaChart.scss
index 8182c89ee..9c3087e3f 100644
--- a/src/components/styles/AreaChart.scss
+++ b/src/components/styles/AreaChart.scss
@@ -1,5 +1,19 @@
 @use 'styles/variables' as *;
+@use "styles/breakpoints" as *;
 
+.areaChartContainer {
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  @include media('screen', '<phone') {
+    flex-direction: row-reverse;
+  }
+
+  @include media('screen', '<tablet') {
+    flex-direction: row-reverse;
+  }
+}
 .chartContainer {
   flex: 1;
   margin-top: -20px;

From 3db095fc99b249ffd36ce5c9319bdb6c429dc954 Mon Sep 17 00:00:00 2001
From: Jiro <jkobadev811@gmail.com>
Date: Mon, 4 Nov 2024 23:16:15 -0800
Subject: [PATCH 2/4] Fixing analytics mobile issue

---
 src/components/AreaChart/AreaChart.tsx |  2 +-
 src/components/BarChart/BarChart.tsx   | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
index a1fc50f82..1f880b373 100644
--- a/src/components/AreaChart/AreaChart.tsx
+++ b/src/components/AreaChart/AreaChart.tsx
@@ -151,7 +151,7 @@ const AreaChart: React.FC<AreaChartProps> = ({
             width='100%'
             height={height}
           />
-          <Box className='categoryValues' mt={-5} gridGap={8}>
+          <Box className='categoryValues' mt={-5} gridGap={2}>
             {categories.map((val, ind) => (
               <p key={ind}>{val}</p>
             ))}
diff --git a/src/components/BarChart/BarChart.tsx b/src/components/BarChart/BarChart.tsx
index 73ced2eed..7e34f3c2b 100755
--- a/src/components/BarChart/BarChart.tsx
+++ b/src/components/BarChart/BarChart.tsx
@@ -20,9 +20,17 @@ const BarChart: React.FC<BarChartProps> = ({
   onMouseLeave,
 }) => {
   const maxValue = Math.max(...data);
+  const areaWidth =
+    categories && categories.length > 12
+      ? 23 * categories.length + 'px'
+      : '100%';
+  console.log('areaWidth', areaWidth);
   return (
-    <Box onMouseLeave={onMouseLeave}>
-      <Box className='flex items-end justify-between'>
+    <Box onMouseLeave={onMouseLeave} overflow='auto'>
+      <Box
+        className='flex items-end justify-between'
+        width={`calc(${areaWidth})`}
+      >
         {data.map((value, index) => (
           <Box
             key={index}
@@ -34,7 +42,7 @@ const BarChart: React.FC<BarChartProps> = ({
         ))}
       </Box>
       {categories && data.length > 0 && (
-        <Box className={`categoryValues`} mt={2}>
+        <Box className={`categoryValues`} mt={2} gridGap={2}>
           {categories.map((val, ind) => (
             <p key={ind}>{val}</p>
           ))}

From a17bdbde8d1a16d327d289c367a2a424a1cd1fdb Mon Sep 17 00:00:00 2001
From: Jiro <jkobadev811@gmail.com>
Date: Tue, 5 Nov 2024 04:36:00 -0800
Subject: [PATCH 3/4] update desktop view and adding gap in analytics

---
 src/components/AreaChart/AreaChart.tsx | 28 +++++++++++++-------------
 src/components/styles/AreaChart.scss   | 10 ++++-----
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
index 1f880b373..c0dd703c2 100644
--- a/src/components/AreaChart/AreaChart.tsx
+++ b/src/components/AreaChart/AreaChart.tsx
@@ -143,20 +143,6 @@ const AreaChart: React.FC<AreaChartProps> = ({
   return (
     <Box width={1}>
       <Box mt={2.5} width={width} className='areaChartContainer'>
-        <Box className='chartContainer'>
-          <Chart
-            options={options}
-            series={series}
-            type='area'
-            width='100%'
-            height={height}
-          />
-          <Box className='categoryValues' mt={-5} gridGap={2}>
-            {categories.map((val, ind) => (
-              <p key={ind}>{val}</p>
-            ))}
-          </Box>
-        </Box>
         {yAxisValues && (
           <Box className='yAxis'>
             {yAxisValues.map((value, index) => (
@@ -170,6 +156,20 @@ const AreaChart: React.FC<AreaChartProps> = ({
             ))}
           </Box>
         )}
+        <Box className='chartContainer'>
+          <Chart
+            options={options}
+            series={series}
+            type='area'
+            width='100%'
+            height={height}
+          />
+          <Box className='categoryValues' mt={-4} gridGap={2}>
+            {categories.map((val, ind) => (
+              <p key={ind}>{val}</p>
+            ))}
+          </Box>
+        </Box>
       </Box>
     </Box>
   );
diff --git a/src/components/styles/AreaChart.scss b/src/components/styles/AreaChart.scss
index 9c3087e3f..b67d7f3d3 100644
--- a/src/components/styles/AreaChart.scss
+++ b/src/components/styles/AreaChart.scss
@@ -3,15 +3,15 @@
 
 .areaChartContainer {
   display: flex;
-  overflow-x: auto;
   overflow-y: hidden;
+  overflow-x: hidden;
 
   @include media('screen', '<phone') {
-    flex-direction: row-reverse;
+    overflow-x: auto;
   }
 
   @include media('screen', '<tablet') {
-    flex-direction: row-reverse;
+    overflow-x: auto;
   }
 }
 .chartContainer {
@@ -23,8 +23,8 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  margin-left: 8px;
-  margin-bottom: 20px;
+  margin-right: 8px;
+  margin-bottom: 32px;
   & p {
     font-size: 10px;
     font-weight: 500;

From 9bc32dec6aef150dc3abf166bf6a42e2a830899f Mon Sep 17 00:00:00 2001
From: Jiro <jkobadev811@gmail.com>
Date: Tue, 5 Nov 2024 04:55:23 -0800
Subject: [PATCH 4/4] Fixing overflow issue on desktop

---
 src/components/AreaChart/AreaChart.tsx |  7 ++++++-
 src/components/BarChart/BarChart.tsx   |  2 +-
 src/components/styles/AreaChart.scss   | 10 ++--------
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
index c0dd703c2..c915449e1 100644
--- a/src/components/AreaChart/AreaChart.tsx
+++ b/src/components/AreaChart/AreaChart.tsx
@@ -142,7 +142,12 @@ const AreaChart: React.FC<AreaChartProps> = ({
 
   return (
     <Box width={1}>
-      <Box mt={2.5} width={width} className='areaChartContainer'>
+      <Box
+        mt={2.5}
+        width={width}
+        className='areaChartContainer'
+        paddingBottom={2}
+      >
         {yAxisValues && (
           <Box className='yAxis'>
             {yAxisValues.map((value, index) => (
diff --git a/src/components/BarChart/BarChart.tsx b/src/components/BarChart/BarChart.tsx
index 7e34f3c2b..40e8a27d6 100755
--- a/src/components/BarChart/BarChart.tsx
+++ b/src/components/BarChart/BarChart.tsx
@@ -26,7 +26,7 @@ const BarChart: React.FC<BarChartProps> = ({
       : '100%';
   console.log('areaWidth', areaWidth);
   return (
-    <Box onMouseLeave={onMouseLeave} overflow='auto'>
+    <Box onMouseLeave={onMouseLeave} overflow='auto' paddingBottom={2}>
       <Box
         className='flex items-end justify-between'
         width={`calc(${areaWidth})`}
diff --git a/src/components/styles/AreaChart.scss b/src/components/styles/AreaChart.scss
index b67d7f3d3..2c097de52 100644
--- a/src/components/styles/AreaChart.scss
+++ b/src/components/styles/AreaChart.scss
@@ -5,15 +5,9 @@
   display: flex;
   overflow-y: hidden;
   overflow-x: hidden;
-
-  @include media('screen', '<phone') {
-    overflow-x: auto;
-  }
-
-  @include media('screen', '<tablet') {
-    overflow-x: auto;
-  }
+  overflow-x: auto;
 }
+
 .chartContainer {
   flex: 1;
   margin-top: -20px;