diff --git a/front/src/common-app/components/define-trend.tsx b/front/src/common-app/components/define-trend.tsx new file mode 100644 index 0000000..77626d7 --- /dev/null +++ b/front/src/common-app/components/define-trend.tsx @@ -0,0 +1,66 @@ +import * as React from 'react'; +import { cx } from 'emotion'; +import * as classes from './table-player.styles'; +import Typography from '@material-ui/core/Typography'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableContainer from '@material-ui/core/TableContainer'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import { PlayerVotingStatus } from 'core'; + +interface Props { + playersCollection: PlayerVotingStatus[]; + headingLevel?: React.ElementType; +} + +export const TablePlayerTrendComponent: React.FC = (props: Props) => { + const { playersCollection, headingLevel } = props; + + const getTrend = (): string => { + const result = playersCollection.map((elem: PlayerVotingStatus) => + playersCollection.filter( + (player: PlayerVotingStatus) => player.vote === elem.vote + ).length + ); + + const foundIndex = result.indexOf(Math.max(...result)); + + return playersCollection[foundIndex].vote; + }; + + return ( +
+ + + + + + Vote Trend + + + Result + + + + + + + + { getTrend()} + + + +
+
+
+ ); +}; + +TablePlayerTrendComponent.defaultProps = { + headingLevel: 'h2', +}; diff --git a/front/src/pods/master/master.component.tsx b/front/src/pods/master/master.component.tsx index 8d175b5..bd3377d 100644 --- a/front/src/pods/master/master.component.tsx +++ b/front/src/pods/master/master.component.tsx @@ -10,6 +10,7 @@ import { DefineStoryComponent } from './components'; import { VoteOptionsComponent } from 'common-app/components'; import { PlayerVotingStatus } from 'core'; import { Button } from '@material-ui/core'; +import { TablePlayerTrendComponent } from 'common-app/components/define-trend'; interface Props { room: string; @@ -180,6 +181,12 @@ const ShowVotingResultsComponent: React.FC = props => {
+
+

Trend

+
+
+ +