refactor: analytics

src/pages/Analytics/Analytics.tsx

@@ -1,4 +1,5 @@
-import { ReactNode, useEffect, useLayoutEffect, useState } from "react";
+import moment from "moment";
+import { useEffect, useLayoutEffect, useState } from "react";
 import {
   Box,
   Button,
@@ -10,10 +11,6 @@ import {
 import { redirect } from "react-router-dom";
 import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
-import moment from "moment";
-import { useQuizStore } from "@root/quizes/store";
-import { useCurrentQuiz } from "@root/quizes/hooks";
-import { useAnalytics } from "@utils/hooks/useAnalytics";
 
 import HeaderFull from "@ui_kit/Header/HeaderFull";
 import SectionWrapper from "@ui_kit/SectionWrapper";
@@ -22,13 +19,19 @@ import { General } from "./General";
 import { AnswersStatistics } from "./Answers/AnswersStatistics";
 import { Devices } from "./Devices";
 
+import { setQuizes } from "@root/quizes/actions";
+import { useQuizStore } from "@root/quizes/store";
+
+import { useAnalytics } from "@utils/hooks/useAnalytics";
+
+import { quizApi } from "@api/quiz";
+
 import CalendarIcon from "@icons/CalendarIcon";
 import { ReactComponent as ResetIcon } from "@icons/Analytics/reset.svg";
 
 import type { Moment } from "moment";
-import { setQuizes } from "@root/quizes/actions";
+import type { ReactNode } from "react";
-import { quizApi } from "@api/quiz";
+import type { Quiz } from "@model/quiz/quiz";
-import { Quiz } from "@model/quiz/quiz";
 
 export default function Analytics() {
   const { quizes, editQuizId } = useQuizStore();
@@ -43,7 +46,6 @@ export default function Analytics() {
   console.log(86400 - (moment(to).unix() - moment(from).unix()) > 0);
 
   const theme = useTheme();
-  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
   const { devices, general, questions } = useAnalytics({
@@ -116,8 +118,6 @@ export default function Analytics() {
     }
   };
 
-  console.log(general);
-  const now = moment();
   return (
     <LocalizationProvider dateAdapter={AdapterMoment}>
       <HeaderFull isRequest />

src/pages/Analytics/Answers/Funnel.tsx

@@ -112,6 +112,7 @@ export const Funnel: FC<FunnelProps> = ({ data, funnelData }) => {
   const theme = useTheme();
   const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1150));
   const isMobile = useMediaQuery(theme.breakpoints.down(850));
+
   useEffect(() => {
     // const requestFunnel = async () => {
     //   const [funnelResponse, funnelError] = await getGeneral("14761");

src/pages/Analytics/Devices.tsx

@@ -22,6 +22,7 @@ const COLORS: Record<number, string> = {
 
 const Device = ({ title, devices }: DeviceProps) => {
   const theme = useTheme();
+
   if (!devices || !Object.keys(devices ?? {}).length) {
     return <Typography>{title} - нет данных</Typography>;
   }

src/pages/Analytics/General.tsx

@@ -1,9 +1,9 @@
+import moment from "moment";
 import { Box, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { LineChart } from "@mui/x-charts";
-import moment from "moment";
 
+import type { FC } from "react";
 import type { GeneralResponse } from "@api/statistic";
-import { FC } from "react";
 
 type GeneralItemsProps = {
   title: string;
@@ -20,22 +20,6 @@ type GeneralProps = {
   day: boolean;
 };
 
-const COLORS: Record<number, string> = {
-  0: "#61BB1A",
-  1: "#7E2AEA",
-  2: "#FB5607",
-  3: "#0886FB",
-};
-
-const dateParser = (object: Record<string, number>): Record<string, number> => {
-  const result = {} as Record<string, number>;
-  for (var key in object) {
-    result[moment.unix(Number(key) * 1000).format("DD/MM/YYYY")] = object[key];
-    console.log(result);
-  }
-  return result;
-};
-
 const getCalculatedTime = (time: number) => {
   const hours = String(Math.floor(time / 3600)).padStart(2, "0");
   const minutes = String(Math.floor((time % 3600) / 60)).padStart(2, "0");
@@ -43,6 +27,7 @@ const getCalculatedTime = (time: number) => {
 
   return `${hours}:${minutes}:${seconds}`;
 };
+
 const GeneralItem = ({
   title,
   general,
@@ -89,7 +74,7 @@ const GeneralItem = ({
     >
       <Typography sx={{ margin: "20px 20px 0" }}>{title}</Typography>
       <Typography sx={{ margin: "10px 20px 0", fontWeight: "bold" }}>
-        {numberType === "percent" ? `${numberValue.toFixed(2)}%` : numberValue}
+        {numberType === "percent" ? `${numberValue?.toFixed(2)}%` : numberValue}
       </Typography>
       <LineChart
         xAxis={[
@@ -119,6 +104,7 @@ const GeneralItem = ({
     </Paper>
   );
 };
+
 const GeneralItemTimeConv = ({
   title,
   general,
@@ -131,38 +117,19 @@ const GeneralItemTimeConv = ({
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(700));
 
-  console.log("day", day);
+  const data = Object.entries(general).sort(
-
+    ([nextValue], [currentValue]) => Number(nextValue) - Number(currentValue),
-  const data = Object.entries(general).sort((a, b) => a[0] - b[0]);
-
-  const days = [...data].map((e) => e[0]);
-
-  let buffer = 0;
-
-  const time = [...data].map((e) => {
-    if (e[1] > 0) {
-      buffer = e[1];
-    }
-    return buffer;
-  });
-
-  console.log("data", data);
-  console.log(
-    "time",
-    time.reduce((a, b) => Number(a) + Number(b), 0),
   );
-  console.log(
+  const days = data.map(([value]) => value);
-    "time",
+  const time = data.map(([_, value]) => value);
-    getCalculatedTime(time.reduce((a, b) => Number(a) + Number(b), 0)),
+
-  );
-  console.log("days", days.length);
   const numberValue = calculateTime
-    ? time.reduce((a, b) => Number(a) + Number(b), 0) / days.length || 0
+    ? time.reduce((total, value) => total + value, 0) / days.length
     : conversionValue;
 
   if (
     Object.keys(general).length === 0 ||
-    Object.values(general).every((x) => x === 0)
+    Object.values(general).every((item) => item === 0)
   ) {
     return (
       <Typography textAlign="center">{`${title} - нет данных`}</Typography>
@@ -180,8 +147,8 @@ const GeneralItemTimeConv = ({
       <Typography sx={{ margin: "20px 20px 0" }}>{title}</Typography>
       <Typography sx={{ margin: "10px 20px 0", fontWeight: "bold" }}>
         {calculateTime
-          ? `${getCalculatedTime(numberValue)} с`
+          ? `${getCalculatedTime(numberValue ?? 0)} с`
-          : `${numberValue.toFixed(2)}%`}
+          : `${numberValue?.toFixed(2) ?? 0}%`}
       </Typography>
       <LineChart
         xAxis={[
@@ -194,12 +161,10 @@ const GeneralItemTimeConv = ({
         series={[
           {
             data: Object.values(time),
-            valueFormatter: (value) => {
+            valueFormatter: (value) =>
-              console.log("log", value);
+              calculateTime
-              return calculateTime
                 ? getCalculatedTime(value)
-                : String((value * 100).toFixed(2)) + "%";
+                : String((value * 100).toFixed(2)) + "%",
-            },
           },
         ]}
         // dataset={Object.entries(general).map(([, v]) => moment.unix(v).format("ss:mm:HH")).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})}
@@ -227,39 +192,33 @@ export const General: FC<GeneralProps> = ({ data, day }) => {
     );
   }
 
-  const DATA = {} as GeneralResponse;
   const currentDate = moment().unix();
-  const futureCutter = ({
-    fatherKey,
-    values,
-  }: {
-    fatherKey: string;
-    values: Record<string, number>;
-  }) => {
-    const buffer = {} as Record<string, number>;
-    for (let key in values) {
-      console.log(Number(key));
-      console.log(currentDate);
-      console.log(Number(key) - currentDate);
-      console.log(Number(key) - currentDate < 0);
-      console.log(moment.unix(key).format("HH"));
-      if (Number(key) - currentDate < 0) buffer[key] = values[key];
-    }
-    DATA[fatherKey] = buffer;
-  };
 
-  for (let key in data) {
+  const generalResponse = Object.entries(data).reduce(
-    futureCutter({ fatherKey: key, values: data[key] });
+    (total, [fatherKey, values]) => {
-  }
+      const value = Object.keys(values).reduce((totalValue, key) => {
-  console.log(DATA);
+        if (Number(key) - currentDate < 0) {
+          return { ...totalValue, [key]: values[key] };
+        }
 
-  const conversionValue =
+        return totalValue;
-    (Object.values(DATA.Result).reduce((total, item) => total + item, 0) /
+      }, {});
-      Object.values(DATA.Open).reduce((total, item) => total + item, 0)) *
+
-    100;
+      return { ...total, [fatherKey]: value };
+    },
+    {} as GeneralResponse,
+  );
+
+  const resultSum = Object.values(generalResponse.Result).reduce(
+    (total, item) => total + item,
+    0,
+  );
+  const openSum = Object.values(generalResponse.Open).reduce(
+    (total, item) => total + item,
+    0,
+  );
+  const conversionValue = (resultSum / openSum) * 100;
 
-  console.log(conversionValue);
-  // console.log(DATA.Result)
   return (
     <Box sx={{ marginTop: "45px" }}>
       <Typography
@@ -287,31 +246,31 @@ export const General: FC<GeneralProps> = ({ data, day }) => {
         <GeneralItem
           title="Открыли квиз"
           numberType="sum"
-          general={DATA.Open}
+          general={generalResponse.Open}
-          color={COLORS[0]}
+          color="#61BB1A"
           day={day}
         />
         <GeneralItem
           title="Получено заявок"
           numberType="sum"
-          general={DATA.Result}
+          general={generalResponse.Result}
-          color={COLORS[1]}
+          color="#7E2AEA"
           day={day}
         />
         <GeneralItemTimeConv
           title="Конверсия"
           numberType="percent"
           conversionValue={conversionValue}
-          general={DATA.Conversion}
+          general={generalResponse.Conversion}
-          color={COLORS[2]}
+          color="#FB5607"
           day={day}
         />
         <GeneralItemTimeConv
           title="Среднее время прохождения квиза"
           numberType="time"
           calculateTime
-          general={DATA.AvTime}
+          general={generalResponse.AvTime}
-          color={COLORS[3]}
+          color="#0886FB"
           day={day}
         />
       </Box>