Adding in React components

lms/static/js/learner_analytics_dashboard/CircleChartLegend.jsx

@@ -21,14 +21,38 @@ class CircleChartLegend extends React.Component {
                style={style}
                aria-hidden="true"></div>
           <span className="label">{label}</span>
-          <span className="percentage">{value}%</span>
+          <span className="percentage">{this.getPercentage(value)}</span>
         </li>
       );
     });
   }
 
+  getPercentage(value) {
+    const num = value * 100;
+
+    return `${num}%`;
+  }
+
+  renderList() {
+    return (
+      <ul className="legend-list">
+        {this.getList()}
+      </ul>
+    );
+  }
+
+  render() {
+    return (
+      <div className="legend">
+        {this.renderList()}
+      </div>
+    );
+  }
+}
+
+
 CircleChartLegend.propTypes = {
   data: PropTypes.array.isRequired
-};
+}
 
 export default CircleChartLegend;

lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx

+/* global gettext */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import CircleChart from './CircleChart';
+import CircleChartLegend from './CircleChartLegend';
+
+export function LearnerAnalyticsDashboard(props) {
+  console.log('props: ', props);
+  const data = [
+      {
+        color: '#7ab',
+        value: 0.15,
+        label: 'Chucky'
+      },
+      {
+        color: '#ebb90d',
+        value: 0.25,
+        label: 'Michael Myers'
+      },
+      {
+        color: 'hotpink',
+        value: 0.3,
+        label: 'Freddy Krueger'
+      },
+      {
+        color: '#73bde7',
+        value: 0.3,
+        label: 'Jason Vorhees'
+      }
+  ];
+
+  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>
+      <CircleChartLegend data={data} />
+    </div>
+  );
+}
+

lms/static/js/learner_analytics_dashboard/index.jsx

-/* global gettext */
-/* eslint one-var: ["error", "always"] */
-/* eslint no-alert: "error" */
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-
-class RenderPage extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div className="my-test-div">
-        <h2>A React App!!!</h2>
-      </div>
-    );
-  }
-}
-
-export class LearnerAnalyticsDashboard {
-  constructor(context) {
-    ReactDOM.render(
-      <RenderPage context={context} />,
-      document.getElementById('root'),
-    );
-  }
-}

openedx/features/learner_analytics/templates/learner_analytics/dashboard.html

@@ -52,6 +52,15 @@ from openedx.features.course_experience import course_home_page_title
         </div>
     </header>
     <div class="page-content">
+        <div id="root" class="learner-analytics-dashboard">
+            ${static.renderReact(
+              component="LearnerAnalyticsDashboard",
+              id="react-learner-analytics-dashboard",
+              props={
+                'data': 'data'
+              }
+            )}
+        </div>
     </div>
 </div>
 </%block>

webpack.common.config.js

@@ -25,7 +25,7 @@ module.exports = {
         // LMS
         SingleSupportForm: './lms/static/support/jsx/single_support_form.jsx',
         AlertStatusBar: './lms/static/js/accessible_components/StatusBarAlert.jsx',
-        LearnerAnalyticsDashboard: './lms/static/js/learner_analytics_dashboard/index.jsx',
+        LearnerAnalyticsDashboard: './lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx',
 
         // Features
         CourseGoals: './openedx/features/course_experience/static/course_experience/js/CourseGoals.js',