cal/sba-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial team fielding table sorting

Browse Source
This commit is contained in:
Peter 2024-11-14 17:16:33 -06:00
parent 04d6b3bf95
commit 8db37bfca0
1 changed files with 56 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/TeamFieldingTable.vue
View File

@ -5,22 +5,23 @@
<table class="table table-sm table-striped" id="table-fielding-stats"> <table class="table table-sm table-striped" id="table-fielding-stats">
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<th>Season</th> <th @click="sortBy('playerName')" :class="getArrow('playerName')">Player</th>
<th>Pos</th> <th @click="sortBy('pos')" :class="getArrow('pos')">Pos</th>
<th>XCh</th> <th @click="sortBy('xCheckCount')" :class="getArrow('xCheckCount')">XCh</th>
<th>XH</th> <th @click="sortBy('hit')" :class="getArrow('hit')">XH</th>
<th>E</th> <th @click="sortBy('error')" :class="getArrow('error')">E</th>
<th>PB</th> <th @click="sortBy('passedBallCount')" :class="getArrow('passedBallCount')">PB</th>
<th>SBa</th> <th @click="sortBy('stolenBaseCheckCount')" :class="getArrow('stolenBaseCheckCount')">SBa</th>
<th>CSc</th> <th @click="sortBy('caughtStealingCount')" :class="getArrow('caughtStealingCount')">CSc</th>
<th>CS%</th> <th @click="sortBy('caughtStealingPercent')" :class="getArrow('caughtStealingPercent')">CS%</th>
<th>wF%</th> <th @click="sortBy('weightedFieldingPercent')" :class="getArrow('weightedFieldingPercent')">wF%</th>
</tr> </tr>
</thead> </thead>
<tbody id="career-fielding-table"> <tbody id="career-fielding-table">
<tr v-for="stat in fieldingStats" :key="`${stat.player.name}-${stat.pos}`"> <tr v-for="stat in fieldingStats" :key="`${stat.player.name}-${stat.pos}`">
<td> <td>
<RouterLink :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }"> <RouterLink
:to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
{{ stat.player.name }} {{ stat.player.name }}
</RouterLink> </RouterLink>
</td> </td>
@ -57,6 +58,10 @@
import { aggregateFieldingStats, fetchFieldingStatsBySeasonAndTeamId, totaledFieldingStats, type FieldingStat } from '@/services/fieldingStatsService' import { aggregateFieldingStats, fetchFieldingStatsBySeasonAndTeamId, totaledFieldingStats, type FieldingStat } from '@/services/fieldingStatsService'
import { POS_MAP } from '@/services/utilities' import { POS_MAP } from '@/services/utilities'
interface ExtendedFieldingStat extends FieldingStat {
playerName: string
}
export default { export default {
name: 'TeamFieldingTable', name: 'TeamFieldingTable',
props: { props: {
@ -66,7 +71,9 @@ export default {
}, },
data() { data() {
return { return {
fieldingStats: [] as FieldingStat[] fieldingStats: [] as ExtendedFieldingStat[],
sortKey: 'xCheckCount' as keyof ExtendedFieldingStat,
sortOrder: -1
} }
}, },
computed: { computed: {
@ -97,7 +104,9 @@ export default {
methods: { methods: {
async fetchData(): Promise<void> { async fetchData(): Promise<void> {
const unsortedFieldingStats: FieldingStat[] = await fetchFieldingStatsBySeasonAndTeamId(this.seasonNumber, this.teamId, this.isRegularSeason) const unsortedFieldingStats: FieldingStat[] = await fetchFieldingStatsBySeasonAndTeamId(this.seasonNumber, this.teamId, this.isRegularSeason)
this.fieldingStats = unsortedFieldingStats.sort((s1, s2) => s2.xCheckCount - s1.xCheckCount) this.fieldingStats = unsortedFieldingStats
.map(s => ({ ...s, playerName: s.player.name }))
.sort((s1, s2) => s2.xCheckCount - s1.xCheckCount)
}, },
formatCaughtStealingPercent(stat: FieldingStat): string { formatCaughtStealingPercent(stat: FieldingStat): string {
if (stat.stolenBaseCheckCount === 0 || Number.isNaN(stat.caughtStealingPercent)) { if (stat.stolenBaseCheckCount === 0 || Number.isNaN(stat.caughtStealingPercent)) {
@ -108,7 +117,41 @@ export default {
}, },
formatWeightedFieldingPercent(stat: FieldingStat): string { formatWeightedFieldingPercent(stat: FieldingStat): string {
return stat.weightedFieldingPercent.toFixed(3) return stat.weightedFieldingPercent.toFixed(3)
},
sortBy(stat: keyof ExtendedFieldingStat): void {
this.setKey(stat)
this.fieldingStats.sort((s1, s2) => s2[stat] < s1[stat] ? this.sortOrder : -1 * this.sortOrder)
},
setKey(stat: keyof ExtendedFieldingStat): void {
if (this.sortKey === stat) {
// if key currently selected, flip sort order
this.sortOrder *= -1
} else {
this.sortKey = stat
this.sortOrder = stat === 'playerName' ? 1 : -1
}
},
getArrow(stat: keyof ExtendedFieldingStat): string {
if (this.sortKey !== stat) return 'faux-arrow'
return this.sortOrder > 0 ? 'up' : 'down'
} }
} }
} }
</script> </script>
<style>
.up::after {
content: "▵"
}
.down::after {
content: "▿"
}
.faux-arrow::after {
opacity: 0;
content: "▿"
}
</style>