Added the missing radial progress

This commit is contained in:
Joao Ramos
2024-01-15 19:32:11 +00:00
parent e47607597c
commit 46b9fe50ef
2 changed files with 20 additions and 3 deletions

View File

@@ -25,6 +25,8 @@ interface Props {
qrcode: string; qrcode: string;
renderDetails: React.ReactNode; renderDetails: React.ReactNode;
title: string; title: string;
summaryPNG: string;
summaryScore: string;
} }
const TestReport = ({ const TestReport = ({
@@ -39,6 +41,8 @@ const TestReport = ({
logo, logo,
qrcode, qrcode,
renderDetails, renderDetails,
summaryPNG,
summaryScore,
}: Props) => { }: Props) => {
const defaultTextStyle = [styles.textFont, { fontSize: 8 }]; const defaultTextStyle = [styles.textFont, { fontSize: 8 }];
const defaultSkillsTextStyle = [styles.textFont, { fontSize: 8 }]; const defaultSkillsTextStyle = [styles.textFont, { fontSize: 8 }];
@@ -104,8 +108,16 @@ const TestReport = ({
> >
Performance Summary Performance Summary
</Text> </Text>
<View> <View style={{ display: "flex", flexDirection: "row", gap: 16 }}>
<Text style={[styles.textFont, { fontSize: 8 }]}>{summary}</Text> <View style={{ flex: 1 }}>
<Text style={[styles.textFont, { fontSize: 8 }]}>{summary}</Text>
</View>
<View style={[styles.textFont, styles.radialContainer]} debug>
<Image src={summaryPNG} style={styles.image64}></Image>
<View style={[styles.textColor, styles.radialResultContainer]} debug>
<Text style={styles.textBold}>{summaryScore}</Text>
</View>
</View>
</View> </View>
</View> </View>
<View style={[{ paddingTop: 30 }, styles.separator]}></View> <View style={[{ paddingTop: 30 }, styles.separator]}></View>

View File

@@ -263,12 +263,14 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
); );
const overallResult = overallScore / overallTotal; const overallResult = overallScore / overallTotal;
const overallPNG = getRadialProgressPNG("laranja", overallScore, overallTotal);
// generate the overall detail report // generate the overall detail report
const overallDetail = { const overallDetail = {
module: "Overall", module: "Overall",
score: overallScore, score: overallScore,
total: overallTotal, total: overallTotal,
png: getRadialProgressPNG("laranja", overallScore, overallTotal), png: overallPNG,
} as ModuleScore; } as ModuleScore;
const testDetails = [overallDetail, ...finalResults]; const testDetails = [overallDetail, ...finalResults];
@@ -301,6 +303,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
}; };
const { title, details } = getCustomData(); const { title, details } = getCustomData();
const pdfStream = await ReactPDF.renderToStream( const pdfStream = await ReactPDF.renderToStream(
<TestReport <TestReport
title={title} title={title}
@@ -314,6 +317,8 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
renderDetails={details} renderDetails={details}
logo={"public/logo_title.png"} logo={"public/logo_title.png"}
qrcode={qrcode} qrcode={qrcode}
summaryPNG={overallPNG}
summaryScore={`${(overallResult * 100).toFixed(0)}%`}
/> />
); );