<commit_before>import React, { Component } from 'react'
import { Text, View, StatusBar, StyleSheet, ScrollView, ActivityIndicator } from 'react-native'
import { connect } from 'react-redux'
import NBA from '../../../utils/nba'

class TeamStats extends Component<Props> {

  constructor() {
    super()

    this.nba = new NBA()
    this.state = {
      teamStats: null,
      leadTracker: [],
      miniBoxscore: null,
      loading: true
    }
  }

  componentDidMount() {
    this.fetchGameStats()
  }

  fetchGameStats() {
    Promise.all([
      this.nba.getBoxscore(this.props.gameID, this.props.date),
      this.nba.getLeadTrackerForGame(this.props.gameID, this.props.date),
      this.nba.getMiniBoxscore(this.props.gameID, this.props.date)
    ])
    .then((gameStats) => {
      this.setState({
        teamStats: gameStats[0].stats ? gameStats[0].stats : {},
        leadTracker: gameStats[1],
        miniBoxscore: gameStats[2],
        loading: false
      })
    })
  }

  _renderQuarterScoresChart() {
    return (
      <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
        {/* Header */}
        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
          {
            // space for team name header
            [' ', 'Q1', 'Q2', 'Q3', 'Q4', 'Final'].map((quarter) => {
              return (
                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                  <Text style={styles.text}> {quarter} </Text>
                </View>
              )
            })
          }
        </View>
        {/* End Header */}
        {/* Away Quarter Scores */}
        <View style={{ flex: 1, flexDirection: 'row', borderBottomColor: '#D1D1D1', borderBottomWidth: 1 }}>
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={styles.text}> {this.state.miniBoxscore.basicGameData.vTeam.triCode} </Text>
          </View>
          {
            this.state.miniBoxscore.basicGameData.vTeam.linescore.length > 0 ?
              this.state.miniBoxscore.basicGameData.vTeam.linescore.map((quarter) => {
                return (
                  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.text}> {quarter.score} </Text>
                  </View>
                )
              })
            :
              [0, 0, 0, 0].map((value) => {
                return (
                  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.text}> {value} </Text>
                  </View>
                )
              })
          }
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={styles.text}> {this.state.miniBoxscore.basicGameData.vTeam.score || 0} </Text>
          </View>
        </View>
        {/* End Away Quarter Scores */}
        {/* Home Quarter Scores */}
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={styles.text}> {this.state.miniBoxscore.basicGameData.hTeam.triCode} </Text>
          </View>
          {
            this.state.miniBoxscore.basicGameData.hTeam.linescore.length > 0 ?
              this.state.miniBoxscore.basicGameData.hTeam.linescore.map((quarter) => {
                return (
                  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.text}> {quarter.score} </Text>
                  </View>
                )
              })
            :
              [0, 0, 0, 0].map((value) => {
                return (
                  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.text}> {value} </Text>
                  </View>
                )
              })
          }
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={styles.text}> {this.state.miniBoxscore.basicGameData.hTeam.score || 0} </Text>
          </View>
        </View>
        {/* End Home Quarter Scores */}
      </View>
    )
  }

  render() {
    console.log(this.state)
    return (
      <View style={{ flex: 1, backgroundColor: '#111111' }}>
        {
          this.state.loading &&
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <ActivityIndicator
              size="large"
              color="#F7971E"
            />
          </View>
        }
        {
          (this.state.teamStats && this.state.leadTracker && this.state.miniBoxscore) &&

          <ScrollView contentContainerStyle={styles.teamStatsContainer}>
            <View style={{ flex: 1.5, flexDirection: 'row', marginBottom: 10 }}>
              <View style={styles.teamQuarterScores}>
                <View style={styles.teamQuarterHeader}>
                  <Text style={styles.text}> Time in game (?) </Text>
                </View>
                <View style={styles.teamQuarterChart}>
                  {/*
                  away
                  home
                  */}
                  {this._renderQuarterScoresChart()}
                </View>
              </View>
            </View>
            <View style={styles.leadTracker}>
              <View style={styles.leadTrackerHeader}>
                <Text style={styles.text}> Lead Tracker </Text>
              </View>
              <View style={styles.leadTrackerHeader}>
                <Text style={styles.text}> Chart </Text>
              </View>
              <View style={styles.leadTrackerHeader}>
                {/* <Text style={styles.text}> Times Tied: {this.state.teamStats.timesTied} </Text>
                <Text style={styles.text}> Lead Changes: {this.state.teamStats.leadChangs} </Text> */}
              </View>
              <View style={styles.leaedTrackerChart}>

              </View>
            </View><commit_msg>add team color in mini boxscore<commit_after>import React, { Component } from 'react'
import { Text, View, StatusBar, StyleSheet, ScrollView, ActivityIndicator } from 'react-native'
import { connect } from 'react-redux'
import NBA from '../../../utils/nba'
import TeamMap from '../../../utils/TeamMap'

class TeamStats extends Component<Props> {

  constructor() {
    super()

    this.nba = new NBA()
    this.state = {
      teamStats: null,
      leadTracker: [],
      miniBoxscore: null,
      loading: true
    }
  }

  componentDidMount() {
    this.fetchGameStats()
  }

  fetchGameStats() {
    Promise.all([
      this.nba.getBoxscore(this.props.gameID, this.props.date),
      this.nba.getLeadTrackerForGame(this.props.gameID, this.props.date),
      this.nba.getMiniBoxscore(this.props.gameID, this.props.date)
    ])
    .then((gameStats) => {
      this.setState({
        teamStats: gameStats[0].stats ? gameStats[0].stats : {},
        leadTracker: gameStats[1],
        miniBoxscore: gameStats[2],
        loading: false
      })
    })
  }

  _renderQuarterScoresChart() {
    const homeWins = this.state.miniBoxscore.basicGameData.hTeam.win
    const homeLosses = this.state.miniBoxscore.basicGameData.hTeam.loss
    const awayWins = this.state.miniBoxscore.basicGameData.vTeam.win
    const awayLosses = this.state.miniBoxscore.basicGameData.vTeam.loss
    const awayTeamColor = TeamMap[this.props.awayTeam.abbreviation.toLowerCase()] ? TeamMap[this.props.awayTeam.abbreviation.toLowerCase()].color : '#1C3F80'
    const homeTeamColor = TeamMap[this.props.homeTeam.abbreviation.toLowerCase()] ? TeamMap[this.props.homeTeam.abbreviation.toLowerCase()].color : '#BE0E2C'

    return (
      <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
        {/* Header */}
        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
          {
            // space for team name in header
            [' ', 'Q1', 'Q2', 'Q3', 'Q4', 'T'].map((quarter) => {
              return (
                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                  <Text style={styles.text}> {quarter} </Text>
                </View>
              )
            })
          }
        </View>
        {/* End Header */}
        {/* Away Quarter Scores */}
        <View style={{ flex: 1, flexDirection: 'row', borderBottomColor: '#D1D1D1', borderBottomWidth: 1 }}>
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: awayTeamColor }}>
            <Text style={styles.text}> {this.state.miniBoxscore.basicGameData.vTeam.triCode} </Text>
          </View>
          {
            this.state.miniBoxscore.basicGameData.vTeam.linescore.length > 0 ?
              this.state.miniBoxscore.basicGameData.vTeam.linescore.map((quarter) => {
                return (
                  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.text}> {quarter.score} </Text>
                  </View>
                )
              })
            :
              [0, 0, 0, 0].map((value) => {
                return (
                  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.text}> {value} </Text>
                  </View>
                )
              })
          }
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={styles.text}> {this.state.miniBoxscore.basicGameData.vTeam.score || 0} </Text>
          </View>
        </View>
        {/* End Away Quarter Scores */}
        {/* Home Quarter Scores */}
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: homeTeamColor }}>
            <Text style={styles.text}> {this.state.miniBoxscore.basicGameData.hTeam.triCode} </Text>
          </View>
          {
            this.state.miniBoxscore.basicGameData.hTeam.linescore.length > 0 ?
              this.state.miniBoxscore.basicGameData.hTeam.linescore.map((quarter) => {
                return (
                  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.text}> {quarter.score} </Text>
                  </View>
                )
              })
            :
              [0, 0, 0, 0].map((value) => {
                return (
                  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.text}> {value} </Text>
                  </View>
                )
              })
          }
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={styles.text}> {this.state.miniBoxscore.basicGameData.hTeam.score || 0} </Text>
          </View>
        </View>
        {/* End Home Quarter Scores */}
      </View>
    )
  }

  render() {
    console.log(this.state)
    return (
      <View style={{ flex: 1, backgroundColor: '#111111' }}>
        {
          this.state.loading &&
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <ActivityIndicator
              size="large"
              color="#F7971E"
            />
          </View>
        }
        {
          (this.state.teamStats && this.state.leadTracker && this.state.miniBoxscore) &&

          <ScrollView contentContainerStyle={styles.teamStatsContainer}>
            <View style={{ flex: 1.5, flexDirection: 'row', marginBottom: 10 }}>
              <View style={styles.teamQuarterScores}>
                <View style={styles.teamQuarterHeader}>
                  <Text style={styles.text}> Time in game (?) </Text>
                </View>
                <View style={styles.teamQuarterChart}>
                  {this._renderQuarterScoresChart()}
                </View>
              </View>
            </View>
            <View style={styles.leadTracker}>
              <View style={styles.leadTrackerHeader}>
                <Text style={styles.text}> Lead Tracker </Text>
              </View>
              <View style={styles.leadTrackerHeader}>
                <Text style={styles.text}> Chart </Text>
              </View>
              <View style={styles.leadTrackerHeader}>
                {/* <Text style={styles.text}> Times Tied: {this.state.teamStats.timesTied} </Text>
                <Text style={styles.text}> Lead Changes: {this.state.teamStats.leadChangs} </Text> */}
              </View>
              <View style={styles.leaedTrackerChart}>

              </View>
            </View>
{'fraction_non_alphanumeric': 0.14933910489294272, 'fraction_numerical': 0.008657339414083635, 'mean_word_length': 1.7919723780750971, 'pattern_counts': {'":': 0, '<': 159, '<?xml version=': 0, '>': 175, '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': '3867189', 'n_tokens_mistral': 3839, 'n_tokens_neox': 3661, 'n_words': 747}