Skip to content

Commit d0becff

Browse files
kkartunovkkartunov
authored
Merge pull request #918 from topcoder-platform/MP-355_profile-updates
PROD - Updated rating charts on member profiles -> master
2 parents 26f84e5 + 1c5c325 commit d0becff

File tree

20 files changed

+240
-342
lines changed

20 files changed

+240
-342
lines changed

‎src/apps/profiles/src/components/AssemblyDetailsModal/AssemblyDetailsModal.tsx‎

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
1+
import { Dispatch, FC, SetStateAction, useState } from 'react'
22
import Highcharts from 'highcharts'
33
import HighchartsReact from 'highcharts-react-official'
44

55
import { BaseModal, LoadingSpinner } from '~/libs/ui'
66
import {
77
MemberStats,
88
ratingToCSScolor,
9-
StatsHistory,
109
UserProfile,
1110
UserStatsDistributionResponse,
1211
UserStatsHistory,
@@ -15,9 +14,8 @@ import {
1514
} from '~/libs/core'
1615

1716
import { numberToFixed } from '../../lib'
18-
import { useRatingDistroOptions } from '../../hooks'
17+
import { useRatingDistroOptions, useRatingHistoryOptions } from '../../hooks'
1918

20-
import { RATING_CHART_CONFIG } from './chart-configs'
2119
import styles from './AssemblyDetailsModal.module.scss'
2220

2321
type SRMViewTypes = 'STATISTICS' | 'CHALLENGES DETAILS'
@@ -34,27 +32,11 @@ const AssemblyDetailsModal: FC<AssemblyDetailsModalProps> = (props: AssemblyDeta
3432

3533
const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle)
3634

37-
const ratingHistoryOptions: Highcharts.Options | undefined = useMemo(() => {
38-
const assemblyHistory: Array<StatsHistory> | undefined
39-
= statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'ASSEMBLY_COMPETITION')?.history
40-
|| []
41-
const options: Highcharts.Options = RATING_CHART_CONFIG
42-
43-
if (!assemblyHistory.length) return undefined
44-
45-
options.series = [{
46-
data: assemblyHistory.sort((a, b) => b.date - a.date)
47-
.map((assemblyChallenge: StatsHistory) => ({
48-
name: assemblyChallenge.challengeName,
49-
x: assemblyChallenge.ratingDate,
50-
y: assemblyChallenge.newRating,
51-
})),
52-
name: 'Assembly Competition Rating',
53-
type: 'spline',
54-
}]
55-
56-
return options
57-
}, [statsHistory])
35+
const ratingHistoryOptions: Highcharts.Options | undefined
36+
= useRatingHistoryOptions(
37+
statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'ASSEMBLY_COMPETITION')?.history,
38+
'Assembly Competition Rating',
39+
)
5840

