Merge branch 'dev' into feature/sso-accounts-app-integration

* dev: (64 commits)
  AS#131482348128949, Refactor Mailchimp API wrapper to be generic user preferences service
  Fixed lint errors
  Added code comments
  Removed tabs
  updated package.json
  Final fix - all review comments
  Fix indentation issue
  Implemented/Fixed review comments, except package.json. Will do that next.
  Fixed typos
  Fixed all review feedbacks
  Fixed left lint errors
  Fixed lint errors
  Fixed issues with tooltip
  Removed extra semicolon
  Fixed lint errors
  Fixed review comments
  Fixed unused var lint errors
  Fixed lint issues
  Fixed issue #814 - [$100] Topcoder Member Profile: Redesign ratings graph
  AS#131482348128949, Refactor Mailchimp API wrapper to be generic user preferences service
  ...

Conflicts:
	app/topcoder.constants.js

Author: vikasrohit

.travis.yml

@@ -60,9 +60,9 @@ env:
     # QA_AWS_SECRET
     - secure: azM3x9Cf7jSEe1TC/uhozJbP82oLfTiydvFBuE70SZ8tIJJUGSVGPe7wF6YJfF1zkTCAZJrnzFRLxt3Unecx21ibxabwr6DdlJI+ptJH7VA/TeOL1+PGGjOK46Qb7qF1D2Y8m48uNy4GC7+K4Rs3r6xa702OjAFED+REQRBFDDoaNDLz4K+uYwgGrsu/o/B3y6tPmTFgrKiTCvCWPO0gGZ/mbqbW4ZDcTo/quIXb8vTrInxf978vR6TQDdKaTjgz/u1cNQ1e27ZXl9lkS9I8OBKiVMd8ixM2idC44wTw5HhbInYc0jzUQrOV/LBQfvx4csifRtwX9xm0jD8UqUqlqI/Ay1sVZKRBgMSWkrAfvVF4XeoqjXLhAq0vndblhIFcsUkRtECQePCGQhHPTE+vi6BhcoA9RxF+0vRoFQe2lQsK+GeLB4bww5JmCZ9E0gQzpe48F5p3x2qvuVj070lKeEDCdQ2Dym6VnR6vUUtExuOxlI9ggfcuR7hId1aL9OakMxe8iyui+bouFE9uvUddtxqF0hwt3wuHaOd2gFRjFzPt3iFHf3rtFm6RCFalNYXAmrQ7ODZ1FcwV/wzs0mdVDmMp39Hb8Vm21tBNkGgy8ynB1DC1Zyv+PiivG0cMfJnD7eD/b0mDITUTxJB8My2e1vkKCctxmhRJ78C1ftJafXU=
     # MASTER_AWS_KEY
