resources/js/components/tournament/ScoreChart.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
   4
   5 import { getUserName } from '../../helpers/Participant';
   6 import { getRunners, getScoreTable } from '../../helpers/Tournament';
   7
   8 const COLORS = [
   9         '#7cb5ec',
  10         '#434348',
  11         '#90ed7d',
  12         '#f7a35c',
  13         '#8085e9',
  14         '#f15c80',
  15         '#e4d354',
  16         '#2b908f',
  17         '#f45b5b',
  18         '#91e8e1',
  19 ];
  20
  21 const ScoreChart = ({
  22         tournament,
  23 }) =>
  24 <ResponsiveContainer height="100%" width="100%">
  25         <LineChart data={getScoreTable(tournament)} height={720} width={1280}>
  26                 <XAxis dataKey="number" />
  27                 <YAxis />
  28                 <Tooltip />
  29                 <Legend />
  30                 {getRunners(tournament).map((runner, index) =>
  31                         <Line
  32                                 dataKey={getUserName(runner)}
  33                                 key={runner.id}
  34                                 stroke={COLORS[index % COLORS.length]}
  35                                 type="monotone"
  36                         />
  37                 )}
  38         </LineChart>
  39 </ResponsiveContainer>;
  40
  41 ScoreChart.propTypes = {
  42         tournament: PropTypes.shape({
  43         }),
  44 };
  45
  46 export default ScoreChart;