content: import React from 'react'
  
  import {
    BarChart,
    Bar,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Legend,
    ResponsiveContainer
  } from 'recharts'
  
  import returnTableData from './returnTableData'
  
  export default ({
    result,
    numberOfRounds,
    numberOfBreakingTeams
  }) => {
    const tableData = returnTableData(
      result,
      numberOfRounds,
      numberOfBreakingTeams
    )
  
    return (
      <ResponsiveContainer
        width={'100%'}
        height={400}
      >
        <BarChart
          data={tableData}
          margin={{ top: 16, right: 16, left: -16, bottom: 0 }}
        >
          <XAxis
            dataKey='name'
            allowDecimals={false}
          />
          <YAxis
            allowDecimals={false}
          />
          <CartesianGrid strokeDasharray='3 3' />
          <Tooltip />
          <Legend />
          <Bar name={'Pull-up always loses'} dataKey='pv' fill='#8884d8' />
          <Bar name={'Pull-up always wins'} dataKey='uv' fill='#82ca9d' />
        </BarChart>
      </ResponsiveContainer>
    )
  }
  