Added percentage to enrollment geolocation tooltip

analytics_dashboard/static/js/test/specs/utils-spec.js

-define(['utils/utils'], function(Utils) {
+define(['utils/utils'], function (Utils) {
     'use strict';
 
     describe('Utils', function () {
@@ -15,10 +15,10 @@ define(['utils/utils'], function(Utils) {
 
             actualAttributes = Utils.getNodeProperties(element.attributes);
             expect(actualAttributes).toEqual({
-                    attribute: 'myAttribute',
-                    'data-type': 'my-data-type',
-                    'data-category': 'my-data-category',
-                    'data-event': 'my-data-event'
+                attribute: 'myAttribute',
+                'data-type': 'my-data-type',
+                'data-category': 'my-data-category',
+                'data-event': 'my-data-event'
             });
 
             actualAttributes = Utils.getNodeProperties(element.attributes,
@@ -42,4 +42,17 @@ define(['utils/utils'], function(Utils) {
         });
 
     });
+
+    describe('formatDisplayPercentage', function () {
+        it('should return < 1% if the parameter is < 0.01', function () {
+            expect(Utils.formatDisplayPercentage(0)).toEqual('< 1%');
+            expect(Utils.formatDisplayPercentage(0.002)).toEqual('< 1%');
+        });
+
+        it('should return a percentage formatted to a single decimal place if the parameter is >= 0.01', function () {
+            expect(Utils.formatDisplayPercentage(0.01)).toEqual('1.0%');
+            expect(Utils.formatDisplayPercentage(0.396)).toEqual('39.6%');
+            expect(Utils.formatDisplayPercentage(1)).toEqual('100.0%');
+        });
+    });
 });

analytics_dashboard/static/js/test/specs/world-map-view-spec.js

@@ -11,15 +11,16 @@ define(['models/course-model', 'views/world-map-view'], function(CourseModel, Wo
 
             actual = view.popupTemplate({
                 name: 'My Map',
-                value: 100
+                value: 100,
+                percent: '100%'
             });
-            expect(actual).toBe('<div class="hoverinfo">My Map: 100</div>');
+            expect(actual).toBe('<div class="hoverinfo">My Map: 100 (100%)</div>');
         });
 
         it('should format data for Datamaps', function () {
             var rawData = [
-                    {countryCode: 'USA', count: 100},
-                    {countryCode: 'ARG', count: 200}],
+                    {countryCode: 'USA', count: 100, percent: 0.3333},
+                    {countryCode: 'ARG', count: 200, percent: 0.6666}],
                 model = new CourseModel({mapData: rawData}),
                 view = new WorldMapView({
                     model: model,
@@ -30,30 +31,35 @@ define(['models/course-model', 'views/world-map-view'], function(CourseModel, Wo
 
             actual = view.formatData();
             expected = {
-                USA: { value: 100, fillKey: 'USA' },
-                ARG: { value: 200, fillKey: 'ARG' }
+                USA: { value: 100, fillKey: 'USA', percent: 0.3333 },
+                ARG: { value: 200, fillKey: 'ARG', percent: 0.6666 }
             };
             expect(actual).toEqual(expected);
         });
 
         it('should fill in colors for countries', function () {
-            var countryData = {
+            var lowColor = '#000000',
+                highColor = '#ffffff',
+                countryData = {
                     USA: { value: 0, fillKey: 'USA' },
                     BLV: { value: 100, fillKey: 'BLV' },
                     ARG: { value: 200, fillKey: 'ARG' }},
                 view = new WorldMapView({
                     model: new CourseModel(),
-                    lowColor: '#000000',
-                    highColor: '#ffffff'
+                    lowColor: lowColor,
+                    highColor: highColor
                 }),
                 actual,
-                expected;
+                expected,
+                colorMap = d3.scale.sqrt()
+                    .domain([0, 200])
+                    .range([lowColor, highColor]);
 
             actual = view.getFills(countryData, 200);
             expected = {
                 defaultFill: '#000000',
                 USA: '#000000',
-                BLV: '#808080',
+                BLV: colorMap(100),
                 ARG: '#ffffff'
             };
             expect(actual).toEqual(expected);

analytics_dashboard/static/js/utils/utils.js

@@ -10,19 +10,19 @@ define(['moment', 'underscore'], function (moment, _) {
          * @param blackList Exclude attributes in this array of strings.
          * @returns Hash of found attributes.
          */
-        getNodeProperties: function(nodeAttributes, startsWithAndStrip, blackList) {
+        getNodeProperties: function (nodeAttributes, startsWithAndStrip, blackList) {
             var properties = {};
 
             // fill in defaults
             startsWithAndStrip = startsWithAndStrip || '';
             blackList = blackList || [];
 
-            _(_(nodeAttributes.length).range()).each(function(i){
+            _(_(nodeAttributes.length).range()).each(function (i) {
                 var nodeName = nodeAttributes.item(i).nodeName,
                     strippedName;
                 // filter the attributes to just the ones that start with our
                 // selection and aren't in our blacklist
-                if(nodeName.indexOf(startsWithAndStrip) === 0 && !_(blackList).contains(nodeName)) {
+                if (nodeName.indexOf(startsWithAndStrip) === 0 && !_(blackList).contains(nodeName)) {
                     // remove the
                     strippedName = nodeName.replace(startsWithAndStrip, '');
                     properties[strippedName] =
@@ -34,11 +34,25 @@ define(['moment', 'underscore'], function (moment, _) {
 
         /**
          * Takes a standard string date and returns a formatted date.
-         * @param String date (ex. 2014-01-31)
-         * @returns Returns a formatted date (ex. January 31, 2014)
+         * @param {string} date (ex. 2014-01-31)
+         * @returns {string} Returns a formatted date (ex. January 31, 2014)
          */
-        formatDate: function(date) {
+        formatDate: function (date) {
             return moment(date).format('MMMM D, YYYY');
+        },
+
+        /**
+         * Format the given value as a percentage to be displayed to the end user.
+         * @param value {number}
+         * @returns {string}
+         */
+        formatDisplayPercentage: function (value) {
+            var display = '< 1%';
+            if (value >= 0.01) {
+                display = (value * 100).toFixed(1) + '%';
+            }
+
+            return display;
         }
     };
 

analytics_dashboard/static/js/views/data-table-view.js

@@ -92,10 +92,7 @@ define(['dataTablesBootstrap', 'jquery', 'underscore', 'utils/utils', 'views/att
                     var value = row[columnKey],
                         display = value;
                     if (type === 'display') {
-                        display = ' < 1%';
-                        if (value >= 0.01) {
-                            display = (value * 100).toFixed(1) + '%';
-                        }
+                        display = ' ' + Utils.formatDisplayPercentage(value);
                     }
                     return display;
                 };

analytics_dashboard/static/js/views/world-map-view.js

-define(['jquery', 'd3', 'datamaps', 'underscore', 'views/attribute-listener-view'],
-    function ($, d3, Datamap, _, AttributeListenerView) {
+define(['jquery', 'd3', 'datamaps', 'underscore', 'utils/utils', 'views/attribute-listener-view'],
+    function ($, d3, Datamap, _, Utils, AttributeListenerView) {
         'use strict';
 
         /**
@@ -40,6 +40,7 @@ define(['jquery', 'd3', 'datamaps', 'underscore', 'views/attribute-listener-view
                     var key = country.countryCode;
                     formattedData[key] = {
                         value: country.count,
+                        percent: country.percent,
                         fillKey: key
                     };
                 });
@@ -56,7 +57,6 @@ define(['jquery', 'd3', 'datamaps', 'underscore', 'views/attribute-listener-view
                     fills = {},
                     colorMap;
 
-                // single hue linear scaled
                 colorMap = d3.scale.sqrt()
                     .domain([0, max])
                     .range([self.options.lowColor, self.options.highColor]);
@@ -151,7 +151,7 @@ define(['jquery', 'd3', 'datamaps', 'underscore', 'views/attribute-listener-view
              * Underscore style template for the hover popup that displays a
              * label/name and value.
              */
-            popupTemplate: _.template('<div class="hoverinfo"><%=name%>: <%=value%></div>'),
+            popupTemplate: _.template('<div class="hoverinfo"><%=name%>: <%=value%> (<%=percent%>)</div>'),
 
             render: function () {
                 AttributeListenerView.prototype.render.call(this);
@@ -181,7 +181,8 @@ define(['jquery', 'd3', 'datamaps', 'underscore', 'views/attribute-listener-view
                         popupTemplate: function (geography, data) {
                             return self.popupTemplate({
                                 name: geography.properties.name,
-                                value: data ? data.value : 0
+                                value: data ? data.value : 0,
+                                percent: data ? Utils.formatDisplayPercentage(data.percent) : 0
                             });
                         }
                     },