Merged in grade-color (pull request #41)

LAQ-44 - Color Code Course Student Pulse View by Activity Score
Apereo-Learning-Analytics-Initiative · Jan 11, 2017 · 0221528 · 0221528
2 parents 6a4486e + 7bfda5f
commit 0221528
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 20 deletions.
diff --git a/src/main/resources/public/assets/js/pulse/_pulse.scss b/src/main/resources/public/assets/js/pulse/_pulse.scss
@@ -177,7 +177,31 @@ body.application {
         color: #fff;
         text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
       }
-
+      &.low-grade {
+        background-color: rgba(172, 47, 56, 1)!important;
+        color: #fff;
+        text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+      }
+      &.medium-low-grade {
+        background-color: rgba(140, 75, 51, 1)!important;
+        color: #fff;
+        text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+      }
+      &.medium-grade {
+        background-color: rgba(105, 105, 40, 1)!important;
+        color: #fff;
+        text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+      }
+      &.high-medium-grade {
+        background-color: rgba(70, 137, 41, 1)!important;
+        color: #fff;
+        text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+      }
+      &.high-grade {
+        background-color: rgba(17, 184, 33, 1)!important;
+        color: #fff;
+        text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+      }
     }
   }
 

diff --git a/src/main/resources/public/assets/js/pulse/pulse.html b/src/main/resources/public/assets/js/pulse/pulse.html
@@ -80,7 +80,13 @@
 
                     <span class="checkbox filter-item" ng-show="listType == 'students' && appHasRiskData">
                         <label>
-                            <input id="risk-toggle" type="checkbox" ng-model="$parent.$parent.riskOverlay"> Risk Overlay
+                            <input id="risk-toggle" type="checkbox" ng-model="$parent.$parent.riskOverlay"> Show Risk Colors
+                        </label>
+                    </span>
+
+                    <span class="checkbox filter-item" ng-show="listType == 'students'">
+                        <label>
+                            <input id="risk-toggle" type="checkbox" ng-model="$parent.$parent.gradeOverlay"> Show Grade Colors
                         </label>
                     </span>
 
@@ -246,7 +252,7 @@
                     <td ng-if="listType != 'classes' && appHasRiskData" ng-class="colorCodeRisk(item.risk)">
                         {{item.risk}}
                     </td>
-                    <td ng-if="listType != 'classes'">
+                    <td ng-if="listType != 'classes'" ng-class="colorCodeGrade(item.grade)">
                         {{item.grade}}
                     </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
@@ -18,6 +18,16 @@
     function($scope, $rootScope, $http, $q, $timeout, $state, SessionService, EnrollmentDataService, UserDataService, EventService, LineItemDataService, pulseDataService){
       "use strict";
 
+    var processedClasses = [];
+    var classes = [];
+    var students = [];
+    var currentCourse = null;
+    var currentUser = null;
+    var currentStudent = null;
+
+
+    currentUser = SessionService.getCurrentUser();
+
     $scope.chartInitialized = false;
     $scope.listType = 'classes';
     $scope.datalist = [];
@@ -32,43 +42,87 @@
       end: '2016-12-13'
     };
 
-    var processedClasses = [];
-    var classes = [];
-    var students = [];
-    var currentCourse = null;
-    var currentUser = null;
-    var currentStudent = null;
-
-
-    currentUser = SessionService.getCurrentUser();
-
     $scope.orderByField = 'label';
     $scope.reverseSort = false;
     $scope.assignmentOverlay = true;
     $scope.gradeFilter = false;
     $scope.gradeFilterScore = 25;
     $scope.submissionFilterScore = 6;
 
+    $scope.maxGrade = 100;
+    $scope.maxRisk = 100;
     $scope.appHasRiskData = false;
     $scope.riskOverlay = true;
+    var riskTypeCount = 4;
     var riskColorClasses = [
-      'no-risk',
-      'low-risk',
-      'medium-risk',
-      'high-risk',
+      {
+        'threshold':[$scope.maxRisk + 1, $scope.maxRisk/riskTypeCount*3],
+        'classname': 'no-risk'
+      },
+      {
+        'threshold':[$scope.maxRisk/riskTypeCount*3, $scope.maxRisk/riskTypeCount*2],
+        'classname': 'low-risk'
+      },
+      {
+        'threshold':[$scope.maxRisk/riskTypeCount*2, $scope.maxRisk/riskTypeCount],
+        'classname': 'medium-risk'
+      },
+      {
+        'threshold':[$scope.maxRisk/riskTypeCount, 0],
+        'classname': 'high-risk'
+      }
+    ];
+
+    $scope.gradeOverlay = true;
+    var gradeTypeCount = 5;
+    var gradeColorClasses = [
+      {
+        'threshold':[$scope.maxGrade + 1, ($scope.maxGrade/2)/gradeTypeCount*4+($scope.maxGrade/2)],
+        'classname': 'high-grade'
+      },
+      {
+        'threshold':[($scope.maxGrade/2)/gradeTypeCount*4+($scope.maxGrade/2), ($scope.maxGrade/2)/gradeTypeCount*3+($scope.maxGrade/2)],
+        'classname': 'high-medium-grade'
+      },
+      {
+        'threshold':[($scope.maxGrade/2)/gradeTypeCount*3+($scope.maxGrade/2), ($scope.maxGrade/2)/gradeTypeCount*2+($scope.maxGrade/2)],
+        'classname': 'medium-grade'
+      },
+      {
+        'threshold':[($scope.maxGrade/2)/gradeTypeCount*2+($scope.maxGrade/2), ($scope.maxGrade/2)/gradeTypeCount+($scope.maxGrade/2)],
+        'classname': 'medium-low-grade'
+      },
+      {
+        'threshold':[($scope.maxGrade/2)/gradeTypeCount+($scope.maxGrade/2), 0],
+        'classname': 'low-grade'
+      }
     ];
 
     $scope.emailList = [];
 
+    $scope.colorCodeGrade = function(grade){
+      if ($scope.gradeOverlay) {
+        var colorclass;
+        _.each(gradeColorClasses, function(g, i){
+          if (grade < g.threshold[0] && grade >= g.threshold[1]) {
+            colorclass = g.classname;
+          }
+        });
+
+        return colorclass;
+      } else {
+        return "";
+      }
+    }
+
     $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];
+          if (risk < r.threshold[0] && risk >= r.threshold[1]) {
+            colorclass = r.classname;
           }
         });
         return colorclass;