-    - secure: O6zyOKot+s0t0ANCM84Jd6QSfaKe4ICQX4SoQBJF394Su2+jXDOCvim8L8Z8JfzyB3uub7UE25AXwXSpIDfUTlCbMNIaAnHDjcFqNmcQ/v4kSQ0COK1VlHLHRAQHr8bzocOa1N6sjsQXxZGKWsHWzTQPbfmSdhHpL+NkSOQtM9gQYC8haafnosIEZPxHnRM99s9Ku7lHlEBN3+mMrTZjIU2qeKL9NxyCjPLZkAPQQR1qCYQsF4bG+BNj6OsRKh2rts3GBDz8upRmzStGh0IGX+xgryhu9yC3KV96ZXkMV/i35UQLSQsYo7AKxhljEx/1741GbkaRrLysS1YJ5xg6zMQbsT/Rj+p6WyjqBRH9QjnBwzUVij1GaOOi9gG6UjsULXEuOTwtHPvIod0il8kvjpoau0S63YwmYCVA+7fjNyzx/yZENnZS9hGetKs0Jso84JvzcSnm3HRBxlDyIJPlTXCX4TSpCFJM7p/eyC5XlpItW9Y2qjMOa/6gHOeHt+1AR4wq4BPCa4omYAwDRRYaNRW96VK+hTMHwdcZTuGY7kst/rhnU7ShZg12g/t1OyA4+jY3xm2RAMfMwuuiPffLe/2g5HPltfLKoQSzyuMypwqjH6ECoWCGHGq1NZQu6wSsuxAz/ucAE9a3NlLgnzub2BwN8j2fh8n5mMnfoOXV5Xg=
+    - secure: natX9uNNhOZBAkVht/f/dxT2Rkv/EP4maS3h9/dRXqejEHO9YQCTnvApGFE1SkDuH+NHoH06yx7RpAh+Gswn8CldHPF3daVnJHVgZYU2gBTyxlc5hFFV3ZmZ+hFSZgzWAXRSedw3l/SD7ceo8RebeVpSH/weDxzmHHSb429f0809wM+gWeUsNAG1sAr/oKw1t++7xIZA9p9k7EpCy8oBpHNRB30vknORNY/VFZMbp/RHfJohiL8SM9Nub2rnh27LKxik32BDCNypm+wE1cMB8642wL+MysIN7b1b1PJ9Hkahzcym8tImY0zJrui/j7tZ2ho0ATaHIc4DHna3TeM/tIK56Rtb+w4/b5rZrtIGCqCDoo6MQMkh1jL45KKeoa9Q5OgdgKqRgOQIkhy9MPQyqayUi/6RTplYXt1MO0vpHKUD2yMDZSfXWfin0XnHywTKAjjdc/lyvvC7YtrucbUu3DSbY6Eq5DH9przWdHWtXQDA0+hNjjxa6M8w2hPYBqOSM5GHF1VjlwY15hDLx/oua1VyGSfe7msd6xo0gkA/lvbA4QrOcuPYduF0cOvXuzj/RsaVqcHOAzRHvyKHaQR2UmmEQH7JoKr0/0mjXTNZX/xPlGtqRBDiWajfHhIjG4RlApbGTcdFUiuMrTNp0USA3QyV72yljWvkZ4L/9PbDjq8=
     # MASTER_AWS_SECRET
-    - secure: kyqe9fRjYLFZ3OhsEnB7iie4GKnARq0vJYaXrFZx2A3dJPm6fljNnrbVS0zdEZgaKMtYMz6Ts+hlE4Oia5VRkXDhpKfPcieatRNTjsApbRo50Ax70qrTsyAaBIfkZxrJcyxC028uv0xhB8d5kv7MVim8tiSHroOd+QwZABZsGBc41U9sj/v5zPQpslsyKv0MJJmB+QwXqx/7GxY5N2dT8LfcBJdoUdJMAyRPBUox5+LmtrW6ws6fx106C2Eh/i8jhssmiIq0MEguiqVZKYH4u01XXsH131uue2AzYu+nVdFpRnvqxgQLzNrNGCMcBsutJKQJ/Iz5f1mRlWDeVlmVDNPJO8195G6P0QO/g4RpR+fybiB9jiNri7HtRDP4dvpRgDqUpXaGfEte533FGGJFhSGCYgkx9zIfkcHWxbYHAelEXSzyJFz7Z40bOQK/rh51xhz+FGNhzHn/MikFOflIftm3WGU+4ZvjQJdbPLEQk9wVl1EUg1YdWnuohBPdX1fiT9hUUjdwJsRDNlmRT4dNQr2+GR1yXeSl8USzVo9G2LxgdaIS31EvvVEDL6ZQ3qPZnxXV8EVP32i7aYyt+TXb0rb+Y8TXTbcMQQEb2y+41ZN5NJqFuyOxbK3WvOUcmGtQgY12PTZJlQh80DiFS0svQRQ9bk54USRyQpG0jNBJZXU=
+    - secure: fO89NVR5/+qbWD0tcHOftkGGSCa89vrYeH+UJ4zaE9kgos2W7QpIsc/ENt9NscuBOERBsrlOCzS+mBBC1ss40/GxIQbM8xS9b6y8odJqEKDCR34YDWcPEmb/kSbC0Cb7Q6r6r8fbJ0GFBOunYgiGFaGyPLlhVd68NBH2YzzRZ5R24KU7T1/3mFUz50DO/q+6NU56WurkrqTIes6YT3UNAPaXDaHJHtTifts+TibP6NpAsTDcj38gBH4re6+5MkI/iPUAaN7iA+aooDtHsKNWI0iCTyyBORfzNbCd0Nbbqv6GH/3v9RlZXg05+uOWOxjPLSH8TK3aQfGZD9uf1NmZRsNkLVVYMjUHAAZU3g0k8fxXMUtkL0nqbIoi9FTAMdHzc3aHQlU41DPbS7YV+Cs9Y2aHOx+kX1eqber6g0PUSrDSGmdFDlJqJrabHXomgRZxJ/uPyZ/JzGZQDYZxqWuhmtap79uGJOe/OKa1Oubj8wfwH3BIA1IFbLS2I5wAN5UOb0eQkTQTXS8LVtO2VicbX9YdZF1cE5uCpK1cXCv6+cNhziTXIrRFp7W/cYPMN7eZoQNxRgGfTSY+yNCKR3Qh+S8Ota8lZoB60wiPb6ISPIXbO0AwTtRHjrTUsPEfxsQPLZT4AZkYgjGbMEkzuhDVh3vR1gpQ67L8hPbNPAwh0ts=
 addons:
   apt:
     sources:

