Mp 355 -> dev

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

@@ -1,12 +1,11 @@
-import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useState } from 'react'
 import Highcharts from 'highcharts'
 import HighchartsReact from 'highcharts-react-official'
 
 import { BaseModal, LoadingSpinner } from '~/libs/ui'
 import {
     MemberStats,
     ratingToCSScolor,
-    StatsHistory,
     UserProfile,
     UserStatsDistributionResponse,
     UserStatsHistory,
@@ -15,9 +14,8 @@ import {
 } from '~/libs/core'
 
 import { numberToFixed } from '../../lib'
-import { useRatingDistroOptions } from '../../hooks'
+import { useRatingDistroOptions, useRatingHistoryOptions } from '../../hooks'
 
-import { RATING_CHART_CONFIG } from './chart-configs'
 import styles from './AssemblyDetailsModal.module.scss'
 
 type SRMViewTypes = 'STATISTICS' | 'CHALLENGES DETAILS'
@@ -34,27 +32,11 @@ const AssemblyDetailsModal: FC<AssemblyDetailsModalProps> = (props: AssemblyDeta
 
     const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle)
 
-    const ratingHistoryOptions: Highcharts.Options | undefined = useMemo(() => {
-        const assemblyHistory: Array<StatsHistory> | undefined
-            = statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'ASSEMBLY_COMPETITION')?.history
-            || []
-        const options: Highcharts.Options = RATING_CHART_CONFIG
-
-        if (!assemblyHistory.length) return undefined
-
-        options.series = [{
-            data: assemblyHistory.sort((a, b) => b.date - a.date)
-                .map((assemblyChallenge: StatsHistory) => ({
-                    name: assemblyChallenge.challengeName,
-                    x: assemblyChallenge.ratingDate,
-                    y: assemblyChallenge.newRating,
-                })),
-            name: 'Assembly Competition Rating',
-            type: 'spline',
-        }]
-
-        return options
-    }, [statsHistory])
+    const ratingHistoryOptions: Highcharts.Options | undefined
+        = useRatingHistoryOptions(
+            statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'ASSEMBLY_COMPETITION')?.history,
+            'Assembly Competition Rating',
+        )
 
     const memberStatsDist: UserStatsDistributionResponse | undefined = useStatsDistribution({
         filter: 'track=DEVELOP&subTrack=ASSEMBLY_COMPETITION',
@@ -131,6 +113,10 @@ const AssemblyDetailsModal: FC<AssemblyDetailsModalProps> = (props: AssemblyDeta
                             </div>
                         </div> */}
 
+                        <div className={styles.contentHeader}>
+                            <h4>{viewType}</h4>
+                        </div>
+
                         <div className={styles.contentBody}>
                             {
                                 viewType === 'STATISTICS' && (

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

@@ -1,12 +1,11 @@
 /* eslint-disable complexity */
-import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useState } from 'react'
 import Highcharts from 'highcharts'
 import HighchartsReact from 'highcharts-react-official'
 
 import { BaseModal, LoadingSpinner } from '~/libs/ui'
 import {
     MemberStats,
-    StatsHistory,
     UserProfile,
     UserStatsDistributionResponse,
     UserStatsHistory,
@@ -15,9 +14,8 @@ import {
 } from '~/libs/core'
 
 import { numberToFixed } from '../../lib'
-import { useRatingDistroOptions } from '../../hooks'
+import { useRatingDistroOptions, useRatingHistoryOptions } from '../../hooks'
 
-import { RATING_CHART_CONFIG } from './chart-configs'
 import styles from './CodeDetailsModal.module.scss'
 
 type CodeViewTypes = 'STATISTICS' | 'CHALLENGES DETAILS'
@@ -34,24 +32,11 @@ const CodeDetailsModal: FC<CodeDetailsModalProps> = (props: CodeDetailsModalProp
 
     const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle)
 
-    const ratingHistoryOptions: Highcharts.Options | undefined = useMemo(() => {
-        const codeHistory: Array<StatsHistory> | undefined
-            = statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'CODE')?.history
-        const options: Highcharts.Options = RATING_CHART_CONFIG
-
-        if (!codeHistory?.length) return undefined
-
-        options.series = [{
-            data: codeHistory.sort((a, b) => b.date - a.date)
-                .map((testChallenge: StatsHistory) => ({
-                    name: testChallenge.challengeName, x: testChallenge.ratingDate, y: testChallenge.newRating,
-                })),
-            name: 'Code Rating',
-            type: 'spline',
-        }]
-
-        return options
-    }, [statsHistory])
+    const ratingHistoryOptions: Highcharts.Options | undefined
+        = useRatingHistoryOptions(
+            statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'CODE')?.history,
+            'Code Rating',
+        )
 
     const memberStatsDist: UserStatsDistributionResponse | undefined = useStatsDistribution({
         filter: 'track=DEVELOP&subTrack=CODE',

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

@@ -1,13 +1,12 @@
 /* eslint-disable complexity */
-import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useState } from 'react'
 import Highcharts from 'highcharts'
 import HighchartsReact from 'highcharts-react-official'
 
 import { BaseModal, LoadingSpinner } from '~/libs/ui'
 import {
     MemberStats,
     ratingToCSScolor,
-    StatsHistory,
     UserProfile,
     UserStatsDistributionResponse,
     UserStatsHistory,
@@ -16,9 +15,8 @@ import {
 } from '~/libs/core'
 
 import { numberToFixed } from '../../lib'
-import { useRatingDistroOptions } from '../../hooks'
+import { useRatingDistroOptions, useRatingHistoryOptions } from '../../hooks'
 
-import { RATING_CHART_CONFIG } from './chart-configs'
 import styles from './ContentCreationDetailsModal.module.scss'
 
 type TestScenViewTypes = 'STATISTICS' | 'CHALLENGES DETAILS'
@@ -35,24 +33,11 @@ const ContentCreationDetailsModal: FC<ContentCreationDetailsModalProps> = (props
 
     const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle)
 
-    const ratingHistoryOptions: Highcharts.Options | undefined = useMemo(() => {
-        const contentCreationHistory: Array<StatsHistory> | undefined
-            = statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'CONTENT_CREATION')?.history
-        const options: Highcharts.Options = RATING_CHART_CONFIG
-
-        if (!contentCreationHistory?.length) return undefined
-
-        options.series = [{
-            data: contentCreationHistory.sort((a, b) => b.date - a.date)
-                .map((testChallenge: StatsHistory) => ({
-                    name: testChallenge.challengeName, x: testChallenge.ratingDate, y: testChallenge.newRating,
-                })),
-            name: 'Content Creation Rating',
-            type: 'spline',
-        }]
-
-        return options
-    }, [statsHistory])
+    const ratingHistoryOptions: Highcharts.Options | undefined
+        = useRatingHistoryOptions(
+            statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'CONTENT_CREATION')?.history,
+            'Content Creation Rating',
+        )
 
     const memberStatsDist: UserStatsDistributionResponse | undefined = useStatsDistribution({
         filter: 'track=DEVELOP&subTrack=CONTENT_CREATION',

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

@@ -1,28 +1,59 @@
 /* eslint-disable complexity */
 import { Dispatch, FC, SetStateAction, useState } from 'react'
+import { get } from 'lodash'
+import Highcharts from 'highcharts'
+import HighchartsReact from 'highcharts-react-official'
 
 import { BaseModal } from '~/libs/ui'
 import {
     MemberStats,
+    ratingToCSScolor,
+    UserProfile,
+    UserStatsDistributionResponse,
+    UserStatsHistory,
+    useStatsDistribution,
+    useStatsHistory,
 } from '~/libs/core'
 
 import { numberToFixed } from '../../lib'
+import { useRatingDistroOptions, useRatingHistoryOptions } from '../../hooks'
 
 import styles from './GenericSubtrackDetailsModal.module.scss'
 
-type GenericViewTypes = 'CHALLENGES DETAILS'
+type GenericViewTypes = 'CHALLENGES DETAILS' | 'STATISTICS'
 
 interface GenericSubtrackDetailsModalProps {
     onClose: () => void
     genericStats: MemberStats | undefined
+    chartTitle: string | undefined
+    profile: UserProfile | undefined
+    subTrack: string
     title: string
+    track: string
 }
 
 const GenericSubtrackDetailsModal: FC<GenericSubtrackDetailsModalProps> = (props: GenericSubtrackDetailsModalProps) => {
     // TODO: Enable this when we have challenges details data
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [viewType]: [GenericViewTypes, Dispatch<SetStateAction<GenericViewTypes>>]
-        = useState<GenericViewTypes>('CHALLENGES DETAILS')
+        = useState<GenericViewTypes>('STATISTICS')
+
+    const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle)
+
+    const ratingHistoryOptions: Highcharts.Options | undefined
+        = useRatingHistoryOptions(
+            get(statsHistory, props.track)?.subTracks?.find(
+                (subTrack: any) => subTrack.name === props.subTrack,
+            )?.history,
+            props.chartTitle || '',
+        )
+
+    const memberStatsDist: UserStatsDistributionResponse | undefined = useStatsDistribution({
+        filter: `track=${props.track}&subTrack=${props.subTrack}`,
+    })
+
+    const ratingDistributionOptions: Highcharts.Options | undefined
+        = useRatingDistroOptions(memberStatsDist?.distribution || {}, props.genericStats?.rank?.rating)
 
     return (
         <BaseModal
@@ -34,6 +65,15 @@ const GenericSubtrackDetailsModal: FC<GenericSubtrackDetailsModalProps> = (props
 
             <div className={styles.container}>
                 <div className='member-stat-header'>
+                    <div>
+                        <span
+                            className='member-stat-value'
+                            style={ratingToCSScolor(props.genericStats?.rank.rating || 0)}
+                        >
+                            {props.genericStats?.rank.rating}
+                        </span>
+                        Rating
+                    </div>
                     <div>
                         <span className='member-stat-value'>{props.genericStats?.wins}</span>
                         Wins
@@ -56,16 +96,14 @@ const GenericSubtrackDetailsModal: FC<GenericSubtrackDetailsModalProps> = (props
                         </span>
                         Screening Success Rate
                     </div>
-                    <div>
+                    {/* <div>
                         <span className='member-stat-value'>
                             {numberToFixed(props.genericStats?.avgPlacement || 0)}
                         </span>
                         Average Placement
-                    </div>
+                    </div> */}
                 </div>
-
-                {/* TODO: Enable this when we have challenges details data */}
-                {/* <div className={styles.content}>
+                <div className={styles.content}>
                     <div className={styles.contentHeader}>
                         <h4>{viewType}</h4>
                     </div>
@@ -77,8 +115,31 @@ const GenericSubtrackDetailsModal: FC<GenericSubtrackDetailsModalProps> = (props
                             )
 
                         }
+                        {
+                            viewType === 'STATISTICS' && (
+                                <div>
+                                    {
+                                        ratingHistoryOptions && (
+                                            <HighchartsReact
+                                                highcharts={Highcharts}
+                                                options={ratingHistoryOptions}
+                                            />
+                                        )
+                                    }
+                                    {
+                                        ratingDistributionOptions && (
+                                            <HighchartsReact
+                                                highcharts={Highcharts}
+                                                options={ratingDistributionOptions}
+                                            />
+                                        )
+                                    }
+                                </div>
+                            )
+
+                        }
                     </div>
-                </div> */}
+                </div>
             </div>
         </BaseModal>
     )