Chart and legend data ordered

lms/static/js/learner_analytics_dashboard/CircleChart.jsx

@@ -34,7 +34,7 @@ class CircleChart extends React.Component {
     let lastY = 0;
 
     // Reverse a copy of the array so order start at 12 o'clock
-    return slices.map(({ value }, index) => {
+    return slices.slice(0).reverse().map(({ value, sliceIndex }, index) => {
       // Should we just draw a circle?
       if (value === total) {
         return (
@@ -77,10 +77,9 @@ class CircleChart extends React.Component {
 
       lastX = nextX;
       lastY = nextY;
-      const sliceNumber = index + 1;
 
       return <path d={d}
-                   className={`slice-${sliceNumber}`}
+                   className={`slice-${sliceIndex}`}
                    key={index}
                    stroke={strokeColor}
                    strokeWidth={strokeWidth} />;
@@ -110,7 +109,7 @@ CircleChart.defaultProps = {
 
 CircleChart.propTypes = {
   slices: PropTypes.array.isRequired,
-  centerHole: PropTypes.boolean,
+  centerHole: PropTypes.bool,
   sliceBorder: PropTypes.object
 };
 

lms/static/js/learner_analytics_dashboard/CircleChartLegend.jsx

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

lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx

@@ -10,16 +10,17 @@ import Table from './Table';
 export function LearnerAnalyticsDashboard(props) {
 console.log('props: ', props);
   const {grading_policy} = props;
-  const gradeBreakdown = grading_policy.GRADER.map(({type, weight}) => {
+  const gradeBreakdown = grading_policy.GRADER.map(({type, weight}, index) => {
     return {
       value: weight,
-      label: type
+      label: type,
+      sliceIndex: index + 1
     }
-  });
+  }).sort((a, b) => a.value > b.value);
   // const data = [
   //     {
   //       color: '#386F77',
-  //       value: 0.15,
+  //       value: 0.50,
   //       label: 'Chucky'
   //     },
   //     {
@@ -34,7 +35,7 @@ console.log('props: ', props);
   //     },
   //     {
   //       color: '#73bde7',
-  //       value: 0.3,
+  //       value: 0.15,
   //       label: 'Jason Vorhees'
   //     }
   // ];
@@ -83,7 +84,7 @@ console.log('props: ', props);
         <h3>Graded Assessments</h3>
         <div className="graded-assessments-wrapper">
           <Table headings={tableHeadings} data={tableData} />
-          <p class="footnote">*Calculated based on current average</p>
+          <p className="footnote">*Calculated based on current average</p>
         </div>
       </div>
     </div>

lms/static/js/learner_analytics_dashboard/Table.jsx

@@ -10,9 +10,9 @@ class Table extends React.Component {
   
   getTableBody() {
     const {data} = this.props;
-    const rows = data.map(({label, user, passing, total}) => {
+    const rows = data.map(({label, user, passing, total}, index) => {
       return (
-        <tr>
+        <tr key={index}>
           <td>{label}</td>
           <td>{user}/{total}</td>
           <td>{passing}/{total}</td>
@@ -25,7 +25,7 @@ class Table extends React.Component {
   
   getTableHead() {
     const {headings} = this.props;
-    const html = headings.map((title) => <th>{title}</th>);
+    const html = headings.map((title, index) => <th key={index}>{title}</th>);
     return (
       <thead className="table-head">
         <tr>

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

-$slices: #386F77, #1ABC9C, #386F77, #1ABC9C, #386F77, #1ABC9C;
-
+$slices: #386F77, #1ABC9C, #92C9D3, #397D1C, #A39D3D, #0E5AAA;
 .content-wrapper {
   .page-content.learner-analytics-dashboard-wrapper {
     flex-direction: column;
@@ -54,42 +53,30 @@ $slices: #386F77, #1ABC9C, #386F77, #1ABC9C, #386F77, #1ABC9C;
         height: 45px;
         border-radius: 25%;
         margin-right: 20px;
-      }
-
-      .percentage {
-        margin-left: auto;
-      }
 
-      &:nth-of-type(1) {
-        .color-swatch {
+        &.swatch-1 {
           background-color: nth($slices, 1);
         }
-      }
-      &:nth-of-type(2) {
-        .color-swatch {
+        &.swatch-2 {
           background-color: nth($slices, 2);
         }
-      }
-      &:nth-of-type(3) {
-        .color-swatch {
+        &.swatch-3 {
           background-color: nth($slices, 3);
         }
-      }
-      &:nth-of-type(4) {
-        .color-swatch {
+        &.swatch-4 {
           background-color: nth($slices, 4);
         }
-      }
-      &:nth-of-type(5) {
-        .color-swatch {
+        &.swatch-5 {
           background-color: nth($slices, 5);
         }
-      }
-      &:nth-of-type(6) {
-        .color-swatch {
+        &.swatch-6 {
           background-color: nth($slices, 6);
         }
       }
+
+      .percentage {
+        margin-left: auto;
+      }
     }
   }
 }