Grade table data progressing

lms/static/js/learner_analytics_dashboard/GradeTable.jsx

+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+const exGrades = [  
+  {  
+    "assignment_type":"Exam",
+    "total_possible":6.0,
+    "total_earned":3.0
+  },
+  {  
+    "assignment_type":"Homework",
+    "total_possible":5.0,
+    "total_earned":4.0
+  },
+  {  
+    "assignment_type":"Homework",
+    "total_possible":11.0,
+    "total_earned":0.0
+  }
+];
+
+class GradeTable extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  
+  getTableGroup(type) {
+    const {data} = this.props;
+    const groupData = data.filter(value => {
+      if (value['assignment_type'] === type) {
+        return value;
+      }
+    });
+    const multipleAssessments = groupData.length > 1;
+
+    const rows = groupData.map(({assignment_type, total_possible, total_earned}, index) => {
+      const label = multipleAssessments ? `${assignment_type} ${index + 1}` : assignment_type; 
+      return (
+        <tr key={index}>
+          <td>{label}</td>
+          <td>{total_possible}/{total_possible}</td>
+          <td>{total_earned}/{total_possible}</td>
+       </tr>
+      );
+    });
+
+    return <tbody>{rows}</tbody>;
+  }
+  
+  render() {
+    const {assignmentTypes} = this.props;
+    return (
+      <table className="table">
+        <thead className="table-head">
+          <tr>
+            <th>Assessment</th>
+            <th>You</th>
+            <th>Passing</th>
+          </tr>
+        </thead>
+        {assignmentTypes.map(type => this.getTableGroup(type))}
+       </table>
+    )
+  }
+};
+
+GradeTable.propTypes = {
+  data: PropTypes.array.isRequired
+}
+
+export default GradeTable;

lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx

@@ -5,42 +5,41 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import CircleChart from './CircleChart';
 import CircleChartLegend from './CircleChartLegend';
-import Table from './Table';
+import GradeTable from './GradeTable';
 
 export function LearnerAnalyticsDashboard(props) {
 console.log('props: ', props);
-  const {grading_policy} = props;
+  const {grading_policy, grades} = props;
+
   const gradeBreakdown = grading_policy.GRADER.map(({type, weight}, index) => {
     return {
       value: weight,
       label: type,
       sliceIndex: index + 1
     }
-  }).sort((a, b) => a.value > b.value);
-  // const data = [
-  //     {
-  //       color: '#386F77',
-  //       value: 0.50,
-  //       label: 'Chucky'
-  //     },
-  //     {
-  //       color: '#1ABC9C',
-  //       value: 0.25,
-  //       label: 'Michael Myers'
-  //     },
-  //     {
-  //       color: '#92C9D3',
-  //       value: 0.3,
-  //       label: 'Freddy Krueger'
-  //     },
-  //     {
-  //       color: '#73bde7',
-  //       value: 0.15,
-  //       label: 'Jason Vorhees'
-  //     }
-  // ];
+  }).sort((a, b) => a.value < b.value);
+
+  const exGrades = [  
+    {  
+      "assignment_type":"Exam",
+      "total_possible":6.0,
+      "total_earned":3.0
+    },
+    {  
+      "assignment_type":"Homework",
+      "total_possible":5.0,
+      "total_earned":4.0
+    },
+    {  
+      "assignment_type":"Homework",
+      "total_possible":11.0,
+      "total_earned":0.0
+    }
+  ];
+
+  // Get a list of assignment types minus duplicates
+  const assignmentTypes = [...new Set(gradeBreakdown.map(value => value['label']))];
 
-  const tableHeadings = ['Assessment', 'Passing', 'You'];
   const tableData = [
     {
       label: 'Problem Set 1',
@@ -83,10 +82,16 @@ console.log('props: ', props);
 
         <h3>Graded Assessments</h3>
         <div className="graded-assessments-wrapper">
-          <Table headings={tableHeadings} data={tableData} />
+          <GradeTable assignmentTypes={assignmentTypes} data={exGrades} />
           <p className="footnote">*Calculated based on current average</p>
         </div>
       </div>
+      <div className="discussions-group">
+        <h2>Discussions</h2>
+      </div>
+      <div className="timing-group">
+        <h2>Timing</h2>
+      </div>
     </div>
   );
 }

lms/static/js/learner_analytics_dashboard/Table.jsx

-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-class Table extends React.Component {
-  constructor(props) {
-    super(props);
-    this.getTableHead = this.getTableHead.bind(this);
-  }
-  
-  getTableBody() {
-    const {data} = this.props;
-    const rows = data.map(({label, user, passing, total}, index) => {
-      return (
-        <tr key={index}>
-          <td>{label}</td>
-          <td>{user}/{total}</td>
-          <td>{passing}/{total}</td>
-       </tr>
-      );
-    });
-
-    return <tbody>{rows}</tbody>;
-  }
-  
-  getTableHead() {
-    const {headings} = this.props;
-    const html = headings.map((title, index) => <th key={index}>{title}</th>);
-    return (
-      <thead className="table-head">
-        <tr>
-          {html} 
-        </tr>
-      </thead>
-    );
-  }
-  
-  render() {
-    return (
-      <table className="table">
-        <colgroup>
-          <col />
-          <col span="2"/>
-          <col />
-        </colgroup>
-        {this.getTableHead()}
-        {this.getTableBody()}
-       </table>
-    )
-  }
-};
-
-Table.propTypes = {
-  headings: PropTypes.array.isRequired,
-  data: PropTypes.array.isRequired
-}
-
-export default Table;