Merge pull request #1602 from jirokobadev/hotfix/analytics-responsive…

…-issue
QuickSwap · Nov 11, 2024 · c177f32 · c177f32
2 parents 755a009 + 9bc32de
commit c177f32
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 31 deletions.
diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
@@ -141,34 +141,41 @@ 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>
-      </Box>
-      {yAxisValues && (
-        <Box className='yAxis'>
-          {yAxisValues.map((value, index) => (
-            <p key={index}>
-              {// this is to show small numbers less than 0.0001
+    <Box width={1}>
+      <Box
+        mt={2.5}
+        width={width}
+        className='areaChartContainer'
+        paddingBottom={2}
+      >
+        {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>
-          ))}
+                `${yAxisTicker === '$' ? yAxisTicker : ''}${
+                  value > 0.0001 ? formatCompact(value) : formatNumber(value)
+                }${yAxisTicker === '%' ? yAxisTicker : ''}`}
+              </p>
+            ))}
+          </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/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' paddingBottom={2}>
+      <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>
           ))}

diff --git a/src/components/styles/AreaChart.scss b/src/components/styles/AreaChart.scss
@@ -1,4 +1,12 @@
 @use 'styles/variables' as *;
+@use "styles/breakpoints" as *;
+
+.areaChartContainer {
+  display: flex;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  overflow-x: auto;
+}
 
 .chartContainer {
   flex: 1;
@@ -9,8 +17,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;