Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit 7a9327c

Browse files
author
Jenkins Continuous Integration Server
committed
Merge commit 'f9cd962560d76317535ea49dd65a204edaa4262e' into HEAD
2 parents d836961 + f9cd962 commit 7a9327c

File tree

16 files changed

+380
-98
lines changed

16 files changed

+380
-98
lines changed

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

Lines changed: 82 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import angular from 'angular'
22
import d3 from 'd3'
3+
import React from 'react' // eslint-disable-line no-unused-vars
4+
import ReactDOM from 'react-dom'
5+
import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.jsx'
36

47
(function() {
58
'use strict'
@@ -59,7 +62,7 @@ import d3 from 'd3'
5962
]
6063

6164
var measurements = {
62-
w: 600,
65+
w: 900,
6366
h: 400,
6467
padding: {
6568
top: 20,
@@ -176,7 +179,24 @@ import d3 from 'd3'
176179
.attr('fill', function(d) {
177180
return ratingToColor($scope.colors, d.start)
178181
})
179-
182+
183+
var mousemoveInterval = null
184+
185+
/* render react tooltip component */
186+
ReactDOM.unmountComponentAtNode(document.getElementById('chart-tooltip'))
187+
ReactDOM.render(<Tooltip popMethod='click'>
188+
<div className='tooltip-target'></div>
189+
<div className='tooltip-body'>
190+
<div className='tooltip-rating'></div>
191+
<div className='tooltip-challenge'>
192+
<div className='challenge-name'></div>
193+
<div className='challenge-date'></div>
194+
</div>
195+
</div>
196+
</Tooltip>
197+
, document.getElementById('chart-tooltip'))
198+
199+
$scope.isFocused = false
180200
svg.selectAll('rect.hover')
181201
.data(ranges)
182202
.enter()
@@ -187,24 +207,81 @@ import d3 from 'd3'
187207
return xScale(i)
188208
})
189209
.attr('y', function(d) {
190-
return padding.top
210+
return yScale(d.number)
191211
})
192212
.attr('width', xScale.rangeBand())
193213
.attr('height', function(d) {
194-
return totalH - padding.bottom - padding.top
214+
return totalH - padding.bottom - yScale(d.number)
195215
})
196216
.on('mouseover', function(d) {
217+
$scope.isFocused = true
197218
$scope.highlightedRating = d.start
198219
$scope.displayCoders = true
199220
$scope.numCoders = d.number
221+
222+
/* update tooltip location on mouseover, feature currently not inbuilt in react tooltip component */
223+
d3.select('#chart-tooltip')
224+
.style('left', (d3.event.pageX-4) + 'px')
225+
.style('top', (d3.event.pageY-4) + 'px')
226+
227+
$('#chart-tooltip').addClass('distribution')
228+
d3.select('#chart-tooltip .tooltip-container')
229+
.style('left', '20px !important')
230+
.style('top', '-20px !important')
231+
232+
d3.select('#chart-tooltip .tooltip-container .tooltip-pointer')
233+
.style('left', '-5.5px !important')
234+
.style('bottom', '25px !important')
235+
236+
d3.select('#chart-tooltip .challenge-name').text($scope.numCoders + ' Coders')
237+
d3.select('#chart-tooltip .challenge-date').text('Rating Range: '+ $scope.highlightedRating + '-'+($scope.highlightedRating+99))
238+
d3.select('#chart-tooltip .tooltip-rating').text($scope.numCoders)
239+
d3.select('#chart-tooltip .tooltip-rating').style('background', ratingToColor($scope.colors, $scope.highlightedRating))
200240
$scope.$digest()
201241
})
242+
.on('mousemove', function(d) {
243+
244+
/* update tooltip on mousemove, using interval of 50ms to improve performance */
245+
window.clearTimeout(mousemoveInterval)
246+
var left = (d3.event.pageX-4)
247+
var top = (d3.event.pageY-4)
248+
249+
mousemoveInterval = window.setTimeout(function(){
250+
d3.select('#chart-tooltip')
251+
.style('left', left + 'px')
252+
.style('top', top + 'px')
253+
254+
d3.select('#chart-tooltip .tooltip-container')
255+
.style('left', '20px !important')
256+
.style('top', '-20px !important')
257+
258+
d3.select('#chart-tooltip .tooltip-container .tooltip-pointer')
259+
.style('left', '-5.5px !important')
260+
.style('bottom', '25px !important')
261+
}, 50)
262+
263+
})
202264
.on('mouseout', function(d) {
203265
$scope.displayCoders = false
204266
$scope.highlightedRating = false
267+
$scope.isFocused = false
205268
$scope.$digest()
206269
})
207-
270+
271+
/* hide tooltip when clicked anywhere outside */
272+
d3.select('body').on('click', function(){
273+
if((d3.event.target.classList[0] != 'tooltip-target') && !$('#chart-tooltip .tooltip-container').hasClass('tooltip-hide') &&
274+
!isInArray(d3.event.target.classList[0], ['tooltip-content-container', 'tooltip-container', 'tooltip-body', 'Tooltip']) &&
275+
(d3.event.target.tagName.toLowerCase()!='circle') && !(d3.event.target.tagName.toLowerCase()=='rect' && d3.event.target.classList[0] == 'hover')) {
276+
$('#chart-tooltip .tooltip-target').trigger('click')
277+
$('#chart-tooltip').removeClass('distribution')
278+
}
279+
})
280+
281+
function isInArray(value, array) {
282+
return array.indexOf(value) > -1
283+
}
284+
208285
svg.selectAll('line.xaxis')
209286
.data(ranges)
210287
.enter()

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

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
.distribution-graph-directive(ng-show="graphState.show == 'distribution'")
22

3-
.graph-viewer
4-
.distribution-graph
3+
.graph-title
4+
.text Rating Distribution Graph
5+
.button-group
6+
button.tc-btn.tc-btn-s(ng-click="graphState.show = 'history'") View Rating History
7+
button.tc-btn.tc-btn-s.active(ng-click="graphState.show = 'distribution'") View Rating Distribution
58

6-
.info-port
7-
.coders(ng-if="displayCoders", style="background: {{highlightedRating || rating | ratingColor}}")
8-
.num {{numCoders}}
9-
.label CODERS
10-
.coders(ng-if="!displayCoders", style="background: {{rating | ratingColor}}")
11-
.num {{rating}}
12-
.label RATING
13-
button.tc-btn.tc-btn-s.compare(ng-click="graphState.show = 'history'")
14-
| View Rating History
9+
.graph-viewer
1510

11+
.distribution-graph

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

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import angular from 'angular'
22
import moment from 'moment'
33
import d3 from 'd3'
4+
import React from 'react' // eslint-disable-line no-unused-vars
5+
import ReactDOM from 'react-dom'
6+
import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.jsx'
47

58
(function() {
69
'use strict'
@@ -16,11 +19,11 @@ import d3 from 'd3'
1619
rating: '=',
1720
graphState: '='
1821
},
19-
controller: ['$scope', HistoryGraphController]
22+
controller: ['$scope', '$state', '$filter', 'CONSTANTS', HistoryGraphController]
2023
}
2124
}
2225

