fix(live-feedback): update colouring of cells in live feedback stats …

…table

previously cells were coloured linearly based on a max number
new colouring only applies this gradient to the lower 75% of the data
upper 25% is all coloured the most intense shade of red

client/app/bundles/course/assessment/pages/AssessmentStatistics/LiveHelpStatisticsTable.tsx

@@ -94,7 +94,8 @@ const LiveHelpStatisticsTable: FC<Props> = (props) => {
   const [parsedStatistics, setParsedStatistics] = useState<
     AssessmentLiveFeedbackStatistics[]
   >([]);
-  const [maxFeedbackCount, setMaxFeedbackCount] = useState<number>(0);
+  const [upperQuartileFeedbackCount, setUpperQuartileFeedbackCount] =
+    useState<number>(0);
 
   const [openLiveFeedbackHistory, setOpenLiveFeedbackHistory] = useState(false);
   const [liveFeedbackInfo, setLiveFeedbackInfo] = useState({
@@ -110,13 +111,18 @@ const LiveHelpStatisticsTable: FC<Props> = (props) => {
   }, [parsedAssessmentId]);
 
   useEffect(() => {
-    setMaxFeedbackCount(
-      Math.max(
-        ...liveFeedbackStatistics.map((s) =>
-          Math.max(...(s.liveFeedbackCount ?? []).map((c) => c ?? 0)),
-        ),
-      ),
+    const feedbackCounts = liveFeedbackStatistics
+      .flatMap((s) => s.liveFeedbackCount ?? [])
+      .map((c) => c ?? 0)
+      .filter((c) => c !== 0)
+      .sort((a, b) => a - b);
+    const upperQuartilePercentileIndex = Math.floor(
+      0.75 * (feedbackCounts.length - 1),
     );
+    const upperQuartilePercentileValue =
+      feedbackCounts[upperQuartilePercentileIndex];
+    setUpperQuartileFeedbackCount(upperQuartilePercentileValue);
+
     const filteredStats = includePhantom
       ? liveFeedbackStatistics
       : liveFeedbackStatistics.filter((s) => !s.courseUser.isPhantom);
@@ -152,7 +158,10 @@ const LiveHelpStatisticsTable: FC<Props> = (props) => {
     questionId: number,
     questionNumber: number,
   ): ReactNode => {
-    const classname = getClassnameForLiveFeedbackCell(count, maxFeedbackCount);
+    const classname = getClassnameForLiveFeedbackCell(
+      count,
+      upperQuartileFeedbackCount,
+    );
     if (count === 0) {
       return <Box>{count}</Box>;
     }

client/app/bundles/course/assessment/pages/AssessmentStatistics/classNameUtils.ts

@@ -67,8 +67,11 @@ export const getClassNameForAttemptCountCell = (
 
 export const getClassnameForLiveFeedbackCell = (
   count: number,
-  maxCount: number,
+  upperQuartile: number,
 ): string => {
-  const gradientLevel = calculateOneSidedColorGradientLevel(count, maxCount);
+  const gradientLevel = calculateOneSidedColorGradientLevel(
+    count,
+    upperQuartile,
+  );
   return `${redBackgroundColorClassName[gradientLevel]} p-[1rem]`;
 };