<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import {
  VictoryChart, VictoryGroup, VictoryStack, VictoryBar, VictoryTooltip,
  VictoryAxis
} from 'victory';
import {
  highlightColor, midlightColor, lowlightColor, fgColor, accentColor, fontFamily
} from '../theme.js';
import '../style/components/LeagueComparisonCard.css';

const axisFontSize = 20;

export default function LeagueComparisonCard(props) {
  const statList = [
    {
      'statType': 'ppg',
      'leagueLeaderName': props.ppgLeaderName,
      'leagueLeaderValue': props.leaderPpg,
      'leagueAverageValue': props.averagePpg,
      'playerValue': props.playerPpg
    },
    {
      'statType': 'apg',
      'leagueLeaderName': props.apgLeaderName,
      'leagueLeaderValue': props.leaderApg,
      'leagueAverageValue': props.averageApg,
      'playerValue': props.playerApg
    },
    {
      'statType': 'rpg',
      'leagueLeaderName': props.rpgLeaderName,
      'leagueLeaderValue': props.leaderRpg,
      'leagueAverageValue': props.averageRpg,
      'playerValue': props.playerRpg
    },
  ]

  const screenWidth = window.innerWidth;
  const layoutBreakpoint = 1008;
  let isHorizontalBars = true;

  if (screenWidth >= layoutBreakpoint) {
    isHorizontalBars = false;
  }

  const groupOfBarsList = statList.map((stat, idx) =>
    <VictoryGroup horizontal={isHorizontalBars}
      key={stat.statType} offset={20} style={{ data: {width: 15}}}
    >

      <VictoryBar
        labelComponent={<CustomLabel/>}
        labels={(d) => d.text}
        data={[
          {
            x: idx + 1, y: stat.playerValue,
            text: props.playerName + ' - ' + stat.playerValue.toFixed(1)
                  + stat.statType,
            fill: highlightColor
          }
        ]}
      />

      <VictoryStack>
        <VictoryBar
          labelComponent={<CustomLabel/>}
          labels={(d) => d.text}
          data={[
            {
              x: idx + 1, y: stat.leagueAverageValue,
              text: 'League Average - ' + stat.leagueAverageValue.toFixed(1)
                      + stat.statType,
              fill: lowlightColor
            }
          ]}
        />
        <VictoryBar
          labelComponent={<CustomLabel/>}
          labels={(d) => d.text}
          data={[
            {
              x: idx + 1,
              y: stat.leagueLeaderValue - stat.leagueAverageValue,
              text: stat.leagueLeaderName + ' - '
              + stat.leagueLeaderValue.toFixed(1) + stat.statType,
              fill: midlightColor
            }
          ]}
        />
      </VictoryStack>

    </VictoryGroup>
  );

  /* Round up yMax to closest 5 */
  const yMax = Math.ceil(props.leaderPpg / 5) * 5;
  let leagueComparisonCard = {};

  if (screenWidth >= layoutBreakpoint) {
    (
      leagueComparisonCard = <div className='LeagueComparisonCard card'>
        <div className='card-title'>
          Vs. League
        </div>

        <div className='LeagueComparisonCard-graph-wrapper'>
          <VictoryChart
            domain={{x: [0.5, 3.5], y: [0, yMax]}}
            height={500}
            padding={{ top: 50, bottom: 75, left: 100, right: 70 }}
          >

            <VictoryAxis
              tickValues={statList.map((stat) => stat['statType'])}
              style={{
                axis: {stroke: 'none'},
                tickLabels: {
                  fill: fgColor,
                  fontSize: axisFontSize,
                  fontFamily: fontFamily
                }
              }}
            />

            <VictoryAxis
              dependentAxis tickValues={range(0, yMax, 5)}
              style={{
                axis: {stroke: 'none'},
                tickLabels: {
                  fill: fgColor,
                  fontSize: axisFontSize,
                  fontFamily: fontFamily
                },
                grid: {stroke: accentColor},
              }}
            />

            {groupOfBarsList}

          </VictoryChart>

        </div>
      </div>
    );
  } else {
    (
      leagueComparisonCard = <div className='LeagueComparisonCard card'>
        <div className='card-title'>
          Vs. League
        </div>

        <div className='LeagueComparisonCard-graph-wrapper'>
          <VictoryChart
            domain={{y: [0.5, 3.5], x: [0, yMax]}}
            height={350}
            padding={{ top: 25, bottom: 75, left: 100, right: 70 }}
          >

            <VictoryAxis dependentAxis
              tickValues={statList.map((stat) => stat['statType'])}
              style={{
                axis: {stroke: 'none'},
                tickLabels: {
                  fill: fgColor,
                  fontSize: axisFontSize,
                  fontFamily: fontFamily
                }
              }}
            />

            <VictoryAxis
              tickValues={range(0, yMax, 5)}
              style={{
                axis: {stroke: 'none'},<commit_msg>Normalize font size to rest of app<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import {
  VictoryChart, VictoryGroup, VictoryStack, VictoryBar, VictoryTooltip,
  VictoryAxis
} from 'victory';
import {
  highlightColor, midlightColor, lowlightColor, fgColor, accentColor, fontFamily
} from '../theme.js';
import '../style/components/LeagueComparisonCard.css';

const screenWidth = window.innerWidth;
const layoutBreakpoint = 1008;
let axisFontSize = 14;
if (screenWidth >= layoutBreakpoint) {
  axisFontSize = 20;
}

export default function LeagueComparisonCard(props) {
  const statList = [
    {
      'statType': 'ppg',
      'leagueLeaderName': props.ppgLeaderName,
      'leagueLeaderValue': props.leaderPpg,
      'leagueAverageValue': props.averagePpg,
      'playerValue': props.playerPpg
    },
    {
      'statType': 'apg',
      'leagueLeaderName': props.apgLeaderName,
      'leagueLeaderValue': props.leaderApg,
      'leagueAverageValue': props.averageApg,
      'playerValue': props.playerApg
    },
    {
      'statType': 'rpg',
      'leagueLeaderName': props.rpgLeaderName,
      'leagueLeaderValue': props.leaderRpg,
      'leagueAverageValue': props.averageRpg,
      'playerValue': props.playerRpg
    },
  ]

  let isHorizontalBars = true;

  if (screenWidth >= layoutBreakpoint) {
    isHorizontalBars = false;
  }

  const groupOfBarsList = statList.map((stat, idx) =>
    <VictoryGroup horizontal={isHorizontalBars}
      key={stat.statType} offset={20} style={{ data: {width: 15}}}
    >

      <VictoryBar
        labelComponent={<CustomLabel/>}
        labels={(d) => d.text}
        data={[
          {
            x: idx + 1, y: stat.playerValue,
            text: props.playerName + ' - ' + stat.playerValue.toFixed(1)
                  + stat.statType,
            fill: highlightColor
          }
        ]}
      />

      <VictoryStack>
        <VictoryBar
          labelComponent={<CustomLabel/>}
          labels={(d) => d.text}
          data={[
            {
              x: idx + 1, y: stat.leagueAverageValue,
              text: 'League Average - ' + stat.leagueAverageValue.toFixed(1)
                      + stat.statType,
              fill: lowlightColor
            }
          ]}
        />
        <VictoryBar
          labelComponent={<CustomLabel/>}
          labels={(d) => d.text}
          data={[
            {
              x: idx + 1,
              y: stat.leagueLeaderValue - stat.leagueAverageValue,
              text: stat.leagueLeaderName + ' - '
              + stat.leagueLeaderValue.toFixed(1) + stat.statType,
              fill: midlightColor
            }
          ]}
        />
      </VictoryStack>

    </VictoryGroup>
  );

  /* Round up yMax to closest 5 */
  const yMax = Math.ceil(props.leaderPpg / 5) * 5;
  let leagueComparisonCard = {};

  if (screenWidth >= layoutBreakpoint) {
    (
      leagueComparisonCard = <div className='LeagueComparisonCard card'>
        <div className='card-title'>
          Vs. League
        </div>

        <div className='LeagueComparisonCard-graph-wrapper'>
          <VictoryChart
            domain={{x: [0.5, 3.5], y: [0, yMax]}}
            height={500}
            padding={{ top: 50, bottom: 75, left: 100, right: 70 }}
          >

            <VictoryAxis
              tickValues={statList.map((stat) => stat['statType'])}
              style={{
                axis: {stroke: 'none'},
                tickLabels: {
                  fill: fgColor,
                  fontSize: axisFontSize,
                  fontFamily: fontFamily
                }
              }}
            />

            <VictoryAxis
              dependentAxis tickValues={range(0, yMax, 5)}
              style={{
                axis: {stroke: 'none'},
                tickLabels: {
                  fill: fgColor,
                  fontSize: axisFontSize,
                  fontFamily: fontFamily
                },
                grid: {stroke: accentColor},
              }}
            />

            {groupOfBarsList}

          </VictoryChart>

        </div>
      </div>
    );
  } else {
    (
      leagueComparisonCard = <div className='LeagueComparisonCard card'>
        <div className='card-title'>
          Vs. League
        </div>

        <div className='LeagueComparisonCard-graph-wrapper'>
          <VictoryChart
            domain={{y: [0.5, 3.5], x: [0, yMax]}}
            height={350}
            padding={{ top: 25, bottom: 75, left: 70, right: 70 }}
          >

            <VictoryAxis dependentAxis
              tickValues={statList.map((stat) => stat['statType'])}
              style={{
                axis: {stroke: 'none'},
                tickLabels: {
                  fill: fgColor,
                  fontSize: axisFontSize,
                  fontFamily: fontFamily
                }
              }}
            />

            <VictoryAxis
              tickValues={range(0, yMax, 5)}
              style={{
                axis: {stroke: 'none'},
{'fraction_non_alphanumeric': 0.12144288577154308, 'fraction_numerical': 0.011523046092184368, 'mean_word_length': 1.6376849894291754, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 72, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1772661', 'n_tokens_mistral': 3042, 'n_tokens_neox': 2820, 'n_words': 568}