SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'analytics' into dev

Browse Source
This commit is contained in:
Nastya 2024-03-31 03:12:56 +03:00
commit 1b93727d61
17 changed files with 254 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/statistic.ts
View File

@ -25,13 +25,15 @@ export type QuestionsResponse = {
export const getDevices = async (
quizId: string,
to: number,
from: number,
): Promise<[DevicesResponse | null, string?]> => {
try {
const devicesResponse = await makeRequest<unknown, DevicesResponse>({
method: "POST",
url: `${apiUrl}/${quizId}/devices`,
useToken: false,
withCredentials: true,
body: { to, from },
});
return [devicesResponse];
@ -44,13 +46,15 @@ export const getDevices = async (
export const getGeneral = async (
quizId: string,
to: number,
from: number,
): Promise<[GeneralResponse | null, string?]> => {
try {
const generalResponse = await makeRequest<unknown, GeneralResponse>({
method: "POST",
url: `${apiUrl}/${quizId}/general`,
useToken: false,
withCredentials: true,
body: { to, from },
});
return [generalResponse];
@ -63,13 +67,15 @@ export const getGeneral = async (
export const getQuestions = async (
quizId: string,
to: number,
from: number,
): Promise<[QuestionsResponse | null, string?]> => {
try {
const questionsResponse = await makeRequest<unknown, QuestionsResponse>({
method: "POST",
url: `${apiUrl}/${quizId}/questions`,
useToken: false,
withCredentials: true,
body: { to, from },
});
return [questionsResponse];

40
src/assets/icons/ChartIcon.tsx
View File

@ -1,43 +1,35 @@
import { Box, useTheme } from "@mui/material";
export default function ChartIcon() {
const theme = useTheme();
import { Box, SxProps, Theme } from "@mui/material";
export default function ChartLineUp(sx: SxProps<Theme>) {
return (
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<Box sx={sx}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 19.5H3V4.5"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
stroke="#7E2AEA"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M19.5 6L12 13.5L9 10.5L3 16.5"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
stroke="#7E2AEA"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M19.5 9.75V6H15.75"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
stroke="#7E2AEA"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</Box>

36
src/pages/Analytics/Analytics.tsx
View File

@ -1,4 +1,4 @@
import { useState } from "react";
import { useLayoutEffect, useState } from "react";
import {
Box,
Button,
@ -11,6 +11,8 @@ import {
import { DatePicker } from "@mui/x-date-pickers";
import { LineChart } from "@mui/x-charts";
import moment from "moment";
import { useQuizStore } from "@root/quizes/store";
import { useAnalytics } from "@utils/hooks/useAnalytics";
import HeaderFull from "@ui_kit/Header/HeaderFull";
import SectionWrapper from "@ui_kit/SectionWrapper";
@ -20,11 +22,29 @@ import { AnswersStatistics } from "./Answers";
import { Devices } from "./Devices";
import CalendarIcon from "@icons/CalendarIcon";
import { redirect } from "react-router-dom";
export default function Analytics() {
const { editQuizId } = useQuizStore();
const [isOpen, setOpen] = useState(false);
const [isOpenEnd, setOpenEnd] = useState(false);
const [to, setTo] = useState(null);
const [from, setFrom] = useState(null);
const { devices, general, questions } = useAnalytics({
quizId: editQuizId?.toString(),
to,
from,
});
const resetTime = () => {
setTo(null);
setFrom(null);
};
useLayoutEffect(() => {
if (editQuizId === undefined) redirect("/list");
}, [editQuizId]);
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(600));
@ -54,6 +74,9 @@ export default function Analytics() {
handleClose();
}
};
console.log("questions", questions);
console.log("general", general);
console.log("devices", devices);
const now = moment();
return (
@ -110,6 +133,8 @@ export default function Analytics() {
},
},
}}
value={to}
onChange={(newValue) => setTo(newValue)}
/>
</Box>
<Box>
@ -121,6 +146,8 @@ export default function Analytics() {
color: "4D4D4D",
}}
>
value={from}
onChange={(newValue) => setValue(setFrom)}
Дата окончания
</Typography>
<DatePicker
@ -154,6 +181,7 @@ export default function Analytics() {
</Box>
<Button
onClick={resetTime}
variant="outlined"
sx={{
minWidth: isMobile ? "144px" : "180px",
@ -172,9 +200,9 @@ export default function Analytics() {
Сбросить
</Button>
</Box>
<General />
<AnswersStatistics />
<Devices />
<General data={general} />
<AnswersStatistics data={questions} />
<Devices data={devices} />
</SectionWrapper>
</>
);

12
src/pages/Analytics/Answers/Answers.tsx
View File

@ -186,10 +186,16 @@ const Pagination = () => {
);
};
export const Answers = () => {
const [answers, setAnswers] = useState<Record<string, number>>(ANSWERS_MOCK);
export const Answers = (props) => {
const theme = useTheme();
console.log(props.data);
if (Object.keys(props.data).length === 0)
return (
<Typography textAlign="center" m="10px 0">
нет данных об ответах
</Typography>
);
return (
<Box sx={{ flexGrow: 1 }}>
<Paper
@ -244,7 +250,7 @@ export const Answers = () => {
<NextIcon />
</ButtonBase>
</Box>
{Object.entries(answers).map(([title, percent], index) => (
{Object.entries(props.data).map(([title, percent], index) => (
<Answer
key={title}
title={title}

25
src/pages/Analytics/Answers/Funnel.tsx
View File

@ -16,9 +16,9 @@ type FunnelItemProps = {
const FUNNEL_MOCK: Record<string, number> = {
"Стартовая страница": 100,
"Воронка квиза": 69,
Заявки: 56,
Результаты: 56,
"Воронка квиза": 0,
Заявки: 0,
Результаты: 0,
};
const FunnelItem = ({ title, percent }: FunnelItemProps) => {
@ -100,12 +100,11 @@ const FunnelItem = ({ title, percent }: FunnelItemProps) => {
);
};
export const Funnel = () => {
const [funnel, setFunnel] = useState<Record<string, number>>(FUNNEL_MOCK);
export const Funnel = (props) => {
const theme = useTheme();
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1150));
const isMobile = useMediaQuery(theme.breakpoints.down(850));
console.log(props);
useEffect(() => {
// const requestFunnel = async () => {
// const [funnelResponse, funnelError] = await getGeneral("14761");
@ -122,6 +121,12 @@ export const Funnel = () => {
// requestFunnel();
}, []);
if (Object.keys(props.data).length === 0)
return (
<Typography textAlign="center" m="10px 0">
нет данных о разделах
</Typography>
);
return (
<Paper
sx={{
@ -132,8 +137,12 @@ export const Funnel = () => {
maxWidth: isSmallMonitor && !isMobile ? "366px" : "none",
}}
>
{Object.entries(funnel).map(([title, percent]) => (
<FunnelItem key={title} title={title} percent={percent} />
{Object.entries(FUNNEL_MOCK).map(([title, percent], index) => (
<FunnelItem
key={title}
title={title}
percent={index > 0 ? props.data[index - 1] : percent}
/>
))}
</Paper>
);

11
src/pages/Analytics/Answers/Results.tsx
View File

@ -69,10 +69,15 @@ const Result = ({ title, percent, highlight }: ResultProps) => {
);
};
export const Results = () => {
const [results, setResults] = useState<Record<string, number>>(RESULTS_MOCK);
export const Results = (props) => {
const theme = useTheme();
if (Object.keys(props.data).length === 0)
return (
<Typography margin="20px 0 0 0" textAlign="center" m="10px 0">
нет данных о результатах
</Typography>
);
return (
<Box>
<Typography
@ -93,7 +98,7 @@ export const Results = () => {
marginTop: "30px",
}}
>
{Object.entries(results).map(([title, percent], index) => (
{Object.entries(props.data).map(([title, percent], index) => (
<Result
key={title}
title={title}

14
src/pages/Analytics/Answers/index.tsx
View File

@ -12,11 +12,13 @@ import { Results } from "./Results";
import { ReactComponent as OpenIcon } from "@icons/Analytics/open.svg";
export const AnswersStatistics = () => {
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
@ -29,7 +31,7 @@ export const AnswersStatistics = () => {
>
Статистика по ответам
</Typography>
<ButtonBase
{/* <ButtonBase
sx={{
marginTop: "35px",
display: "flex",
@ -50,17 +52,17 @@ export const AnswersStatistics = () => {
<Box>
<OpenIcon />
</Box>
</ButtonBase>
</ButtonBase> */}
<Box
sx={{
display: isSmallMonitor && !isMobile ? "flex" : "block",
gap: "40px",
}}
>
<Answers />
<Funnel />
<Answers data={props.data?.Questions || {}} />
<Funnel data={props.data?.Funnel || {}} />
</Box>
<Results />
<Results data={props.data?.Results || {}} />
</Box>
);
};

37
src/pages/Analytics/Devices.tsx
View File

@ -27,6 +27,9 @@ const DEVICES_MOCK: DevicesResponse = {
const Device = ({ title, devices }: DeviceProps) => {
const theme = useTheme();
console.log("devices ", devices);
if (devices === undefined || Object.keys(devices).length === 0)
return <Typography>{title} - нет данных</Typography>;
const data = Object.entries(devices).map(([id, value], index) => ({
id,
value,
@ -95,33 +98,33 @@ const Device = ({ title, devices }: DeviceProps) => {
);
};
export const Devices = () => {
const [devices, setDevices] = useState<DevicesResponse>(DEVICES_MOCK);
export const Devices = ({ data = {} }) => {
const [devices, setDevices] = useState<DevicesResponse>(data);
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(700));
useEffect(() => {
const requestDevices = async () => {
const [devicesResponse, devicesError] = await getDevices("14761");
// useEffect(() => {
// const requestDevices = async () => {
// const [devicesResponse, devicesError] = await getDevices("14761");
if (devicesError) {
enqueueSnackbar(devicesError);
// if (devicesError) {
// enqueueSnackbar(devicesError);
return;
}
// return;
// }
if (!devicesResponse) {
enqueueSnackbar("Список девайсов пуст.");
// if (!devicesResponse) {
// enqueueSnackbar("Список девайсов пуст.");
return;
}
// return;
// }
setDevices(devicesResponse);
};
// setDevices(devicesResponse);
// };
// requestDevices();
}, []);
// // requestDevices();
// }, []);
return (
<Box sx={{ marginTop: "120px" }}>

42
src/pages/Analytics/General.tsx
View File

@ -38,8 +38,7 @@ const GeneralItem = ({ title, general, color, numberType }: GeneralProps) => {
: Object.entries(general).reduce(
(total, [key, value]) => total + (value / Number(key)) * 100,
0,
) / Object.keys(general).length;
) / Object.keys(general).length || Number(0);
return (
<Paper
sx={{
@ -66,34 +65,17 @@ const GeneralItem = ({ title, general, color, numberType }: GeneralProps) => {
);
};
export const General = () => {
const [general, setGeneral] = useState<GeneralResponse>(GENERAL_MOCK);
export const General = (props: any) => {
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(700));
useEffect(() => {
const requestGeneral = async () => {
const [generalResponse, generalError] = await getGeneral("14761");
if (generalError) {
enqueueSnackbar(generalError);
return;
}
if (!generalResponse) {
enqueueSnackbar("Список девайсов пуст.");
return;
}
setGeneral(generalResponse);
};
// requestGeneral();
}, []);
if (Object.keys(props.data).length === 0)
return (
<Typography textAlign="center" m="10px 0">
нет данных о ключевых метриках
</Typography>
);
return (
<Box sx={{ marginTop: "45px" }}>
<Typography
@ -121,25 +103,25 @@ export const General = () => {
<GeneralItem
title="Открыли квиз"
numberType="sum"
general={general.open}
general={props.data.open || { 0: 0 }}
color={COLORS[0]}
/>
<GeneralItem
title="Получено заявок"
numberType="sum"
general={general.result}
general={props.data.result || { 0: 0 }}
color={COLORS[1]}
/>
<GeneralItem
title="Конверсия"
numberType="percent"
general={general.conversation}
general={props.data.conversation || { 0: 0 }}
color={COLORS[2]}
/>
<GeneralItem
title="Среднее время прохождения квиза"
numberType="percent"
general={general.avtime}
general={props.data.avtime || { 0: 0 }}
color={COLORS[3]}
/>
</Box>

4
src/pages/Questions/DraggableList/index.tsx
View File

@ -28,8 +28,8 @@ export const DraggableList = ({
useEffect(() => {
if (!isLoading && quiz && !filteredQuestions.length) {
console.log("useEffect", quiz)
console.log(Number(quiz.backendId))
console.log("useEffect", quiz);
console.log(Number(quiz.backendId));
createUntypedQuestion(Number(quiz.backendId));
}
}, [quiz, filteredQuestions]);

2
src/pages/Questions/QuestionsPage.tsx
View File

@ -36,7 +36,7 @@ export default function QuestionsPage({
updateEditSomeQuestion();
}, []);
console.log("quiz", quiz)
console.log("quiz", quiz);
if (!quiz) return null;
return (

6
src/pages/Tariffs/Tabs.tsx
View File

@ -4,8 +4,8 @@ import { CustomTab } from "./CustomTab";
type TabsProps = {
names: string[];
items: string[];
selectedItem: "count" | "day";
setSelectedItem: (num: "count" | "day") => void;
selectedItem: "count" | "day" | "dop";
setSelectedItem: (num: "count" | "day" | "dop") => void;
};
export const Tabs = ({
@ -18,7 +18,7 @@ export const Tabs = ({
sx={{ m: "25px" }}
TabIndicatorProps={{ sx: { display: "none" } }}
value={selectedItem}
onChange={(event, newValue: "count" | "day") => {
onChange={(event, newValue: "count" | "day" | "dop") => {
setSelectedItem(newValue);
}}
variant="scrollable"

62
src/pages/Tariffs/Tariffs.tsx
View File

@ -38,6 +38,7 @@ import { activatePromocode } from "@api/promocode";
const StepperText: Record<string, string> = {
count: "Тарифы на объём",
day: "Тарифы на время",
dop: "Доп. услуги",
};
function TariffPage() {
@ -156,6 +157,19 @@ function TariffPage() {
);
});
const filteredBadgeTariffs = tariffs.filter((tariff) => {
return (
tariff.privileges[0].serviceKey === "squiz" &&
!tariff.isDeleted &&
!tariff.isCustom &&
tariff.privileges[0].privilegeId === "squizHideBadge" &&
tariff.privileges[0]?.type === "day"
);
});
const filteredBaseTariffs = filteredTariffs.filter((tariff) => {
return tariff.privileges[0].privilegeId !== "squizHideBadge";
});
async function handleLogoutClick() {
const [, logoutError] = await logout();
@ -254,20 +268,54 @@ function TariffPage() {
<Box
sx={{
justifyContent: "left",
display: "grid",
display: selectedItem === "dop" ? "flex" : "grid",
gap: "40px",
p: "20px",
gridTemplateColumns: `repeat(auto-fit, minmax(300px, ${
isTablet ? "436px" : "360px"
}))`,
flexDirection: selectedItem === "dop" ? "column" : undefined,
}}
>
{createTariffElements(
filteredTariffs,
true,
user,
discounts,
openModalHC,
{selectedItem === "day" &&
createTariffElements(
filteredBaseTariffs,
true,
user,
discounts,
openModalHC,
)}
{selectedItem === "count" &&
createTariffElements(
filteredTariffs,
true,
user,
discounts,
openModalHC,
)}
{selectedItem === "dop" && (
<>
<Typography fontWeight={500}>Убрать логотип "PenaQuiz"</Typography>
<Box
sx={{
justifyContent: "left",
display: "grid",
gap: "40px",
p: "20px",
gridTemplateColumns: `repeat(auto-fit, minmax(300px, ${
isTablet ? "436px" : "360px"
}))`,
}}
>
{createTariffElements(
filteredBadgeTariffs,
false,
user,
discounts,
openModalHC,
)}
</Box>
</>
)}
</Box>
<Modal

30
src/pages/createQuize/QuizCard.tsx
View File

@ -19,6 +19,7 @@ import { makeRequest } from "@frontend/kitui";
import { enqueueSnackbar } from "notistack";
import { useDomainDefine } from "@utils/hooks/useDomainDefine";
import CopyIcon from "@icons/CopyIcon";
import ChartIcon from "@icons/ChartIcon";
interface Props {
quiz: Quiz;
@ -45,6 +46,10 @@ export default function QuizCard({
setEditQuizId(quiz.backendId);
navigate("/edit");
}
function handleStatisticClick() {
setEditQuizId(quiz.backendId);
navigate(`/analytics`);
}
const questionCount = useRef(quiz.questions_count.toString() || "");
@ -186,21 +191,24 @@ export default function QuizCard({
>
{isMobile ? "" : "Редактировать"}
</Button>
{/* <Button
variant="outlined"
startIcon={<ChartIcon />}
<IconButton
onClick={handleStatisticClick}
sx={{
minWidth: "46px",
padding: "10px 10px",
"& .MuiButton-startIcon": {
mr: 0,
ml: 0,
},
height: "44px",
width: "44px",
border: `${theme.palette.brightPurple.main} 1px solid`,
borderRadius: "6px",
}}
/> */}
>
<ChartIcon />
</IconButton>
<IconButton
onClick={() => onClickCopy(quiz.id)}
sx={{ borderRadius: "6px", padding: "0 4px" }}
sx={{
height: "44px",
width: "44px",
borderRadius: "6px",
}}
>
<CopyIcon
color={theme.palette.brightPurple.main}

8
src/stores/questions/actions.ts
View File

@ -44,7 +44,7 @@ export const createUntypedQuestion = (
) =>
setProducedState(
(state) => {
console.log("createUntypedQuestion", quizId)
console.log("createUntypedQuestion", quizId);
const newUntypedQuestion = {
id: nanoid(),
quizId,
@ -278,7 +278,7 @@ export const updateQuestion = async <T = AnyTypedQuizQuestion>(
if (!q) return;
if (q.type === null)
throw new Error("Cannot send update request for untyped question");
console.log("отправляемый квешен", q)
console.log("отправляемый квешен", q);
try {
const response = await questionApi.edit(
questionToEditQuestionRequest(replaceEmptyLinesToSpace(q)),
@ -449,8 +449,8 @@ export const createTypedQuestion = async (
requestQueue.enqueue(`createTypedQuestion-${questionId}`, async () => {
const questions = useQuestionsStore.getState().questions;
const question = questions.find((q) => q.id === questionId);
console.log("createTypedQuestion", question)
console.log("createTypedQuestion", question?.quizId)
console.log("createTypedQuestion", question);
console.log("createTypedQuestion", question?.quizId);
if (!question) return;
if (question.type !== null)
throw new Error("Cannot upgrade already typed question");

13
src/ui_kit/Modal/CropModal.tsx
View File

@ -67,7 +67,7 @@ export const CropModal: FC<Props> = ({
setCropModalImageBlob,
onSaveImageClick,
onClose,
questionId
questionId,
}) => {
const theme = useTheme();
const [percentCrop, setPercentCrop] = useState<PercentCrop>();
@ -297,13 +297,13 @@ export const CropModal: FC<Props> = ({
onChange={(_, newValue) => setDarken(newValue as number)}
/>
</Box>
{questionId !== undefined &&
{questionId !== undefined && (
<IconButton
onClick={() => {
updateQuestion(questionId, (question) => {
question.content.back = null;
question.content.originalBack = null;
})
});
onClose();
}}
sx={{
@ -316,7 +316,7 @@ export const CropModal: FC<Props> = ({
>
<DeleteIcon />
</IconButton>
}
)}
</Box>
<Box
sx={{
@ -351,8 +351,9 @@ export const CropModal: FC<Props> = ({
background: theme.palette.brightPurple.main,
fontSize: "18px",
color: "#7E2AEA",
border: `1px solid ${!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"
}`,
border: `1px solid ${
!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"
}`,
backgroundColor: "transparent",
}}
>

32
src/utils/hooks/useAnalytics.ts Normal file
View File

@ -0,0 +1,32 @@
import { getGeneral, getDevices, getQuestions } from "@api/statistic";
import { useEffect, useState } from "react";
import moment from "moment";
interface Props {
quizId: string;
to: number;
from: number;
}
export function useAnalytics({ quizId, to, from }: Props) {
const formatTo = to === null ? 0 : moment(to).unix();
const formatFrom = from === null ? 0 : moment(from).unix();
console.log(to, from);
if (quizId === undefined) return {};
const [devices, setDevices] = useState({});
const [general, setGeneral] = useState({});
const [questions, setQuestions] = useState({});
useEffect(() => {
(async () => {
const gottenGeneral = await getGeneral(quizId, formatTo, formatFrom);
const gottenDevices = await getDevices(quizId, formatTo, formatFrom);
const gottenQuestions = await getQuestions(quizId, formatTo, formatFrom);
setDevices(gottenGeneral[0]);
setGeneral(gottenDevices[0]);
setQuestions(gottenQuestions[0]);
})();
}, [to, from]);
return { devices, general, questions };
}