app/blocks/logger/logger.js

@@ -33,9 +33,7 @@ import angular from 'angular'
       $log.error(message)
 
       if (window.NREUM) {
-        var err = new Error(message)
-
-        window.NREUM.noticeError(err)
+        window.NREUM.noticeError(message)
       }
     }
 

app/community/members.controller.js

@@ -12,7 +12,7 @@ import angular from 'angular'
     ctrl.notSearch = true
     ctrl.showing = 'list'
     ctrl.domain = CONSTANTS.domain
-    ctrl.currentMonth = 'March 2016'
+    ctrl.currentMonth = 'April 2016'
     ctrl.memberLeaderboard = []
     ctrl.copilots = []
     CommunityDataService.getMembersData()

app/community/members.jade

@@ -13,13 +13,13 @@
       .platform-stats-container
         .stat
           p.statVal {{ctrl.platformStats.memberCount | number : 0}}
-          p.statLabel ACTIVE MEMBER
+          p.statLabel ACTIVE MEMBERS
         .stat
           p.statVal {{ctrl.platformStats.activeMembersCount | number : 0}}
           p.statLabel COMPETING TODAY
         .stat
           p.statVal {{ctrl.platformStats.prizePurse | currency:undefined:0}}
-          p.statLabel AVAILABLE PRIZE
+          p.statLabel AVAILABLE PRIZES
         .stat
           p.statVal {{ctrl.platformStats.activeContestsCount | number : 0}}
           p.statLabel ACTIVE CHALLENGES

app/directives/distribution-graph/distribution-graph.directive.js

@@ -1,5 +1,8 @@
 import angular from 'angular'
 import d3 from 'd3'
