Merge pull request #4287 from sethachoi/coachReportsD3

Coach reports d3

kalite/coachreports/static/css/coachreports/landing_view.css

@@ -35,8 +35,8 @@
     width: 12em;
     height: 100%;
     background-color: none;
-    margin-right: calc((100% - 48em)/8);
-    margin-left: calc((100% - 48em)/8);
+    margin-right: calc((100% - 36em)/6);
+    margin-left: calc((100% - 36em)/6);
 }
 
 .panel {
@@ -110,11 +110,10 @@ ul {
     font-weight: 300;
 }
 
-#full_circle1, #full_circle2, #full_circle3, #full_circle4 {
+#full_circle1, #full_circle2, #full_circle3 {
     background-color: rgba(204, 0, 102, 0);
-    border: 0.3em solid #32739E;
-    height: 7em;
-    width: 7em;
+    border: 0;
+    height: 10em;
     margin: auto;
     margin-top: 2em;
     -moz-border-radius: 4.5em;
@@ -124,13 +123,19 @@ ul {
     margin-bottom: 1em;
 }
 
-#full_circle1 p, #full_circle2 p, #full_circle3 p, #full_circle4 p {
-    margin: auto;
-    margin-top: 1.5em;
-    font-size: 1.5em;
+#full_circle1 p, #full_circle2 p, #full_circle3 p{
+    width: 100%;
+    font-size: 1.1em;
     font-weight: 100;
+    position: absolute;
+    text-align: center;
+    margin-top: 2em;
+    padding-left: 2.5em;
+    padding-right: 2.5em;
+    z-index: -5;
 }
 
+
 #full_circle2 .arc, #full_circle3 .arc {
     stroke-weight: 0.1;
     fill: #32739E;
