Skip to content

Commit 57f16f2

Browse files
smtryingcodesmtryingcode
committed
Fixed issues with tooltip
1 parent 8799f4d commit 57f16f2

9 files changed

+346
-45
lines changed

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

Lines changed: 45 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -179,9 +179,11 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
179179
.attr('fill', function(d) {
180180
return ratingToColor($scope.colors, d.start)
181181
})
182+
183+
var mousemoveInterval = null
182184

183185
ReactDOM.unmountComponentAtNode(document.getElementById('chart-tooltip'))
184-
ReactDOM.render(<Tooltip>
186+
ReactDOM.render(<Tooltip popMethod='click'>
185187
<div className='tooltip-target'></div>
186188
<div className='tooltip-body'>
187189
<div className='tooltip-rating'></div>
@@ -192,7 +194,7 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
192194
</div>
193195
</Tooltip>
194196
, document.getElementById('chart-tooltip'))
195-
197+
$scope.isFocused = false
196198
svg.selectAll('rect.hover')
197199
.data(ranges)
198200
.enter()
@@ -210,39 +212,67 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
210212
return totalH - padding.bottom - yScale(d.number)
211213
})
212214
.on('mouseover', function(d) {
215+
$scope.isFocused = true
213216
$scope.highlightedRating = d.start
214217
$scope.displayCoders = true
215218
$scope.numCoders = d.number
216219
$scope.$digest()
217-
220+
218221
d3.select('#chart-tooltip')
219-
.style('left', (d3.event.pageX-2) + 'px')
220-
.style('top', (d3.event.pageY-2) + 'px')
221-
.style('display', 'block')
222+
.style('left', (d3.event.pageX-4) + 'px')
223+
.style('top', (d3.event.pageY-4) + 'px')
224+
222225
$('#chart-tooltip').addClass('distribution')
223226
d3.select('#chart-tooltip .tooltip-container')
224-
.style('left', '20px !important')
225-
.style('top', '-20px !important')
226-
.style('opacity', '1')
227+
.style('left', '20px !important')
228+
.style('top', '-20px !important')
229+
227230
d3.select('#chart-tooltip .tooltip-container .tooltip-pointer')
228-
.style('left', '-5.5px !important')
229-
.style('bottom', '25px !important')
231+
.style('left', '-5.5px !important')
232+
.style('bottom', '25px !important')
230233

231234
d3.select('#chart-tooltip .challenge-name').text($scope.numCoders + ' Coders')
232235
d3.select('#chart-tooltip .challenge-date').text('Rating Range: '+ $scope.highlightedRating + '-'+($scope.highlightedRating+99))
233236
d3.select('#chart-tooltip .tooltip-rating').text($scope.numCoders)
234237
d3.select('#chart-tooltip .tooltip-rating').style('background', ratingToColor($scope.colors, $scope.highlightedRating))
235-
$('#chart-tooltip').show()
236-
238+
})
239+
.on('mousemove', function(d) {
240+
window.clearTimeout(mousemoveInterval)
241+
var left = (d3.event.pageX-4)
242+
var top = (d3.event.pageY-4)
243+
mousemoveInterval = window.setTimeout(function(){
244+
d3.select('#chart-tooltip')
245+
.style('left', left + 'px')
246+
.style('top', top + 'px')
247+
248+
d3.select('#chart-tooltip .tooltip-container')
249+
.style('left', '20px !important')
250+
.style('top', '-20px !important')
251+
252+
d3.select('#chart-tooltip .tooltip-container .tooltip-pointer')
253+
.style('left', '-5.5px !important')
254+
.style('bottom', '25px !important')
255+
}, 50)
256+
237257
})
238258
.on('mouseout', function(d) {
239259
$scope.displayCoders = false
240260
$scope.highlightedRating = false
241261
$('#chart-tooltip').removeClass('distribution')
242-
$('#chart-tooltip').hide()
262+
$scope.isFocused = false
243263
$scope.$digest()
244264
})
245-
265+
266+
d3.select('body').on('click', function(){
267+
if((d3.event.target.classList[0] != 'tooltip-target') && !$('#chart-tooltip .tooltip-container').hasClass('tooltip-hide') &&
268+
(d3.event.target.classList[0] != 'tooltip-content-container') && (d3.event.target.classList[0] != 'tooltip-container') &&
269+
(d3.event.target.classList[0] != 'tooltip-body') && (d3.event.target.classList[0] != 'Tooltip') &&
270+
(d3.event.target.tagName.toLowerCase()!='circle') && !(d3.event.target.tagName.toLowerCase()=='rect' && d3.event.target.classList[0] == 'hover')) {
271+
$('#chart-tooltip .tooltip-container').addClass('tooltip-hide')
272+
$('#chart-tooltip .tooltip-container').css('opacity', 0)
273+
}
274+
})
275+
246276
svg.selectAll('line.xaxis')
247277
.data(ranges)
248278
.enter()

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

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
1919
rating: '=',
2020
graphState: '='
2121
},
22-
controller: ['$scope', HistoryGraphController]
22+
controller: ['$scope', '$state', '$window', 'CONSTANTS', HistoryGraphController]
2323
}
2424
}
2525

