feat(legend): add legends component for table

Coursemology · Apr 3, 2024 · 4138a9c · 4138a9c
1 parent 0773e01
commit 4138a9c
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 42 deletions.
diff --git a/client/app/bundles/course/assessment/pages/AssessmentStatistics/StudentAttemptCountTable.tsx b/client/app/bundles/course/assessment/pages/AssessmentStatistics/StudentAttemptCountTable.tsx
@@ -14,6 +14,7 @@ import Note from 'lib/components/core/Note';
 import GhostIcon from 'lib/components/icons/GhostIcon';
 import Table, { ColumnTemplate } from 'lib/components/table';
 import { DEFAULT_TABLE_ROWS_PER_PAGE } from 'lib/constants/sharedConstants';
+import TableLegends from 'lib/containers/TableLegends';
 import { useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
@@ -26,6 +27,18 @@ const translations = defineMessages({
     defaultMessage:
       'This table is only displayed for Assessment with at least one Autograded Questions',
   },
+  greenCellLegend: {
+    id: 'course.assessment.statistics.greenCellLegend',
+    defaultMessage: 'Correct',
+  },
+  redCellLegend: {
+    id: 'course.assessment.statistics.redCellLegend',
+    defaultMessage: 'Incorrect',
+  },
+  grayCellLegend: {
+    id: 'course.assessment.statistics.grayCellLegend',
+    defaultMessage: 'Undecided (question is Non-autogradable)',
+  },
   name: {
     id: 'course.assessment.statistics.name',
     defaultMessage: 'Name',
@@ -224,27 +237,48 @@ const StudentAttemptCountTable: FC<Props> = (props) => {
   ];
 
   return (
-    <Table
-      columns={columns}
-      csvDownload={{
-        filename: t(translations.filename, {
-          assessment: assessment?.title ?? '',
-        }),
-      }}
-      data={sortedSubmission}
-      getRowClassName={(datum): string =>
-        `data_${datum.courseUser.id} bg-slot-1 hover?:bg-slot-2 slot-1-white slot-2-neutral-100`
-      }
-      getRowEqualityData={(datum): MainSubmissionInfo => datum}
-      getRowId={(datum): string => datum.courseUser.id.toString()}
-      indexing={{ indices: true }}
-      pagination={{
-        rowsPerPage: [DEFAULT_TABLE_ROWS_PER_PAGE],
-        showAllRows: true,
-      }}
-      search={{ searchPlaceholder: t(translations.searchText) }}
-      toolbar={{ show: true }}
-    />
+    <>
+      <TableLegends
+        legends={[
+          {
+            key: 'correct',
+            backgroundColor: 'bg-green-300',
+            description: t(translations.greenCellLegend),
+          },
+          {
+            key: 'incorrect',
+            backgroundColor: 'bg-red-300',
+            description: t(translations.redCellLegend),
+          },
+          {
+            key: 'undecided',
+            backgroundColor: 'bg-gray-300',
+            description: t(translations.grayCellLegend),
+          },
+        ]}
+      />
+      <Table
+        columns={columns}
+        csvDownload={{
+          filename: t(translations.filename, {
+            assessment: assessment?.title ?? '',
+          }),
+        }}
+        data={sortedSubmission}
+        getRowClassName={(datum): string =>
+          `data_${datum.courseUser.id} bg-slot-1 hover?:bg-slot-2 slot-1-white slot-2-neutral-100`
+        }
+        getRowEqualityData={(datum): MainSubmissionInfo => datum}
+        getRowId={(datum): string => datum.courseUser.id.toString()}
+        indexing={{ indices: true }}
+        pagination={{
+          rowsPerPage: [DEFAULT_TABLE_ROWS_PER_PAGE],
+          showAllRows: true,
+        }}
+        search={{ searchPlaceholder: t(translations.searchText) }}
+        toolbar={{ show: true }}
+      />
+    </>
   );
 };
 

diff --git a/...app/bundles/course/assessment/pages/AssessmentStatistics/StudentMarksPerQuestionTable.tsx b/...app/bundles/course/assessment/pages/AssessmentStatistics/StudentMarksPerQuestionTable.tsx
@@ -10,6 +10,7 @@ import Link from 'lib/components/core/Link';
 import GhostIcon from 'lib/components/icons/GhostIcon';
 import Table, { ColumnTemplate } from 'lib/components/table';
 import { DEFAULT_TABLE_ROWS_PER_PAGE } from 'lib/constants/sharedConstants';
+import TableLegends from 'lib/containers/TableLegends';
 import { useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
@@ -21,6 +22,14 @@ const translations = defineMessages({
     id: 'course.assessment.statistics.name',
     defaultMessage: 'Name',
   },
+  greenCellLegend: {
+    id: 'course.assessment.statistics.greenCellLegend',
+    defaultMessage: '>= 0.5 * Maximum Grade',
+  },
+  redCellLegend: {
+    id: 'course.assessment.statistics.redCellLegend',
+    defaultMessage: '< 0.5 * Maximum Grade',
+  },
   group: {
     id: 'course.assessment.statistics.group',
     defaultMessage: 'Group',
@@ -266,27 +275,43 @@ const StudentMarksPerQuestionTable: FC<Props> = (props) => {
   ];
 
   return (
-    <Table
-      columns={columns}
-      csvDownload={{
-        filename: t(translations.filename, {
-          assessment: assessment?.title ?? '',
-        }),
-      }}
-      data={sortedSubmission}
-      getRowClassName={(datum): string =>
-        `data_${datum.courseUser.id} bg-slot-1 hover?:bg-slot-2 slot-1-white slot-2-neutral-100`
-      }
-      getRowEqualityData={(datum): MainSubmissionInfo => datum}
-      getRowId={(datum): string => datum.courseUser.id.toString()}
-      indexing={{ indices: true }}
-      pagination={{
-        rowsPerPage: [DEFAULT_TABLE_ROWS_PER_PAGE],
-        showAllRows: true,
-      }}
-      search={{ searchPlaceholder: t(translations.searchText) }}
-      toolbar={{ show: true }}
-    />
+    <>
+      <TableLegends
+        legends={[
+          {
+            key: 'correct',
+            backgroundColor: 'bg-green-500',
+            description: t(translations.greenCellLegend),
+          },
+          {
+            key: 'incorrect',
+            backgroundColor: 'bg-red-500',
+            description: t(translations.redCellLegend),
+          },
+        ]}
+      />
+      <Table
+        columns={columns}
+        csvDownload={{
+          filename: t(translations.filename, {
+            assessment: assessment?.title ?? '',
+          }),
+        }}
+        data={sortedSubmission}
+        getRowClassName={(datum): string =>
+          `data_${datum.courseUser.id} bg-slot-1 hover?:bg-slot-2 slot-1-white slot-2-neutral-100`
+        }
+        getRowEqualityData={(datum): MainSubmissionInfo => datum}
+        getRowId={(datum): string => datum.courseUser.id.toString()}
+        indexing={{ indices: true }}
+        pagination={{
+          rowsPerPage: [DEFAULT_TABLE_ROWS_PER_PAGE],
+          showAllRows: true,
+        }}
+        search={{ searchPlaceholder: t(translations.searchText) }}
+        toolbar={{ show: true }}
+      />
+    </>
   );
 };
 

diff --git a/client/app/lib/containers/TableLegends.tsx b/client/app/lib/containers/TableLegends.tsx
@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import { Typography } from '@mui/material';
+
+interface Props {
+  legends: {
+    key: string;
+    backgroundColor: string;
+    description: string;
+  }[];
+}
+
+const TableLegends: FC<Props> = (props) => {
+  const { legends } = props;
+
+  return (
+    <div className="flex flex-row space-x-3">
+      {legends.map((l) => (
+        <div key={`legend-${l.key}`} className="flex flex-row items-start">
+          <div className={`w-8 h-8 mr-2 ${l.backgroundColor}`} />
+          <Typography variant="caption">{l.description}</Typography>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TableLegends;