@@ -158,4 +163,19 @@ ul {
 
 span.setrange {
     color: #fff;
+}
+
+.tooltip {
+  background: #eee;
+  box-shadow: 0 0 5px #999999;
+  color: #333;
+  display: none;
+  font-size: 12px;
+  left: 130px;
+  padding: 10px;
+  position: absolute;
+  text-align: center;
+  top: 95px;
+  width: 80px;
+  z-index: 10;
 }

kalite/coachreports/static/js/coachreports/coach_reports/hbtemplates/landing.handlebars

@@ -6,15 +6,15 @@
 				<h3>{{#if start_date}}{{ start_date }}{{#if end_date }} → {{ end_date }}{{/if}}{{else}}{{_ "This week" }}{{/if}}</h3>
 				<div class="circlechart">
 					<div id="full_circle1">
-						<p>{{#if data.total_time_logged }}{{ data.total_time_logged }}{{else}}{{_ "N/A" }}{{/if}}</p>
+						<p id="full_circle1_p">{{#if data.total_time_logged }}{{_ "Total:" }}<br />{{ data.total_time_logged }}{{else}}{{_ "N/A" }}{{/if}}</p>
 					</div>
 					<div class="charttext">
-						{{_ "Total hours logged" }}
+						{{_ "Hours spent on content vs total hours logged" }}
 					</div>
 				</div>
 				<div class="circlechart">
 					<div id="full_circle2">
-						<p>{{#if data.exercise_mastery }}{{data.exercise_mastery }} %{{else}}{{_ "N/A" }}{{/if}}</p>
+						<p>{{#if data.exercise_mastery }}{{ data.exercise_mastery }} %{{else}}{{_ "N/A" }}{{/if}}</p>
 					</div>
 					<div class="charttext">
 						{{_ "Average progress in exercises" }}
@@ -28,14 +28,6 @@
 						{{_ "Total exercise attempts" }}
 					</div>
 				</div>
-				<div class="circlechart">
-					<div id="full_circle4">
-						<p>{{#if data.content_time_spent }}{{ data.content_time_spent }} {{_ "Hours" }}{{else}}{{_ "N/A" }}{{/if}}</p>
-					</div>
-					<div class="charttext">
-						{{_ "Total time spent on content" }}
-					</div>
-				</div>
 			</div>
 		</div>
 		{{#if learners }}

kalite/coachreports/static/js/coachreports/coach_reports/views.js

@@ -8,6 +8,7 @@ var Models = require("./models");
 var TabularReportViews = require("../tabular_reports/views");
 
 var date_string = require("utils/datestring").date_string;
+var d3 = require("d3");
 
 /*
 Hierarchy of views:
@@ -79,12 +80,77 @@ var CoachSummaryView = BaseView.extend({
         "click #show_tabular_report": "toggle_tabular_view"
     },
 
+    /*
+    this function produces a radial graph and inserts it into the target_elem
+    data_sub is a portion of the data, while the data_total param is the total
+    IE time spent doing backflips vs total time spent alive
+    */
+    displayRadialGraph: function(target_elem, data_sub, data_total) {
+        var targetElemBox = $("#" + target_elem).get(0);
+        var targetElemP = $("#" + target_elem + "_p").get(0);
+
+        if(!data_sub || !data_total) {
+            targetElemP.innerHTML = "N/A";
+        } else {
+            var parseData = [
+                //parsing data to 2 decimal positions
+                { label: "Hours spent on content", count: Math.round(data_sub * 100)/100 },
+                { label: "Other activites (exercises, etc.)", count: Math.round((data_total - data_sub) * 100)/100 }
+            ];
+
+            //adjusting the graph's size based on target_elem's sizing
+            var width = targetElemBox.clientWidth;
+            var height = targetElemBox.clientHeight;
+            var radius = (Math.min(width, height) / 2);    
+
+            var color = d3.scale.category20();
+
+            var svg = d3.select("#" + target_elem)
+                .append("svg")
+                .attr("width", width)
+                .attr("height", height)
+                .append("g")
+                .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");
+
+            var arc = d3.svg.arc()
+                .innerRadius(radius - radius/6)
+                .outerRadius(radius);
+
+            var pie = d3.layout.pie()
+                .value(function(d) { return d.count; })
+                .sort(null);
+
+            var path = svg.selectAll("path")
+                .data(pie(parseData))
+                .enter()
+                .append("path")
+                .attr("d", arc)
+                .attr("fill", function(d, i) {
+                    return color(d.data.label);
+                });
+
+            //parsing to 2 decimals
+            var total = Math.round(data_total * 100)/100;
+
+            //this will display relevant data when you hover over that data's arc on the radial graph
+            path.on('mouseover', function(d) {                            
+                targetElemP.innerHTML = (d.data.label + ":" + "<br />" + d.data.count);
+            });                                                           
+
+            //when not hovering, you'll see the total data
+            path.on('mouseout', function() {                              
+                targetElemP.innerHTML = "Total:" + "<br />" + total;
+            });       
+        }
+    },
+
     initialize: function() {
         _.bindAll(this, "set_data_model", "render");
         this.listenTo(this.model, "change:facility", this.set_data_model);
         this.listenTo(this.model, "change:group", this.set_data_model);
         this.listenTo(this.model, "set_time", this.set_data_model);
         this.set_data_model();
+
     },
 
     set_data_model: function (){
@@ -130,6 +196,7 @@ var CoachSummaryView = BaseView.extend({
 
         delete this.tabular_report_view;
 
+        this.displayRadialGraph("full_circle1", this.data_model.get("content_time_spent"), this.data_model.get("total_time_logged"));
     },
 
     toggle_tabular_view: _.debounce(function() {

package.json

@@ -37,6 +37,7 @@
     "browserify": "~10.2.4",
     "browsernizr": "^1.0.2",
     "colors": "^1.1.2",
+    "d3": "^3.5.6",
     "es5-shim": "^4.1.10",
     "escodegen": "^1.6.1",
     "esprima": "^2.4.1",