5941
const memberStatsDist: UserStatsDistributionResponse | undefined = useStatsDistribution({
6042
filter: 'track=DEVELOP&subTrack=ASSEMBLY_COMPETITION',
@@ -131,6 +113,10 @@ const AssemblyDetailsModal: FC<AssemblyDetailsModalProps> = (props: AssemblyDeta
131113
</div>
132114
</div> */}
133115

116+
<div className={styles.contentHeader}>
117+
<h4>{viewType}</h4>
118+
</div>
119+
134120
<div className={styles.contentBody}>
135121
{
136122
viewType === 'STATISTICS' && (

‎src/apps/profiles/src/components/AssemblyDetailsModal/chart-configs.ts‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/apps/profiles/src/components/CodeDetailsModal/CodeDetailsModal.tsx‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
/* eslint-disable complexity */
2-
import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
2+
import { Dispatch, FC, SetStateAction, useState } from 'react'
33
import Highcharts from 'highcharts'
44
import HighchartsReact from 'highcharts-react-official'
55

66
import { BaseModal, LoadingSpinner } from '~/libs/ui'
77
import {
88
MemberStats,
9-
StatsHistory,
109
UserProfile,
1110
UserStatsDistributionResponse,
1211
UserStatsHistory,
@@ -15,9 +14,8 @@ import {
1514
} from '~/libs/core'
1615

1716
import { numberToFixed } from '../../lib'
18-
import { useRatingDistroOptions } from '../../hooks'
17+
import { useRatingDistroOptions, useRatingHistoryOptions } from '../../hooks'
1918

20-
import { RATING_CHART_CONFIG } from './chart-configs'
2119
import styles from './CodeDetailsModal.module.scss'
2220

2321
type CodeViewTypes = 'STATISTICS' | 'CHALLENGES DETAILS'
@@ -34,24 +32,11 @@ const CodeDetailsModal: FC<CodeDetailsModalProps> = (props: CodeDetailsModalProp
3432

3533
const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle)
3634

37-
const ratingHistoryOptions: Highcharts.Options | undefined = useMemo(() => {
38-
const codeHistory: Array<StatsHistory> | undefined
39-
= statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'CODE')?.history
40-
const options: Highcharts.Options = RATING_CHART_CONFIG
41-
42-
if (!codeHistory?.length) return undefined
43-
44-
options.series = [{
45-
data: codeHistory.sort((a, b) => b.date - a.date)
46-
.map((testChallenge: StatsHistory) => ({
47-
name: testChallenge.challengeName, x: testChallenge.ratingDate, y: testChallenge.newRating,
48-
})),
49-
name: 'Code Rating',
50-
type: 'spline',
51-
}]
52-
53-
return options
54-
}, [statsHistory])
35+
const ratingHistoryOptions: Highcharts.Options | undefined
36+
= useRatingHistoryOptions(
37+
statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'CODE')?.history,
38+
'Code Rating',
39+
)
5540

5641
const memberStatsDist: UserStatsDistributionResponse | undefined = useStatsDistribution({
5742
filter: 'track=DEVELOP&subTrack=CODE',

‎src/apps/profiles/src/components/CodeDetailsModal/chart-configs.ts‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/apps/profiles/src/components/ContentCreationDetailsModal/ContentCreationDetailsModal.tsx‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
/* eslint-disable complexity */
2-
import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
2+
import { Dispatch, FC, SetStateAction, useState } from 'react'
33
import Highcharts from 'highcharts'
44
import HighchartsReact from 'highcharts-react-official'
55

66
import { BaseModal, LoadingSpinner } from '~/libs/ui'
77
import {
88
MemberStats,
99
ratingToCSScolor,
10-
StatsHistory,
1110
UserProfile,
1211
UserStatsDistributionResponse,
1312
UserStatsHistory,
@@ -16,9 +15,8 @@ import {
1615
} from '~/libs/core'
1716

1817
import { numberToFixed } from '../../lib'
19-
import { useRatingDistroOptions } from '../../hooks'
18+
import { useRatingDistroOptions, useRatingHistoryOptions } from '../../hooks'
2019

21-
import { RATING_CHART_CONFIG } from './chart-configs'
2220
import styles from './ContentCreationDetailsModal.module.scss'
2321

2422
type TestScenViewTypes = 'STATISTICS' | 'CHALLENGES DETAILS'
@@ -35,24 +33,11 @@ const ContentCreationDetailsModal: FC<ContentCreationDetailsModalProps> = (props
3533

3634
const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle)
3735

38-
const ratingHistoryOptions: Highcharts.Options | undefined = useMemo(() => {
39-
const contentCreationHistory: Array<StatsHistory> | undefined
40-
= statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'CONTENT_CREATION')?.history
41-
const options: Highcharts.Options = RATING_CHART_CONFIG
42-
43-
if (!contentCreationHistory?.length) return undefined
44-
45-
options.series = [{
46-
data: contentCreationHistory.sort((a, b) => b.date - a.date)
47-
.map((testChallenge: StatsHistory) => ({
48-
name: testChallenge.challengeName, x: testChallenge.ratingDate, y: testChallenge.newRating,
49-
})),
50-
name: 'Content Creation Rating',
51-
type: 'spline',
52-
}]
53-
54-
return options
55-
}, [statsHistory])
36+
const ratingHistoryOptions: Highcharts.Options | undefined
37+
= useRatingHistoryOptions(
38+
statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'CONTENT_CREATION')?.history,
39+
'Content Creation Rating',
40+
)
5641

5742
const memberStatsDist: UserStatsDistributionResponse | undefined = useStatsDistribution({
5843
filter: 'track=DEVELOP&subTrack=CONTENT_CREATION',

‎src/apps/profiles/src/components/ContentCreationDetailsModal/chart-configs.ts‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/apps/profiles/src/components/GenericSubtrackDetailsModal/GenericSubtrackDetailsModal.tsx‎

Lines changed: 69 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,59 @@
11
/* eslint-disable complexity */
22
import { Dispatch, FC, SetStateAction, useState } from 'react'
3+
import { get } from 'lodash'
4+
import Highcharts from 'highcharts'
5+
import HighchartsReact from 'highcharts-react-official'
36

47
import { BaseModal } from '~/libs/ui'
58
import {
69
MemberStats,
10+
ratingToCSScolor,
11+
UserProfile,
12+
UserStatsDistributionResponse,
13+
UserStatsHistory,
14+
useStatsDistribution,
15+
useStatsHistory,
716
} from '~/libs/core'
817

918
import { numberToFixed } from '../../lib'
19+
import { useRatingDistroOptions, useRatingHistoryOptions } from '../../hooks'
1020

1121
import styles from './GenericSubtrackDetailsModal.module.scss'
1222

13-
type GenericViewTypes = 'CHALLENGES DETAILS'
23+
type GenericViewTypes = 'CHALLENGES DETAILS' | 'STATISTICS'
1424

1525
interface GenericSubtrackDetailsModalProps {
1626
onClose: () => void
1727
genericStats: MemberStats | undefined
28+
chartTitle: string | undefined
29+
profile: UserProfile | undefined
30+
subTrack: string
1831
title: string
32+
track: string
1933
}
2034

2135
const GenericSubtrackDetailsModal: FC<GenericSubtrackDetailsModalProps> = (props: GenericSubtrackDetailsModalProps) => {
2236
// TODO: Enable this when we have challenges details data
2337
// eslint-disable-next-line @typescript-eslint/no-unused-vars
2438
const [viewType]: [GenericViewTypes, Dispatch<SetStateAction<GenericViewTypes>>]
25-
= useState<GenericViewTypes>('CHALLENGES DETAILS')
39+
= useState<GenericViewTypes>('STATISTICS')
40+
41+
const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle)
42+
43+
const ratingHistoryOptions: Highcharts.Options | undefined
44+
= useRatingHistoryOptions(
45+
get(statsHistory, props.track)?.subTracks?.find(
46+
(subTrack: any) => subTrack.name === props.subTrack,
47+
)?.history,
48+
props.chartTitle || '',
49+
)
50+
51+
const memberStatsDist: UserStatsDistributionResponse | undefined = useStatsDistribution({
52+
filter: `track=${props.track}&subTrack=${props.subTrack}`,
53+
})
54+
55+
const ratingDistributionOptions: Highcharts.Options | undefined
56+
= useRatingDistroOptions(memberStatsDist?.distribution || {}, props.genericStats?.rank?.rating)
2657

2758
return (
2859
<BaseModal
@@ -34,6 +65,15 @@ const GenericSubtrackDetailsModal: FC<GenericSubtrackDetailsModalProps> = (props
3465

3566
<div className={styles.container}>
3667
<div className='member-stat-header'>
68+
<div>
69+
<span
70+
className='member-stat-value'
71+
style={ratingToCSScolor(props.genericStats?.rank.rating || 0)}
72+
>
73+
{props.genericStats?.rank.rating}
74+
</span>
75+
Rating
76+
</div>
3777
<div>
3878
<span className='member-stat-value'>{props.genericStats?.wins}</span>
3979
Wins
@@ -56,16 +96,14 @@ const GenericSubtrackDetailsModal: FC<GenericSubtrackDetailsModalProps> = (props
5696
</span>
5797
Screening Success Rate
5898
</div>
59-
<div>
99+
{/* <div>
60100
<span className='member-stat-value'>
61101
{numberToFixed(props.genericStats?.avgPlacement || 0)}
62102
</span>
63103
Average Placement
64-
</div>
104+
</div> */}
65105
</div>
66-
67-
{/* TODO: Enable this when we have challenges details data */}
68-
{/* <div className={styles.content}>
106+
<div className={styles.content}>
69107
<div className={styles.contentHeader}>
70108
<h4>{viewType}</h4>
71109
</div>
@@ -77,8 +115,31 @@ const GenericSubtrackDetailsModal: FC<GenericSubtrackDetailsModalProps> = (props
77115
)
78116

79117
}
118+
{
119+
viewType === 'STATISTICS' && (
120+
<div>
121+
{
122+
ratingHistoryOptions && (
123+
<HighchartsReact
124+
highcharts={Highcharts}
125+
options={ratingHistoryOptions}
126+
/>
127+
)
128+
}
129+
{
130+
ratingDistributionOptions && (
131+
<HighchartsReact
132+
highcharts={Highcharts}
133+
options={ratingDistributionOptions}
134+
/>
135+
)
136+
}
137+
</div>
138+
)
139+
140+
}
80141
</div>
81-
</div> */}
142+
</div>
82143
</div>
83144
</BaseModal>
84145
)

0 commit comments

Comments
 (0)