From ee22eda43b10818bb3590c616f77ba24effa4895 Mon Sep 17 00:00:00 2001
From: zebibg <zgebres@gmail.com>
Date: Fri, 1 Jul 2022 13:41:45 -0700
Subject: [PATCH] Hide overlapping x-axis values

---
 src/components/HomePage/DashBoard/Graph1.js         | 13 ++++++-------
 src/components/HomePage/DashBoard/Graph2.js         | 12 +++++-------
 .../HomePage/DashBoard/SettingsPopOver.js           |  6 ++++--
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/HomePage/DashBoard/Graph1.js b/src/components/HomePage/DashBoard/Graph1.js
index 160b26a..c2c5cfb 100644
--- a/src/components/HomePage/DashBoard/Graph1.js
+++ b/src/components/HomePage/DashBoard/Graph1.js
@@ -377,7 +377,8 @@ if ( graph==='totalTime'&&selection==='difficulty') {
           axisLabel: {
             formatter: (function(value){
                 return moment(value).format('MM/DD');
-            })
+            }),
+            hideOverlap: true
           }
         }
       ,
@@ -392,16 +393,14 @@ if ( graph==='totalTime'&&selection==='difficulty') {
 return (
   <Stack sx={{ alignItems: "start" }} direction="row" onMouseLeave={()=>{setSettingsVisible(false)}} onMouseEnter={()=>{setSettingsVisible(true)}}>
     {!settingsView?
-      <Box sx={{ '&:hover':{boxShadow:3},   width:'270px', ml:4, mr:4, mt:1,mb:2}}   onMouseEnter={()=>{setSettingsVisible(true)}}>
-        <ReactEcharts sx={{ '&:hover':{boxShadow:3},   width:'270px', height:'200px', ml:4, mr:4, mt:1,mb:2}} option={option} />
+      <Box sx={{ '&:hover':{boxShadow:3},   width:'270px', height:'300px', ml:4, mr:4, mt:1,mb:2}}   onMouseEnter={()=>{setSettingsVisible(true)}}>
+        <ReactEcharts sx={{ '&:hover':{boxShadow:3},   width:'270px', height:'300px', ml:4, mr:4, mt:1,mb:2}} option={option} />
       </Box>
       :
       <MenuBar graph={graph} setGraph={setGraph} subject= {subject} handleSubject={handleSubject} selection={selection} setSelection={setSelection} time={time} range={range} language={language} handleRange={handleRange} handleLanguage={handleLanguage} handleTime={handleTime} handleGraph={handleGraph} handleSelection={handleSelection}/>
     }
-    {settingsVisible?
-      <Settings setSettingsView={setSettingsView} settingsView={settingsView} ></Settings>:
-      null
-    }
+    <Settings setSettingsView={setSettingsView} settingsView={settingsView} settingsVisible={settingsVisible} ></Settings>
+
   </Stack>
 )
 }
diff --git a/src/components/HomePage/DashBoard/Graph2.js b/src/components/HomePage/DashBoard/Graph2.js
index 990e90f..c3bbc43 100644
--- a/src/components/HomePage/DashBoard/Graph2.js
+++ b/src/components/HomePage/DashBoard/Graph2.js
@@ -337,7 +337,8 @@ if ( graph==='totalTime'&&selection==='difficulty') {
       axisLabel: {
         formatter: (function(value){
             return moment(value).format('MM/DD');
-        })
+        }),
+        hideOverlap: true
       }
     },
     yAxis: {
@@ -348,16 +349,13 @@ if ( graph==='totalTime'&&selection==='difficulty') {
   return (
       <Stack   sx={{ alignItems: "start" }} direction="row" onMouseLeave={()=>{setSettingsVisible(false)}} onMouseEnter={()=>{setSettingsVisible(true)}}>
     {!settingsView?
-      <Box sx={{ '&:hover':{boxShadow:3},  width:'270px', height:'200px', ml:4, mr:4, mt:1,mb:2}}  onMouseEnter={()=>{setSettingsVisible(true)}}>
-        <ReactEcharts sx={{ '&:hover':{boxShadow:3},   width:'270px', height:'200px', ml:4, mr:4, mt:1,mb:2}} option={option} />
+      <Box sx={{ '&:hover':{boxShadow:3},  width:'270px', height:'300px', ml:4, mr:4, mt:1,mb:2}}  onMouseEnter={()=>{setSettingsVisible(true)}}>
+        <ReactEcharts sx={{ '&:hover':{boxShadow:3},   width:'270px', height:'300px', ml:4, mr:4, mt:1,mb:2}} option={option} />
       </Box>
       :
       <MenuBar  pagraph={graph} setGraph={setGraph} subject= {subject} handleSubject={handleSubject} selection={selection} setSelection={setSelection} time={time} range={range} language={language} handleRange={handleRange} handleLanguage={handleLanguage} handleTime={handleTime} handleGraph={handleGraph} handleSelection={handleSelection}/>
     }
-    {settingsVisible?
-      <Settings setSettingsView={setSettingsView} settingsView={settingsView} ></Settings>:
-      null
-    }
+    <Settings setSettingsView={setSettingsView} settingsView={settingsView} settingsVisible={settingsVisible} ></Settings>
   </Stack>
   )
 };
\ No newline at end of file
diff --git a/src/components/HomePage/DashBoard/SettingsPopOver.js b/src/components/HomePage/DashBoard/SettingsPopOver.js
index 505efd8..f79378f 100644
--- a/src/components/HomePage/DashBoard/SettingsPopOver.js
+++ b/src/components/HomePage/DashBoard/SettingsPopOver.js
@@ -3,11 +3,13 @@ import Stack from '@mui/material/Stack';
 import IconButton from '@mui/material/IconButton';
 import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications';
 
-export default function IconButtonSizes({setSettingsView, settingsView}) {
+export default function IconButtonSizes({setSettingsView, settingsView, settingsVisible}) {
+
   return (
     <Stack direction="row" alignItems="center" spacing={1}>
       <IconButton aria-label="delete" size="small" onClick={()=>{console.log(settingsView); setSettingsView(!settingsView)}}>
-        <SettingsApplicationsIcon fontSize="small" />
+        
+      {settingsVisible? <SettingsApplicationsIcon  opacity={'1'} fontSize="small" />:<SettingsApplicationsIcon  opacity={'0'} fontSize="small" />}
       </IconButton>
     </Stack>
   );