+import React from 'react' // eslint-disable-line no-unused-vars
+import ReactDOM from 'react-dom'
+import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.jsx'
 
 (function() {
   'use strict'
@@ -59,7 +62,7 @@ import d3 from 'd3'
     ]
 
     var measurements = {
-      w: 600,
+      w: 900,
       h: 400,
       padding: {
         top: 20,
@@ -176,7 +179,24 @@ import d3 from 'd3'
          .attr('fill', function(d) {
            return ratingToColor($scope.colors, d.start)
          })
-
+       
+      var mousemoveInterval = null
+
+      /* render react tooltip component */
+      ReactDOM.unmountComponentAtNode(document.getElementById('chart-tooltip'))
+      ReactDOM.render(<Tooltip popMethod='click'>
+          <div className='tooltip-target'></div>
+          <div className='tooltip-body'>
+          <div className='tooltip-rating'></div>
+          <div className='tooltip-challenge'>
+            <div className='challenge-name'></div>
+            <div className='challenge-date'></div>
+          </div>
+          </div>
+        </Tooltip>
+        , document.getElementById('chart-tooltip'))
+        
+      $scope.isFocused = false 
       svg.selectAll('rect.hover')
          .data(ranges)
          .enter()
@@ -187,24 +207,81 @@ import d3 from 'd3'
            return xScale(i)
          })
          .attr('y', function(d) {
-           return padding.top
+           return yScale(d.number)
          })
          .attr('width', xScale.rangeBand())
          .attr('height', function(d) {
-           return totalH - padding.bottom - padding.top
+           return totalH - padding.bottom - yScale(d.number)
          })
          .on('mouseover', function(d) {
+           $scope.isFocused = true 
            $scope.highlightedRating = d.start
            $scope.displayCoders = true
            $scope.numCoders = d.number
+           
+           /* update tooltip location on mouseover, feature currently not inbuilt in react tooltip component */
+           d3.select('#chart-tooltip')
+              .style('left', (d3.event.pageX-4) + 'px')    
+              .style('top', (d3.event.pageY-4) + 'px')
+          
+           $('#chart-tooltip').addClass('distribution')
+           d3.select('#chart-tooltip .tooltip-container')
+              .style('left', '20px !important')    
+              .style('top', '-20px !important')
+          
+           d3.select('#chart-tooltip .tooltip-container .tooltip-pointer')
+              .style('left', '-5.5px !important')    
+              .style('bottom', '25px !important')
+          
+           d3.select('#chart-tooltip .challenge-name').text($scope.numCoders + ' Coders')
+           d3.select('#chart-tooltip .challenge-date').text('Rating Range: '+ $scope.highlightedRating + '-'+($scope.highlightedRating+99))
+           d3.select('#chart-tooltip .tooltip-rating').text($scope.numCoders)
+           d3.select('#chart-tooltip .tooltip-rating').style('background', ratingToColor($scope.colors, $scope.highlightedRating))
            $scope.$digest()
          })
+         .on('mousemove', function(d) {
+           
+           /* update tooltip on mousemove, using interval of 50ms to improve performance */
+           window.clearTimeout(mousemoveInterval)
+           var left = (d3.event.pageX-4)
+           var top = (d3.event.pageY-4)
+           
+           mousemoveInterval = window.setTimeout(function(){
+             d3.select('#chart-tooltip')
+               .style('left', left + 'px')    
+               .style('top', top + 'px')
+              
+             d3.select('#chart-tooltip .tooltip-container')
+               .style('left', '20px !important')    
+               .style('top', '-20px !important')
+              
+             d3.select('#chart-tooltip .tooltip-container .tooltip-pointer')
+               .style('left', '-5.5px !important')    
+               .style('bottom', '25px !important')
+           }, 50)
+        
+         })
          .on('mouseout', function(d) {
            $scope.displayCoders = false
            $scope.highlightedRating = false
+           $scope.isFocused = false 
            $scope.$digest()
          })
-
+      
+      /* hide tooltip when clicked anywhere outside */  
+      d3.select('body').on('click', function(){
+        if((d3.event.target.classList[0] != 'tooltip-target') && !$('#chart-tooltip .tooltip-container').hasClass('tooltip-hide') &&
+          !isInArray(d3.event.target.classList[0], ['tooltip-content-container', 'tooltip-container', 'tooltip-body', 'Tooltip']) &&
+          (d3.event.target.tagName.toLowerCase()!='circle') && !(d3.event.target.tagName.toLowerCase()=='rect' && d3.event.target.classList[0] == 'hover')) {
+          $('#chart-tooltip .tooltip-target').trigger('click')
+          $('#chart-tooltip').removeClass('distribution')
+        }
+      })
+      
+      function isInArray(value, array) {
+        return array.indexOf(value) > -1
+      }
+         
       svg.selectAll('line.xaxis')
          .data(ranges)
          .enter()

app/directives/distribution-graph/distribution-graph.jade

@@ -1,15 +1,11 @@
 .distribution-graph-directive(ng-show="graphState.show == 'distribution'")
 
-  .graph-viewer
-    .distribution-graph
+  .graph-title
+    .text Rating Distribution Graph
+    .button-group
+      button.tc-btn.tc-btn-s(ng-click="graphState.show = 'history'") View Rating History
+      button.tc-btn.tc-btn-s.active(ng-click="graphState.show = 'distribution'") View Rating Distribution
 
-    .info-port
-      .coders(ng-if="displayCoders", style="background: {{highlightedRating || rating | ratingColor}}")
-        .num {{numCoders}}
-        .label CODERS
-      .coders(ng-if="!displayCoders", style="background: {{rating | ratingColor}}")
-        .num {{rating}}
-        .label RATING
-      button.tc-btn.tc-btn-s.compare(ng-click="graphState.show = 'history'")
-        | View Rating History
+  .graph-viewer
 
+    .distribution-graph

app/directives/history-graph/history-graph.directive.js

@@ -1,6 +1,9 @@
 import angular from 'angular'
 import moment from 'moment'
 import d3 from 'd3'
+import React from 'react' // eslint-disable-line no-unused-vars
+import ReactDOM from 'react-dom'
+import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.jsx'
 
 (function() {
   'use strict'
@@ -16,11 +19,11 @@ import d3 from 'd3'
         rating: '=',
         graphState: '='
       },
-      controller: ['$scope', HistoryGraphController]
+      controller: ['$scope', '$state', '$filter', 'CONSTANTS', HistoryGraphController]
     }
   }
 
