handlebarwidth

index.jsx

const StatRow = ({ stat }) => {
  const { away, home } = stat;

  const handleBarWidth = (value, high) => {
    return Math.floor((value / high) * 100);
  };

  return (
    <div>
      <Stat>
        <div>
          <TeamRank marginRight={10}>#{away.team_rank}</TeamRank>
          <StatValue>{away.stat_value}</StatValue>
        </div>

        <StatName>{away.stat_name}</StatName>

        <div>
          <StatValue>{home.stat_value}</StatValue>
          <TeamRank marginLeft={10}>#{home.team_rank}</TeamRank>
        </div>
      </Stat>

      <BarGroup>
        <Bar>
          <Filler
            color="#F5B947"
            width={handleBarWidth(away.stat_value, away.league_high)}
          />
        </Bar>

        <Bar>
          <Filler
            color="#EE7F31"
            width={handleBarWidth(home.stat_value, home.league_high)}
          />
        </Bar>
      </BarGroup>
    </div>
  );
};