Skip to content

Commit 129afc5

Browse files
luizrrodriguesluizrrodrigues
authored
Merge pull request #6615 from topcoder-platform/develop
Release v1.17.15
2 parents 6edc89a + 306f4e2 commit 129afc5

File tree

10 files changed

+234
-53
lines changed

10 files changed

+234
-53
lines changed

‎.circleci/config.yml

+3-2
Original file line numberDiff line numberDiff line change
@@ -349,7 +349,7 @@ workflows:
349349
filters:
350350
branches:
351351
only:
352-
- develop
352+
- free
353353
# This is alternate dev env for parallel testing
354354
- "build-test":
355355
context : org-global
@@ -363,7 +363,7 @@ workflows:
363363
filters:
364364
branches:
365365
only:
366-
- free
366+
- reskin-profile-settings
367367
# This is beta env for production soft releases
368368
- "build-prod-beta":
369369
context : org-global
@@ -378,6 +378,7 @@ workflows:
378378
branches:
379379
only:
380380
- develop
381+
- feat/fetch-active-review-types-only
381382
# Production builds are exectuted
382383
# when PR is merged to the master
383384
# Don't change anything in this configuration

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@
153153
"supertest": "^3.1.0",
154154
"tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
155155
"tc-ui": "^1.0.12",
156-
"topcoder-react-lib": "1.2.8",
156+
"topcoder-react-lib": "1.2.9",
157157
"topcoder-react-ui-kit": "2.0.1",
158158
"topcoder-react-utils": "0.7.8",
159159
"turndown": "^4.0.2",

‎src/shared/components/ProfilePage/Stats/ChartTooltip/index.jsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,18 @@
55
import React from 'react';
66
import PT from 'prop-types';
77
import './styles.scss';
8+
import cn from 'classnames';
89