26-
function HistoryGraphController($scope) {
26+
function HistoryGraphController($scope, $state, $window, CONSTANTS) {
2727
$scope.colors = [
2828
// grey
2929
{
@@ -246,7 +246,7 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
246246
}
247247
}
248248
ReactDOM.unmountComponentAtNode(document.getElementById('chart-tooltip'))
249-
ReactDOM.render(<Tooltip>
249+
ReactDOM.render(<Tooltip popMethod='click'>
250250
<div className='tooltip-target'></div>
251251
<div className='tooltip-body'>
252252
<div className='tooltip-rating'></div>
@@ -258,8 +258,6 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
258258
</Tooltip>
259259
, document.getElementById('chart-tooltip'))
260260

261-
var toolTipHideIntervalId = null
262-
263261
svg.selectAll('circle')
264262
.data(history)
265263
.enter()
@@ -277,20 +275,24 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
277275
$scope.historyRating = d.newRating
278276
$scope.historyDate = moment(d.ratingDate).format('YYYY-MM-DD')
279277
$scope.historyChallenge = d.challengeName
280-
window.clearInterval(toolTipHideIntervalId)
281278
$scope.$digest()
282-
279+
$('#chart-tooltip .tooltip-container').on('click', function(){
280+
if($state.params && $state.params.track === 'DEVELOP')
281+
$window.open(CONSTANTS.CHALLENGE_DETAIL_URL + d.challengeId + '/?type=develop', '_blank')
282+
else if($state.params && $state.params.subTrack === 'SRM')
283+
$window.open(CONSTANTS.SRM_DETAIL_URL + d.challengeId, '_blank')
284+
else if($state.params && $state.params.subTrack === 'MARATHON_MATCH')
285+
$window.open(CONSTANTS.MARATHON_DETAIL_URL + d.challengeId, '_blank')
286+
})
283287
d3.select('#chart-tooltip')
284288
.style('left', (d3.event.pageX-5) + 'px')
285-
.style('top', (d3.event.pageY-5) + 'px')
286-
.style('display', 'block')
289+
.style('top', (d3.event.pageY-5) + 'px')
287290
d3.select('#chart-tooltip .tooltip-container')
288-
.style('left', '20px !important')
289-
.style('top', '-20px !important')
290-
.style('opacity', '1')
291+
.style('left', '20px !important')
292+
.style('top', '-20px !important')
291293
d3.select('#chart-tooltip .tooltip-container .tooltip-pointer')
292-
.style('left', '-5.5px !important')
293-
.style('bottom', '25px !important')
294+
.style('left', '-5.5px !important')
295+
.style('bottom', '25px !important')
294296

295297
d3.select('#chart-tooltip .challenge-name').text($scope.historyChallenge)
296298
d3.select('#chart-tooltip .challenge-date').text(moment(d.ratingDate).format('MMM DD, YYYY'))
@@ -301,11 +303,17 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
301303
.on('mouseout', function(d) {
302304
$scope.historyRating = undefined
303305
$scope.$digest()
304-
toolTipHideIntervalId = window.setInterval(function(){
305-
d3.select('#chart-tooltip')
306-
.style('left', '-500px')
307-
.style('top', '-500px')
308-
},1500)
306+
$('#chart-tooltip').off('click')
307+
})
308+
309+
d3.select('body').on('click', function(){
310+
if((d3.event.target.classList[0] != 'tooltip-target') && !$('#chart-tooltip .tooltip-container').hasClass('tooltip-hide') &&
311+
(d3.event.target.classList[0] != 'tooltip-content-container') && (d3.event.target.classList[0] != 'tooltip-container') &&
312+
(d3.event.target.classList[0] != 'tooltip-body') && (d3.event.target.classList[0] != 'Tooltip') &&
313+
(d3.event.target.tagName.toLowerCase()!='circle') && !(d3.event.target.tagName.toLowerCase()=='rect' && d3.event.target.classList[0] == 'hover')) {
314+
$('#chart-tooltip .tooltip-container').addClass('tooltip-hide')
315+
$('#chart-tooltip .tooltip-container').css('opacity', 0)
316+
}
309317
})
310318

311319
}

‎app/topcoder.constants.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,5 +44,8 @@ angular.module('CONSTANTS', []).constant('CONSTANTS', {
4444
'REGISTERED' : 'REGISTERED',
4545
'SUBMISSION_TYPE_CONTEST': 'Contest Submission',
4646
'STATUS_ACTIVE' : 'Active',
47-
'STATUS_COMPLETED_WITHOUT_WIN' : 'Completed Without Win'
47+
'STATUS_COMPLETED_WITHOUT_WIN' : 'Completed Without Win',
48+
'CHALLENGE_DETAIL_URL' : 'https://www.topcoder-dev.com/challenge-details/',
49+
'SRM_DETAIL_URL': 'https://community.topcoder-dev.com/stat?c=round_overview&rd=',
50+
'MARATHON_DETAIL_URL': 'https://community.topcoder-dev.com/longcontest/stats/?module=ViewOverview&rd='
4851
})

‎assets/css/my-dashboard/subtrack-stats.scss

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -111,10 +111,10 @@
111111
width: 18px;
112112
height: 18px;
113113
border-radius: 50%;
114-
display: block;
115114
position: absolute;
116115
z-index: 1000;
117-
display: none;
116+
cursor: pointer;
117+
font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
118118
}
119119

120120
#chart-tooltip.distribution {
@@ -128,14 +128,16 @@
128128
border-radius: 50%;
129129
display: block;
130130
top: -4px;
131+
cursor: pointer;
131132
left: -4px;
132133
}
133134