23-
function HistoryGraphController($scope) {
26+
function HistoryGraphController($scope, $state, $filter, CONSTANTS) {
2427
$scope.colors = [
2528
// grey
2629
{
@@ -59,7 +62,7 @@ import d3 from 'd3'
5962
}
6063
]
6164
var measurements = {
62-
w: 600,
65+
w: 900,
6366
h: 400,
6467
padding: {
6568
top: 20,
@@ -156,7 +159,6 @@ import d3 from 'd3'
156159
.attr('width', w + padding.left + padding.right)
157160
.attr('height', h + padding.top + padding.bottom)
158161

159-
160162
svg.append('rect')
161163
.attr('x', padding.left)
162164
.attr('y', padding.top)
@@ -243,7 +245,21 @@ import d3 from 'd3'
243245
return y
244246
}
245247
}
246-
248+
249+
/* render react tooltip component */
250+
ReactDOM.unmountComponentAtNode(document.getElementById('chart-tooltip'))
251+
ReactDOM.render(<Tooltip popMethod='click'>
252+
<div className='tooltip-target'></div>
253+
<div className='tooltip-body'>
254+
<div className='tooltip-rating'></div>
255+
<div className='tooltip-challenge'>
256+
<div className='challenge-name'></div>
257+
<div className='challenge-date'></div>
258+
</div>
259+
</div>
260+
</Tooltip>
261+
, document.getElementById('chart-tooltip'))
262+
247263
svg.selectAll('circle')
248264
.data(history)
249265
.enter()
@@ -261,20 +277,44 @@ import d3 from 'd3'
261277
$scope.historyRating = d.newRating
262278
$scope.historyDate = moment(d.ratingDate).format('YYYY-MM-DD')
263279
$scope.historyChallenge = d.challengeName
280+
$('#chart-tooltip .tooltip-container').on('click', function(){
281+
if($state.params && ($state.params.subTrack === 'SRM' || $state.params.subTrack === 'MARATHON_MATCH'))
282+
location.href = $filter('challengeLinks')({'rounds': [{id: d.challengeId, forumId: null}], 'track': $state.params.track, 'subTrack': $state.params.subTrack}, 'detail')
283+
else
284+
location.href = $filter('challengeLinks')({id: d.challengeId, 'track': $state.params.track, 'subTrack': $state.params.subTrack}, 'detail')
285+
})
286+
287+
/* update tooltip location on mouseover, feature currently not inbuilt in react tooltip component */
288+
d3.select('#chart-tooltip')
289+
.style('left', (d3.event.pageX-5) + 'px')
290+
.style('top', (d3.event.pageY-5) + 'px')
291+
d3.select('#chart-tooltip .tooltip-container')
292+
.style('left', '20px !important')
293+
.style('top', '-20px !important')
294+
d3.select('#chart-tooltip .tooltip-container .tooltip-pointer')
295+
.style('left', '-5.5px !important')
296+
.style('bottom', '25px !important')
297+
298+
d3.select('#chart-tooltip .challenge-name').text($scope.historyChallenge)
299+
d3.select('#chart-tooltip .challenge-date').text(moment(d.ratingDate).format('MMM DD, YYYY'))
300+
d3.select('#chart-tooltip .tooltip-rating').text($scope.historyRating)
301+
d3.select('#chart-tooltip .tooltip-rating').style('background', ratingToColor($scope.colors, $scope.historyRating))
302+
$('#chart-tooltip').removeClass('distribution')
264303
$scope.$digest()
265-
d3.select(this)
266-
.attr('r', 6.0)
267304
})
268305
.on('mouseout', function(d) {
269306
$scope.historyRating = undefined
270307
$scope.$digest()
271-
d3.select(this)
272-
.attr('r', 4.5)
273-
.attr('stroke', 'none')
274-
.attr('stroke-width', '0px')
275308
})
276-
.attr('r', 4.5)
277309

