126 lines
3.7 KiB
Vue
126 lines
3.7 KiB
Vue
<template>
|
|
<div class="col-small-12">
|
|
<h3>Last 4 Games</h3>
|
|
<div class="table-responsive-xl">
|
|
<table class="table table-sm table-striped">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>Game</th>
|
|
<th>PA</th>
|
|
<th>AB</th>
|
|
<th>R</th>
|
|
<th>H</th>
|
|
<th>2B</th>
|
|
<th>3B</th>
|
|
<th>HR</th>
|
|
<th>RBI</th>
|
|
<th>SB</th>
|
|
<th>CS</th>
|
|
<th>BB</th>
|
|
<th>SO</th>
|
|
<th>BPHR</th>
|
|
<th>BPFO</th>
|
|
<th>BP1B</th>
|
|
<th>BPLO</th>
|
|
<th>GIDP</th>
|
|
<th>HBP</th>
|
|
<th>SAC</th>
|
|
<th>IBB</th>
|
|
<th>XCh</th>
|
|
<th>XH</th>
|
|
<th>E</th>
|
|
<th>PB</th>
|
|
<th>SBa</th>
|
|
<th>CSc</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="last4-batting">
|
|
<!-- eslint-disable-next-line vue/require-v-for-key -->
|
|
<tr v-for="gameStat in last4GamesBatting">
|
|
<td>{{ makeWxGyFromGame(gameStat.game) }}</td>
|
|
<td>{{ gameStat.pa }}</td>
|
|
<td>{{ gameStat.ab }}</td>
|
|
<td>{{ gameStat.run }}</td>
|
|
<td>{{ gameStat.hit }}</td>
|
|
<td>{{ gameStat.double }}</td>
|
|
<td>{{ gameStat.triple }}</td>
|
|
<td>{{ gameStat.hr }}</td>
|
|
<td>{{ gameStat.rbi }}</td>
|
|
<td>{{ gameStat.sb }}</td>
|
|
<td>{{ gameStat.cs }}</td>
|
|
<td>{{ gameStat.bb }}</td>
|
|
<td>{{ gameStat.so }}</td>
|
|
<td>{{ gameStat.bphr }}</td>
|
|
<td>{{ gameStat.bpfo }}</td>
|
|
<td>{{ gameStat.bp1b }}</td>
|
|
<td>{{ gameStat.bplo }}</td>
|
|
<td>{{ gameStat.gidp }}</td>
|
|
<td>{{ gameStat.hbp }}</td>
|
|
<td>{{ gameStat.sac }}</td>
|
|
<td>{{ gameStat.ibb }}</td>
|
|
<td>{{ fieldingStatForGame(gameStat).xch }}</td>
|
|
<td>{{ fieldingStatForGame(gameStat).xhit }}</td>
|
|
<td>{{ fieldingStatForGame(gameStat).error }}</td>
|
|
<td>{{ fieldingStatForGame(gameStat).pb }}</td>
|
|
<td>{{ fieldingStatForGame(gameStat).sba }}</td>
|
|
<td>{{ fieldingStatForGame(gameStat).cs }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import type { Game } from '@/services/apiResponseTypes'
|
|
import type { BattingStat } from '@/services/battingStatsService'
|
|
import type { FieldingStat } from '@/services/fieldingStatsService'
|
|
|
|
interface MinimalAggregateFieldingStat {
|
|
xch: number,
|
|
xhit: number,
|
|
error: number,
|
|
pb: number,
|
|
sba: number,
|
|
cs: number
|
|
}
|
|
|
|
export default {
|
|
name: 'LastFourGamesBattingTable',
|
|
props: {
|
|
last4GamesBatting: { type: Array<BattingStat>, required: true },
|
|
last4GamesFielding: { type: Array<FieldingStat>, required: true }
|
|
},
|
|
methods: {
|
|
makeWxGyFromGame(game: Game | 'TOT'): string {
|
|
if (game === 'TOT') return 'TOT'
|
|
return `w${game.week}g${game.game_num}`
|
|
},
|
|
fieldingStatForGame(battingStat: BattingStat): MinimalAggregateFieldingStat {
|
|
const fieldingStat: MinimalAggregateFieldingStat = {
|
|
xch: 0,
|
|
xhit: 0,
|
|
error: 0,
|
|
pb: 0,
|
|
sba: 0,
|
|
cs: 0
|
|
}
|
|
|
|
this.last4GamesFielding.forEach(stat => {
|
|
if (stat.game === 'TOT' || battingStat.game === 'TOT') return
|
|
if (stat.game.id !== battingStat.game.id) return
|
|
|
|
fieldingStat.xch += stat.xCheckCount
|
|
fieldingStat.xhit += stat.hit
|
|
fieldingStat.error += stat.error
|
|
fieldingStat.pb += stat.passedBallCount
|
|
fieldingStat.sba += stat.stolenBaseCheckCount
|
|
fieldingStat.cs += stat.caughtStealingCount
|
|
})
|
|
|
|
return fieldingStat
|
|
}
|
|
}
|
|
}
|
|
</script>
|