Merged in risk-color (pull request #40)

LAQ-42 - Color Code Student Pulse by Course View by Risk Score
Apereo-Learning-Analytics-Initiative · Jan 10, 2017 · 6a4486e · 6a4486e
2 parents 27681cc + 01c3855
commit 6a4486e
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 2 deletions.
diff --git a/src/main/resources/public/assets/js/pulse/_pulse.scss b/src/main/resources/public/assets/js/pulse/_pulse.scss
@@ -156,6 +156,29 @@ body.application {
         visibility: hidden;
       }
     }
+    td {
+      &.high-risk {
+        background-color: rgba(234, 14, 14, 1)!important;
+        color: #fff;
+        text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+      }
+      &.medium-risk {
+        background-color: rgba(246, 178, 8, 1)!important;
+        color: #fff;
+        text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+      }
+      &.low-risk {
+        background-color: rgba(212, 208, 2, 1)!important;
+        color: #fff;
+        text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+      }
+      &.no-risk {
+        background-color: rgba(127, 191, 63, 1)!important;
+        color: #fff;
+        text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+      }
+
+    }
   }
 
   // classes

diff --git a/src/main/resources/public/assets/js/pulse/pulse.html b/src/main/resources/public/assets/js/pulse/pulse.html
@@ -78,6 +78,12 @@
                         </label>
                     </span>
 
+                    <span class="checkbox filter-item" ng-show="listType == 'students' && appHasRiskData">
+                        <label>
+                            <input id="risk-toggle" type="checkbox" ng-model="$parent.$parent.riskOverlay"> Risk Overlay
+                        </label>
+                    </span>
+
                 </script>
 
             </span>
@@ -191,7 +197,7 @@
                     <i ng-if="$parent.$parent.orderByField!='lastName'" class="fa fa-caret-up spacer"></i>
                     </a>
                 </th>
-                <th ng-if="listType != 'classes'">
+                <th ng-if="listType != 'classes' && appHasRiskData">
                     <a href="" ng-class="{'hide-th' : listType === 'student'}" ng-click="$parent.$parent.orderByField='risk'; $parent.$parent.reverseSort = !$parent.$parent.reverseSort;">
                     Risk
                     <i ng-if="$parent.$parent.orderByField=='risk' && !$parent.$parent.reverseSort" class="fa fa-caret-down"></i>
@@ -237,7 +243,7 @@
                     <td ng-if="listType != 'classes'">
                         <a href="" ui-sref="index.courselist.studentView({studentId: item.id})">{{item.lastName}}</a>
                     </td>
-                    <td ng-if="listType != 'classes'">
+                    <td ng-if="listType != 'classes' && appHasRiskData" ng-class="colorCodeRisk(item.risk)">
                         {{item.risk}}
                     </td>
                     <td ng-if="listType != 'classes'">

diff --git a/src/main/resources/public/assets/js/pulse/pulse.js b/src/main/resources/public/assets/js/pulse/pulse.js
@@ -48,9 +48,35 @@
     $scope.gradeFilter = false;
     $scope.gradeFilterScore = 25;
     $scope.submissionFilterScore = 6;
+
+    $scope.appHasRiskData = false;
+    $scope.riskOverlay = true;
+    var riskColorClasses = [
+      'no-risk',
+      'low-risk',
+      'medium-risk',
+      'high-risk',
+    ];
 
     $scope.emailList = [];
 
+    $scope.colorCodeRisk = function(risk){
+      if ($scope.riskOverlay) {
+        var colorclass;
+        // var riskDivided = 100/riskColorClasses.length;
+        // console.log(Math.round(riskDivided/(riskDivided+)));
+        _.each(riskColorClasses, function(r, i){
+          console.log('between: ' + 100/riskColorClasses.length*(i) + " & " + 100/riskColorClasses.length*(i+1));
+          if (risk >= 100/riskColorClasses.length*(i) && risk <= 100/riskColorClasses.length*(i+1)) {
+            colorclass = riskColorClasses[i];
+          }
+        });
+        return colorclass;
+      } else {
+        return "";
+      }
+    }
+
     function filterByGrade(nv){
       if ($scope.currentCourse) {
         if ($scope.gradeFilter) {
@@ -133,6 +159,8 @@
       $scope.classes = $scope.processedClasses;
       $scope.currentCourse = course;
 
+      $scope.appHasRiskData = $scope.currentCourse.students[0].risk ? true : false;
+
       $scope.maxEvents = course.studentEventMax;
       runFilters();
     }