310+
/* hide tooltip when clicked anywhere outside */
311+
d3.select('body').on('click', function(){
312+
if((d3.event.target.classList[0] != 'tooltip-target') && !$('#chart-tooltip .tooltip-container').hasClass('tooltip-hide') &&
313+
(d3.event.target.tagName.toLowerCase()!='circle') && !(d3.event.target.tagName.toLowerCase()=='rect' && d3.event.target.classList[0] == 'hover')) {
314+
$('#chart-tooltip .tooltip-target').trigger('click')
315+
$('#chart-tooltip .tooltip-container').off('click')
316+
}
317+
})
278318

279319
}
280320

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
.history-graph-directive(ng-show="graphState.show == 'history'")
2-
.history-graph-container
32

4-
.history-graph
3+
.graph-title
4+
.text Rating History Graph
5+
.button-group
6+
button.tc-btn.tc-btn-s.active(ng-click="graphState.show = 'history'") View Rating History
7+
button.tc-btn.tc-btn-s(ng-click="graphState.show = 'distribution'") View Rating Distribution
8+
9+
.history-graph-container
510

6-
.info-port
7-
.rating(style="background: {{historyRating || rating | ratingColor}}")
8-
.num {{historyRating || rating}}
9-
.label RATING
10-
.history-info
11-
.challenge(ng-if="historyRating") {{historyChallenge}}
12-
.date(ng-if="historyRating") {{historyDate | date}}
13-
button.tc-btn.tc-btn-s.compare(ng-click="graphState.show = 'distribution'") View Rating Distribution
11+
.history-graph

