Merge pull request #17283 from edx/alasdair/LEARNER-3935-learner-analytics-dashboard-tweaks

LEARNER-3935 Last minute updates

lms/static/js/learner_analytics_dashboard/GradeTable.jsx

@@ -30,35 +30,41 @@ class GradeTable extends React.Component {
         return value;
       }
     });
-    const multipleAssessments = groupData.length > 1;
+    const multipleAssignments = groupData.length > 1;
 
     const rows = groupData.map(({assignment_type, total_possible, total_earned, passing_grade}, index) => {
-      const label = multipleAssessments ? `${assignment_type} ${index + 1}` : assignment_type; 
+      const label = multipleAssignments ? `${assignment_type} ${index + 1}` : assignment_type; 
       return (
         <tr key={index}>
           <td>{label}</td>
           <td>{passing_grade}/{total_possible}</td>
-          <td>{total_earned <= 0 ? '-' : total_earned}/{total_possible}</td>
+          <td>{total_earned}/{total_possible}</td>
        </tr>
       );
     });
 
-    return <tbody className="type-group"
-                  key={groupIndex}>{rows}</tbody>;
+    return <tbody className="type-group" key={groupIndex}>{rows}</tbody>;
   }
   
   render() {
-    const {assignmentTypes} = this.props;
+    const {assignmentTypes, passingGrade, percentGrade} = this.props;
     return (
       <table className="table grade-table">
         <thead className="table-head">
           <tr>
-            <th>Assessment</th>
+            <th>Assignment</th>
             <th>Passing</th>
             <th>You</th>
           </tr>
         </thead>
         {assignmentTypes.map((type, index) => this.getTableGroup(type, index))}
+        <tfoot>
+          <tr className="totals">
+            <td>Totals</td>
+            <td>{passingGrade}%</td>
+            <td>*{percentGrade}%</td>
+          </tr>
+        </tfoot>
        </table>
     )
   }
@@ -66,7 +72,9 @@ class GradeTable extends React.Component {
 
 GradeTable.propTypes = {
   assignmentTypes: PropTypes.array.isRequired,
-  grades: PropTypes.array.isRequired
+  grades: PropTypes.array.isRequired,
+  passingGrade: PropTypes.number.isRequired,
+  percentGrade: PropTypes.number.isRequired
 }
 
 export default GradeTable;

lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx

@@ -51,14 +51,11 @@ function getStreakIcons(count) {
 
 function getStreakString(count) {
   const unit = (count ===1) ? 'week' : 'weeks';
-  return `Logged in ${count} ${unit} in a row`;
+  return `Active ${count} ${unit} in a row`;
 }
 
 export function LearnerAnalyticsDashboard(props) {
-  const {grading_policy, grades, schedule, week_streak, weekly_active_users, discussion_info, profile_images} = props;
-  // temp. for local dev
-  // const week_streak = 3;
-  // const weekly_active_users = 83400;
+  const {grading_policy, grades, schedule, week_streak, weekly_active_users, discussion_info, profile_images, passing_grade, percent_grade} = props;
   const gradeBreakdown = grading_policy.GRADER.map(({type, weight}, index) => {
     return {
       value: weight,
@@ -96,9 +93,13 @@ export function LearnerAnalyticsDashboard(props) {
             </div>
           }
 
-          <h3 className="section-heading">Graded Assessments</h3>
+          <h3 className="section-heading">Graded Assignments</h3>
           <div className="graded-assessments-wrapper">
-            <GradeTable assignmentTypes={assignmentTypes} grades={grades} />
+            <GradeTable assignmentTypes={assignmentTypes}
+                        grades={grades}
+                        passingGrade={passing_grade}
+                        percentGrade={percent_grade} />
+            <div className="footnote">* Your current grade is calculated based on all assignments, including those you have not yet completed.</div>
           </div>
         </div>
         <div className="analytics-group">

lms/static/sass/features/_learner-analytics-dashboard.scss

@@ -337,6 +337,7 @@ $trophy-gold: #f39c12;
 
       .user-count {
         margin-top: -10px;
+        font-weight: 600;
       }
     }
   }