(SBL-676) Feature: Add Date range for results (Analytics)

front/src/components/molecules/FunnelContainer/FunnelContainer.jsx

@@ -4,14 +4,8 @@ import { useMemo } from 'react';
 import { useQuery } from 'react-query';
 
 import { interactiveTypesBlocks } from '@sb-ui/utils/api/config';
-import {
-  getLesson,
-  getTeacherLessonStudents,
-} from '@sb-ui/utils/api/v1/teacher';
-import {
-  TEACHER_LESSON_BASE_KEY,
-  TEACHER_LESSON_STUDENTS_BASE_KEY,
-} from '@sb-ui/utils/queries';
+import { getLesson } from '@sb-ui/utils/api/v1/teacher';
+import { TEACHER_LESSON_BASE_KEY } from '@sb-ui/utils/queries';
 
 import LessonFunnel from './LessonFunnel';
 import { FunnelContainerWrapper } from './FunnelContainer.styled';
@@ -20,15 +14,7 @@ const isLastFinish = (index, bites, student) =>
   index === bites?.length - 1 &&
   student.results?.[student.results?.length - 1]?.action === 'finish';
 
-const FunnelContainer = ({ lessonId }) => {
-  const { data: students, isLoading: isStudentsLoading } = useQuery(
-    [TEACHER_LESSON_STUDENTS_BASE_KEY, { lessonId }],
-    getTeacherLessonStudents,
-    {
-      keepPreviousData: true,
-    },
-  );
-
+const FunnelContainer = ({ lessonId, students, isStudentsLoading }) => {
   const { data: lessonData, isLoading: isLessonLoading } = useQuery(
     [TEACHER_LESSON_BASE_KEY, { id: lessonId }],
     getLesson,
@@ -42,7 +28,7 @@ const FunnelContainer = ({ lessonId }) => {
       return [];
     }
 
-    const initialLanded = students.total;
+    const initialLanded = students.length;
 
     const chunks = lessonData.lesson.blocks.reduce(
       (list, block) => {
@@ -75,7 +61,7 @@ const FunnelContainer = ({ lessonId }) => {
 
         const interactiveBlock = bite[bite.length - 1];
 
-        const landedStudents = students.students.filter((student) => {
+        const landedStudents = students.filter((student) => {
           const theResult = student.results.find(
             (result) => result?.revision === interactiveBlock?.revision,
           );
@@ -115,7 +101,7 @@ const FunnelContainer = ({ lessonId }) => {
       });
 
     return chunkBites;
-  }, [students, lessonData, isStudentsLoading, isLessonLoading]);
+  }, [isStudentsLoading, isLessonLoading, lessonData, students]);
 
   const isLoading = isStudentsLoading || isLessonLoading;
 
@@ -132,6 +118,12 @@ const FunnelContainer = ({ lessonId }) => {
 
 FunnelContainer.propTypes = {
   lessonId: T.string.isRequired,
+  students: T.arrayOf(
+    T.shape({
+      results: T.arrayOf(T.shape({})),
+    }),
+  ),
+  isStudentsLoading: T.bool,
 };
 
 export default FunnelContainer;

front/src/pages/Teacher/LessonEdit/RightBar/Analytics/Analytics.jsx

@@ -1,4 +1,5 @@
 import T from 'prop-types';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useParams } from 'react-router-dom';
@@ -8,26 +9,47 @@ import { isLessonIdCorrect } from '@sb-ui/pages/Teacher/LessonEdit/useGetLesson'
 import { getTeacherLessonStudents } from '@sb-ui/utils/api/v1/teacher';
 import { TEACHER_LESSON_STUDENTS_BASE_KEY } from '@sb-ui/utils/queries';
 
+import { createMapTimeRangeStudent } from './analyticsHelper';
 import Students from './Students';
 import * as S from './Analytics.styled';
 
 const Analytics = ({ opened }) => {
   const { id: lessonId } = useParams();
   const { t } = useTranslation('teacher');
-  const { data: studentsData } = useQuery(
+  const { data: studentsData, isLoading: isStudentsLoading } = useQuery(
     [TEACHER_LESSON_STUDENTS_BASE_KEY, { lessonId }],
     getTeacherLessonStudents,
     {
       enabled: isLessonIdCorrect(lessonId),
     },
   );
 
-  const { students } = studentsData || {};
+  const [rangeDate, setRangeDate] = useState({
+    from: '',
+    to: '',
+  });
+
+  const students = useMemo(
+    () =>
+      studentsData?.students
+        ?.map(createMapTimeRangeStudent(rangeDate))
+        ?.filter(Boolean),
+    [rangeDate, studentsData?.students],
+  );
+
+  const handleRangePickerChange = (_, dateStrings) => {
+    const [from, to] = dateStrings;
+    setRangeDate({
+      from,
+      to,
+    });
+  };
 
   return (
     <S.Wrapper opened={opened}>
       <S.Title>{t('right_bar.analytics')}</S.Title>
       <S.Content>
+        <S.RangePicker onChange={handleRangePickerChange} />
         {students?.length > 0 ? (
           <>
             <S.FunnelTitle>
@@ -37,7 +59,11 @@ const Analytics = ({ opened }) => {
               <span>{t('right_bar.funnel.description')}</span>
             </S.FunnelTitle>
             <S.FunnelContainerWrapper>
-              <FunnelContainer lessonId={lessonId} />
+              <FunnelContainer
+                lessonId={lessonId}
+                students={students}
+                isStudentsLoading={isStudentsLoading}
+              />
             </S.FunnelContainerWrapper>
             <Students students={students} />
           </>

front/src/pages/Teacher/LessonEdit/RightBar/Analytics/Analytics.styled.js

@@ -1,10 +1,13 @@
+import { DatePicker } from 'antd';
 import styled from 'styled-components';
 
 import { HEADER_HEIGHT } from '@sb-ui/components/molecules/Header/Header.styled';
 import variables from '@sb-ui/theme/variables';
 
 import { RIGHT_BAR_WIDTH } from '../../constants';
 
+const { RangePicker: RangePickerAntd } = DatePicker;
+
 export const Wrapper = styled.div`
   position: absolute;
   right: 0;
@@ -33,12 +36,21 @@ export const Title = styled.div`
 `;
 
 export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
   padding-left: 1rem;
   padding-right: 1rem;
   height: calc(100% - 2 * ${HEADER_HEIGHT}px);
   overflow-y: auto;
 `;
 
+export const RangePicker = styled(RangePickerAntd).attrs({
+  format: 'YYYY/MM/DD',
+  allowEmpty: [true, true],
+})`
+  margin-top: 1rem;
+`;
+
 export const FunnelTitle = styled.div`
   display: flex;
   flex-direction: column;

front/src/pages/Teacher/LessonEdit/RightBar/Analytics/analyticsHelper.js

@@ -0,0 +1,36 @@
+const getTimeFromData = (data) => (data ? new Date(data).getTime() : null);
+
+const isTimeInRange = ({ fromTime, toTime, time }) => {
+  if (fromTime && toTime) {
+    return time >= fromTime && time <= toTime;
+  }
+  if (fromTime && !toTime) {
+    return time >= fromTime;
+  }
+  if (!fromTime && toTime) {
+    return time <= toTime;
+  }
+  return true;
+};
+
+export const createMapTimeRangeStudent = (rangeData) => {
+  const fromTime = getTimeFromData(rangeData?.from);
+  const toTime = getTimeFromData(rangeData?.to);
+
+  return (student) => {
+    if (student.results.length === 0) {
+      return student;
+    }
+    const results = student.results.filter(({ createdAt }) =>
+      isTimeInRange({ fromTime, toTime, time: new Date(createdAt).getTime() }),
+    );
+
+    if (results.length === 0) {
+      return null;
+    }
+    return {
+      ...student,
+      results,
+    };
+  };
+};