910
const ChartTooltip = ({
1011
show, left, top, challengeName,
11-
challengeData, rating, ratingColor, href,
12+
challengeData, rating, rotated, ratingColor, href,
13+
id,
1214
}) => (
1315
<a
14-
styleName="chart-tooltip"
16+
id={`chart-tooltip-${id}`}
17+
styleName={cn('chart-tooltip', rotated ? 'rotated' : null)}
1518
style={{
16-
opacity: show ? 1 : 0,
19+
display: show ? 'block' : 'none',
1720
left,
1821
top,
1922
pointerEvents: href ? 'all' : 'none',
@@ -44,6 +47,8 @@ ChartTooltip.defaultProps = {
4447
rating: 0,
4548
ratingColor: '',
4649
href: null,
50+
rotated: false,
51+
id: '',
4752
};
4853

4954
ChartTooltip.propTypes = {
@@ -55,6 +60,8 @@ ChartTooltip.propTypes = {
5560
rating: PT.number,
5661
ratingColor: PT.string,
5762
href: PT.string,
63+
rotated: PT.bool,
64+
id: PT.string,
5865
};
5966

6067
export default ChartTooltip;

‎src/shared/components/ProfilePage/Stats/ChartTooltip/styles.scss

+17-8
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,19 @@
22

33
.chart-tooltip {
44
display: block;
5-
opacity: 0;
65
position: absolute;
76
box-sizing: border-box;
87
width: 320px;
9-
height: 115px;
8+
min-height: 115px;
109
padding: 15px;
1110
color: $tc-white !important;
1211
background-color: $tc-gray-80;
13-
transform: translate(-160px, -45px);
1412
border-radius: 5px;
1513
transition: opacity 200ms ease;
1614
transition-delay: 200ms;
1715
font-family: sans-serif;
1816
z-index: 3;
1917

20-
&:hover {
21-
opacity: 1 !important;
22-
color: $tc-white;
23-
}
24-
2518
&::before {
2619
content: '';
2720
position: absolute;
@@ -33,6 +26,22 @@
3326
transform: rotate(45deg);
3427
}
3528

29+
&.rotated {
30+
&::before {
31+
content: none;
32+
}
33+
34+
&::after {
35+
content: '';
36+
position: absolute;
37+
top: 96%;
38+
left: 50%;
39+
width: 10px;
40+
background-color: $tc-gray-80;
41+
transform: rotate(45deg);
42+
}
43+
}
44+
3645
.tooltip-rating {
3746
width: 60px;
3847
height: 60px;

‎src/shared/components/ProfilePage/Stats/DistributionGraph/index.jsx

+53-12
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,55 @@ export default class DistributionGraph extends React.Component {
183183
.attr('height', d => totalH - padding.bottom - yScale(d.number))
184184
.attr('fill', d => getRatingColor(d.start));
185185

186+
const updateTooltipPosition = () => {
187+
const e = d3.mouse(document.getElementById('distribution-graph-container'));
188+
const profileModalContainerEl = document.querySelector('.ProfileModalContainer');
189+
const profileModalContainerRect = profileModalContainerEl
190+
? profileModalContainerEl.getBoundingClientRect() : null;
191+
const graphEl = document.getElementById('distribution-graph-container');
192+
const graphRect = graphEl ? graphEl.getBoundingClientRect() : null;
193+
const tooltipElement = document.getElementById('chart-tooltip-distribution-graph');
194+
195+
let cx = e[0];
196+
let cy = e[1];
197+
const defaultWidth = 320;
198+
const defaultHeight = 115;
199+
if (tooltipElement) {
200+
const { clientWidth, clientHeight } = tooltipElement;
201+
cx -= ((clientWidth || defaultWidth) / 2);
202+
cy += 15;
203+
204+
if (graphRect && profileModalContainerRect) {
205+
const minLeft = profileModalContainerRect.x - graphRect.x;
206+
const minTop = profileModalContainerRect.y - graphRect.y;
207+
const maxRight = profileModalContainerRect.width + minLeft;
208+
const maxBottom = profileModalContainerRect.height + minTop;
209+
const minXTooltipPosition = minLeft;
210+
const maxXTooltipPosition = maxRight - (clientWidth || defaultWidth);
211+
const minYTooltipPosition = minTop;
212+
const maxYTooltipPosition = maxBottom - (clientHeight || defaultHeight);
213+
if (cx < minXTooltipPosition) {
214+
cx = minXTooltipPosition;
215+
}
216+
if (cx > maxXTooltipPosition) {
217+
cx = maxXTooltipPosition;
218+
}
219+
if (cy < minYTooltipPosition) {
220+
cy = minYTooltipPosition;
221+
}
222+
if (cy > maxYTooltipPosition) {
223+
cy = maxYTooltipPosition;
224+
}
225+
}
226+
}
227+
228+
$scope.setState({
229+
show: true,
230+
left: cx,
231+
top: cy,
232+
});
233+
};
234+
186235
svg.selectAll('rect.hover')
187236
.data(ranges)
188237
.enter()
@@ -194,24 +243,16 @@ export default class DistributionGraph extends React.Component {
194243
.attr('width', xScale.rangeBand())
195244
.attr('height', d => totalH - padding.bottom - yScale(d.number))
196245
.on('mouseover', (d) => {
197-
const e = d3.event;
198246
$scope.setState({
199-
show: true,
200-
left: e.pageX,
201-
top: e.pageY,
202247
challengeName: `${d.number} Coders`,
203248
challengeData: `Rating Range: ${d.start} - ${d.start + 99}`,
204249
rating: d.number,
205250
ratingColor: getRatingColor(d.start),
206251
});
252+
updateTooltipPosition();
207253
})
208254
.on('mousemove', () => {
209-
const e = d3.event;
210-
$scope.setState({
211-
show: true,
212-
left: e.pageX,
213-
top: e.pageY,
214-
});
255+
updateTooltipPosition();
215256
})
216257
.on('mouseout', () => {
217258
$scope.setState({
@@ -253,8 +294,8 @@ export default class DistributionGraph extends React.Component {
253294

254295
render() {
255296
return (
256-
<div styleName="distribution-graph" ref={this.graphRef}>
257-
<ChartTooltip {...this.state} />
297+
<div id="distribution-graph-container" styleName="distribution-graph" ref={this.graphRef}>
298+
<ChartTooltip id="distribution-graph" {...this.state} />
258299
</div>
259300
);
260301
}

‎src/shared/components/ProfilePage/Stats/DistributionGraph/index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
display: flex;
55
flex-direction: row;
66
justify-content: center;
7+
position: relative;
78

89
.axis path,
910
.axis line {

‎src/shared/components/ProfilePage/Stats/HistoryGraph/index.jsx

+65-7
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,12 @@ export default class HistoryGraph extends React.Component {
3434
}
3535
};
3636
window.addEventListener('resize', this.resizeHandle);
37-
this.bodyClickHandle = () => this.setState({ show: false });
37+
this.bodyClickHandle = (event) => {
38+
if (event.target && event.target.tagName === 'circle') {
39+
return;
40+
}
41+
this.setState({ show: false });
42+
};
3843
document.body.addEventListener('click', this.bodyClickHandle);
3944
}
4045

@@ -240,6 +245,58 @@ export default class HistoryGraph extends React.Component {
240245
.attr('stroke-width', 3);
241246
*/
242247

248+
const updateTooltipPosition = () => {
249+
const e = d3.mouse(document.getElementById('history-graph-container'));
250+
const profileModalContainerEl = document.querySelector('.ProfileModalContainer');
251+
const profileModalContainerRect = profileModalContainerEl
252+
? profileModalContainerEl.getBoundingClientRect() : null;
253+
const graphEl = document.getElementById('history-graph-container');
254+
const graphRect = graphEl ? graphEl.getBoundingClientRect() : null;
255+
const tooltipElement = document.getElementById('chart-tooltip-history-graph');
256+
257+
let cx = e[0];
258+
let cy = e[1];
259+
let rotated = false;
260+
const defaultWidth = 320;
261+
const defaultHeight = 115;
262+
if (tooltipElement) {
263+
const { clientWidth, clientHeight } = tooltipElement;
264+
cx -= ((clientWidth || defaultWidth) / 2);
265+
cy += 15;
266+
267+
if (graphRect && profileModalContainerRect) {
268+
const minLeft = profileModalContainerRect.x - graphRect.x;
269+
const minTop = profileModalContainerRect.y - graphRect.y;
270+
const maxRight = profileModalContainerRect.width + minLeft;
271+
const maxBottom = profileModalContainerRect.height + minTop;
272+
const minXTooltipPosition = minLeft;
273+
const maxXTooltipPosition = maxRight - (clientWidth || defaultWidth);
274+
const minYTooltipPosition = minTop;
275+
const maxYTooltipPosition = maxBottom - (clientHeight || defaultHeight);
276+
if (cx < minXTooltipPosition) {
277+
cx = minXTooltipPosition;
278+
}
279+
if (cx > maxXTooltipPosition) {
280+
cx = maxXTooltipPosition;
281+
}
282+
if (cy < minYTooltipPosition) {
283+
cy = minYTooltipPosition;
284+
}
285+
if (cy > maxYTooltipPosition) {
286+
cy -= clientHeight + 25;
287+
rotated = true;
288+
}
289+
}
290+
}
291+
292+
$scope.setState({
293+
rotated,
294+
show: true,
295+
left: cx,
296+
top: cy,
297+
});
298+
};
299+
243300
svg.selectAll('circle')
244301
.data(history)
245302
.enter()
@@ -249,24 +306,25 @@ export default class HistoryGraph extends React.Component {
249306
.attr('r', 5.5)
250307
.attr('fill', d => getRatingColor(d.newRating))
251308
.on('mouseover', (d) => {
252-
const e = d3.event;
253309
$scope.setState({
254-
show: true,
255-
left: e.pageX,
256-
top: e.pageY,
257310
challengeName: d.challengeName,
258311
challengeData: moment(d.ratingDate).format('MMM DD, YYYY'),
259312
rating: d.newRating,
260313
ratingColor: getRatingColor(d.newRating),
261314
href: getChallengeLink(d.challengeId),
262315
});
316+
317+
updateTooltipPosition();
318+
})
319+
.on('mousemove', () => {
320+
updateTooltipPosition();
263321
});
264322
}
265323

266324
render() {
267325
return (
268-
<div styleName="history-graph" ref={this.graphRef}>
269-
<ChartTooltip {...this.state} />
326+
<div id="history-graph-container" styleName="history-graph" ref={this.graphRef}>
327+
<ChartTooltip id="history-graph" {...this.state} />
270328
</div>
271329
);
272330
}

‎src/shared/components/ProfilePage/Stats/HistoryGraph/index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
display: flex;
55
flex-direction: row;
66
justify-content: center;
7+
position: relative;
78

89
.axis path,
910
.axis line {

0 commit comments

Comments
 (0)