69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import {
|
||
Box,
|
||
ButtonBase,
|
||
Typography,
|
||
useMediaQuery,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
|
||
import { Answers } from "./Answers";
|
||
import { Funnel } from "./Funnel";
|
||
import { Results } from "./Results";
|
||
|
||
import { ReactComponent as OpenIcon } from "@icons/Analytics/open.svg";
|
||
|
||
export const AnswersStatistics = (props) => {
|
||
const theme = useTheme();
|
||
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1150));
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(850));
|
||
|
||
console.log(props);
|
||
|
||
return (
|
||
<Box sx={{ marginTop: "120px" }}>
|
||
<Typography
|
||
component="h3"
|
||
sx={{
|
||
fontSize: "24px",
|
||
fontWeight: "bold",
|
||
color: theme.palette.text.primary,
|
||
}}
|
||
>
|
||
Статистика по ответам
|
||
</Typography>
|
||
{/* <ButtonBase
|
||
sx={{
|
||
marginTop: "35px",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
gap: "5px",
|
||
padding: "10px",
|
||
width: "100%",
|
||
maxWidth: "160px",
|
||
background: "#FFFFFF",
|
||
border: "1px solid #9A9AAF",
|
||
borderRadius: "8px",
|
||
color: theme.palette.brightPurple.main,
|
||
boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
|
||
}}
|
||
>
|
||
<Typography>Фильтры</Typography>
|
||
<Box>
|
||
<OpenIcon />
|
||
</Box>
|
||
</ButtonBase> */}
|
||
<Box
|
||
sx={{
|
||
display: isSmallMonitor && !isMobile ? "flex" : "block",
|
||
gap: "40px",
|
||
}}
|
||
>
|
||
<Answers data={props.data?.Questions || {}} />
|
||
<Funnel data={props.data?.Funnel || {}} />
|
||
</Box>
|
||
<Results data={props.data?.Results || {}} />
|
||
</Box>
|
||
);
|
||
};
|