Skip to content

Commit 9a157ca

Browse files
kkartunovkkartunov
committed
MP-355 update generic details modal for charts
1 parent 9d1eb81 commit 9a157ca

File tree

2 files changed

+105
-7
lines changed

2 files changed

+105
-7
lines changed

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

Lines changed: 53 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,53 @@
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 {
6-
MemberStats,
9+
MemberStats, UserProfile, UserStatsDistributionResponse, UserStatsHistory, useStatsDistribution, useStatsHistory,
710
} from '~/libs/core'
811

912
import { numberToFixed } from '../../lib'
13+
import { useRatingDistroOptions, useRatingHistoryOptions } from '../../hooks'
1014

1115
import styles from './GenericSubtrackDetailsModal.module.scss'
1216

13-
type GenericViewTypes = 'CHALLENGES DETAILS'
17+
type GenericViewTypes = 'CHALLENGES DETAILS' | 'STATISTICS'
1418

1519
interface GenericSubtrackDetailsModalProps {
1620
onClose: () => void
1721
genericStats: MemberStats | undefined
22+
chartTitle: string | undefined
23+
profile: UserProfile | undefined
24+
subTrack: string
1825
title: string
26+
track: string
1927
}
2028

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

2752
return (
2853
<BaseModal
@@ -63,9 +88,7 @@ const GenericSubtrackDetailsModal: FC<GenericSubtrackDetailsModalProps> = (props
6388
Average Placement
6489
</div>
6590
</div>
66-
67-
{/* TODO: Enable this when we have challenges details data */}
68-
{/* <div className={styles.content}>
91+
<div className={styles.content}>
6992
<div className={styles.contentHeader}>
7093
<h4>{viewType}</h4>
7194
</div>
@@ -77,8 +100,31 @@ const GenericSubtrackDetailsModal: FC<GenericSubtrackDetailsModalProps> = (props
77100
)
78101

79102
}
103+
{
104+
viewType === 'STATISTICS' && (
105+
<div>
106+
{
107+
ratingHistoryOptions && (
108+
<HighchartsReact
109+
highcharts={Highcharts}
110+
options={ratingHistoryOptions}
111+
/>
112+
)
113+
}
114+
{
115+
ratingDistributionOptions && (
116+
<HighchartsReact
117+
highcharts={Highcharts}
118+
options={ratingDistributionOptions}
119+
/>
120+
)
121+
}
122+
</div>
123+
)
124+
125+
}
80126
</div>
81-
</div> */}
127+
</div>
82128
</div>
83129
</BaseModal>
84130
)

‎src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -355,6 +355,10 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
355355
onClose={bind(handleChallengeWinModalToggle, this, 'WIREFRAMES')}
356356
genericStats={wireframesStats}
357357
title='Wireframes'
358+
profile={props.profile}
359+
track='DESIGN'
360+
subTrack='WIREFRAMES'
361+
chartTitle='Wireframes Rating'
358362
/>
359363
)}
360364

@@ -363,6 +367,10 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
363367
onClose={bind(handleChallengeWinModalToggle, this, 'FRONT_END_FLASH')}
364368
genericStats={frontEndFlashStats}
365369
title='Front End Flash'
370+
profile={props.profile}
371+
track='DESIGN'
372+
subTrack='FRONT_END_FLASH'
373+
chartTitle='Front End Flash Rating'
366374
/>
367375
)}
368376

@@ -371,6 +379,10 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
371379
onClose={bind(handleChallengeWinModalToggle, this, 'PRINT_OR_PRESENTATION')}
372380
genericStats={printPresentationStats}
373381
title='Print or Presentation'
382+
profile={props.profile}
383+
track='DESIGN'
384+
subTrack='PRINT_OR_PRESENTATION'
385+
chartTitle='Print or Presentation Rating'
374386
/>
375387
)}
376388

@@ -379,6 +391,10 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
379391
onClose={bind(handleChallengeWinModalToggle, this, 'STUDIO_OTHER')}
380392
genericStats={studioOtherStats}
381393
title='Studio Other'
394+
profile={props.profile}
395+
track='DESIGN'
396+
subTrack='STUDIO_OTHER'
397+
chartTitle='Studio Rating'
382398
/>
383399
)}
384400

