Added PNGs with partial radial progress

src/exams/pdf/details/radial.result.tsx

@@ -1,36 +1,50 @@
+/* eslint-disable jsx-a11y/alt-text */
 import React from "react";
 import {
-  Document,
-  Page,
   View,
   Text,
-  StyleSheet,
   Image,
 } from "@react-pdf/renderer";
 import { styles } from "../styles";
 import { ModuleScore } from "@/interfaces/module.scores";
 
-export const RadialResult = ({ module, score, total }: ModuleScore) => (
+export const RadialResult = ({ module, score, total, png }: ModuleScore) => (
   <View
     key="module"
-    style={{
+    style={[
-      display: "flex",
+      styles.textFont,
-      flexDirection: "column",
+      {
-      alignItems: "center",
+        display: "flex",
-      gap: 8,
+        flexDirection: "column",
-    }}
+        alignItems: "center",
+        gap: 4,
+        position: "relative",
+      },
+    ]}
   >
-    <Text
+    <Text style={[styles.textColor, styles.textBold, { fontSize: 10 }]}>
-      style={[
-        styles.textFont,
-        styles.textColor,
-        styles.textBold,
-        { fontSize: 10 },
-      ]}
-    >
       {module}
     </Text>
-    <Text>{score}</Text>
+    <Image src={png} style={{ height: "64px", width: "64px" }}></Image>
-    <Text>Out of {total}</Text>
+    <View
+      style={[
+        styles.textColor,
+        {
+          display: "flex",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 10,
+          gap: 8,
+        },
+      ]}
+    >
+      <Text style={styles.textBold}>{score}</Text>
+      <Text style={{ fontSize: 8 }}>out of {total}</Text>
+    </View>
   </View>
 );

src/interfaces/module.scores.ts

@@ -5,4 +5,5 @@ export interface ModuleScore {
     total: number;
     module: Module | 'Overall';
     feedback?: string,
+    png?: string,
   }

src/pages/api/stats/[id]/export.tsx

@@ -125,6 +125,15 @@ const generateQRCode = async (link: string) => {
   }
 };
 
+type RADIAL_PROGRESS_COLOR = 'laranja' | 'azul';
+
+const getRadialProgressPNG = (color: RADIAL_PROGRESS_COLOR, score: number, total: number) => {
+  const percent = (score / total) * 100;
+  const remainder = percent % 10;
+  const roundedPercent = percent - remainder;
+  return `public/radial_progress/${color}_${roundedPercent}.png`;
+}
+
 async function post(req: NextApiRequest, res: NextApiResponse) {
   if (req.session.user) {
     const { id } = req.query as { id: string };
@@ -154,7 +163,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
       const user = docUser.data() as User;
 
       const stats = docsSnap.docs.map((d) => d.data());
-      const results = stats.reduce((accm: ModuleScore[], { module, score }) => {
+      const results = (stats.reduce((accm: ModuleScore[], { module, score }) => {
         const fixedModuleStr = module[0].toUpperCase() + module.substring(1);
         if (accm.find((e: ModuleScore) => e.module === fixedModuleStr)) {
           return accm.map((e: ModuleScore) => {
@@ -179,7 +188,13 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
             feedback: getFeedback(module),
           },
         ];
-      }, []) as ModuleScore[];
+      }, []) as ModuleScore[]).map((moduleScore) => {
+        const { score, total } = moduleScore;
+        return {
+          ...moduleScore,
+          png: getRadialProgressPNG('azul', score, total),
+        }
+      });
 
       const [stat] = stats as Stat[];
 
@@ -196,6 +211,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
         module: "Overall",
         score: overallScore,
         total: overallTotal,
+        png: getRadialProgressPNG('laranja', overallScore, overallTotal),
       } as ModuleScore;
       const testDetails = [overallDetail, ...results];
       const renderDetails = () => {