91 lines
2.3 KiB
JavaScript
91 lines
2.3 KiB
JavaScript
import { Box, Sheet } from '@mui/joy'
|
|
import { useMediaQuery } from '@mui/material'
|
|
import { useEffect, useState } from 'react'
|
|
import { ChoresGrouper } from '../../utils/Chores'
|
|
import CalendarView from '../components/CalendarView'
|
|
|
|
const Sidepanel = ({ chores }) => {
|
|
const isLargeScreen = useMediaQuery(theme => theme.breakpoints.up('md'))
|
|
const [dueDatePieChartData, setDueDatePieChartData] = useState([])
|
|
|
|
useEffect(() => {
|
|
setDueDatePieChartData(generateChoreDuePieChartData(chores))
|
|
}, [])
|
|
|
|
const generateChoreDuePieChartData = chores => {
|
|
const groups = ChoresGrouper('due_date', chores)
|
|
return groups
|
|
.map(group => {
|
|
return {
|
|
label: group.name,
|
|
value: group.content.length,
|
|
color: group.color,
|
|
id: group.name,
|
|
}
|
|
})
|
|
.filter(item => item.value > 0)
|
|
}
|
|
|
|
if (!isLargeScreen) {
|
|
return null
|
|
}
|
|
return (
|
|
<Sheet
|
|
variant='outlined'
|
|
sx={{
|
|
p: 2,
|
|
// borderRadius: 'sm',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
mr: 10,
|
|
justifyContent: 'space-between',
|
|
boxShadow: 'sm',
|
|
borderRadius: 20,
|
|
|
|
// minimum height to fit the content:
|
|
height: '80vh',
|
|
width: '290px',
|
|
}}
|
|
>
|
|
{/* <Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<PieChart width={200} height={200}>
|
|
<Pie
|
|
data={dueDatePieChartData}
|
|
dataKey='value'
|
|
nameKey='label'
|
|
innerRadius={30}
|
|
paddingAngle={5}
|
|
cornerRadius={5}
|
|
>
|
|
{dueDatePieChartData.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
))}
|
|
</Pie>
|
|
|
|
<Legend
|
|
layout='horizontal'
|
|
align='center'
|
|
iconType='circle'
|
|
iconSize={8}
|
|
fontSize={12}
|
|
formatter={(label, value) => `${label}: ${value.payload.value}`}
|
|
wrapperStyle={{ paddingTop: 0, marginTop: 0 }} // Adjust padding and margin
|
|
/>
|
|
<Tooltip />
|
|
</PieChart>
|
|
</Box> */}
|
|
<Box sx={{ width: '100%' }}>
|
|
<CalendarView chores={chores} />
|
|
</Box>
|
|
</Sheet>
|
|
)
|
|
}
|
|
|
|
export default Sidepanel
|