151 lines
6.1 KiB
TypeScript
151 lines
6.1 KiB
TypeScript
import * as React from "react";
|
||
import HeaderFull from "@ui_kit/Header/HeaderFull";
|
||
import SectionWrapper from "@ui_kit/SectionWrapper";
|
||
import {Box, Button, IconButton, Paper, Typography, useMediaQuery, useTheme} from "@mui/material";
|
||
import {DatePicker} from "@mui/x-date-pickers";
|
||
import moment from 'moment';
|
||
import CalendarIcon from "@icons/CalendarIcon";
|
||
import {LineChart} from "@mui/x-charts";
|
||
|
||
export default function Analytics () {
|
||
const theme = useTheme();
|
||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||
|
||
const [isOpen, setOpen] = React.useState(false)
|
||
const handleClose = () => {
|
||
setOpen(false)
|
||
}
|
||
const handleOpen = () => {
|
||
setOpen(true)
|
||
|
||
}
|
||
const onAdornmentClick = () => {
|
||
setOpen(old => !old)
|
||
if (isOpenEnd === true) {
|
||
handleCloseEnd()
|
||
}
|
||
}
|
||
|
||
const [isOpenEnd, setOpenEnd] = React.useState(false)
|
||
const handleCloseEnd = () => {
|
||
setOpenEnd(false)
|
||
}
|
||
const handleOpenEnd = () => {
|
||
setOpenEnd(true)
|
||
}
|
||
const onAdornmentClickEnd = () => {
|
||
setOpenEnd(old => !old)
|
||
if (isOpen === true) {
|
||
handleClose()
|
||
}
|
||
}
|
||
|
||
const now = moment()
|
||
return(
|
||
<>
|
||
<HeaderFull isRequest={true}/>
|
||
<SectionWrapper component={"section"} sx={{paddingTop: "60px"}}>
|
||
<Typography variant={"h4"}>Аналитика</Typography>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
gap: isMobile ? "15px" : "20px",
|
||
alignItems: "end",
|
||
justifyContent: "space-between",
|
||
padding: "40px 0 20px",
|
||
borderBottom: `1px solid ${theme.palette.grey2.main}`,
|
||
}}>
|
||
<Box sx={{display: "flex", gap: isMobile ? "15px" : "20px" }}>
|
||
<Box>
|
||
<Typography sx={{fontSize: "16px", marginBottom: "5px", fontWeight: 500, color: "4D4D4D" }}>
|
||
Дата начала
|
||
</Typography>
|
||
<DatePicker
|
||
open={isOpen}
|
||
onClose={handleClose}
|
||
onOpen={handleOpen}
|
||
// defaultValue={now}
|
||
sx={{
|
||
width: isMobile ? "146px" : "169px",
|
||
|
||
'& .MuiOutlinedInput-root': {
|
||
borderRadius: "10px",
|
||
fontSize: "16px"
|
||
},
|
||
'& .MuiInputBase-input': {
|
||
padding: "12.5px 14px"
|
||
}
|
||
}}
|
||
slotProps={{
|
||
textField:
|
||
{ InputProps: { endAdornment: <IconButton onClick={onAdornmentClick}>
|
||
<CalendarIcon/>
|
||
</IconButton> } }
|
||
}}
|
||
/>
|
||
</Box>
|
||
<Box>
|
||
<Typography sx={{fontSize: "16px", marginBottom: "5px", fontWeight: 500, color: "4D4D4D"}}>Дата окончания</Typography>
|
||
<DatePicker
|
||
open={isOpenEnd}
|
||
onClose={handleCloseEnd}
|
||
onOpen={handleOpenEnd}
|
||
// defaultValue={now}
|
||
sx={{
|
||
width: isMobile ? "146px" : "169px",
|
||
'& .MuiOutlinedInput-root': {
|
||
borderRadius: "10px",
|
||
fontSize: "16px"
|
||
},
|
||
'& .MuiInputBase-input': {
|
||
padding: "12.5px 14px"
|
||
}
|
||
}}
|
||
slotProps={{
|
||
textField:
|
||
{ InputProps: { endAdornment: <IconButton onClick={onAdornmentClickEnd}>
|
||
<CalendarIcon/>
|
||
</IconButton> } }
|
||
}}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Button
|
||
variant="outlined"
|
||
sx={{
|
||
minWidth: isMobile ? "144px" : "180px",
|
||
px: isMobile ? "31px" : "43px",
|
||
color: theme.palette.brightPurple.main,
|
||
"&:hover": {
|
||
backgroundColor: "#581CA7",
|
||
color: "#FFFFFF"
|
||
},
|
||
"&:active": {
|
||
backgroundColor: "#000000",
|
||
color: "#FFFFFF"
|
||
},
|
||
}}
|
||
>Сбросить</Button>
|
||
</Box>
|
||
<Box>
|
||
<Paper>
|
||
<Typography>Открыли quiz</Typography>
|
||
<LineChart
|
||
xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
|
||
series={[
|
||
{
|
||
data: [2, 5.5, 2, 8.5, 1.5, 5],
|
||
},
|
||
]}
|
||
width={500}
|
||
height={300}
|
||
/>
|
||
</Paper>
|
||
|
||
</Box>
|
||
</SectionWrapper>
|
||
</>
|
||
)
|
||
} |