Fixed error + loading handling in studentoverview, notification mocki…

…ng and styling of grade analyzer
UvA-FNWI · Oct 28, 2024 · 68685f6 · 68685f6
1 parent 578a53a
commit 68685f6
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 701 deletions.
diff --git a/IguideME.Web/Frontend/src/components/crystals/comparison-view/grade-correlation.tsx b/IguideME.Web/Frontend/src/components/crystals/comparison-view/grade-correlation.tsx
@@ -43,7 +43,7 @@ function CorrelationStatistics({ gradeData }: { gradeData: GradeData[] }): React
   );
 
   return (
-    <Card size='small' title={<h3 className='text-base text-text'>Correlation statistics</h3>}>
+    <Card size='small' title={<h3 className='text-text text-base'>Correlation statistics</h3>}>
       <div className='[&>p]:text-sm'>
         <p>Correlation Coefficient: {correlationCoefficient.toFixed(5)}</p>
         <p>Average X: {varFixed(averageX)}</p>
@@ -80,7 +80,7 @@ function GradeCorrelation({ gradesA, gradesB, compareTitles }: GradeCorrelationP
     .filter((gradePair) => gradePair !== undefined);
 
   return (
-    <div className='flex flex-col justify-between gap-8 lg:flex-row'>
+    <div className='flex min-h-[50vh] flex-col justify-between gap-8 lg:flex-row'>
       <div className='w-fit shrink-0'>
         {gradeData.length === 0 ?
           <Card size='small' title={<h3 className='text-base'>Correlation statistics</h3>} className='flex-1'>

diff --git a/IguideME.Web/Frontend/src/components/crystals/comparison-view/graphs/correlation-graph.tsx b/IguideME.Web/Frontend/src/components/crystals/comparison-view/graphs/correlation-graph.tsx
@@ -11,7 +11,7 @@ export function CorrelationGraph({
   compareTitles: CompareTitles;
 }): ReactElement {
   return (
-    <ResponsiveContainer className='h-80 w-full min-w-80'>
+    <ResponsiveContainer className='min-h-80 w-full min-w-80 max-w-[800px]'>
       <ScatterChart margin={{ top: 10, right: 0, bottom: 20, left: 20 }}>
         <CartesianGrid />
         <XAxis type='number' dataKey='x' name={compareTitles.a}>

diff --git a/IguideME.Web/Frontend/src/components/pages/admin/analytics/components/AnalyticsChips.tsx b/IguideME.Web/Frontend/src/components/pages/admin/analytics/components/AnalyticsChips.tsx
@@ -100,6 +100,7 @@ const AnalyticsChips: FC<AnalyticsChipProps> = memo(({ analytics, consentInfo, s
       visitData.set(weekKey, currentData);
     });
 
+    console.log('bounc', visitData);
     const sortedWeekKeys = Array.from(visitData.keys()).sort();
 
     const conversionRateData = sortedWeekKeys
@@ -141,6 +142,7 @@ const AnalyticsChips: FC<AnalyticsChipProps> = memo(({ analytics, consentInfo, s
     };
   }, [analytics, sessions]);
 
+  console.log('conversion', conversionRateData);
   return (
     <div className='flex w-full max-w-[2000px] flex-wrap justify-center gap-4'>
       <AnalyticsChip

diff --git a/IguideME.Web/Frontend/src/components/pages/admin/studentoverview/common-table.tsx b/IguideME.Web/Frontend/src/components/pages/admin/studentoverview/common-table.tsx
@@ -44,7 +44,7 @@ const CommonTable: FC<Props> = ({ type }): ReactElement => {
     enabled: type === GradeTableType.notifications,
   });
 
-  console.log("notifications", notifications);
+  console.log('notifications', notifications);
 
   const {
     data: tiles,
@@ -89,7 +89,13 @@ const CommonTable: FC<Props> = ({ type }): ReactElement => {
     ...getColumns(),
   ];
 
-  if (studentError || isNotificationError || isTileError || isTileGradesError || isEntryGradesError) {
+  if (
+    studentError ||
+    (isNotificationError && type === GradeTableType.notifications) ||
+    (isTileError && (type === GradeTableType.tile || type === GradeTableType.entry)) ||
+    (isTileGradesError && type === GradeTableType.tile) ||
+    (isEntryGradesError && type === GradeTableType.entry)
+  ) {
     return (
       <div className='relative h-full w-full'>
         <QueryError title='Failed to load data' subTitle='Please refresh the page or try again later.' />
@@ -105,7 +111,11 @@ const CommonTable: FC<Props> = ({ type }): ReactElement => {
         dataSource={getData()}
         scroll={{ x: 'max-content', y: 600 }}
         loading={
-          studentLoading || isNotificationLoading || isTileLoading || isTileGradesLoading || isEntryGradesLoading
+          studentLoading ||
+          (isNotificationLoading && type === GradeTableType.notifications) ||
+          (isTileLoading && (type === GradeTableType.tile || type === GradeTableType.entry)) ||
+          (isTileGradesLoading && type === GradeTableType.tile) ||
+          (isEntryGradesLoading && type === GradeTableType.entry)
         }
         sticky
       />

diff --git a/IguideME.Web/Frontend/src/mocks/analytics.ts b/IguideME.Web/Frontend/src/mocks/analytics.ts
@@ -2,15 +2,15 @@ import { http, HttpResponse } from 'msw';
 import { ActionTypes, type EventReturnType } from '@/utils/analytics';
 
 const BIAS = 0.6;
-const STUDENTS = 1000;
+const STUDENTS = 100;
 
 const MIN_PARTICIPANTS = Math.floor(STUDENTS * BIAS);
-const MAX_PARTICIPANTS = Math.floor(STUDENTS * 0.85);
+const MAX_PARTICIPANTS = Math.floor(STUDENTS * BIAS);
 const PREV_PARTICIPANTS = Math.floor(Math.random() * STUDENTS);
 const PARTICIPANTS = Math.floor(Math.random() * (MAX_PARTICIPANTS - MIN_PARTICIPANTS + 1)) + MIN_PARTICIPANTS;
 
 const COURSE_LENGTH = 16; // weeks
-const WEEKLY_EVENTS = 2;
+const WEEKLY_EVENTS = 12;
 
 export const analyticsHandlers = [
   // Using results instead of events as some adblockers block it otherwise.