-  function HistoryGraphController($scope) {
+  function HistoryGraphController($scope, $state, $filter, CONSTANTS) {
     $scope.colors = [
       // grey
       {
@@ -59,7 +62,7 @@ import d3 from 'd3'
       }
     ]
     var measurements = {
-      w: 600,
+      w: 900,
       h: 400,
       padding: {
         top: 20,
@@ -156,7 +159,6 @@ import d3 from 'd3'
           .attr('width', w + padding.left + padding.right)
           .attr('height', h + padding.top + padding.bottom)
 
-
       svg.append('rect')
          .attr('x', padding.left)
          .attr('y', padding.top)
@@ -243,7 +245,21 @@ import d3 from 'd3'
           return y
         }
       }
-
+      
+      /* render react tooltip component */
+      ReactDOM.unmountComponentAtNode(document.getElementById('chart-tooltip'))
+      ReactDOM.render(<Tooltip popMethod='click'>
+          <div className='tooltip-target'></div>
+          <div className='tooltip-body'>
+          <div className='tooltip-rating'></div>
+          <div className='tooltip-challenge'>
+            <div className='challenge-name'></div>
+            <div className='challenge-date'></div>
+          </div>
+          </div>
+        </Tooltip>
+        , document.getElementById('chart-tooltip'))
+    
       svg.selectAll('circle')
          .data(history)
          .enter()
@@ -261,20 +277,44 @@ import d3 from 'd3'
            $scope.historyRating = d.newRating
            $scope.historyDate = moment(d.ratingDate).format('YYYY-MM-DD')
            $scope.historyChallenge = d.challengeName
+           $('#chart-tooltip .tooltip-container').on('click', function(){
+             if($state.params && ($state.params.subTrack === 'SRM' || $state.params.subTrack === 'MARATHON_MATCH'))
+               location.href = $filter('challengeLinks')({'rounds': [{id: d.challengeId, forumId: null}], 'track': $state.params.track, 'subTrack': $state.params.subTrack}, 'detail')
+             else
+               location.href = $filter('challengeLinks')({id: d.challengeId, 'track': $state.params.track, 'subTrack': $state.params.subTrack}, 'detail')
+           })
+           
+           /* update tooltip location on mouseover, feature currently not inbuilt in react tooltip component */
+           d3.select('#chart-tooltip')
+              .style('left', (d3.event.pageX-5) + 'px')    
+              .style('top', (d3.event.pageY-5) + 'px')
+           d3.select('#chart-tooltip .tooltip-container')
+              .style('left', '20px !important')    
+              .style('top', '-20px !important')
+           d3.select('#chart-tooltip .tooltip-container .tooltip-pointer')
+              .style('left', '-5.5px !important')    
+              .style('bottom', '25px !important')
+          
+           d3.select('#chart-tooltip .challenge-name').text($scope.historyChallenge)
+           d3.select('#chart-tooltip .challenge-date').text(moment(d.ratingDate).format('MMM DD, YYYY'))
+           d3.select('#chart-tooltip .tooltip-rating').text($scope.historyRating)
+           d3.select('#chart-tooltip .tooltip-rating').style('background', ratingToColor($scope.colors, $scope.historyRating))
+           $('#chart-tooltip').removeClass('distribution')
            $scope.$digest()
-           d3.select(this)
-             .attr('r', 6.0)
          })
          .on('mouseout', function(d) {
            $scope.historyRating = undefined
            $scope.$digest()
-           d3.select(this)
-             .attr('r', 4.5)
-             .attr('stroke', 'none')
-             .attr('stroke-width', '0px')
          })
