From ebbfb8e907b55496796e89f9817d30a83e7754e0 Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Wed, 12 Oct 2022 13:26:37 +0200 Subject: [PATCH] possibility of choose metric --- src/components/elements/Filter.js | 16 +- src/components/sections/FilterBy.js | 2 +- .../sections/Leaderboard/Leaderboard.js | 164 +++++++++++------- .../Leaderboard/_renderSubmissions.js | 11 +- 4 files changed, 117 insertions(+), 76 deletions(-) diff --git a/src/components/elements/Filter.js b/src/components/elements/Filter.js index 858e0d4..c1a8b06 100644 --- a/src/components/elements/Filter.js +++ b/src/components/elements/Filter.js @@ -7,26 +7,17 @@ const FilterStyle = styled(FlexRow)` width: fit-content; height: 36px; padding: 8px 16px; - border-radius: 32px; + border-radius: ${({borderRadius}) => borderRadius ? borderRadius : '32px'}; border: 1px solid ${({theme}) => theme.colors.dark}; box-shadow: ${({theme}) => theme.shadow}; cursor: pointer; background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white}; - //transition: color, background-color 0.3s ease-in-out; transition: transform 0.3s ease-in-out; z-index: 2; + color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark}; &:hover { - //background-color: ${({theme}) => theme.colors.dark}; transform: scale(1.1); - - // p { - // color: ${({theme}) => theme.colors.white}; - // } - // - // span { - // background-color: ${({theme}) => theme.colors.white}; - // } } p { @@ -44,14 +35,13 @@ const FilterStyle = styled(FlexRow)` const Filter = (props) => { const onCheckHandler = (e) => { - console.log('elo'); if (e.target.checked) props.handler(Number(e.target.value)); }; return ( <> - {props.children} diff --git a/src/components/sections/FilterBy.js b/src/components/sections/FilterBy.js index 2a48358..51ead60 100644 --- a/src/components/sections/FilterBy.js +++ b/src/components/sections/FilterBy.js @@ -12,7 +12,7 @@ const FilterBy = (props) => { return ( props.options.map((option, index) => { return ( - diff --git a/src/components/sections/Leaderboard/Leaderboard.js b/src/components/sections/Leaderboard/Leaderboard.js index 62305f7..f5e0619 100644 --- a/src/components/sections/Leaderboard/Leaderboard.js +++ b/src/components/sections/Leaderboard/Leaderboard.js @@ -4,7 +4,7 @@ import theme from '../../../utils/theme'; import {FlexColumn, FlexRow} from '../../../utils/containers'; import {H2, H3} from '../../../utils/fonts'; import Table from '../../elements/Table'; -import styled from 'styled-components'; +// import styled from 'styled-components'; import PropsTypes from 'prop-types'; import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard'; import _renderSubmissions from './_renderSubmissions'; @@ -12,51 +12,53 @@ import _tableSearchQueryHandler from './_tableSearchQueryHandler'; import {CALC_PAGES} from '../../../utils/globals'; import Search from '../../elements/Search'; import Pager from '../../elements/Pager'; +import Filter from '../../elements/Filter'; -const BoardVariantMobile = styled(FlexRow)` - transition: color, background-color 0.3s ease-in-out; - background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white}; - color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark}; - font-size: 10px; - font-family: 'Roboto', sans-serif; - font-weight: 300; - border-radius: 16px; - border: 1px solid ${({theme}) => theme.colors.dark}; - padding: 6px 8px; - cursor: pointer; - box-shadow: ${({theme}) => theme.shadowRight}; +// const BoardVariantMobile = styled(FlexRow)` +// transition: color, background-color 0.3s ease-in-out; +// background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white}; +// color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark}; +// font-size: 10px; +// font-family: 'Roboto', sans-serif; +// font-weight: 300; +// border-radius: 16px; +// border: 1px solid ${({theme}) => theme.colors.dark}; +// padding: 6px 8px; +// cursor: pointer; +// box-shadow: ${({theme}) => theme.shadowRight}; +// +// * { +// cursor: pointer; +// } +// +// &:hover { +// background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white}; +// color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark}; +// } +// `; - * { - cursor: pointer; - } - - &:hover { - background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white}; - color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark}; - } -`; - -const BoardVariantDesktop = styled(FlexRow)` - transition: background-color 0.3s ease-in-out; - border: 1px solid ${({theme}) => theme.colors.green05}; - background-color: ${({theme, active}) => active ? theme.colors.green05 : theme.colors.white}; - - &:hover { - background-color: ${({theme}) => theme.colors.green05}; - } - - div { - text-transform: uppercase; - } -`; +// const BoardVariantDesktop = styled(FlexRow)` +// transition: background-color 0.3s ease-in-out; +// border: 1px solid ${({theme}) => theme.colors.green05}; +// background-color: ${({theme, active}) => active ? theme.colors.green05 : theme.colors.white}; +// +// &:hover { +// background-color: ${({theme}) => theme.colors.green05}; +// } +// +// div { +// text-transform: uppercase; +// } +// `; const Leaderboard = (props) => { - const [variant, setVariant] = React.useState(0); + // const [variant, setVariant] = React.useState(0); const headerElements = ['#', 'submitter', 'result', 'entries', 'when']; const [entriesFromApi, setEntriesFromApi] = React.useState([]); const [entries, setEntries] = React.useState([]); const [pageNr, setPageNr] = React.useState(1); const [loading, setLoading] = React.useState(true); + const [metricChoose, setMetricChoose] = React.useState(0); React.useEffect(() => { challengeDataRequest(props.challengeName); @@ -69,7 +71,7 @@ const Leaderboard = (props) => { const renderSubmissions = (gridGap) => { return _renderSubmissions(pageNr, entries - ? entries : [], gridGap); + ? entries : [], gridGap, metricChoose); }; const tableSearchQueryHandler = (event) => { @@ -90,19 +92,49 @@ const Leaderboard = (props) => { } }; + const getPossibleMetrics = () => { + let metrics = []; + for (let entry of entriesFromApi) { + for (let evaluation of entry.evaluations) { + let metric = evaluation.test.metric; + if (metric && !metrics.includes(metric)) { + metrics.push(metric); + } + } + } + return metrics; + }; + + const metricChooseHandler = (value) => { + setMetricChoose(value); + }; + const mobileRender = () => { return (

Leaderboard

- - setVariant(0)}> - By user - - setVariant(1)}> - By metric - + {/**/} + {/* setVariant(0)}>*/} + {/* By user*/} + {/* */} + {/* setVariant(1)}>*/} + {/* By metric*/} + {/* */} + {/**/} + +

+ Metric: +

+ {getPossibleMetrics() ? getPossibleMetrics().map((metric, index) => { + return ( + + {metric} + ); + }) : ''} {

Leaderboard

- - setVariant(0)}> -

- By user -

- - setVariant(1)}> -

- By metric -

- + {/**/} + {/* setVariant(0)}>*/} + {/*

*/} + {/* By user*/} + {/*

*/} + {/* */} + {/* setVariant(1)}>*/} + {/*

*/} + {/* By metric*/} + {/*

*/} + {/* */} + {/**/} + +

+ Metric: +

+ {getPossibleMetrics() ? getPossibleMetrics().map((metric, index) => { + return ( + + {metric} + ); + }) : ''}
+ renderElements={renderSubmissions} + headerElements={headerElements}/> { +const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose) => { const n = (pageNr - 1) * ELEMENTS_PER_PAGE; if (submissions) { return ( - {submissions.slice(n, n + ELEMENTS_PER_PAGE).map(({submitter, when, evaluations, times}, index) => { + {submissions.slice(n, n + ELEMENTS_PER_PAGE).sort((a, b) => b.evaluations[metricChoose].score - a.evaluations[metricChoose].score).map(({ + submitter, + when, + evaluations, + times + }, index) => { return ( @@ -28,7 +33,7 @@ const _renderSubmissions = (pageNr, submissions, gridGap) => { {submitter ? submitter : '[anonymous]'} - {evaluations[0] ? evaluations[0].score : 'xxx'} + {evaluations[metricChoose] ? evaluations[metricChoose].score : 'xxx'} {times ? times : 1}