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

Make team fielding leaderboard table sortable

Browse Source
This commit is contained in:
Peter 2024-11-06 21:15:06 -06:00
parent b27c62098e
commit 0e48d01417
1 changed files with 53 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/LeaderboardTeamFieldingTable.vue
View File

@ -4,15 +4,15 @@
<table class="table table-sm table-striped" id="table-fielding-stats">
<thead class="thead-dark">
<tr>
<th>Team</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>
<th @click="sortBy('teamName')" :class="getArrow('teamName')">Team</th>
<th @click="sortBy('xCheckCount')" :class="getArrow('xCheckCount')">XCh</th>
<th @click="sortBy('hit')" :class="getArrow('hit')">XH</th>
<th @click="sortBy('error')" :class="getArrow('error')">E</th>
<th @click="sortBy('passedBallCount')" :class="getArrow('passedBallCount')">PB</th>
<th @click="sortBy('stolenBaseCheckCount')" :class="getArrow('stolenBaseCheckCount')">SBa</th>
<th @click="sortBy('caughtStealingCount')" :class="getArrow('caughtStealingCount')">CSc</th>
<th @click="sortBy('caughtStealingPercent')" :class="getArrow('caughtStealingPercent')">CS%</th>
<th @click="sortBy('weightedFieldingPercent')" :class="getArrow('weightedFieldingPercent')">wF%</th>
</tr>
</thead>
<tbody v-if="fieldingStats.length" >
@ -53,6 +53,10 @@
<script lang="ts">
import { aggregateFieldingStats, fetchTeamFieldingStatsBySeason, type FieldingStat } from '@/services/fieldingStatsService'
interface ExtendedFieldingStat extends FieldingStat {
teamName: string
}
export default {
name: 'LeaderboardTeamFieldingTable',
props: {
@ -60,7 +64,9 @@ export default {
},
data() {
return {
fieldingStats: [] as FieldingStat[]
fieldingStats: [] as ExtendedFieldingStat[],
sortKey: 'teamName' as keyof ExtendedFieldingStat,
sortOrder: 1
}
},
computed: {
@ -79,6 +85,8 @@ export default {
seasonNumber(newValue, oldValue) {
if (newValue !== oldValue) {
this.fieldingStats = []
this.sortKey = 'teamName'
this.sortOrder = 1
this.fetchData()
}
}
@ -86,7 +94,28 @@ export default {
methods: {
async fetchData(): Promise<void> {
const unsortedFieldingStats: FieldingStat[] = await fetchTeamFieldingStatsBySeason(this.seasonNumber)
this.fieldingStats = unsortedFieldingStats.sort((s1, s2) => s2.team.sname < s1.team.sname ? 1 : -1)
this.fieldingStats = unsortedFieldingStats
.map(s => ({...s, teamName: s.team.sname}))
.sort((s1, s2) => s2.teamName < s1.teamName ? 1 : -1)
},
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 === 'teamName' ? 1 : -1
}
},
getArrow(stat: keyof ExtendedFieldingStat): string {
if (this.sortKey !== stat) return 'faux-arrow'
return this.sortOrder > 0 ? 'up' : 'down'
},
formatCaughtStealingPercent(stat: FieldingStat): string {
if (stat.stolenBaseCheckCount === 0 || Number.isNaN(stat.caughtStealingPercent)) {
@ -101,3 +130,16 @@ export default {
}
}
</script>
<style>
.up::after {
content: "▵"
}
.down::after {
content: "▿"
}
.faux-arrow::after {
opacity: 0;
content: "▿"
}
</style>