@@ -387,6 +403,10 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
387403
onClose={bind(handleChallengeWinModalToggle, this, 'APPLICATION_FRONT_END_DESIGN')}
388404
genericStats={feDesignStats}
389405
title='Application Front End Design'
406+
profile={props.profile}
407+
track='DESIGN'
408+
subTrack='APPLICATION_FRONT_END_DESIGN'
409+
chartTitle='Application Front End Design Rating'
390410
/>
391411
)}
392412

@@ -395,6 +415,10 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
395415
onClose={bind(handleChallengeWinModalToggle, this, 'BANNERS_OR_ICONS')}
396416
genericStats={bannersIconsStats}
397417
title='Banners or Icons'
418+
profile={props.profile}
419+
track='DESIGN'
420+
subTrack='BANNERS_OR_ICONS'
421+
chartTitle='Banners or Icons Rating'
398422
/>
399423
)}
400424

@@ -403,6 +427,10 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
403427
onClose={bind(handleChallengeWinModalToggle, this, 'WIDGET_OR_MOBILE_SCREEN_DESIGN')}
404428
genericStats={widgetMobileStats}
405429
title='Widget or Mobile Screen Design'
430+
profile={props.profile}
431+
track='DESIGN'
432+
subTrack='WIDGET_OR_MOBILE_SCREEN_DESIGN'
433+
chartTitle='Widget or Mobile Screen Design Rating'
406434
/>
407435
)}
408436

@@ -411,6 +439,10 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
411439
onClose={bind(handleChallengeWinModalToggle, this, 'TEST_SUITES')}
412440
genericStats={testSuitesStats}
413441
title='Test Suites'
442+
profile={props.profile}
443+
track='DEVELOP'
444+
subTrack='TEST_SUITES'
445+
chartTitle='Test Suites Rating'
414446
/>
415447
)}
416448

@@ -419,6 +451,10 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
419451
onClose={bind(handleChallengeWinModalToggle, this, 'SPECIFICATION')}
420452
genericStats={specStats}
421453
title='Specification'
454+
profile={props.profile}
455+
track='DEVELOP'
456+
subTrack='SPECIFICATION'
457+
chartTitle='Specification Rating'
422458
/>
423459
)}
424460

@@ -427,6 +463,10 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
427463
onClose={bind(handleChallengeWinModalToggle, this, 'DEVELOPMENT')}
428464
genericStats={developmentStats}
429465
title='Development'
466+
profile={props.profile}
467+
track='DEVELOP'
468+
subTrack='DEVELOPMENT'
469+
chartTitle='Development Rating'
430470
/>
431471
)}
432472

@@ -435,6 +475,10 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
435475
onClose={bind(handleChallengeWinModalToggle, this, 'ARCHITECTURE')}
436476
genericStats={architectureStats}
437477
title='Architecture'
478+
profile={props.profile}
479+
track='DEVELOP'
480+
subTrack='ARCHITECTURE'
481+
chartTitle='Architecture Rating'
438482
/>
439483
)}
440484

@@ -443,6 +487,10 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
443487
onClose={bind(handleChallengeWinModalToggle, this, 'COPILOT_POSTING')}
444488
genericStats={copilotPostingStats}
445489
title='Copilot Posting'
490+
profile={props.profile}
491+
track='DEVELOP'
492+
subTrack='COPILOT_POSTING'
493+
chartTitle='Copilot Posting Rating'
446494
/>
447495
)}
448496

@@ -451,6 +499,10 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
451499
onClose={bind(handleChallengeWinModalToggle, this, 'DESIGN')}
452500
genericStats={designStats}
453501
title='Design'
502+
profile={props.profile}
503+
track='DEVELOP'
504+
subTrack='DESIGN'
505+
chartTitle='Design Rating'
454506
/>
455507
)}
456508

0 commit comments

Comments
 (0)