Skip to content

Commit 7a75dd1

Browse files
smtryingcodesmtryingcode
committed
Fixed issue topcoder-archive#814 - [$100] Topcoder Member Profile: Redesign ratings graph
1 parent 98c7df5 commit 7a75dd1

File tree

10 files changed

+249
-39
lines changed

10 files changed

+249
-39
lines changed

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

Lines changed: 39 additions & 2 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'
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,19 @@ import d3 from 'd3'
176179
.attr('fill', function(d) {
177180
return ratingToColor($scope.colors, d.start)
178181
})
179-
182+
ReactDOM.unmountComponentAtNode(document.getElementById('chart-tooltip'));
183+
ReactDOM.render(<Tooltip>
184+
<div className='tooltip-target'></div>
185+
<div className='tooltip-body'>
186+
<div className='tooltip-rating'></div>
187+
<div className='tooltip-challenge'>
188+
<div className='challenge-name'></div>
189+
<div className='challenge-date'></div>
190+
</div>
191+
</div>
192+
</Tooltip>
193+
, document.getElementById('chart-tooltip'));
194+
180195
svg.selectAll('rect.hover')
181196
.data(ranges)
182197
.enter()
@@ -198,10 +213,32 @@ import d3 from 'd3'
198213
$scope.displayCoders = true
199214
$scope.numCoders = d.number
200215
$scope.$digest()
216+
217+
d3.select('#chart-tooltip')
218+
.style('left', (d3.event.pageX-2) + 'px')
219+
.style('top', (d3.event.pageY-2) + 'px')
220+
.style('display', 'block')
221+
$('#chart-tooltip').addClass('distribution')
222+
d3.select('#chart-tooltip .tooltip-container')
223+
.style('left', '20px !important')
224+
.style('top', '-20px !important')
225+
.style('opacity', '1')
226+
d3.select('#chart-tooltip .tooltip-container .tooltip-pointer')
227+
.style('left', '-5.5px !important')
228+
.style('bottom', '25px !important')
229+
230+
d3.select('#chart-tooltip .challenge-name').text($scope.numCoders + ' Coders');
231+
d3.select('#chart-tooltip .challenge-date').text('Rating Range: '+ $scope.highlightedRating + '-'+($scope.highlightedRating+99));
232+
d3.select('#chart-tooltip .tooltip-rating').text($scope.numCoders);
233+
d3.select('#chart-tooltip .tooltip-rating').style('background', ratingToColor($scope.colors, $scope.highlightedRating));
234+
$('#chart-tooltip').show();
235+
201236
})
202237
.on('mouseout', function(d) {
203238
$scope.displayCoders = false
204239
$scope.highlightedRating = false
240+
$('#chart-tooltip').removeClass('distribution')
241+
$('#chart-tooltip').hide();
205242
$scope.$digest()
206243
})
207244

‎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: 39 additions & 14 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'
5+
import ReactDOM from 'react-dom'
6+
import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.jsx'
47

58
(function() {
69
'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,
@@ -155,9 +158,8 @@ import d3 from 'd3'
155158
var svg = d3.select('.history-graph').append('svg')
156159
.attr('width', w + padding.left + padding.right)
157160
.attr('height', h + padding.top + padding.bottom)
158-
159-
160-
svg.append('rect')
161+
162+
svg.append('rect')
161163
.attr('x', padding.left)
162164
.attr('y', padding.top)
163165
.attr('width', w)
@@ -243,6 +245,18 @@ import d3 from 'd3'
243245
return y
244246
}
245247
}
248+
ReactDOM.unmountComponentAtNode(document.getElementById('chart-tooltip'));
249+
ReactDOM.render(<Tooltip>
250+
<div className='tooltip-target'></div>
251+
<div className='tooltip-body'>
252+
<div className='tooltip-rating'></div>
253+
<div className='tooltip-challenge'>
254+
<div className='challenge-name'></div>
255+
<div className='challenge-date'></div>
256+
</div>
257+
</div>
258+
</Tooltip>
259+
, document.getElementById('chart-tooltip'));
246260

247261
svg.selectAll('circle')
248262
.data(history)
@@ -261,20 +275,31 @@ import d3 from 'd3'
261275
$scope.historyRating = d.newRating
262276
$scope.historyDate = moment(d.ratingDate).format('YYYY-MM-DD')
263277
$scope.historyChallenge = d.challengeName
278+
264279
$scope.$digest()
265-
d3.select(this)
266-
.attr('r', 6.0)
280+
281+
d3.select('#chart-tooltip')
282+
.style('left', (d3.event.pageX-5) + 'px')
283+
.style('top', (d3.event.pageY-5) + 'px')
284+
.style('display', 'block')
285+
d3.select('#chart-tooltip .tooltip-container')
286+
.style('left', '20px !important')
287+
.style('top', '-20px !important')
288+
.style('opacity', '1')
289+
d3.select('#chart-tooltip .tooltip-container .tooltip-pointer')
290+
.style('left', '-5.5px !important')
291+
.style('bottom', '25px !important')
292+
293+
d3.select('#chart-tooltip .challenge-name').text($scope.historyChallenge);
294+
d3.select('#chart-tooltip .challenge-date').text(moment(d.ratingDate).format('MMM DD, YYYY'));
295+
d3.select('#chart-tooltip .tooltip-rating').text($scope.historyRating);
296+
d3.select('#chart-tooltip .tooltip-rating').style('background', ratingToColor($scope.colors, $scope.historyRating));
297+
267298
})
268299
.on('mouseout', function(d) {
269300
$scope.historyRating = undefined
270-
$scope.$digest()
271-
d3.select(this)
272-
.attr('r', 4.5)
273-
.attr('stroke', 'none')
274-
.attr('stroke-width', '0px')
275-
})
276-
.attr('r', 4.5)
277-
301+
$scope.$digest()
302+
})
278303

