frontPanel/src/pages/Analytics/Answers/index.tsx

69 lines
1.7 KiB
TypeScript
Raw Normal View History

2024-03-25 15:02:24 +00:00
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";
2024-03-29 06:10:33 +00:00
export const AnswersStatistics = (props) => {
2024-03-25 15:02:24 +00:00
const theme = useTheme();
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1150));
const isMobile = useMediaQuery(theme.breakpoints.down(850));
console.log(props);
2024-03-29 06:10:33 +00:00
2024-03-25 15:02:24 +00:00
return (
<Box sx={{ marginTop: "120px" }}>
<Typography
component="h3"
sx={{
fontSize: "24px",
fontWeight: "bold",
color: theme.palette.text.primary,
}}
>
Статистика по ответам
</Typography>
2024-03-29 06:10:33 +00:00
{/* <ButtonBase
2024-03-25 15:02:24 +00:00
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>
2024-03-29 06:10:33 +00:00
</ButtonBase> */}
2024-03-25 15:02:24 +00:00
<Box
sx={{
display: isSmallMonitor && !isMobile ? "flex" : "block",
gap: "40px",
}}
>
<Answers data={props.data?.Questions || {}} />
<Funnel data={props.data?.Funnel || {}} />
2024-03-25 15:02:24 +00:00
</Box>
<Results data={props.data?.Results || {}} />
2024-03-25 15:02:24 +00:00
</Box>
);
};