s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

possibility of choose metric

Browse Source
This commit is contained in:
mattyl006 2022-10-12 13:26:37 +02:00
parent c4b7d21a5c
commit ebbfb8e907
4 changed files with 117 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/elements/Filter.js
View File

@ -7,26 +7,17 @@ const FilterStyle = styled(FlexRow)`
width: fit-content; width: fit-content;
height: 36px; height: 36px;
padding: 8px 16px; padding: 8px 16px;
border-radius: 32px; border-radius: ${({borderRadius}) => borderRadius ? borderRadius : '32px'};
border: 1px solid ${({theme}) => theme.colors.dark}; border: 1px solid ${({theme}) => theme.colors.dark};
box-shadow: ${({theme}) => theme.shadow}; box-shadow: ${({theme}) => theme.shadow};
cursor: pointer; cursor: pointer;
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white}; 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; transition: transform 0.3s ease-in-out;
z-index: 2; z-index: 2;
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
&:hover { &:hover {
//background-color: ${({theme}) => theme.colors.dark};
transform: scale(1.1); transform: scale(1.1);
// p {
// color: ${({theme}) => theme.colors.white};
// }
//
// span {
// background-color: ${({theme}) => theme.colors.white};
// }
} }
p { p {
@ -44,14 +35,13 @@ const FilterStyle = styled(FlexRow)`
const Filter = (props) => { const Filter = (props) => {
const onCheckHandler = (e) => { const onCheckHandler = (e) => {
console.log('elo');
if (e.target.checked) if (e.target.checked)
props.handler(Number(e.target.value)); props.handler(Number(e.target.value));
}; };
return ( return (
<> <>
<FilterStyle as='label' htmlFor={props.id} <FilterStyle as='label' borderRadius={props.borderRadius} htmlFor={props.id}
active={props.option === props.index}> active={props.option === props.index}>
{props.children} {props.children}
</FilterStyle> </FilterStyle>

2
src/components/sections/FilterBy.js
View File

@ -12,7 +12,7 @@ const FilterBy = (props) => {
return ( return (
props.options.map((option, index) => { props.options.map((option, index) => {
return ( return (
<Filter key={`filter_option-${index}`} active={props.active} <Filter key={`filter_option-${index}`}
option={props.option} handler={props.handler} option={props.option} handler={props.handler}
id={`${props.header}-${option.name}-${index}`} name={props.header} index={index}> id={`${props.header}-${option.name}-${index}`} name={props.header} index={index}>
<Body as='p'> <Body as='p'>

164
src/components/sections/Leaderboard/Leaderboard.js
View File

@ -4,7 +4,7 @@ import theme from '../../../utils/theme';
import {FlexColumn, FlexRow} from '../../../utils/containers'; import {FlexColumn, FlexRow} from '../../../utils/containers';
import {H2, H3} from '../../../utils/fonts'; import {H2, H3} from '../../../utils/fonts';
import Table from '../../elements/Table'; import Table from '../../elements/Table';
import styled from 'styled-components'; // import styled from 'styled-components';
import PropsTypes from 'prop-types'; import PropsTypes from 'prop-types';
import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard'; import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard';
import _renderSubmissions from './_renderSubmissions'; import _renderSubmissions from './_renderSubmissions';
@ -12,51 +12,53 @@ import _tableSearchQueryHandler from './_tableSearchQueryHandler';
import {CALC_PAGES} from '../../../utils/globals'; import {CALC_PAGES} from '../../../utils/globals';
import Search from '../../elements/Search'; import Search from '../../elements/Search';
import Pager from '../../elements/Pager'; import Pager from '../../elements/Pager';
import Filter from '../../elements/Filter';
const BoardVariantMobile = styled(FlexRow)` // const BoardVariantMobile = styled(FlexRow)`
transition: color, background-color 0.3s ease-in-out; // transition: color, background-color 0.3s ease-in-out;
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white}; // background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark}; // color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
font-size: 10px; // font-size: 10px;
font-family: 'Roboto', sans-serif; // font-family: 'Roboto', sans-serif;
font-weight: 300; // font-weight: 300;
border-radius: 16px; // border-radius: 16px;
border: 1px solid ${({theme}) => theme.colors.dark}; // border: 1px solid ${({theme}) => theme.colors.dark};
padding: 6px 8px; // padding: 6px 8px;
cursor: pointer; // cursor: pointer;
box-shadow: ${({theme}) => theme.shadowRight}; // 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};
// }
// `;
* { // const BoardVariantDesktop = styled(FlexRow)`
cursor: pointer; // 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, active}) => active ? theme.colors.dark : theme.colors.white}; // &:hover {
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark}; // background-color: ${({theme}) => theme.colors.green05};
} // }
`; //
// div {
const BoardVariantDesktop = styled(FlexRow)` // text-transform: uppercase;
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 Leaderboard = (props) => {
const [variant, setVariant] = React.useState(0); // const [variant, setVariant] = React.useState(0);
const headerElements = ['#', 'submitter', 'result', 'entries', 'when']; const headerElements = ['#', 'submitter', 'result', 'entries', 'when'];
const [entriesFromApi, setEntriesFromApi] = React.useState([]); const [entriesFromApi, setEntriesFromApi] = React.useState([]);
const [entries, setEntries] = React.useState([]); const [entries, setEntries] = React.useState([]);
const [pageNr, setPageNr] = React.useState(1); const [pageNr, setPageNr] = React.useState(1);
const [loading, setLoading] = React.useState(true); const [loading, setLoading] = React.useState(true);
const [metricChoose, setMetricChoose] = React.useState(0);
React.useEffect(() => { React.useEffect(() => {
challengeDataRequest(props.challengeName); challengeDataRequest(props.challengeName);
@ -69,7 +71,7 @@ const Leaderboard = (props) => {
const renderSubmissions = (gridGap) => { const renderSubmissions = (gridGap) => {
return _renderSubmissions(pageNr, entries return _renderSubmissions(pageNr, entries
? entries : [], gridGap); ? entries : [], gridGap, metricChoose);
}; };
const tableSearchQueryHandler = (event) => { 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 = () => { const mobileRender = () => {
return ( return (
<FlexColumn padding='24px 12px' as='section'> <FlexColumn padding='24px 12px' as='section'>
<H2 as='h2' margin='0 0 12px 0'> <H2 as='h2' margin='0 0 12px 0'>
Leaderboard Leaderboard
</H2> </H2>
<FlexRow gap='12px' margin='0 0 24px 0'> {/*<FlexRow gap='12px' margin='0 0 24px 0'>*/}
<BoardVariantMobile as='button' active={0 === variant} onClick={() => setVariant(0)}> {/* <BoardVariantMobile as='button' active={0 === variant} onClick={() => setVariant(0)}>*/}
By user {/* By user*/}
</BoardVariantMobile> {/* </BoardVariantMobile>*/}
<BoardVariantMobile as='button' active={1 === variant} onClick={() => setVariant(1)}> {/* <BoardVariantMobile as='button' active={1 === variant} onClick={() => setVariant(1)}>*/}
By metric {/* By metric*/}
</BoardVariantMobile> {/* </BoardVariantMobile>*/}
{/*</FlexRow>*/}
<FlexRow width='100%' gap='16px' as='section' margin='16px 0'>
<H3>
Metric:
</H3>
{getPossibleMetrics() ? getPossibleMetrics().map((metric, index) => {
return (
<Filter option={metricChoose} index={index} borderRadius='4px'
key={`metric-${index}`} handler={metricChooseHandler}
id={`metric-${index}`} name={`metric-${index}`}>
{metric}
</Filter>);
}) : ''}
</FlexRow> </FlexRow>
<Search searchQueryHandler={tableSearchQueryHandler}/> <Search searchQueryHandler={tableSearchQueryHandler}/>
<Table challengeName={props.challengeName} loading={loading} <Table challengeName={props.challengeName} loading={loading}
@ -121,23 +153,37 @@ const Leaderboard = (props) => {
<H2 as='h2' margin='0 0 32px 0'> <H2 as='h2' margin='0 0 32px 0'>
Leaderboard Leaderboard
</H2> </H2>
<FlexRow border={`1px solid ${theme.colors.green05}`} margin='0 0 48px 0'> {/*<FlexRow border={`1px solid ${theme.colors.green05}`} margin='0 0 48px 0'>*/}
<BoardVariantDesktop as='button' width='150px' height='48px' {/* <BoardVariantDesktop as='button' width='150px' height='48px'*/}
active={0 === variant} onClick={() => setVariant(0)}> {/* active={0 === variant} onClick={() => setVariant(0)}>*/}
<H3 as='span'> {/* <H3 as='span'>*/}
By user {/* By user*/}
</H3> {/* </H3>*/}
</BoardVariantDesktop> {/* </BoardVariantDesktop>*/}
<BoardVariantDesktop as='button' width='150px' height='48px' {/* <BoardVariantDesktop as='button' width='150px' height='48px'*/}
active={1 === variant} onClick={() => setVariant(1)}> {/* active={1 === variant} onClick={() => setVariant(1)}>*/}
<H3 as='span'> {/* <H3 as='span'>*/}
By metric {/* By metric*/}
</H3> {/* </H3>*/}
</BoardVariantDesktop> {/* </BoardVariantDesktop>*/}
{/*</FlexRow>*/}
<FlexRow width='100%' gap='32px' as='section' margin='32px 0'>
<H3>
Metric:
</H3>
{getPossibleMetrics() ? getPossibleMetrics().map((metric, index) => {
return (
<Filter option={metricChoose} index={index} borderRadius='4px' width='200px' height='40px'
key={`metric-${index}`} handler={metricChooseHandler}
id={`metric-${index}`} name={`metric-${index}`}>
{metric}
</Filter>);
}) : ''}
</FlexRow> </FlexRow>
<Search searchQueryHandler={tableSearchQueryHandler}/> <Search searchQueryHandler={tableSearchQueryHandler}/>
<Table challengeName={props.challengeName} loading={loading} <Table challengeName={props.challengeName} loading={loading}
renderElements={renderSubmissions} headerElements={headerElements}/> renderElements={renderSubmissions}
headerElements={headerElements}/>
<Pager pageNr={pageNr} width='72px' borderRadius='64px' <Pager pageNr={pageNr} width='72px' borderRadius='64px'
pages={CALC_PAGES(entries ? entries : [])} pages={CALC_PAGES(entries ? entries : [])}
nextPage={nextPage} previousPage={previousPage} nextPage={nextPage} previousPage={previousPage}

11
src/components/sections/Leaderboard/_renderSubmissions.js
View File

@ -12,12 +12,17 @@ const Line = styled(FlexRow)`
height: 1px; height: 1px;
`; `;
const _renderSubmissions = (pageNr, submissions, gridGap) => { const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose) => {
const n = (pageNr - 1) * ELEMENTS_PER_PAGE; const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
if (submissions) { if (submissions) {
return ( return (
<FlexColumn as='tbody' width='100%'> <FlexColumn as='tbody' width='100%'>
{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 ( return (
<Grid as='tr' key={`leaderboard-row-${index}`} gridTemplateColumns='1fr 3fr 1fr 1fr 2fr' <Grid as='tr' key={`leaderboard-row-${index}`} gridTemplateColumns='1fr 3fr 1fr 1fr 2fr'
gridGap={gridGap} margin='10px 0 0 0' position='relative' width='100%' padding='4px'> gridGap={gridGap} margin='10px 0 0 0' position='relative' width='100%' padding='4px'>
@ -28,7 +33,7 @@ const _renderSubmissions = (pageNr, submissions, gridGap) => {
{submitter ? submitter : '[anonymous]'} {submitter ? submitter : '[anonymous]'}
</Body> </Body>
<Body as='td' textAlign='right'> <Body as='td' textAlign='right'>
{evaluations[0] ? evaluations[0].score : 'xxx'} {evaluations[metricChoose] ? evaluations[metricChoose].score : 'xxx'}
</Body> </Body>
<Body as='td' padding='0 2px 0 0' textAlign='right'> <Body as='td' padding='0 2px 0 0' textAlign='right'>
{times ? times : 1} {times ? times : 1}