From 36d0c2839dcfb6c5b61ae9e72fdfa460eaa47d6b Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Mon, 19 Mar 2018 15:33:37 +0100
Subject: [PATCH] Fix working time graphs that were broken by d3 update

---
 app/assets/javascripts/exercise_graphs.js     | 56 +++++--------------
 app/assets/javascripts/working_time_graphs.js | 37 ++++--------
 2 files changed, 23 insertions(+), 70 deletions(-)

diff --git a/app/assets/javascripts/exercise_graphs.js b/app/assets/javascripts/exercise_graphs.js
index 5f521b39..b095e1a5 100644
--- a/app/assets/javascripts/exercise_graphs.js
+++ b/app/assets/javascripts/exercise_graphs.js
@@ -1,9 +1,7 @@
 $(function() {
-    // http://localhost:3333/exercises/38/statistics good for testing
-    // originally at--> localhost:3333/exercises/69/statistics
+    // /exercises/38/statistics good for testing
 
     if ($.isController('exercises') && $('.graph-functions-2').isPresent()) {
-        // GET THE DATA
         var submissions = $('#data').data('submissions');
         var submissions_length = submissions.length;
 
@@ -14,10 +12,7 @@ $(function() {
         submissionsAutosaves = [];
         var maximumValue = 0;
 
-        var wtimes = $('#wtimes').data('working_times'); //.hidden#wtimes data-working_times=ActiveSupport::JSON.encode(working_times_until)
-        
-        // console.log(submissions);
-        // console.log(wtimes);
+        var wtimes = $('#wtimes').data('working_times');
 
         for (var i = 0;i<submissions_length;i++){
             var submission = submissions[i];
@@ -46,9 +41,6 @@ $(function() {
                 submissionsSaves.push(submissionArray[1]);
             }
         }
-        // console.log(submissionsScoreAndTimeAssess.length);
-        // console.log(submissionsScoreAndTimeSubmits);
-        // console.log(submissionsScoreAndTimeRuns);
 
         function get_minutes (time_stamp) {
             try {
@@ -94,33 +86,22 @@ $(function() {
                 height = (width * height_ratio) - margin.top - margin.bottom;
 
             // Set the ranges
-            var x = d3.scale.linear().range([0, width]);
-            var y = d3.scale.linear().range([height,0]);
+            var x = d3.scaleLinear().range([0, width]);
+            var y = d3.scaleLinear().range([height,0]);
 
-            //var x = d3.scale.linear()
+            //var x = d3.scaleLinear()
             //    .range([0, width]);
-            //var y = d3.scale.linear()
+            //var y = d3.scaleLinear()
             //    .range([0,height]); // - (height/20
 
-            var xAxis = d3.svg.axis()
-                .scale(x)
-                .orient("bottom")
-                .ticks(20);
-
-
-            var yAxis = d3.svg.axis()
-                .scale(d3.scale.linear().domain([0,maximumValue]).range([height,0]))//y
-                // .scale(y)
-                .orient("left")
+            var xAxis = d3.axisBottom(x).ticks(20);
+            var yAxis = d3.axisLeft()
+                .scale(d3.scaleLinear().domain([0,maximumValue]).range([height,0]))
                 .ticks(maximumValue)
-                .innerTickSize(-width)
-                .outerTickSize(0);
+                .tickSizeInner(-width)
+                .tickSizeOuter(0);
 
-            //var line = d3.svg.line()
-            //    .x(function(d) { return x(d.date); })
-            //    .y(function(d) { return y(d.close); });
-
-            var line = d3.svg.line()
+            var line = d3.line()
                 .x(function (d) {
                     // console.log(d[1]);
                     return x(d[1]);
@@ -288,23 +269,12 @@ $(function() {
                         .text(color_hash[String(i)][0]);
 
                 });
-
-
-
-            // function type(d) {
-            //     d.frequency = +d.frequency;
-            //     return d;
-            // }
-
-            //.on("mousemove", mMove)//new again
-            //.append("title");
-
         }
 
         try{
             graph_assesses();
         } catch(err){
-            alert("could not draw the graph");
+            console.error("Could not draw the graph", err);
         }
 
   }
diff --git a/app/assets/javascripts/working_time_graphs.js b/app/assets/javascripts/working_time_graphs.js
index 181b3799..e4ad3173 100644
--- a/app/assets/javascripts/working_time_graphs.js
+++ b/app/assets/javascripts/working_time_graphs.js
@@ -38,18 +38,6 @@ $(function() {
           }
       }
 
-      // minutes_count[(maximum_minutes + 1)] = 0;
-      //$('.graph-functions').html("<p></p>")
-
-      // var minutes_count = new Array(10);
-      // var minutes_array_len = minutes_array.length;
-      // for (var i=0; i< minutes_count; i++){
-      //
-      //     for (var j = 0; j < minutes_array_len; j++){
-      //         if ()
-      //     }
-      // }
-
       function getWidth() {
           if (self.innerHeight) {
               return self.innerWidth;
@@ -81,22 +69,17 @@ $(function() {
 
           //var formatDate = d3.time.format("%M");
 
-          var x = d3.scale.linear()
+          var x = d3.scaleLinear()
               .range([0, width]);
-          var y = d3.scale.linear()
+          var y = d3.scaleLinear()
               .range([height, 0]); // - (height/20
-          var xAxis = d3.svg.axis()
-              .scale(x)
-              .orient("bottom")
-              .ticks(20);
-          var yAxis = d3.svg.axis()
-              .scale(y)
-              .orient("left")
+          var xAxis = d3.axisBottom(x).ticks(20);
+          var yAxis = d3.axisLeft(y)
               .ticks(20)
-              .innerTickSize(-width)
-              .outerTickSize(0);
+              .tickSizeInner(-width)
+              .tickSizeOuter(0);
 
-          var line = d3.svg.line()
+          var line = d3.line()
               .x(function (d, i) {
                   return x(i);
               })
@@ -225,7 +208,7 @@ $(function() {
           var x = d3.scale.ordinal()
               .rangeRoundBands([0, width], .1);
 
-          var y = d3.scale.linear()
+          var y = d3.scaleLinear()
               .range([0,height-(margin.top + margin.bottom)]);
 
 
@@ -236,7 +219,7 @@ $(function() {
 
 
           var yAxis = d3.svg.axis()
-              .scale(d3.scale.linear().domain([0,max_of_array]).range([height,0]))//y
+              .scale(d3.scaleLinear().domain([0,max_of_array]).range([height,0]))//y
               .orient("left")
               .ticks(10)
               .innerTickSize(-width);
@@ -299,7 +282,7 @@ $(function() {
               .text("Working Time (Minutes)")
               .style('font-size', 14);
 
-          y = d3.scale.linear()
+          y = d3.scaleLinear()
               .domain([(0),max_of_array])
               .range([0,height]);