-         .attr('r', 4.5)
 
+      /* hide tooltip when clicked anywhere outside */           
+      d3.select('body').on('click', function(){
+        if((d3.event.target.classList[0] != 'tooltip-target') && !$('#chart-tooltip .tooltip-container').hasClass('tooltip-hide') &&
+          (d3.event.target.tagName.toLowerCase()!='circle') && !(d3.event.target.tagName.toLowerCase()=='rect' && d3.event.target.classList[0] == 'hover')) {
+          $('#chart-tooltip .tooltip-target').trigger('click')
+          $('#chart-tooltip .tooltip-container').off('click')
+        }
+      })
 
     }
 

app/directives/history-graph/history-graph.jade

@@ -1,13 +1,11 @@
 .history-graph-directive(ng-show="graphState.show == 'history'")
-  .history-graph-container
 
-    .history-graph
+  .graph-title
+    .text Rating History Graph
+    .button-group
+      button.tc-btn.tc-btn-s.active(ng-click="graphState.show = 'history'") View Rating History
+      button.tc-btn.tc-btn-s(ng-click="graphState.show = 'distribution'") View Rating Distribution
+
+  .history-graph-container
 
-    .info-port
-      .rating(style="background: {{historyRating || rating | ratingColor}}")
-        .num {{historyRating || rating}}
-        .label RATING
-      .history-info
-        .challenge(ng-if="historyRating") {{historyChallenge}}
-        .date(ng-if="historyRating") {{historyDate | date}}
-      button.tc-btn.tc-btn-s.compare(ng-click="graphState.show = 'distribution'") View Rating Distribution
+    .history-graph

app/directives/page-state-header/page-state-header.jade

@@ -12,7 +12,7 @@
 
           img.profile-circle(ng-if="!vm.profile.photoURL", src=require("../../../assets/images/ico-user-default.svg"))
 
-      .user-stats(id="metrics", ng-hide="vm.loading")
+      .user-metrics(id="metrics", ng-hide="vm.loading")
         a.handle(style="color:{{vm.handleColor}};", ui-sref="profile.about({userHandle: vm.profile.handle})") {{vm.profile.handle}}
 
         .money-earned(ng-hide="hideMoney")

app/directives/tc-banner/tc-banner.jade

@@ -1,9 +1,9 @@
 .tc-banner-placeholder(class="{{vm.theme}}")
   .image
     img(ng-src="{{vm.img}}")
-  .title(ng-bind="vm.title")
+  .title(ng-bind="vm.title", ng-show="vm.title !== null")
   .content(ng-transclude, ng-show="transcluded")
-  .description(ng-bind-html="vm.description")
+  .description(ng-bind-html="vm.description", ng-show="vm.description !== null")
   .ctas
     .cta(ng-repeat="link in vm.ctas")
       a(class="{{link.cssClass}}", title="{{link.title}}", ng-href="{{link.url}}", ng-if="link.url") {{link.title}}