134135
#chart-tooltip.distribution .tooltip-target {
135-
top: -2px;
136-
left: -2px;
137-
width: 4px;
138-
height: 4px;
136+
top: -4px;
137+
left: -4px;
138+
width: 8px;
139+
height: 8px;
140+
border-radius: 0;
139141
}
140142

141143
.Tooltip .tooltip-container {
@@ -153,10 +155,7 @@
153155
bottom: auto !important;
154156
}
155157

156-
.Tooltip .tooltip-container.tooltip-hide {
157-
visibility: visible;
158-
opacity: 1;
159-
}
158+
160159

161160
#chart-tooltip .tooltip-rating {
162161
width: 60px;

‎assets/css/topcoder.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,16 @@
183183
font-weight: 300;
184184
font-style: italic;
185185
}
186+
@font-face {
187+
font-family: 'Proxima Nova';
188+
src: url('../fonts/proximanova/proximanova-regular-webfont.eot');
189+
src: url('../fonts/proximanova/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
190+
url('../fonts/proximanova/proximanova-regular-webfont') format('woff'),
191+
url('../fonts/proximanova/proximanova-regular-webfont.ttf') format('truetype'),
192+
url('../fonts/proximanova/proximanova-regular-webfont.svg') format('svg');
193+
font-weight: 400;
194+
font-style: normal;
195+
}
186196

187197
body {
188198
@include font-with-weight('Merriweather Sans', 400);

‎assets/fonts/proximanova/proximanova-regular-webfont.eot

20.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)