possibility of choose metric
This commit is contained in:
parent
c4b7d21a5c
commit
ebbfb8e907
@ -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 (
|
||||
<>
|
||||
<FilterStyle as='label' htmlFor={props.id}
|
||||
<FilterStyle as='label' borderRadius={props.borderRadius} htmlFor={props.id}
|
||||
active={props.option === props.index}>
|
||||
{props.children}
|
||||
</FilterStyle>
|
||||
|
||||
@ -12,7 +12,7 @@ const FilterBy = (props) => {
|
||||
return (
|
||||
props.options.map((option, index) => {
|
||||
return (
|
||||
<Filter key={`filter_option-${index}`} active={props.active}
|
||||
<Filter key={`filter_option-${index}`}
|
||||
option={props.option} handler={props.handler}
|
||||
id={`${props.header}-${option.name}-${index}`} name={props.header} index={index}>
|
||||
<Body as='p'>
|
||||
|
||||
@ -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 (
|
||||
<FlexColumn padding='24px 12px' as='section'>
|
||||
<H2 as='h2' margin='0 0 12px 0'>
|
||||
Leaderboard
|
||||
</H2>
|
||||
<FlexRow gap='12px' margin='0 0 24px 0'>
|
||||
<BoardVariantMobile as='button' active={0 === variant} onClick={() => setVariant(0)}>
|
||||
By user
|
||||
</BoardVariantMobile>
|
||||
<BoardVariantMobile as='button' active={1 === variant} onClick={() => setVariant(1)}>
|
||||
By metric
|
||||
</BoardVariantMobile>
|
||||
{/*<FlexRow gap='12px' margin='0 0 24px 0'>*/}
|
||||
{/* <BoardVariantMobile as='button' active={0 === variant} onClick={() => setVariant(0)}>*/}
|
||||
{/* By user*/}
|
||||
{/* </BoardVariantMobile>*/}
|
||||
{/* <BoardVariantMobile as='button' active={1 === variant} onClick={() => setVariant(1)}>*/}
|
||||
{/* By metric*/}
|
||||
{/* </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>
|
||||
<Search searchQueryHandler={tableSearchQueryHandler}/>
|
||||
<Table challengeName={props.challengeName} loading={loading}
|
||||
@ -121,23 +153,37 @@ const Leaderboard = (props) => {
|
||||
<H2 as='h2' margin='0 0 32px 0'>
|
||||
Leaderboard
|
||||
</H2>
|
||||
<FlexRow border={`1px solid ${theme.colors.green05}`} margin='0 0 48px 0'>
|
||||
<BoardVariantDesktop as='button' width='150px' height='48px'
|
||||
active={0 === variant} onClick={() => setVariant(0)}>
|
||||
<H3 as='span'>
|
||||
By user
|
||||
{/*<FlexRow border={`1px solid ${theme.colors.green05}`} margin='0 0 48px 0'>*/}
|
||||
{/* <BoardVariantDesktop as='button' width='150px' height='48px'*/}
|
||||
{/* active={0 === variant} onClick={() => setVariant(0)}>*/}
|
||||
{/* <H3 as='span'>*/}
|
||||
{/* By user*/}
|
||||
{/* </H3>*/}
|
||||
{/* </BoardVariantDesktop>*/}
|
||||
{/* <BoardVariantDesktop as='button' width='150px' height='48px'*/}
|
||||
{/* active={1 === variant} onClick={() => setVariant(1)}>*/}
|
||||
{/* <H3 as='span'>*/}
|
||||
{/* By metric*/}
|
||||
{/* </H3>*/}
|
||||
{/* </BoardVariantDesktop>*/}
|
||||
{/*</FlexRow>*/}
|
||||
<FlexRow width='100%' gap='32px' as='section' margin='32px 0'>
|
||||
<H3>
|
||||
Metric:
|
||||
</H3>
|
||||
</BoardVariantDesktop>
|
||||
<BoardVariantDesktop as='button' width='150px' height='48px'
|
||||
active={1 === variant} onClick={() => setVariant(1)}>
|
||||
<H3 as='span'>
|
||||
By metric
|
||||
</H3>
|
||||
</BoardVariantDesktop>
|
||||
{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>
|
||||
<Search searchQueryHandler={tableSearchQueryHandler}/>
|
||||
<Table challengeName={props.challengeName} loading={loading}
|
||||
renderElements={renderSubmissions} headerElements={headerElements}/>
|
||||
renderElements={renderSubmissions}
|
||||
headerElements={headerElements}/>
|
||||
<Pager pageNr={pageNr} width='72px' borderRadius='64px'
|
||||
pages={CALC_PAGES(entries ? entries : [])}
|
||||
nextPage={nextPage} previousPage={previousPage}
|
||||
|
||||
@ -12,12 +12,17 @@ const Line = styled(FlexRow)`
|
||||
height: 1px;
|
||||
`;
|
||||
|
||||
const _renderSubmissions = (pageNr, submissions, gridGap) => {
|
||||
const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose) => {
|
||||
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
|
||||
if (submissions) {
|
||||
return (
|
||||
<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 (
|
||||
<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'>
|
||||
@ -28,7 +33,7 @@ const _renderSubmissions = (pageNr, submissions, gridGap) => {
|
||||
{submitter ? submitter : '[anonymous]'}
|
||||
</Body>
|
||||
<Body as='td' textAlign='right'>
|
||||
{evaluations[0] ? evaluations[0].score : 'xxx'}
|
||||
{evaluations[metricChoose] ? evaluations[metricChoose].score : 'xxx'}
|
||||
</Body>
|
||||
<Body as='td' padding='0 2px 0 0' textAlign='right'>
|
||||
{times ? times : 1}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user