Show results in a table and map risk levels to colors

UniversityOfHelsinkiCS · Nov 24, 2023 · f742bbf · f742bbf
1 parent 8736641
commit f742bbf
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 75 deletions.
diff --git a/src/client/components/ResultPage/CountryResults.tsx b/src/client/components/ResultPage/CountryResults.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import { Locales, Result } from '@backend/types'
 import styles from '../../styles'
 import { CountryData } from '../../types'
-import Markdown from '../Common/Markdown'
+import RiskElement from './RiskElement'
 
 const { resultStyles } = styles
 
@@ -32,24 +32,21 @@ const CountryResults = ({
 
   return (
     <Box sx={resultStyles.resultWrapper}>
-      {country.corruption && (
-        <Box sx={resultStyles.card}>
-          {t('results:corruptionRank')}: {country.corruption}
-          {corruptionText && <Markdown>{corruptionText}</Markdown>}
-        </Box>
-      )}
-      <Box sx={resultStyles.card}>
-        {t('results:stabilityRank')}: {country.stability}
-      </Box>
-      <Box sx={resultStyles.card}>
-        {t('results:HCIrank')}: {country.hci}
-      </Box>
-      {country.safetyLevel && (
-        <Box sx={resultStyles.card}>
-          {t('results:safetyLevel')}: {country.safetyLevel}
-          {safetyLevelText && <Markdown>{safetyLevelText}</Markdown>}
-        </Box>
-      )}
+      <RiskElement
+        infoText={corruptionText}
+        resultText={t('results:corruptionRank')}
+        risk={country.corruption}
+      />
+      <RiskElement
+        resultText={t('results:stabilityRank')}
+        risk={country.stability}
+      />
+      <RiskElement resultText={t('results:HCIrank')} risk={country.hci} />
+      <RiskElement
+        infoText={safetyLevelText}
+        resultText={t('results:safetyLevel')}
+        risk={country.safetyLevel}
+      />
     </Box>
   )
 }

diff --git a/src/client/components/ResultPage/RenderAnswers.tsx b/src/client/components/ResultPage/RenderAnswers.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Locales } from '@backend/types'
-import { Box } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 
 import { extraOrganisations } from '../../util/organisations'
 
