Merge pull request #162 from wafers/wt-animateGraph

Animate graphs
wafers · Aug 22, 2015 · c383945 · c383945
2 parents cfffa1e + a39b67a
commit c383945
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 12 deletions.
diff --git a/client/app/results/details.js b/client/app/results/details.js
@@ -7,7 +7,7 @@ function(Graph, ModulePass, $showdown, $scope, $rootScope, $stateParams, Search)
   $scope.dlForm = {
     barWidth: 5,
     maPeriod: 100,
-    startDate: moment().subtract(3, 'years').toDate(),
+    startDate: moment('01 01 2009').toDate(),
     endDate: moment().toDate(),
     filter: 'all'
   }
@@ -37,7 +37,7 @@ function(Graph, ModulePass, $showdown, $scope, $rootScope, $stateParams, Search)
       // Draw the version graph
       var options = _.pick(this.dlForm, 'startDate', 'endDate');
       options['width'] = width;
-      Graph.lineGraph(this.module, options);
+      Graph.versionGraph(this.module, options);
     }
     else if(type === 'dependency'){
       // Draw the dependency graph

diff --git a/client/app/results/services.js b/client/app/results/services.js
@@ -365,7 +365,7 @@ angular.module('app')
     })(index);
   }
 
-  this.lineGraph = function(module, options){
+  this.versionGraph = function(module, options){
     var width = options.width - margin.left - margin.right;
 
     var dataStore = module.time;
@@ -479,11 +479,19 @@ angular.module('app')
           // Position circle at correct y-position
           .attr("cy", function(d){return height - d.majorVersion*100})
           // Size and color of circle based on update 'importance'
-          .attr("r", function(d){return (d.majorVersion+1) > 0 ? (d.majorVersion+5) : 5})
+          .attr("r", function(d){return 0})
           .attr("fill", function(d) {return '#'+colorScale(d.majorVersion)})
           .attr("opacity", 0.7)
           .on('mouseover', tip.show)
           .on('mouseout', tip.hide)
+
+    var transit = d3.select('#graph-container').select('svg')
+      .selectAll('circle')
+        .data(data)
+          .transition()
+          .duration(1000) 
+          .attr("r", function(d){return (d.majorVersion+1) > 0 ? (d.majorVersion+5) : 5})
+
   }
 
   // Render the download graph
@@ -584,15 +592,32 @@ angular.module('app')
       .enter().append("rect")
         .attr("class", "bar")
         .attr("x", function(d) { return x(dateFormat.parse(d.day)); })
-        .attr("y", function(d) { return y(d.count); })
-        .attr("height", function(d) { return height - y(d.count); })
+        .attr("y", function(d) { return height; })
+        .attr("height", function(d) { return 0 })
         .attr("width", options.barWidth)
-
-    chart.append('path')
-        .attr("class", "moving-average")
-        .attr('d', line(data))
-        .attr('fill-opacity', 0)
-    // });
+
+    var transit = d3.select('#graph-container').select('svg')
+      .selectAll('rect')
+        .data(data)
+          .transition()
+          .duration(1000) 
+          .attr("y", function(d) { return y(d.count); })
+          .attr("height", function(d) { return height - y(d.count); })
+
+    setTimeout(function(){
+      var path = chart.append('path')
+          .attr("class", "moving-average")
+          .attr('d', line(data))
+          .attr('fill', 'none')
+
+      var totalLength = path.node().getTotalLength();
+
+      path.attr('stroke-dasharray', totalLength + ' ' + totalLength)
+      .attr('stroke-dashoffset', totalLength)
+      .transition()
+      .duration(2000)
+      .ease('linear')
+      .attr('stroke-dashoffset', 0);}, 500)
 
     function type(d) {
       d.count = +d.count; // coerce to number