‎app/filters/challengeLinks.filter.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,15 @@ import angular from 'angular'
2323
case 'detail':
2424
return String.supplant('https://community.{domain}/longcontest/stats/?module=ViewOverview&rd={roundId}', data)
2525
}
26+
} else if (challenge.subTrack === 'SRM') {
27+
data = {
28+
domain: CONSTANTS.domain,
29+
roundId: challenge.rounds[0].id
30+
}
31+
switch (type) {
32+
case 'detail':
33+
return String.supplant('https://community.{domain}/stat?c=round_overview&rd={roundId}', data)
34+
}
2635
} else {
2736
data = {
2837
domain: CONSTANTS.domain,

‎app/index.jade‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,5 @@ html
3737
.fold-pusher
3838

3939
div(ui-view="footer")
40+
41+
#chart-tooltip

‎app/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ require('xml2js')
2525

2626
require('appirio-tech-ng-ui-components')
2727
require('appirio-tech-ng-iso-constants')
28+
require('appirio-tech-react-components')
2829

2930
// Vendor styles
3031
require('../node_modules/angucomplete-alt/angucomplete-alt.css')

‎app/services/api.service.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ import _ from 'lodash'
7474
case 'SUBMISSIONS':
7575
case 'USER':
7676
return _getRestangularV3(CONSTANTS.AUTH_API_URL)
77-
case 'MAILCHIMP':
77+
case 'PREFERENCES':
7878
return _getRestangularV3(CONSTANTS.INTERNAL_API_URL)
7979
default:
8080
return _getRestangularV3()

‎app/services/mailchimp.service.js‎ renamed to ‎app/services/userPreferences.service.js‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@ import angular from 'angular'
33
(function() {
44
'use strict'
55

6-
angular.module('tc.services').factory('MailchimpService', MailchimpService)
6+
angular.module('tc.services').factory('UserPreferencesService', UserPreferencesService)
77

8-
MailchimpService.$inject = ['$http', 'logger', 'Restangular', 'CONSTANTS', 'ApiService', '$q']
8+
UserPreferencesService.$inject = ['$http', 'logger', 'Restangular', 'CONSTANTS', 'ApiService', '$q']
99

10-
function MailchimpService($http, logger, Restangular, CONSTANTS, ApiService, $q) {
11-
var mailchimpApi = ApiService.getApiServiceProvider('MAILCHIMP')
10+
function UserPreferencesService($http, logger, Restangular, CONSTANTS, ApiService, $q) {
11+
var mailchimpApi = ApiService.getApiServiceProvider('PREFERENCES')
1212
var service = {
13-
getMemberSubscription: getMemberSubscription,
14-
addSubscription: addSubscription
13+
getEmailPreferences: getEmailPreferences,
14+
saveEmailPreferences: saveEmailPreferences
1515
}
1616
return service
1717

18-
function getMemberSubscription(user) {
18+
function getEmailPreferences(user) {
1919
return $q(function(resolve, reject) {
20-
mailchimpApi.one('mailchimp/lists', CONSTANTS.MAILCHIMP_LIST_ID)
21-
.one('members', user.userId).get()
20+
mailchimpApi.one('users', user.userId)
21+
.one('preferences', 'email').get()
2222
.then(function(resp) {
23-
resolve(resp)
23+
resolve(resp.subscriptions)
2424
})
2525
.catch(function(err) {
2626
if (err.status === 404) {
@@ -40,23 +40,22 @@ import angular from 'angular'
4040
}
4141

4242

43-
function addSubscription(user, preferences) {
44-
var subscription = {
45-
userId: user.userId,
43+
function saveEmailPreferences(user, preferences) {
44+
var settings = {
4645
firstName: user.firstName,
4746
lastName: user.lastName,
48-
interests: {}
47+
subscriptions: {}
4948
}
5049
if (!preferences) {
51-
subscription.interests[CONSTANTS.MAILCHIMP_NL_GEN] = true
50+
settings.subscriptions['TOPCODER_NL_GEN'] = true
5251
} else {
53-
subscription.interests = preferences
52+
settings.subscriptions = preferences
5453
}
5554
return $q(function(resolve, reject) {
56-
mailchimpApi.one('mailchimp/lists', CONSTANTS.MAILCHIMP_LIST_ID)
57-
.customPUT(subscription, 'members')
55+
mailchimpApi.one('users', user.userId)
56+
.customPUT({ param: settings }, 'preferences/email')
5857
.then(function(resp) {
59-
resolve(resp)
58+
resolve(resp.subscriptions)
6059
})
6160
.catch(function(err) {
6261
logger.error('Error adding member to subscription list', err)

0 commit comments

Comments
 (0)