Merge pull request #153 from wafers/wt-rankBars

Add transitions for search results dropdown labels and tooltips for bars.
wafers · Aug 21, 2015 · 43a30de · 43a30de
2 parents da6adeb + 6ab0e54
commit 43a30de
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 23 deletions.
diff --git a/client/app/results/results.js b/client/app/results/results.js
@@ -7,7 +7,7 @@ angular.module('app')
   }
 
   $scope.bulletGraph = function(module, index) {
-    var ranks = [['Overall Rank',module.overallRank], ['Last Update Rank', module.dateRank], ['Number of Versions Rank', module.versionNumberRank], ['Module Data Completeness', module.completenessRank], ['Monthly Download Rank', module.downloadRank], ['Dependents Rank', module.dependentRank], ['Number of Stars Rank', module.starRank]];
+    var ranks = [['Overall Rank',module.overallRank, 'overallRank'], ['Last Update Rank', module.dateRank, 'lastUpdate'], ['Number of Versions Rank', module.versionNumberRank, 'time'], ['Module Data Completeness', module.completenessRank, 'completenessRank'], ['Monthly Download Rank', module.downloadRank, 'monthlyDownloadSum'], ['Dependents Rank', module.dependentRank, 'dependentsSize'], ['Number of Stars Rank', module.starRank, 'starred']];
     var margin = {top: 5, bottom: 5, left: 200};
     var width = document.getElementsByClassName('page-header')[0].offsetWidth - margin.left;
     var height = 200 - margin.top - margin.bottom;
@@ -39,36 +39,72 @@ angular.module('app')
       .data(ranks)
       .enter()
         .append('rect')
-        .attr('height',15)
+        .attr('height',19)
         .attr({'x':0,'y':function(d){ return yscale(ranks.indexOf(d)); }})
         .style('fill',function(d){ return colorScale(d[1]); })
-        .attr('width',function(d){ return 0; });
+        .attr('width',function(d){ return 0; })
+        .attr('class', 'masterTooltip')
+        .attr('val', function(d){return rankDetails(d)});
 
-    var transit = d3.select('#dropdown-div-'+index).select('svg').selectAll("rect")
-      .data(ranks)
-      .transition()
-      .duration(1000) 
-      .attr("width", function(d) {return xscale(d[1]); });
-
-
-    var transitext = d3.select('#dropdown-div-'+index).select('svg').select('#bars')
+    var text = d3.select('#dropdown-div-'+index).select('svg').select('#bars')
       .selectAll('text')
       .data(ranks)
       .enter()
-      .append('text')
-      .attr({'x':function(d) {
-        return xscale(d[1])-50 < 0 ? 1 : xscale(d[1]) - 50;
-      },'y':function(d){ return yscale(ranks.indexOf(d))+13; }})
-      .text(function(d){ return d[1]; }).style({'fill':'#000','font-size':'14px'})    
+        .append('text')
+        .attr({'x': 2,'y':function(d){ return yscale(ranks.indexOf(d))+13; }})
+        .text(function(d){ return d[1]; }).style({'fill':'#fff','font-size':'14px'})    
+        .attr('class', 'masterTooltip')
+        .attr('val', function(d){return rankDetails(d)});
 
+    var transit = d3.select('#dropdown-div-'+index).select('svg')
+      .selectAll('rect')
+        .data(ranks)
+        .transition()
+        .duration(1000) 
+        .attr("width", function(d) {return xscale(d[1]) === 0 ? 15 : xscale(d[1]); });
+
+    var transit = d3.select('#dropdown-div-'+index).select('svg')
+      .selectAll('text')
+        .data(ranks)
+        .transition()
+        .duration(1000) 
+        .attr("x", function(d) {
+          return xscale(d[1])-50 < 0 ? 1 : xscale(d[1]) - 50;
+        });
+
     var labelText = d3.select('#dropdown-div-'+index).select('svg')
       .selectAll('labels')
       .data(ranks)
       .enter()
-      .append('text')
-      .attr({'x':'0','y':function(d){ return yscale(ranks.indexOf(d))+13; }})
-      .text(function(d){ return d[0]; }).style({'fill':'#000','font-size':'14px'});    
-
+        .append('text')
+        .attr({'x':'0','y':function(d){ return yscale(ranks.indexOf(d))+13; }})
+        .text(function(d){ return d[0]; }).style({'fill':'#000','font-size':'14px'});
+
+    function rankDetails(rank) {
+      var key = rank[2];
+      console.log('rank', key)
+      console.log('module', module[key])
+
+      var displayData = ''
+
+      if (key === 'time') {
+        displayData = Object.keys(module[key]).length-2 + ' versions published';
+      } else if (key === 'lastUpdate') {
+        displayData = 'Last update on ' + module[key];
+      } else if (key === 'monthlyDownloadSum') {
+        displayData = module[key] + ' downloads in past 30 days';
+      } else if (key === 'dependentsSize') {
+        displayData = module[key] + ' modules depending on ' + module.name;
+      } else if (key === 'starred') {
+        displayData = module[key] + ' stars on NPM';
+      } else if (key === 'overallRank') {
+        displayData = module[key] + ' overall module score';
+      } else if (key === 'completenessRank') {
+        displayData = module[key] + '% module information complete'
+      }
+
+      return displayData
+    }
   }
 
   $scope.$watch(function() {
@@ -83,12 +119,32 @@ angular.module('app')
     result.show = !result.show;
     if (result.show) {
       $scope.bulletGraph(result, $index)
+      $scope.tooltip($index);
     }
   }
 
-
-
   $rootScope.$on('$stateChangeSuccess', function() {
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   });
+
+  $scope.tooltip = function (index){
+    $('.masterTooltip').hover(function(){
+      var tipData = $(this).attr('val')
+      $(this).data('tipText', tipData);
+        $('<p class="tooltip"></p>')
+          .text(tipData)
+          .appendTo('body')
+          .fadeIn('fast');
+    }, function() {
+        // Hover out code
+        $('.tooltip').remove();
+    })
+    .mousemove(function(e) {
+        var mousex = e.pageX + 20; //Get X coordinates
+        var mousey = e.pageY + 10; //Get Y coordinates
+        $('.tooltip')
+        .css({ top: mousey, left: mousex })
+    })
+  }
+
 }]);