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>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|