Merge pull request #189 from edx/dsjen/demographic-tooltips

Updated charting tooltips to include header and updated labels.

analytics_dashboard/static/js/engagement-content-main.js

@@ -6,7 +6,7 @@
 require(['vendor/domReady!', 'load/init-page'], function (doc, page) {
     'use strict';
 
-    require(['views/data-table-view', 'views/trends-view'], function (DataTableView, TrendsView) {
+    require(['underscore', 'views/data-table-view', 'views/trends-view'], function (_, DataTableView, TrendsView) {
         // shared settings between the chart and table
         // colors are chosen to be color-blind accessible
         var settings = [
@@ -72,9 +72,8 @@ require(['vendor/domReady!', 'load/init-page'], function (doc, page) {
                 title: 'Students',
                 key: 'count'
             },
-            tooltip: gettext('The number of active students, and the number of students who engaged in specific activities, over time.'),   // jshint ignore:line
-            // Translators: %(value)s will be replaced with a date.
-            interactiveTooltipHeader: gettext('Week Ending %(value)s')
+            // Translators: <%=value%> will be replaced with a date.
+            interactiveTooltipHeaderTemplate: _.template(gettext('Week Ending <%=value%>'))
         });
 
         // weekly engagement activities table

analytics_dashboard/static/js/enrollment-demographics-age-main.js

@@ -6,8 +6,8 @@
 require(['vendor/domReady!', 'load/init-page'], function(doc, page) {
     'use strict';
 
-    require(['views/data-table-view', 'views/histogram-view'],
-        function (DataTableView, HistogramView) {
+    require(['underscore', 'views/data-table-view', 'views/histogram-view'],
+        function (_, DataTableView, HistogramView) {
 
         // used in the table to show ages above this are binned--displayed as "100+"
         var maxNumber = 100;
@@ -18,12 +18,14 @@ require(['vendor/domReady!', 'load/init-page'], function(doc, page) {
             modelAttribute: 'ages',
             excludeData: ['Unknown'],
             trends: [{
-                title: gettext('Students'),
+                title: gettext('Number of Students'),
                 color: 'rgb(58, 162, 224)',
                 maxNumber: maxNumber
             }],
             x: { key: 'age' },
-            y: { key: 'count' }
+            y: { key: 'count' },
+            // Translators: <%=value%> will be replaced with an age.
+            interactiveTooltipHeaderTemplate: _.template(gettext('Age: <%=value%>'))
         });
 
         new DataTableView({

analytics_dashboard/static/js/enrollment-demographics-education-main.js

@@ -6,9 +6,8 @@
 require(['vendor/domReady!', 'load/init-page'], function(doc, page) {
     'use strict';
 
-    require(['views/data-table-view',
-            'views/discrete-bar-view'],
-        function (DataTableView, DiscreteBarView) {
+    require(['underscore', 'views/data-table-view', 'views/discrete-bar-view'],
+        function (_, DataTableView, DiscreteBarView) {
 
         new DiscreteBarView({
             el: '#enrollment-chart-view',
@@ -17,11 +16,13 @@ require(['vendor/domReady!', 'load/init-page'], function(doc, page) {
             excludeData: ['Unknown'],
             dataType: 'percent',
             trends: [{
-                title: gettext('Education'),
+                title: gettext('Percentage'),
                 color: 'rgb(58, 162, 224)'
             }],
             x: { key: 'educationLevel' },
-            y: { key: 'percent' }
+            y: { key: 'percent' },
+            // Translators: <%=value%> will be replaced with a level of education (e.g. Doctorate).
+            interactiveTooltipHeaderTemplate: _.template(gettext('Education: <%=value%>'))
         });
 
         new DataTableView({

analytics_dashboard/static/js/enrollment-demographics-gender-main.js

@@ -6,9 +6,8 @@
 require(['vendor/domReady!', 'load/init-page'], function(doc, page) {
     'use strict';
 
-    require(['views/data-table-view',
-            'views/discrete-bar-view'],
-        function (DataTableView, DiscreteBarView) {
+    require(['underscore', 'views/data-table-view', 'views/discrete-bar-view'],
+        function (_, DataTableView, DiscreteBarView) {
 
         new DiscreteBarView({
             el: '#enrollment-chart-view',
@@ -16,11 +15,13 @@ require(['vendor/domReady!', 'load/init-page'], function(doc, page) {
             modelAttribute: 'genders',
             dataType: 'percent',
             trends: [{
-                title: gettext('Gender'),
+                title: gettext('Percentage'),
                 color: 'rgb(58, 162, 224)'
             }],
             x: { key: 'gender' },
-            y: { key: 'percent' }
+            y: { key: 'percent' },
+            // Translators: <%=value%> will be replaced with a level of gender (e.g. Female).
+            interactiveTooltipHeaderTemplate: _.template(gettext('Gender: <%=value%>'))
         });
 
         // Daily enrollment table

analytics_dashboard/static/js/views/bar-view.js

+/**
+ * Abstract class for NVD3 bar charts (includes discrete bar and histogram).
+ */
+define(['nvd3', 'underscore', 'views/chart-view'],
+    function (nvd3, _, ChartView) {
+        'use strict';
+
+        var BarView = ChartView.extend({
+
+            defaults: _.extend({}, ChartView.prototype.defaults, {
+                    graphShiftSelector: '.nv-barsWrap'
+                }
+            ),
+
+            initChart: function(chart) {
+                var self = this;
+                ChartView.prototype.initChart.call(self, chart);
+
+                // NVD3's bar views display tooltips differently than for graphs
+                chart.tooltipContent(function(key, x, y) {
+                    var maxNumber = self.options.trends[0].maxNumber,
+                        xValue = x;
+
+                    if (!_(maxNumber).isUndefined) {
+                        // e.g. 100+
+                        xValue = x >= maxNumber ? maxNumber + '+' : x;
+                    }
+
+                    if (_(self.options).has('interactiveTooltipHeaderTemplate')) {
+                        xValue = self.options.interactiveTooltipHeaderTemplate({value: xValue});
+                    }
+
+                    return self.hoverTooltipTemplate({
+                        xValue: xValue,
+                        label: key,
+                        yValue: y,
+                        swatchColor: self.options.trends[0].color
+                    });
+                });
+            }
+
+        });
+
+        return BarView;
+    }
+);

analytics_dashboard/static/js/views/chart-view.js

@@ -217,13 +217,6 @@ define(['d3', 'jquery', 'nvd3', 'underscore', 'utils/utils', 'views/attribute-li
                     .tickFormat(Utils.localizeNumber);
                 self.chart.yAxis.tickFormat(self.getYAxisFormat());
 
-                if (_(self.options).has('interactiveTooltipHeader')) {
-                    self.chart.interactiveLayer.tooltip.headerFormatter(function (d) {
-                        // interpolate is a global django function
-                        return interpolate(self.options.interactiveTooltipHeader, {value: d}, true);  // jshint ignore:line
-                    });
-                }
-
                 // Append the svg to an inner container so that it adapts to
                 // the height of the inner container instead of the outer
                 // container which needs to create height for the title.

analytics_dashboard/static/js/views/discrete-bar-view.js

-define(['nvd3', 'underscore', 'views/chart-view'],
-    function (nvd3, _, ChartView) {
+define(['nvd3', 'underscore', 'views/bar-view'],
+    function (nvd3, _, BarView) {
         'use strict';
 
-        var DiscreteBarView = ChartView.extend({
+        var DiscreteBarView = BarView.extend({
 
-            defaults: _.extend({}, ChartView.prototype.defaults, {
+            defaults: _.extend({}, BarView.prototype.defaults, {
                     // unsetting because this view will always display all x-ticks
-                    displayExplicitTicksThreshold: undefined,
-                    graphShiftSelector: '.nv-barsWrap'
+                    displayExplicitTicksThreshold: undefined
                 }
             ),
 
@@ -17,28 +16,11 @@ define(['nvd3', 'underscore', 'views/chart-view'],
 
             initChart: function(chart) {
                 var self = this;
-                ChartView.prototype.initChart.call(self, chart);
+                BarView.prototype.initChart.call(self, chart);
 
                 if (_(self.options.trends[0]).has('color')) {
                     chart.color([self.options.trends[0].color]);
                 }
-
-                chart.tooltipContent(function(key, x, y) {
-                    var maxNumber = self.options.trends[0].maxNumber,
-                        xValue = x;
-
-                    if (!_(maxNumber).isUndefined) {
-                        // e.g. 100+
-                        xValue = x >= maxNumber ? maxNumber + '+' : x;
-                    }
-
-                    return self.hoverTooltipTemplate({
-                        xValue: xValue,
-                        label: key,
-                        yValue: y,
-                        swatchColor: self.options.trends[0].color
-                    });
-                });
             }
 
         });

analytics_dashboard/static/js/views/histogram-view.js

-define(['nvd3', 'underscore', 'views/chart-view'],
-    function (nvd3, _, ChartView) {
+define(['nvd3', 'underscore', 'views/bar-view'],
+    function (nvd3, _, BarView) {
         'use strict';
 
-        var HistogramView = ChartView.extend({
-            defaults: _.extend({}, ChartView.prototype.defaults, {
-                    graphShiftSelector: '.nv-barsWrap'
-                }
-            ),
+        var HistogramView = BarView.extend({
 
             getChart: function() {
                 return nvd3.models.multiBarChart();
             },
 
             initChart: function(chart) {
-                ChartView.prototype.initChart.call(this, chart);
-                var self = this;
+                BarView.prototype.initChart.call(this, chart);
 
                 chart.showLegend(false);
                 chart.multibar.stacked(true);
                 chart.showControls(false);
-
-                chart.tooltip(function(key, x, y) {
-                    var maxNumber = self.options.trends[0].maxNumber;
-                    return self.hoverTooltipTemplate({
-                        xValue: x >= maxNumber ? maxNumber + '+' : x,  // e.g. 100+
-                        label: key,
-                        yValue: y,
-                        swatchColor: self.options.trends[0].color
-                    });
-                });
-
             }
 
         });

analytics_dashboard/static/js/views/trends-view.js

@@ -10,8 +10,16 @@ define(['moment', 'nvd3', 'underscore', 'views/chart-view'],
 
             initChart: function (chart) {
                 ChartView.prototype.initChart.call(this, chart);
+                var self = this;
+
                 chart.showLegend(false)
                     .useInteractiveGuideline(true);
+
+                if (_(self.options).has('interactiveTooltipHeaderTemplate')) {
+                    self.chart.interactiveLayer.tooltip.headerFormatter(function (d) {
+                        return self.options.interactiveTooltipHeaderTemplate({value: d});
+                    });
+                }
             },
 
             formatXTick: function (d) {