Added styling infrastructure

lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx

@@ -5,22 +5,23 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import CircleChart from './CircleChart';
 import CircleChartLegend from './CircleChartLegend';
+import Table from './Table';
 
 export function LearnerAnalyticsDashboard(props) {
   console.log('props: ', props);
   const data = [
       {
-        color: '#7ab',
+        color: '#386F77',
         value: 0.15,
         label: 'Chucky'
       },
       {
-        color: '#ebb90d',
+        color: '#1ABC9C',
         value: 0.25,
         label: 'Michael Myers'
       },
       {
-        color: 'hotpink',
+        color: '#92C9D3',
         value: 0.3,
         label: 'Freddy Krueger'
       },
@@ -31,21 +32,53 @@ export function LearnerAnalyticsDashboard(props) {
       }
   ];
 
+  const tableHeadings = ['Assessment', 'Passing', 'You'];
+  const tableData = [
+    {
+      label: 'Problem Set 1',
+      user: '12',
+      passing: '20',
+      total: '30'
+    },
+    {
+      label: 'Problem Set 2',
+      user: '20',
+      passing: '10',
+      total: '20'
+    },
+    {
+      label: 'Problem Set 3',
+      user: '0',
+      passing: '40',
+      total: '50'
+    }
+  ];
+
   return (
-    <div className="analytics-group">
-      <h2>Grading</h2>
-      <h3>Weight</h3>
-      <div className="grading-weight-wrapper">
-        <CircleChart
-          slices={data}
-          centerHole={true}
-          sliceBorder={{
-              strokeColor: '#fff',
-              strokeWidth: 1
-          }}
-        />
+    <div className="learner-analytics-wrapper">
+      <div className="analytics-group">
+        <h2>Grading</h2>
+        <h3>Weight</h3>
+        <div className="grading-weight-wrapper">
+          <div className="chart-wrapper">
+            <CircleChart
+              slices={data}
+              centerHole={true}
+              sliceBorder={{
+                  strokeColor: '#fff',
+                  strokeWidth: 1
+              }}
+            />
+          </div>
+          <CircleChartLegend data={data} />
+        </div>
+
+        <h3>Graded Assessments</h3>
+        <div className="graded-assessments-wrapper">
+          <Table headings={tableHeadings} data={tableData} />
+          <p class="footnote">*Calculated based on current average</p>
+        </div>
       </div>
-      <CircleChartLegend data={data} />
     </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}) => {
+      return (
+        <tr>
+          <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) => <th>{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;

lms/static/sass/_build-lms-v2.scss

@@ -32,6 +32,7 @@
 @import 'features/course-search';
 @import 'features/course-sock';
 @import 'features/course-upgrade-message';
+@import 'features/learner-analytics-dashboard';
 
 // Responsive Design
 @import 'header';

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

+.learner-analytics-dashboard {
+    
+}