[Students] Improve appearance of credit graph tooltip

UniversityOfHelsinkiCS · Oct 21, 2024 · 17ef03d · 17ef03d
1 parent 2bf804d
commit 17ef03d
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 96 deletions.
diff --git a/services/frontend/src/components/CreditAccumulationGraphHighCharts/CreditGraphTooltip.jsx b/services/frontend/src/components/CreditAccumulationGraphHighCharts/CreditGraphTooltip.jsx
@@ -1,66 +1,60 @@
 import { Card, Icon } from 'semantic-ui-react'
 
-import './creditGraphTooltip.css'
+const getCardHeader = (title, isStudyModuleCredit) => (
+  <Card.Header content={`${title}${isStudyModuleCredit ? ' [Study Module]' : ''}`} style={{ whiteSpace: 'normal' }} />
+)
 
-const getCardHeader = (title, isStudyModuleCredit) =>
-  isStudyModuleCredit ? (
-    <Card.Header className="tooltipHeader">{`${title} [Study Module]`}</Card.Header>
-  ) : (
-    <Card.Header className="tooltipHeader">{title}</Card.Header>
-  )
+const getCorrectIcon = (passed, isStudyModuleCredit) => {
+  if (isStudyModuleCredit) {
+    return <Icon color="purple" name="certificate" style={{ margin: 0 }} />
+  }
+  if (passed) {
+    return <Icon color="green" name="check circle" style={{ margin: 0 }} />
+  }
+  return null
+}
 
-const getCardMeta = (name, date) => (
-  <Card.Meta className="tooltipMeta">
-    <div>
-      <Icon.Group size="small">
-        <Icon name="student" />
-        <Icon corner name="hashtag" />
-      </Icon.Group>
-      <span>{name}</span>
-    </div>
-    <div>
-      <Icon name="calendar" size="small" />
-      <span>{date}</span>
-    </div>
-  </Card.Meta>
-)
+const getCardDescription = (credits, date, grade, passed, isStudyModuleCredit) => {
+  const items = [
+    {
+      title: 'Credits',
+      value: credits,
+    },
+    {
+      title: 'Grade',
+      value: grade,
+    },
+    {
+      title: 'Date',
+      value: date,
+    },
+    {
+      title: isStudyModuleCredit ? 'Module' : 'Passed',
+      value: getCorrectIcon(passed, isStudyModuleCredit),
+    },
+  ]
 
-const getCardDescription = (credits, grade, passed, isStudyModuleCredit) => (
-  <Card.Description className="tooltipBody">
-    <div className="tooltipBodyItem">
-      <div className="tooltipBodyTitle">Credits</div>
-      <div className="tooltipBodyValue">{credits}</div>
-    </div>
-    <div className="tooltipBodyItem">
-      <div className="tooltipBodyTitle">Grade</div>
-      <div className="tooltipBodyValue">{grade}</div>
-    </div>
-    <div className="tooltipBodyItem">
-      <div className="tooltipBodyTitle">{isStudyModuleCredit ? 'module' : 'Passed'}</div>
-      <div className="tooltipBodyValue">
-        {isStudyModuleCredit ? ( // eslint-disable-line
-          <Icon color="purple" name="certificate" />
-        ) : passed ? (
-          <Icon color="green" name="check circle outline" />
-        ) : (
-          <Icon color="red" name="circle outline" />
-        )}
-      </div>
-    </div>
-  </Card.Description>
-)
+  return (
+    <Card.Description style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridRowGap: '0.25rem' }}>
+      {items.map(({ title, value }) => (
+        <div key={title} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', fontWeight: 'bold' }}>
+          {title}
+          <div style={{ fontSize: '1rem' }}>{value}</div>
+        </div>
+      ))}
+    </Card.Description>
+  )
+}
 
 export const CreditGraphTooltip = ({ payload = [] }) => {
   if (payload.length === 0) return null
 
-  const { name } = payload[0]
   const { credits, date, grade, passed, isStudyModuleCredit, courseCode, courseName } = payload[0].payload
   return (
     <Card>
       <Card.Content>
         {getCardHeader(`${courseName} (${courseCode})`, isStudyModuleCredit)}
-        {getCardMeta(name, date)}
-        {getCardDescription(credits, grade, passed, isStudyModuleCredit)}
+        {getCardDescription(credits, date, grade, passed, isStudyModuleCredit)}
       </Card.Content>
     </Card>
   )

diff --git a/...s/frontend/src/components/CreditAccumulationGraphHighCharts/creditAccumulationGraphHC.css b/...s/frontend/src/components/CreditAccumulationGraphHighCharts/creditAccumulationGraphHC.css
diff --git a/services/frontend/src/components/CreditAccumulationGraphHighCharts/creditGraphTooltip.css b/services/frontend/src/components/CreditAccumulationGraphHighCharts/creditGraphTooltip.css
diff --git a/services/frontend/src/components/CreditAccumulationGraphHighCharts/index.jsx b/services/frontend/src/components/CreditAccumulationGraphHighCharts/index.jsx
@@ -14,7 +14,6 @@ import { useLanguage } from '@/components/LanguagePicker/useLanguage'
 import { DISPLAY_DATE_FORMAT } from '@/constants/date'
 import { reformatDate } from '@/util/timeAndDate'
 import { CreditGraphTooltip } from './CreditGraphTooltip'
-import './creditAccumulationGraphHC.css'
 
 exporting(ReactHighstock.Highcharts)
 exportData(ReactHighstock.Highcharts)
@@ -209,7 +208,6 @@ const singleStudentTooltipFormatter = (point, student, getTextIn) => {
 
   const payload = [
     {
-      name: student.studentNumber,
       payload: {
         ...targetCourse,
         courseCode: targetCourse.course.code,
@@ -544,8 +542,8 @@ export const CreditAccumulationGraphHighCharts = ({
   )
 
   return (
-    <div className="graphContainer">
-      <div className="graph-options">
+    <div style={{ minWidth: '400px', marginBottom: '15px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '1rem 0' }}>
         <div>
           {!singleStudent && studyPlanFilterIsActive && (
             <Radio