From 9d1eb814b3b7b5c3308b0ff264c9c2a8c2cf43bc Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Wed, 13 Sep 2023 12:16:42 +0300 Subject: [PATCH 1/4] MP-355 re-factor rating chart to a hook --- .../AssemblyDetailsModal.tsx | 32 +++-------- .../AssemblyDetailsModal/chart-configs.ts | 26 --------- .../CodeDetailsModal/CodeDetailsModal.tsx | 29 +++------- .../CodeDetailsModal/chart-configs.ts | 26 --------- .../ContentCreationDetailsModal.tsx | 29 +++------- .../chart-configs.ts | 26 --------- .../MMDetailsModal/MMDetailsModal.tsx | 28 +++------- .../MMDetailsModal/chart-configs.ts | 26 --------- .../SRMDetailsModal/SRMDetailsModal.tsx | 28 +++------- .../SRMDetailsModal/chart-configs.ts | 26 --------- .../TestScenariosDetailsModal.tsx | 29 +++------- .../chart-configs.ts | 26 --------- .../UIPrototypeDetailsModal.tsx | 29 +++------- .../UIPrototypeDetailsModal/chart-configs.ts | 26 --------- src/apps/profiles/src/hooks/index.ts | 3 +- ...Options.tsx => useRatingDistroOptions.tsx} | 0 .../src/hooks/useRatingHistoryOptions.tsx | 56 +++++++++++++++++++ src/apps/profiles/src/lib/helpers.ts | 2 + 18 files changed, 113 insertions(+), 334 deletions(-) delete mode 100644 src/apps/profiles/src/components/AssemblyDetailsModal/chart-configs.ts delete mode 100644 src/apps/profiles/src/components/CodeDetailsModal/chart-configs.ts delete mode 100644 src/apps/profiles/src/components/ContentCreationDetailsModal/chart-configs.ts delete mode 100644 src/apps/profiles/src/components/MMDetailsModal/chart-configs.ts delete mode 100644 src/apps/profiles/src/components/SRMDetailsModal/chart-configs.ts delete mode 100644 src/apps/profiles/src/components/TestScenariosDetailsModal/chart-configs.ts delete mode 100644 src/apps/profiles/src/components/UIPrototypeDetailsModal/chart-configs.ts rename src/apps/profiles/src/hooks/{UseRatingDistroOptions.tsx => useRatingDistroOptions.tsx} (100%) create mode 100644 src/apps/profiles/src/hooks/useRatingHistoryOptions.tsx diff --git a/src/apps/profiles/src/components/AssemblyDetailsModal/AssemblyDetailsModal.tsx b/src/apps/profiles/src/components/AssemblyDetailsModal/AssemblyDetailsModal.tsx index 57fd32be4..85a5bd0ad 100644 --- a/src/apps/profiles/src/components/AssemblyDetailsModal/AssemblyDetailsModal.tsx +++ b/src/apps/profiles/src/components/AssemblyDetailsModal/AssemblyDetailsModal.tsx @@ -1,4 +1,4 @@ -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' @@ -6,7 +6,6 @@ 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 = (props: AssemblyDeta const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle) - const ratingHistoryOptions: Highcharts.Options | undefined = useMemo(() => { - const assemblyHistory: Array | 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', diff --git a/src/apps/profiles/src/components/AssemblyDetailsModal/chart-configs.ts b/src/apps/profiles/src/components/AssemblyDetailsModal/chart-configs.ts deleted file mode 100644 index 7421e4dab..000000000 --- a/src/apps/profiles/src/components/AssemblyDetailsModal/chart-configs.ts +++ /dev/null @@ -1,26 +0,0 @@ -export const RATING_CHART_CONFIG: Highcharts.Options = { - credits: { - enabled: false, - }, - series: [{ - name: 'SRM Rating', - type: 'spline', - }], - title: { - text: 'RATING HISTORY', - }, - tooltip: { - pointFormat: '{point.x:%Y-%m-%d}: {point.y:.0f}', - }, - xAxis: { - labels: { - format: '{value:%Y-%m-%d}', - }, - type: 'datetime', - }, - yAxis: { - title: { - text: 'Rating', - }, - }, -} diff --git a/src/apps/profiles/src/components/CodeDetailsModal/CodeDetailsModal.tsx b/src/apps/profiles/src/components/CodeDetailsModal/CodeDetailsModal.tsx index b035ef343..a51bde1c7 100644 --- a/src/apps/profiles/src/components/CodeDetailsModal/CodeDetailsModal.tsx +++ b/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 = (props: CodeDetailsModalProp const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle) - const ratingHistoryOptions: Highcharts.Options | undefined = useMemo(() => { - const codeHistory: Array | 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', diff --git a/src/apps/profiles/src/components/CodeDetailsModal/chart-configs.ts b/src/apps/profiles/src/components/CodeDetailsModal/chart-configs.ts deleted file mode 100644 index 7421e4dab..000000000 --- a/src/apps/profiles/src/components/CodeDetailsModal/chart-configs.ts +++ /dev/null @@ -1,26 +0,0 @@ -export const RATING_CHART_CONFIG: Highcharts.Options = { - credits: { - enabled: false, - }, - series: [{ - name: 'SRM Rating', - type: 'spline', - }], - title: { - text: 'RATING HISTORY', - }, - tooltip: { - pointFormat: '{point.x:%Y-%m-%d}: {point.y:.0f}', - }, - xAxis: { - labels: { - format: '{value:%Y-%m-%d}', - }, - type: 'datetime', - }, - yAxis: { - title: { - text: 'Rating', - }, - }, -} diff --git a/src/apps/profiles/src/components/ContentCreationDetailsModal/ContentCreationDetailsModal.tsx b/src/apps/profiles/src/components/ContentCreationDetailsModal/ContentCreationDetailsModal.tsx index 5bf257435..793701e25 100644 --- a/src/apps/profiles/src/components/ContentCreationDetailsModal/ContentCreationDetailsModal.tsx +++ b/src/apps/profiles/src/components/ContentCreationDetailsModal/ContentCreationDetailsModal.tsx @@ -1,5 +1,5 @@ /* 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' @@ -7,7 +7,6 @@ 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 = (props const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle) - const ratingHistoryOptions: Highcharts.Options | undefined = useMemo(() => { - const contentCreationHistory: Array | 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', diff --git a/src/apps/profiles/src/components/ContentCreationDetailsModal/chart-configs.ts b/src/apps/profiles/src/components/ContentCreationDetailsModal/chart-configs.ts deleted file mode 100644 index 7421e4dab..000000000 --- a/src/apps/profiles/src/components/ContentCreationDetailsModal/chart-configs.ts +++ /dev/null @@ -1,26 +0,0 @@ -export const RATING_CHART_CONFIG: Highcharts.Options = { - credits: { - enabled: false, - }, - series: [{ - name: 'SRM Rating', - type: 'spline', - }], - title: { - text: 'RATING HISTORY', - }, - tooltip: { - pointFormat: '{point.x:%Y-%m-%d}: {point.y:.0f}', - }, - xAxis: { - labels: { - format: '{value:%Y-%m-%d}', - }, - type: 'datetime', - }, - yAxis: { - title: { - text: 'Rating', - }, - }, -} diff --git a/src/apps/profiles/src/components/MMDetailsModal/MMDetailsModal.tsx b/src/apps/profiles/src/components/MMDetailsModal/MMDetailsModal.tsx index cfe8bf51e..bf8e83329 100644 --- a/src/apps/profiles/src/components/MMDetailsModal/MMDetailsModal.tsx +++ b/src/apps/profiles/src/components/MMDetailsModal/MMDetailsModal.tsx @@ -1,5 +1,5 @@ /* 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' @@ -7,7 +7,6 @@ import { BaseModal, LoadingSpinner } from '~/libs/ui' import { MemberStats, ratingToCSScolor, - StatsHistory, UserProfile, UserStatsDistributionResponse, UserStatsHistory, @@ -15,9 +14,8 @@ import { useStatsHistory, } from '~/libs/core' -import { useRatingDistroOptions } from '../../hooks' +import { useRatingDistroOptions, useRatingHistoryOptions } from '../../hooks' -import { RATING_CHART_CONFIG } from './chart-configs' import styles from './MMDetailsModal.module.scss' type SRMViewTypes = 'STATISTICS' | 'MATCH DETAILS' @@ -34,21 +32,13 @@ const MMDetailsModal: FC = (props: MMDetailsModalProps) => const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle) - const ratingHistoryOptions: Highcharts.Options | undefined = useMemo(() => { - const mmHistory: Array = statsHistory?.DATA_SCIENCE?.MARATHON_MATCH?.history || [] - const options: Highcharts.Options = RATING_CHART_CONFIG - - if (!mmHistory.length) return undefined - - options.series = [{ - data: mmHistory.sort((a, b) => b.date - a.date) - .map((srm: StatsHistory) => ({ name: srm.challengeName, x: srm.date, y: srm.rating })), - name: 'Marathon Match Rating', - type: 'spline', - }] - - return options - }, [statsHistory]) + const ratingHistoryOptions: Highcharts.Options | undefined + = useRatingHistoryOptions( + statsHistory?.DATA_SCIENCE?.MARATHON_MATCH?.history, + 'Marathon Match Rating', + 'date', + 'rating', + ) const memberStatsDist: UserStatsDistributionResponse | undefined = useStatsDistribution({ filter: 'track=DATA_SCIENCE&subTrack=MARATHON_MATCH', diff --git a/src/apps/profiles/src/components/MMDetailsModal/chart-configs.ts b/src/apps/profiles/src/components/MMDetailsModal/chart-configs.ts deleted file mode 100644 index 7421e4dab..000000000 --- a/src/apps/profiles/src/components/MMDetailsModal/chart-configs.ts +++ /dev/null @@ -1,26 +0,0 @@ -export const RATING_CHART_CONFIG: Highcharts.Options = { - credits: { - enabled: false, - }, - series: [{ - name: 'SRM Rating', - type: 'spline', - }], - title: { - text: 'RATING HISTORY', - }, - tooltip: { - pointFormat: '{point.x:%Y-%m-%d}: {point.y:.0f}', - }, - xAxis: { - labels: { - format: '{value:%Y-%m-%d}', - }, - type: 'datetime', - }, - yAxis: { - title: { - text: 'Rating', - }, - }, -} diff --git a/src/apps/profiles/src/components/SRMDetailsModal/SRMDetailsModal.tsx b/src/apps/profiles/src/components/SRMDetailsModal/SRMDetailsModal.tsx index 5a16fa046..32e8457a9 100644 --- a/src/apps/profiles/src/components/SRMDetailsModal/SRMDetailsModal.tsx +++ b/src/apps/profiles/src/components/SRMDetailsModal/SRMDetailsModal.tsx @@ -1,5 +1,5 @@ /* eslint-disable complexity */ -import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react' +import { Dispatch, FC, SetStateAction, useState } from 'react' import { bind } from 'lodash' import AnnotationsModule from 'highcharts/modules/annotations' import Highcharts from 'highcharts' @@ -9,7 +9,6 @@ import { BaseModal, Button, LoadingSpinner } from '~/libs/ui' import { ratingToCSScolor, SRMStats, - StatsHistory, UserProfile, UserStatsDistributionResponse, UserStatsHistory, @@ -19,9 +18,8 @@ import { import { ChallengesGrid } from '../ChallengesGrid' import { DivisionGrid } from '../DivisionGrid' -import { useRatingDistroOptions } from '../../hooks' +import { useRatingDistroOptions, useRatingHistoryOptions } from '../../hooks' -import { RATING_CHART_CONFIG } from './chart-configs' import styles from './SRMDetailsModal.module.scss' type SRMViewTypes = 'STATISTICS' | 'SRM DETAILS' | 'PAST SRM' @@ -40,21 +38,13 @@ const SRMDetailsModal: FC = (props: SRMDetailsModalProps) const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle) - const ratingHistoryOptions: Highcharts.Options | undefined = useMemo(() => { - const srmHistory: Array = statsHistory?.DATA_SCIENCE?.SRM?.history || [] - const options: Highcharts.Options = RATING_CHART_CONFIG - - if (!srmHistory.length) return undefined - - options.series = [{ - data: srmHistory.sort((a, b) => b.date - a.date) - .map((srm: StatsHistory) => ({ name: srm.challengeName, x: srm.date, y: srm.rating })), - name: 'SRM Rating', - type: 'spline', - }] - - return options - }, [statsHistory]) + const ratingHistoryOptions: Highcharts.Options | undefined + = useRatingHistoryOptions( + statsHistory?.DATA_SCIENCE?.SRM?.history, + 'SRM Rating', + 'date', + 'rating', + ) const memberStatsDist: UserStatsDistributionResponse | undefined = useStatsDistribution({ filter: 'track=DATA_SCIENCE&subTrack=SRM', diff --git a/src/apps/profiles/src/components/SRMDetailsModal/chart-configs.ts b/src/apps/profiles/src/components/SRMDetailsModal/chart-configs.ts deleted file mode 100644 index 7421e4dab..000000000 --- a/src/apps/profiles/src/components/SRMDetailsModal/chart-configs.ts +++ /dev/null @@ -1,26 +0,0 @@ -export const RATING_CHART_CONFIG: Highcharts.Options = { - credits: { - enabled: false, - }, - series: [{ - name: 'SRM Rating', - type: 'spline', - }], - title: { - text: 'RATING HISTORY', - }, - tooltip: { - pointFormat: '{point.x:%Y-%m-%d}: {point.y:.0f}', - }, - xAxis: { - labels: { - format: '{value:%Y-%m-%d}', - }, - type: 'datetime', - }, - yAxis: { - title: { - text: 'Rating', - }, - }, -} diff --git a/src/apps/profiles/src/components/TestScenariosDetailsModal/TestScenariosDetailsModal.tsx b/src/apps/profiles/src/components/TestScenariosDetailsModal/TestScenariosDetailsModal.tsx index 4b7b1fcc1..39e476c6b 100644 --- a/src/apps/profiles/src/components/TestScenariosDetailsModal/TestScenariosDetailsModal.tsx +++ b/src/apps/profiles/src/components/TestScenariosDetailsModal/TestScenariosDetailsModal.tsx @@ -1,5 +1,5 @@ /* 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' @@ -7,7 +7,6 @@ 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 './TestScenariosDetailsModal.module.scss' type TestScenViewTypes = 'STATISTICS' | 'CHALLENGES DETAILS' @@ -35,24 +33,11 @@ const TestScenariosDetailsModal: FC = (props: Te const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle) - const ratingHistoryOptions: Highcharts.Options | undefined = useMemo(() => { - const testScenHistory: Array | undefined - = statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'TEST_SCENARIOS')?.history - const options: Highcharts.Options = RATING_CHART_CONFIG - - if (!testScenHistory?.length) return undefined - - options.series = [{ - data: testScenHistory.sort((a, b) => b.date - a.date) - .map((testChallenge: StatsHistory) => ({ - name: testChallenge.challengeName, x: testChallenge.ratingDate, y: testChallenge.newRating, - })), - name: 'Test Scenarios Rating', - type: 'spline', - }] - - return options - }, [statsHistory]) + const ratingHistoryOptions: Highcharts.Options | undefined + = useRatingHistoryOptions( + statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'TEST_SCENARIOS')?.history, + 'Test Scenarios Rating', + ) const memberStatsDist: UserStatsDistributionResponse | undefined = useStatsDistribution({ filter: 'track=DEVELOP&subTrack=TEST_SCENARIOS', diff --git a/src/apps/profiles/src/components/TestScenariosDetailsModal/chart-configs.ts b/src/apps/profiles/src/components/TestScenariosDetailsModal/chart-configs.ts deleted file mode 100644 index 7421e4dab..000000000 --- a/src/apps/profiles/src/components/TestScenariosDetailsModal/chart-configs.ts +++ /dev/null @@ -1,26 +0,0 @@ -export const RATING_CHART_CONFIG: Highcharts.Options = { - credits: { - enabled: false, - }, - series: [{ - name: 'SRM Rating', - type: 'spline', - }], - title: { - text: 'RATING HISTORY', - }, - tooltip: { - pointFormat: '{point.x:%Y-%m-%d}: {point.y:.0f}', - }, - xAxis: { - labels: { - format: '{value:%Y-%m-%d}', - }, - type: 'datetime', - }, - yAxis: { - title: { - text: 'Rating', - }, - }, -} diff --git a/src/apps/profiles/src/components/UIPrototypeDetailsModal/UIPrototypeDetailsModal.tsx b/src/apps/profiles/src/components/UIPrototypeDetailsModal/UIPrototypeDetailsModal.tsx index 59b702208..2b80de115 100644 --- a/src/apps/profiles/src/components/UIPrototypeDetailsModal/UIPrototypeDetailsModal.tsx +++ b/src/apps/profiles/src/components/UIPrototypeDetailsModal/UIPrototypeDetailsModal.tsx @@ -1,5 +1,5 @@ /* 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' @@ -7,7 +7,6 @@ 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 './UIPrototypeDetailsModal.module.scss' type UIPrototypeViewTypes = 'STATISTICS' | 'CHALLENGES DETAILS' @@ -35,24 +33,11 @@ const UIPrototypeDetailsModal: FC = (props: UIProt const statsHistory: UserStatsHistory | undefined = useStatsHistory(props.profile?.handle) - const ratingHistoryOptions: Highcharts.Options | undefined = useMemo(() => { - const uiProtypeHistory: Array | undefined - = statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'UI_PROTOTYPE_COMPETITION')?.history - const options: Highcharts.Options = RATING_CHART_CONFIG - - if (!uiProtypeHistory?.length) return undefined - - options.series = [{ - data: uiProtypeHistory.sort((a, b) => b.date - a.date) - .map((testChallenge: StatsHistory) => ({ - name: testChallenge.challengeName, x: testChallenge.ratingDate, y: testChallenge.newRating, - })), - name: 'UI Prototype Rating', - type: 'spline', - }] - - return options - }, [statsHistory]) + const ratingHistoryOptions: Highcharts.Options | undefined + = useRatingHistoryOptions( + statsHistory?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'UI_PROTOTYPE_COMPETITION')?.history, + 'UI Prototype Rating', + ) const memberStatsDist: UserStatsDistributionResponse | undefined = useStatsDistribution({ filter: 'track=DEVELOP&subTrack=UI_PROTOTYPE_COMPETITION', diff --git a/src/apps/profiles/src/components/UIPrototypeDetailsModal/chart-configs.ts b/src/apps/profiles/src/components/UIPrototypeDetailsModal/chart-configs.ts deleted file mode 100644 index 7421e4dab..000000000 --- a/src/apps/profiles/src/components/UIPrototypeDetailsModal/chart-configs.ts +++ /dev/null @@ -1,26 +0,0 @@ -export const RATING_CHART_CONFIG: Highcharts.Options = { - credits: { - enabled: false, - }, - series: [{ - name: 'SRM Rating', - type: 'spline', - }], - title: { - text: 'RATING HISTORY', - }, - tooltip: { - pointFormat: '{point.x:%Y-%m-%d}: {point.y:.0f}', - }, - xAxis: { - labels: { - format: '{value:%Y-%m-%d}', - }, - type: 'datetime', - }, - yAxis: { - title: { - text: 'Rating', - }, - }, -} diff --git a/src/apps/profiles/src/hooks/index.ts b/src/apps/profiles/src/hooks/index.ts index 634e60a8c..304fa3400 100644 --- a/src/apps/profiles/src/hooks/index.ts +++ b/src/apps/profiles/src/hooks/index.ts @@ -1 +1,2 @@ -export * from './UseRatingDistroOptions' +export * from './useRatingDistroOptions' +export * from './useRatingHistoryOptions' diff --git a/src/apps/profiles/src/hooks/UseRatingDistroOptions.tsx b/src/apps/profiles/src/hooks/useRatingDistroOptions.tsx similarity index 100% rename from src/apps/profiles/src/hooks/UseRatingDistroOptions.tsx rename to src/apps/profiles/src/hooks/useRatingDistroOptions.tsx diff --git a/src/apps/profiles/src/hooks/useRatingHistoryOptions.tsx b/src/apps/profiles/src/hooks/useRatingHistoryOptions.tsx new file mode 100644 index 000000000..258bf4838 --- /dev/null +++ b/src/apps/profiles/src/hooks/useRatingHistoryOptions.tsx @@ -0,0 +1,56 @@ +import { useMemo } from 'react' +import { get } from 'lodash' +import Highcharts from 'highcharts' + +import { StatsHistory } from '~/libs/core' + +export const RATING_CHART_CONFIG: Highcharts.Options = { + credits: { + enabled: false, + }, + title: { + text: 'RATING HISTORY', + }, + tooltip: { + pointFormat: '{point.x:%Y-%m-%d}: {point.y:.0f}', + }, + xAxis: { + labels: { + format: '{value:%Y-%m-%d}', + }, + type: 'datetime', + }, + yAxis: { + title: { + text: 'Rating', + }, + }, +} + +export function useRatingHistoryOptions( + trackHistory: Array | undefined, + seriesName: string, + dateField: string = 'ratingDate', + ratingField: string = 'newRating', +): Highcharts.Options | undefined { + const ratingHistoryOptions: Highcharts.Options | undefined = useMemo(() => { + const options: Highcharts.Options = RATING_CHART_CONFIG + + if (!trackHistory?.length) return undefined + + options.series = [{ + data: trackHistory.sort((a, b) => b.date - a.date) + .map((hisChallenge: StatsHistory) => ({ + name: hisChallenge.challengeName, + x: get(hisChallenge, dateField), + y: get(hisChallenge, ratingField), + })), + name: seriesName, + type: 'spline', + }] + + return options + }, [dateField, ratingField, seriesName, trackHistory]) + + return ratingHistoryOptions +} diff --git a/src/apps/profiles/src/lib/helpers.ts b/src/apps/profiles/src/lib/helpers.ts index 64ebf07b9..f55a20069 100644 --- a/src/apps/profiles/src/lib/helpers.ts +++ b/src/apps/profiles/src/lib/helpers.ts @@ -73,6 +73,8 @@ export function subTrackLabelToHumanName(label: string): string { return 'Architecture' case 'UI_PROTOTYPE_COMPETITION': return 'UI Prototype Competition' + case 'IDEA_GENERATION': + return 'Idea Generation' default: return label } From 9a157ca64c9236413762dd9ee2330fc264383d93 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 15 Sep 2023 19:12:40 +0300 Subject: [PATCH 2/4] MP-355 update generic details modal for charts --- .../GenericSubtrackDetailsModal.tsx | 60 ++++++++++++++++--- .../ChallengeWinsBanner.tsx | 52 ++++++++++++++++ 2 files changed, 105 insertions(+), 7 deletions(-) diff --git a/src/apps/profiles/src/components/GenericSubtrackDetailsModal/GenericSubtrackDetailsModal.tsx b/src/apps/profiles/src/components/GenericSubtrackDetailsModal/GenericSubtrackDetailsModal.tsx index dd921c8c0..8040c7d69 100644 --- a/src/apps/profiles/src/components/GenericSubtrackDetailsModal/GenericSubtrackDetailsModal.tsx +++ b/src/apps/profiles/src/components/GenericSubtrackDetailsModal/GenericSubtrackDetailsModal.tsx @@ -1,28 +1,53 @@ /* 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, + MemberStats, 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 = (props: GenericSubtrackDetailsModalProps) => { // TODO: Enable this when we have challenges details data // eslint-disable-next-line @typescript-eslint/no-unused-vars const [viewType]: [GenericViewTypes, Dispatch>] - = useState('CHALLENGES DETAILS') + = useState('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 ( = (props Average Placement - - {/* TODO: Enable this when we have challenges details data */} - {/*
+

{viewType}

@@ -77,8 +100,31 @@ const GenericSubtrackDetailsModal: FC = (props ) } + { + viewType === 'STATISTICS' && ( +
+ { + ratingHistoryOptions && ( + + ) + } + { + ratingDistributionOptions && ( + + ) + } +
+ ) + + }
-
*/} + ) diff --git a/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.tsx b/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.tsx index 118f71deb..d0678dced 100644 --- a/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.tsx +++ b/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.tsx @@ -355,6 +355,10 @@ const ChallengeWinsBanner: FC = (props: ChallengeWinsB onClose={bind(handleChallengeWinModalToggle, this, 'WIREFRAMES')} genericStats={wireframesStats} title='Wireframes' + profile={props.profile} + track='DESIGN' + subTrack='WIREFRAMES' + chartTitle='Wireframes Rating' /> )} @@ -363,6 +367,10 @@ const ChallengeWinsBanner: FC = (props: ChallengeWinsB onClose={bind(handleChallengeWinModalToggle, this, 'FRONT_END_FLASH')} genericStats={frontEndFlashStats} title='Front End Flash' + profile={props.profile} + track='DESIGN' + subTrack='FRONT_END_FLASH' + chartTitle='Front End Flash Rating' /> )} @@ -371,6 +379,10 @@ const ChallengeWinsBanner: FC = (props: ChallengeWinsB onClose={bind(handleChallengeWinModalToggle, this, 'PRINT_OR_PRESENTATION')} genericStats={printPresentationStats} title='Print or Presentation' + profile={props.profile} + track='DESIGN' + subTrack='PRINT_OR_PRESENTATION' + chartTitle='Print or Presentation Rating' /> )} @@ -379,6 +391,10 @@ const ChallengeWinsBanner: FC = (props: ChallengeWinsB onClose={bind(handleChallengeWinModalToggle, this, 'STUDIO_OTHER')} genericStats={studioOtherStats} title='Studio Other' + profile={props.profile} + track='DESIGN' + subTrack='STUDIO_OTHER' + chartTitle='Studio Rating' /> )} @@ -387,6 +403,10 @@ const ChallengeWinsBanner: FC = (props: ChallengeWinsB onClose={bind(handleChallengeWinModalToggle, this, 'APPLICATION_FRONT_END_DESIGN')} genericStats={feDesignStats} title='Application Front End Design' + profile={props.profile} + track='DESIGN' + subTrack='APPLICATION_FRONT_END_DESIGN' + chartTitle='Application Front End Design Rating' /> )} @@ -395,6 +415,10 @@ const ChallengeWinsBanner: FC = (props: ChallengeWinsB onClose={bind(handleChallengeWinModalToggle, this, 'BANNERS_OR_ICONS')} genericStats={bannersIconsStats} title='Banners or Icons' + profile={props.profile} + track='DESIGN' + subTrack='BANNERS_OR_ICONS' + chartTitle='Banners or Icons Rating' /> )} @@ -403,6 +427,10 @@ const ChallengeWinsBanner: FC = (props: ChallengeWinsB onClose={bind(handleChallengeWinModalToggle, this, 'WIDGET_OR_MOBILE_SCREEN_DESIGN')} genericStats={widgetMobileStats} title='Widget or Mobile Screen Design' + profile={props.profile} + track='DESIGN' + subTrack='WIDGET_OR_MOBILE_SCREEN_DESIGN' + chartTitle='Widget or Mobile Screen Design Rating' /> )} @@ -411,6 +439,10 @@ const ChallengeWinsBanner: FC = (props: ChallengeWinsB onClose={bind(handleChallengeWinModalToggle, this, 'TEST_SUITES')} genericStats={testSuitesStats} title='Test Suites' + profile={props.profile} + track='DEVELOP' + subTrack='TEST_SUITES' + chartTitle='Test Suites Rating' /> )} @@ -419,6 +451,10 @@ const ChallengeWinsBanner: FC = (props: ChallengeWinsB onClose={bind(handleChallengeWinModalToggle, this, 'SPECIFICATION')} genericStats={specStats} title='Specification' + profile={props.profile} + track='DEVELOP' + subTrack='SPECIFICATION' + chartTitle='Specification Rating' /> )} @@ -427,6 +463,10 @@ const ChallengeWinsBanner: FC = (props: ChallengeWinsB onClose={bind(handleChallengeWinModalToggle, this, 'DEVELOPMENT')} genericStats={developmentStats} title='Development' + profile={props.profile} + track='DEVELOP' + subTrack='DEVELOPMENT' + chartTitle='Development Rating' /> )} @@ -435,6 +475,10 @@ const ChallengeWinsBanner: FC = (props: ChallengeWinsB onClose={bind(handleChallengeWinModalToggle, this, 'ARCHITECTURE')} genericStats={architectureStats} title='Architecture' + profile={props.profile} + track='DEVELOP' + subTrack='ARCHITECTURE' + chartTitle='Architecture Rating' /> )} @@ -443,6 +487,10 @@ const ChallengeWinsBanner: FC = (props: ChallengeWinsB onClose={bind(handleChallengeWinModalToggle, this, 'COPILOT_POSTING')} genericStats={copilotPostingStats} title='Copilot Posting' + profile={props.profile} + track='DEVELOP' + subTrack='COPILOT_POSTING' + chartTitle='Copilot Posting Rating' /> )} @@ -451,6 +499,10 @@ const ChallengeWinsBanner: FC = (props: ChallengeWinsB onClose={bind(handleChallengeWinModalToggle, this, 'DESIGN')} genericStats={designStats} title='Design' + profile={props.profile} + track='DEVELOP' + subTrack='DESIGN' + chartTitle='Design Rating' /> )} From 65f573447a3c48704e1f8b6b24d6e0c858b85a59 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 18 Sep 2023 07:34:52 +0300 Subject: [PATCH 3/4] MP-355 tweaks on modal --- .../AssemblyDetailsModal.tsx | 4 ++++ .../GenericSubtrackDetailsModal.tsx | 17 +++++++++++++---- src/apps/profiles/src/lib/helpers.ts | 2 ++ 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/apps/profiles/src/components/AssemblyDetailsModal/AssemblyDetailsModal.tsx b/src/apps/profiles/src/components/AssemblyDetailsModal/AssemblyDetailsModal.tsx index 85a5bd0ad..25a8577ae 100644 --- a/src/apps/profiles/src/components/AssemblyDetailsModal/AssemblyDetailsModal.tsx +++ b/src/apps/profiles/src/components/AssemblyDetailsModal/AssemblyDetailsModal.tsx @@ -113,6 +113,10 @@ const AssemblyDetailsModal: FC = (props: AssemblyDeta */} +
+

