Using real data for the pie chart

lms/static/js/learner_analytics_dashboard/CircleChart.jsx

@@ -34,14 +34,14 @@ class CircleChart extends React.Component {
     let lastY = 0;
 
     // Reverse a copy of the array so order start at 12 o'clock
-    return slices.slice(0).reverse().map(({ color, value }, index) => {
+    return slices.map(({ value }, index) => {
       // Should we just draw a circle?
       if (value === total) {
         return (
           <circle r={radius}
                   cx={center}
                   cy={center}
-                  fill={color}
+                  className="slice-1"
                   key={index} />
         );
       }
@@ -77,9 +77,10 @@ class CircleChart extends React.Component {
 
       lastX = nextX;
       lastY = nextY;
+      const sliceNumber = index + 1;
 
       return <path d={d}
-                   fill={color}
+                   className={`slice-${sliceNumber}`}
                    key={index}
                    stroke={strokeColor}
                    strokeWidth={strokeWidth} />;

lms/static/js/learner_analytics_dashboard/CircleChartLegend.jsx

@@ -10,15 +10,14 @@ class CircleChartLegend extends React.Component {
   getList() {
     const {data} = this.props;
 
-    return data.map(({ color, value, label }) => {
-      const style = {
-        backgroundColor: color
-      }
+    return data.map(({ value, label }) => {
+      // const style = {
+      //   backgroundColor: color
+      // }
 
       return (
         <li className="legend-item">
           <div className="color-swatch"
-               style={style}
                aria-hidden="true"></div>
           <span className="label">{label}</span>
           <span className="percentage">{this.getPercentage(value)}</span>

lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx

@@ -8,29 +8,36 @@ import CircleChartLegend from './CircleChartLegend';
 import Table from './Table';
 
 export function LearnerAnalyticsDashboard(props) {
-  console.log('props: ', props);
-  const data = [
-      {
-        color: '#386F77',
-        value: 0.15,
-        label: 'Chucky'
-      },
-      {
-        color: '#1ABC9C',
-        value: 0.25,
-        label: 'Michael Myers'
-      },
-      {
-        color: '#92C9D3',
-        value: 0.3,
-        label: 'Freddy Krueger'
-      },
-      {
-        color: '#73bde7',
-        value: 0.3,
-        label: 'Jason Vorhees'
-      }
-  ];
+console.log('props: ', props);
+  const {grading_policy} = props;
+  const gradeBreakdown = grading_policy.GRADER.map(({type, weight}) => {
+    return {
+      value: weight,
+      label: type
+    }
+  });
+  // const data = [
+  //     {
+  //       color: '#386F77',
+  //       value: 0.15,
+  //       label: 'Chucky'
+  //     },
+  //     {
+  //       color: '#1ABC9C',
+  //       value: 0.25,
+  //       label: 'Michael Myers'
+  //     },
+  //     {
+  //       color: '#92C9D3',
+  //       value: 0.3,
+  //       label: 'Freddy Krueger'
+  //     },
+  //     {
+  //       color: '#73bde7',
+  //       value: 0.3,
+  //       label: 'Jason Vorhees'
+  //     }
+  // ];
 
   const tableHeadings = ['Assessment', 'Passing', 'You'];
   const tableData = [
@@ -62,7 +69,7 @@ export function LearnerAnalyticsDashboard(props) {
         <div className="grading-weight-wrapper">
           <div className="chart-wrapper">
             <CircleChart
-              slices={data}
+              slices={gradeBreakdown}
               centerHole={true}
               sliceBorder={{
                   strokeColor: '#fff',
@@ -70,7 +77,7 @@ export function LearnerAnalyticsDashboard(props) {
               }}
             />
           </div>
-          <CircleChartLegend data={data} />
+          <CircleChartLegend data={gradeBreakdown} />
         </div>
 
         <h3>Graded Assessments</h3>

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

+$slices: #386F77, #1ABC9C, #386F77, #1ABC9C, #386F77, #1ABC9C;
+
+.content-wrapper {
+  .page-content.learner-analytics-dashboard-wrapper {
+    flex-direction: column;
+  }
+}
+
 .learner-analytics-dashboard {
-    
+  .grading-weight-wrapper {
+    display: flex;
+    flex-direction: column;
+
+    .chart-wrapper {
+      width: 90px;
+      height: 90px;
+
+      .slice-1 {
+        fill: nth($slices, 1);
+      }
+      .slice-2 {
+        fill: nth($slices, 2);
+      }
+      .slice-3 {
+        fill: nth($slices, 3);
+      }
+      .slice-4 {
+        fill: nth($slices, 4);
+      }
+      .slice-5 {
+        fill: nth($slices, 5);
+      }
+      .slice-6 {
+        fill: nth($slices, 6);
+      }
+    }
+  }
+
+  .legend {
+    .legend-list {
+      list-style: none;
+      padding: 0;
+      margin: 20px;
+      width: 250px;
+    }
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .color-swatch {
+        width: 45px;
+        height: 45px;
+        border-radius: 25%;
+        margin-right: 20px;
+      }
+
+      .percentage {
+        margin-left: auto;
+      }
+
+      &:nth-of-type(1) {
+        .color-swatch {
+          background-color: nth($slices, 1);
+        }
+      }
+      &:nth-of-type(2) {
+        .color-swatch {
+          background-color: nth($slices, 2);
+        }
+      }
+      &:nth-of-type(3) {
+        .color-swatch {
+          background-color: nth($slices, 3);
+        }
+      }
+      &:nth-of-type(4) {
+        .color-swatch {
+          background-color: nth($slices, 4);
+        }
+      }
+      &:nth-of-type(5) {
+        .color-swatch {
+          background-color: nth($slices, 5);
+        }
+      }
+      &:nth-of-type(6) {
+        .color-swatch {
+          background-color: nth($slices, 6);
+        }
+      }
+    }
+  }
 }
+

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

@@ -52,13 +52,12 @@ from openedx.features.course_experience import course_home_page_title
             </nav>
         </div>
     </header>
-    <div class="page-content">
-        <div id="root" class="learner-analytics-dashboard">
+    <div class="page-content learner-analytics-dashboard-wrapper">
+        <div class="learner-analytics-dashboard">
             ${static.renderReact(
               component="LearnerAnalyticsDashboard",
               id="react-learner-analytics-dashboard",
               props={
-                'data': 'data',
                 'schedule': assignment_schedule,
                 'grading_policy': grading_policy,
               }