115 lines
3.8 KiB
Vue
115 lines
3.8 KiB
Vue
<template>
|
|
<div v-if="fieldingStats.length" class="col-sm-6">
|
|
<h3>Team Fielding {{ isRegularSeason ? '' : ' - Postseason' }}</h3>
|
|
<div class="table-responsive-xl" style="max-width:40rem">
|
|
<table class="table table-sm table-striped" id="table-fielding-stats">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>Season</th>
|
|
<th>Pos</th>
|
|
<th>XCh</th>
|
|
<th>XH</th>
|
|
<th>E</th>
|
|
<th>PB</th>
|
|
<th>SBa</th>
|
|
<th>CSc</th>
|
|
<th>CS%</th>
|
|
<th>wF%</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="career-fielding-table">
|
|
<tr v-for="stat in fieldingStats">
|
|
<td>
|
|
<RouterLink :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
|
|
{{ stat.player.name }}
|
|
</RouterLink>
|
|
</td>
|
|
<td>{{ stat.pos }}</td>
|
|
<td>{{ stat.xCheckCount }}</td>
|
|
<td>{{ stat.hit }}</td>
|
|
<td>{{ stat.error }}</td>
|
|
<td>{{ stat.passedBallCount }}</td>
|
|
<td>{{ stat.stolenBaseCheckCount }}</td>
|
|
<td>{{ stat.caughtStealingCount }}</td>
|
|
<td>{{ formatCaughtStealingPercent(stat) }}</td>
|
|
<td>{{ formatWeightedFieldingPercent(stat) }}</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr v-for="stat in totalFieldingStat" id="career-fielding-footer">
|
|
<th>Total</th>
|
|
<th>{{ stat.pos }}</th>
|
|
<th>{{ stat.xCheckCount }}</th>
|
|
<th>{{ stat.hit }}</th>
|
|
<th>{{ stat.error }}</th>
|
|
<th>{{ stat.passedBallCount }}</th>
|
|
<th>{{ stat.stolenBaseCheckCount }}</th>
|
|
<th>{{ stat.caughtStealingCount }}</th>
|
|
<th>{{ formatCaughtStealingPercent(stat) }}</th>
|
|
<th>{{ formatWeightedFieldingPercent(stat) }}</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { aggregateFieldingStats, fetchFieldingStatsBySeasonAndTeamId, totaledFieldingStats, type FieldingStat } from '@/services/fieldingStatsService'
|
|
import { POS_MAP } from '@/services/utilities'
|
|
|
|
export default {
|
|
name: "TeamFieldingTable",
|
|
props: {
|
|
seasonNumber: { type: Number, required: true },
|
|
teamId: { type: Number, required: true },
|
|
isRegularSeason: { type: Boolean, required: true }
|
|
},
|
|
data() {
|
|
return {
|
|
fieldingStats: [] as FieldingStat[]
|
|
}
|
|
},
|
|
computed: {
|
|
totalFieldingStat(): FieldingStat[] {
|
|
if (this.fieldingStats.length > 0) {
|
|
const totaledStats = aggregateFieldingStats(this.fieldingStats).sort((s1, s2) => POS_MAP[s1.pos] - POS_MAP[s2.pos])
|
|
|
|
const allPositionsTotalStat = totaledFieldingStats(this.fieldingStats)
|
|
if (allPositionsTotalStat !== undefined) {
|
|
totaledStats.push(allPositionsTotalStat)
|
|
}
|
|
|
|
return totaledStats
|
|
}
|
|
|
|
return []
|
|
}
|
|
},
|
|
created() {
|
|
this.fetchData()
|
|
},
|
|
watch: {
|
|
teamId(newValue, oldValue) {
|
|
if (newValue !== oldValue)
|
|
this.fetchData()
|
|
}
|
|
},
|
|
methods: {
|
|
async fetchData(): Promise<void> {
|
|
const unsortedFieldingStats: FieldingStat[] = await fetchFieldingStatsBySeasonAndTeamId(this.seasonNumber, this.teamId, this.isRegularSeason)
|
|
this.fieldingStats = unsortedFieldingStats.sort((s1, s2) => s2.xCheckCount - s1.xCheckCount)
|
|
},
|
|
formatCaughtStealingPercent(stat: FieldingStat): string {
|
|
if (stat.stolenBaseCheckCount === 0 || Number.isNaN(stat.caughtStealingPercent)) {
|
|
return '-'
|
|
}
|
|
|
|
return `${(stat.caughtStealingPercent * 100).toFixed(1)}%`
|
|
},
|
|
formatWeightedFieldingPercent(stat: FieldingStat): string {
|
|
return stat.weightedFieldingPercent.toFixed(3)
|
|
}
|
|
}
|
|
}
|
|
</script>
|