{viewType}

+
+
{ viewType === 'STATISTICS' && ( diff --git a/src/apps/profiles/src/components/GenericSubtrackDetailsModal/GenericSubtrackDetailsModal.tsx b/src/apps/profiles/src/components/GenericSubtrackDetailsModal/GenericSubtrackDetailsModal.tsx index 8040c7d69..a8df50313 100644 --- a/src/apps/profiles/src/components/GenericSubtrackDetailsModal/GenericSubtrackDetailsModal.tsx +++ b/src/apps/profiles/src/components/GenericSubtrackDetailsModal/GenericSubtrackDetailsModal.tsx @@ -6,7 +6,7 @@ import HighchartsReact from 'highcharts-react-official' import { BaseModal } from '~/libs/ui' import { - MemberStats, UserProfile, UserStatsDistributionResponse, UserStatsHistory, useStatsDistribution, useStatsHistory, + MemberStats, ratingToCSScolor, UserProfile, UserStatsDistributionResponse, UserStatsHistory, useStatsDistribution, useStatsHistory, } from '~/libs/core' import { numberToFixed } from '../../lib' @@ -47,7 +47,7 @@ const GenericSubtrackDetailsModal: FC = (props }) const ratingDistributionOptions: Highcharts.Options | undefined - = useRatingDistroOptions(memberStatsDist?.distribution || {}, props.genericStats?.rank.rating) + = useRatingDistroOptions(memberStatsDist?.distribution || {}, props.genericStats?.rank?.rating) return ( = (props
+
+ + {props.genericStats?.rank.rating} + + Rating +
{props.genericStats?.wins} Wins @@ -81,12 +90,12 @@ const GenericSubtrackDetailsModal: FC = (props Screening Success Rate
-
+ {/*
{numberToFixed(props.genericStats?.avgPlacement || 0)} Average Placement -
+
*/}
diff --git a/src/apps/profiles/src/lib/helpers.ts b/src/apps/profiles/src/lib/helpers.ts index f55a20069..ce56d9798 100644 --- a/src/apps/profiles/src/lib/helpers.ts +++ b/src/apps/profiles/src/lib/helpers.ts @@ -75,6 +75,8 @@ export function subTrackLabelToHumanName(label: string): string { return 'UI Prototype Competition' case 'IDEA_GENERATION': return 'Idea Generation' + case 'RIA_BUILD_COMPETITION': + return 'RIA Build Competition' default: return label } From 98da827dd6b5999ada5a5b631cc26eb5beea1c7c Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 18 Sep 2023 07:39:01 +0300 Subject: [PATCH 4/4] MP-355 fixed lintng --- .../GenericSubtrackDetailsModal.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/apps/profiles/src/components/GenericSubtrackDetailsModal/GenericSubtrackDetailsModal.tsx b/src/apps/profiles/src/components/GenericSubtrackDetailsModal/GenericSubtrackDetailsModal.tsx index a8df50313..d3e6c2fbd 100644 --- a/src/apps/profiles/src/components/GenericSubtrackDetailsModal/GenericSubtrackDetailsModal.tsx +++ b/src/apps/profiles/src/components/GenericSubtrackDetailsModal/GenericSubtrackDetailsModal.tsx @@ -6,7 +6,13 @@ import HighchartsReact from 'highcharts-react-official' import { BaseModal } from '~/libs/ui' import { - MemberStats, ratingToCSScolor, UserProfile, UserStatsDistributionResponse, UserStatsHistory, useStatsDistribution, useStatsHistory, + MemberStats, + ratingToCSScolor, + UserProfile, + UserStatsDistributionResponse, + UserStatsHistory, + useStatsDistribution, + useStatsHistory, } from '~/libs/core' import { numberToFixed } from '../../lib'