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> );