@@ -73,8 +73,10 @@ const RenderAnswers = ({
           {question.parentId === null ? (
             <>
               <Box sx={resultStyles.card}>
-                {question.title[language as keyof Locales]}:{' '}
-                {answers[question.id] as string}
+                <Typography variant="body1">
+                  {question.title[language as keyof Locales]}:{' '}
+                  {answers[question.id] as string}
+                </Typography>
               </Box>
               {survey?.Questions.filter((q) => q.parentId === question.id)?.map(
                 (q) => (
@@ -88,7 +90,9 @@ const RenderAnswers = ({
                           paddingLeft: '10px',
                         }}
                       >
-                        {q.title[language as keyof Locales]}: {answers[q.id]}
+                        <Typography variant="body1">
+                          {q.title[language as keyof Locales]}: {answers[q.id]}
+                        </Typography>
                       </Box>
                     ) : null}
                   </Box>
@@ -98,12 +102,14 @@ const RenderAnswers = ({
           ) : null}
           {question.id === 1 && (
             <Box sx={resultStyles.card}>
-              {t('facultySelect:title')}:{' '}
-              {
-                organisations.find(
-                  (faculty) => faculty.code === answers.faculty
-                )?.name[language as keyof Locales]
-              }
+              <Typography variant="body1">
+                {t('facultySelect:title')}:{' '}
+                {
+                  organisations.find(
+                    (faculty) => faculty.code === answers.faculty
+                  )?.name[language as keyof Locales]
+                }
+              </Typography>
             </Box>
           )}
         </Box>

diff --git a/src/client/components/ResultPage/TotalRisk.tsx b/src/client/components/ResultPage/TotalRisk.tsx
@@ -1,17 +1,22 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Box } from '@mui/material'
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  Typography,
+} from '@mui/material'
 import { Question, Result } from '@backend/types'
 import { countryRisk, universityRisk } from '../../util/risks'
 
 import useCountry from '../../hooks/useCountryData'
 import { useResultData } from '../../contexts/ResultDataContext'
 
-import styles from '../../styles'
 import CountryResults from './CountryResults'
 
-const { resultStyles } = styles
-
 const TotalRisk = ({
   selectedCountryCode,
   questions,
@@ -49,27 +54,27 @@ const TotalRisk = ({
 
   const riskArray = [
     {
-      id: 1,
+      id: 'country',
       text: t('risks:countryRiskLevel'),
       riskLevel: countryRisk(country),
     },
     {
-      id: 2,
+      id: 'university',
       text: t('risks:universityRiskLevel'),
       riskLevel: universityRisk(resultData['20'], resultData['21']),
     },
     {
-      id: 3,
+      id: 'funder',
       text: t('risks:funderRiskLevel'),
       riskLevel: funderRisk,
     },
     {
-      id: 4,
+      id: 'funding',
       text: t('risks:fundingRiskLevel'),
       riskLevel: fundingRisk,
     },
     {
-      id: 5,
+      id: 'duration',
       text: t('risks:durationRiskLevel'),
       riskLevel: durationRisk,
     },
@@ -84,36 +89,83 @@ const TotalRisk = ({
     ) / riskArray.length
   )
 
+  const riskCellColors: any = {
+    1: '#2ecc71',
+    2: '#f1c40f',
+    3: '#e74c3c',
+  }
+
   return (
-    <Box sx={resultStyles.resultElementWrapper}>
-      <Box sx={resultStyles.card}>
-        <b>
-          {t('risks:totalRiskLevel')}: {totalRisk}
-        </b>
-        {country && (
-          <Box sx={resultStyles.card}>
-            {t('risks:countryRiskLevel')}:{' '}
-            {countryRisk(country) === 3 ? (
-              <>
-                {countryRisk(country)}
+    <TableContainer>
+      <Table sx={{ width: '50%' }}>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <Typography variant="body1">
+                {t('risks:totalRiskLevel')}
+              </Typography>
+            </TableCell>
+            <TableCell
+              align="right"
+              sx={{
+                backgroundColor: riskCellColors[totalRisk],
+                borderRadius: '25%',
+              }}
+            >
+              {totalRisk}
+            </TableCell>
+          </TableRow>
+          {country && (
+            <>
+              <TableRow>
+                <TableCell>
+                  <Typography variant="body1">
+                    {t('risks:countryRiskLevel')}
+                  </Typography>
+                </TableCell>
+                <TableCell
+                  align="right"
+                  sx={{
+                    backgroundColor:
+                      riskCellColors[riskArray[0].riskLevel as number],
+                    borderRadius: '25%',
+                  }}
+                >
+                  {riskArray[0].riskLevel}
+                </TableCell>
+              </TableRow>
+              {riskArray[0].riskLevel === 1 ? (
+                <Box sx={{ m: 2, width: '500px', paddingLeft: '20px' }}>
+                  {t('risks:noRisk')}
+                </Box>
+              ) : (
                 <CountryResults country={country} results={results} />
-              </>
-            ) : (
-              t('risks:noRisk')
-            )}
-          </Box>
-        )}
-        {riskArray.map(
-          (risk) =>
-            risk.riskLevel === 3 &&
-            risk.id !== 1 && (
-              <Box key={risk.id} sx={resultStyles.card}>
-                {risk.text}: {risk.riskLevel}
-              </Box>
-            )
-        )}
-      </Box>
-    </Box>
+              )}
+            </>
+          )}
+          {riskArray.map(
+            (risk) =>
+              risk.riskLevel === 3 &&
+              risk.id !== 'country' && (
+                <TableRow key={risk.id}>
+                  <TableCell>
+                    <Typography variant="body1">{risk.text}</Typography>
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      backgroundColor: riskCellColors[risk.riskLevel as number],
+                      borderRadius: '25%',
+                    }}
+                  >
+                    {risk.riskLevel}
+                  </TableCell>
+                </TableRow>
+              )
+          )}
+        </TableBody>
+      </Table>
+    </TableContainer>
   )
 }
 

diff --git a/src/client/locales/en.json b/src/client/locales/en.json
@@ -48,10 +48,10 @@
     "endMessage": "Thank you for using Riksutin!",
     "backToMessage": "Back to selections",
     "selectedCountry": "Valitsemasi yhteistyökumppanin sijaintimaa",
-    "corruptionRank": "Korruptio",
-    "stabilityRank": "Poliittinen vakaus",
-    "HCIrank": "Inhimillinen kehitys",
-    "safetyLevel": "Turvallisuustaso"
+    "corruptionRank": "Corruption",
+    "stabilityRank": "Political stability",
+    "HCIrank": "Human development",
+    "safetyLevel": "Safety level"
   },
   "contact": {
     "title": "Contact",

diff --git a/src/client/locales/sv.json b/src/client/locales/sv.json
@@ -48,10 +48,10 @@
     "endMessage": "Tack för att du använder Riksutin!",
     "backToMessage": "Tillbaka till val",
     "selectedCountry": "Valitsemasi yhteistyökumppanin sijaintimaa",
-    "corruptionRank": "Sijoitus korruptioasteikolla",
-    "stabilityRank": "Poliittinen vakaus",
-    "HCIrank": "Inhimillinen kehitys",
-    "safetyLevel": "Turvallisuustaso"
+    "corruptionRank": "Corruption",
+    "stabilityRank": "Political stability",
+    "HCIrank": "Human development",
+    "safetyLevel": "Safety level"
   },
   "contact": {
     "title": "Kontakt",

diff --git a/src/client/types.ts b/src/client/types.ts
@@ -82,6 +82,6 @@ export type CountryData = {
   corruption: number
   stability: number
   hci: number
-  safetyLevel: string
+  safetyLevel: number
   universities: string[]
 }