feat: calculateTime

src/pages/Analytics/Answers/Answers.tsx

@@ -35,8 +35,6 @@ type PaginationProps = {
   setPage: (page: number) => void;
 };
 
-const ANSWERS_PER_PAGE = 5;
-
 const Answer = ({ title, percent, highlight }: AnswerProps) => {
   const theme = useTheme();
 
@@ -263,7 +261,7 @@ export const Answers: FC<AnswersProps> = ({ data }) => {
               },
             }}
           >
-            Заголовок вопроса. {answers[page - 1][0]}
+            Заголовок вопроса. {answers[page - 1]?.[0] ?? ""}
           </Typography>
           <ButtonBase>
             <DoubleCheckIcon />
@@ -272,16 +270,14 @@ export const Answers: FC<AnswersProps> = ({ data }) => {
             <NextIcon />
           </ButtonBase>
         </Box>
-        {Object.entries(answers[page - 1][1])
-
-          .map((element, index) => (
-            <Answer
-              key={index}
-              title={element[0]}
-              percent={element[1]}
-              highlight={!index}
-            />
-          ))}
+        {Object.entries(answers[page - 1]?.[1] ?? []).map((element, index) => (
+          <Answer
+            key={index}
+            title={element[0]}
+            percent={element[1]}
+            highlight={!index}
+          />
+        ))}
       </Paper>
       <Pagination page={page} setPage={setPage} pagesAmount={answers.length} />
     </Box>

src/pages/Analytics/General.tsx

@@ -10,6 +10,7 @@ type GeneralItemsProps = {
   general: Record<string, number>;
   color: string;
   numberType: "sum" | "percent" | "time";
+  calculateTime?: boolean;
 };
 
 type GeneralProps = {
@@ -37,6 +38,7 @@ const GeneralItem = ({
   general,
   color,
   numberType,
+  calculateTime = false,
 }: GeneralItemsProps) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(700));
@@ -50,12 +52,20 @@ const GeneralItem = ({
     0,
   ) / Object.keys(general).length || Number(0);
 
-  console.log("general", general);
-  console.log(Object.keys(general).length === 0);
-  if (Object.keys(general).length === 0)
+  if (Object.keys(general).length === 0) {
     return (
       <Typography textAlign="center">{`${title} - нет данных`}</Typography>
     );
+  }
+
+  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");
+    const seconds = String(Math.floor((time % 3600) % 60)).padStart(2, "0");
+
+    return `${hours}:${minutes}:${seconds}`;
+  };
+
   return (
     <Paper
       sx={{
@@ -76,7 +86,13 @@ const GeneralItem = ({
               moment.utc(Number(value) * 1000).format("DD/MM/YYYY"),
           },
         ]}
-        series={[{ data: Object.values(general) }]}
+        series={[
+          {
+            data: Object.values(general),
+            valueFormatter: (value) =>
+              calculateTime ? getCalculatedTime(value) : String(value),
+          },
+        ]}
         // dataset={Object.entries(general).map(([, v]) => moment.unix(v).format("ss/mm/HH")).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})}
         height={220}
         colors={[color]}
@@ -101,6 +117,7 @@ export const General: FC<GeneralProps> = ({ data }) => {
       </Typography>
     );
   }
+
   return (
     <Box sx={{ marginTop: "45px" }}>
       <Typography
@@ -158,6 +175,7 @@ export const General: FC<GeneralProps> = ({ data }) => {
         <GeneralItem
           title="Среднее время прохождения квиза"
           numberType="time"
+          calculateTime
           general={
             Object.entries(data.AvTime)
               .filter(([, v]) => v > 0)