279304
}
280305

‎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/index.jade

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

3838
div(ui-view="footer")
39+
40+
#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')

‎assets/css/directives/distribution-graph.scss

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,51 @@
1212

1313
}
1414

15+
.graph-title {
16+
width: 960px;
17+
padding-left: 45px;
18+
text-align: left;
19+
margin: auto;
20+
font-size: 28px;
21+
line-height: 35px;
22+
color: #47474F;
23+
24+
.text {
25+
float: left;
26+
}
27+
28+
.button-group {
29+
float: right;
30+
display: block;
31+
button.tc-btn.tc-btn-s {
32+
background: #fff;
33+
color: #47474f;
34+
border: 1px solid #c3c3c8;
35+
height: 30px;
36+
box-sizing: border-box;
37+
&.active {
38+
background: #dcdce0;
39+
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,1);
40+
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,1);
41+
box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,1);
42+
border: none;
43+
}
44+
&:first-child {
45+
border-top-left-radius: 2px;
46+
border-bottom-left-radius: 2px;
47+
border-top-right-radius: 0;
48+
border-bottom-right-radius: 0;
49+
}
50+
&:last-child {
51+
border-top-left-radius: 0;
52+
border-bottom-left-radius: 0;
53+
border-top-right-radius: 2px;
54+
border-bottom-right-radius: 2px;
55+
}
56+
}
57+
}
58+
}
59+
1560
.graph-viewer {
1661
margin-top: 18px;
1762
display: flex;

‎assets/css/directives/history-graph.scss

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
display: flex;
55
flex-direction: column;
66
align-items: center;
7+
margin-top: 20px;
78
.compare {
89
margin-top: 5px;
910
margin-bottom: 15px;
@@ -13,6 +14,35 @@
1314
display: flex;
1415
flex-direction: column;
1516
align-items: center;
17+
.graph-title {
18+
width: 960px;
19+
padding-left: 45px;
20+
text-align: left;
21+
margin: auto;
22+
font-size: 28px;
23+
line-height: 35px;
24+
color: #47474F;
25+
26+
.text {
27+
float: left;
28+
}
29+
30+
.button-group {
31+
float: right;
32+
display: block;
33+
button.tc-btn.tc-btn-s {
34+
background: #fff;
35+
color: #47474f;
36+
&.active {
37+
background: #dcdce0;
38+
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,1);
39+
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,1);
40+
box-shadow: 0px 1px 3px 0px rgba(0,0,0,1);
41+
}
42+
}
43+
}
44+
}
45+
1646
.history-graph {
1747

1848
display: flex;

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,3 +106,76 @@
106106
}
107107
}
108108
}
109+
110+
#chart-tooltip {
111+
width: 18px;
112+
height: 18px;
113+
border-radius: 50%;
114+
display: block;
115+
position: absolute;
116+
z-index: 1000;
117+
display: none;
118+
}
119+
120+
#chart-tooltip.distribution {
121+
width: 4px;
122+
height: 4px;
123+
}
124+
125+
.tooltip-target {
126+
width: 18px;
127+
height: 18px;
128+
border-radius: 50%;
129+
display: block;
130+
top: -4px;
131+
left: -4px;
132+
}
133+
134+
#chart-tooltip.distribution .tooltip-target {
135+
top: -2px;
136+
left: -2px;
137+
width: 4px;
138+
height: 4px;
139+
}
140+
141+
.Tooltip .tooltip-container {
142+
position: relative;
143+
opacity: 1;
144+
top: 10px !important;
145+
left: -150px !important;
146+
width: 320px;
147+
height: 115px;
148+
}
149+
150+
.Tooltip .tooltip-container .tooltip-pointer {
151+
left: 150px !important;
152+
top: -5.5px !important;
153+
bottom: auto !important;
154+
}
155+
156+
.Tooltip .tooltip-container.tooltip-hide {
157+
visibility: visible;
158+
opacity: 1;
159+
}
160+
161+
#chart-tooltip .tooltip-rating {
162+
width: 60px;
163+
height: 60px;
164+
margin-right: 15px;
165+
border-radius: 50%;
166+
float: left;
167+
text-align: center;
168+
padding-top: 23px;
169+
}
170+
171+
#chart-tooltip .tooltip-challenge {
172+
height: 100%;
173+
width: calc(100% - 100px);
174+
float: left;
175+
}
176+
177+
#chart-tooltip .tooltip-challenge .challenge-date {
178+
font-weight: normal;
179+
margin-top: 13px;
180+
font-size: 12px;
181+
}

0 commit comments

Comments
 (0)