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

Basic sortable table without arrows to indicate sort

Browse Source
This commit is contained in:
Peter 2024-11-06 16:07:44 -06:00
parent 3b86910465
commit a0ced8d59f
1 changed files with 48 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/LeaderboardTeamBattingTable.vue
View File

@ -5,33 +5,33 @@
<table class="table table-sm table-striped" id="table-batting-stats"> <table class="table table-sm table-striped" id="table-batting-stats">
<thead class="thead-dark"> <thead class="thead-dark">
<tr style="min-width: 75px"> <tr style="min-width: 75px">
<th>Team</th> <th @click="sortBy('team')">Team</th>
<th>PA</th> <th @click="sortBy('pa')">PA</th>
<th>AB</th> <th @click="sortBy('ab')">AB</th>
<th>R</th> <th @click="sortBy('run')">R</th>
<th>H</th> <th @click="sortBy('hit')">H</th>
<th>2B</th> <th @click="sortBy('double')">2B</th>
<th>3B</th> <th @click="sortBy('triple')">3B</th>
<th>HR</th> <th @click="sortBy('hr')">HR</th>
<th>RBI</th> <th @click="sortBy('rbi')">RBI</th>
<th>SB</th> <th @click="sortBy('sb')">SB</th>
<th>CS</th> <th @click="sortBy('cs')">CS</th>
<th>BB</th> <th @click="sortBy('bb')">BB</th>
<th>SO</th> <th @click="sortBy('so')">SO</th>
<th>BA</th> <th @click="sortBy('avg')">BA</th>
<th>OBP</th> <th @click="sortBy('obp')">OBP</th>
<th>SLG</th> <th @click="sortBy('slg')">SLG</th>
<th>OPS</th> <th @click="sortBy('ops')">OPS</th>
<th>wOBA</th> <th @click="sortBy('woba')">wOBA</th>
<th>K%</th> <th>K%</th>
<th>BPHR</th> <th @click="sortBy('bphr')">BPHR</th>
<th>BPFO</th> <th @click="sortBy('bpfo')">BPFO</th>
<th>BP1B</th> <th @click="sortBy('bp1b')">BP1B</th>
<th>BPLO</th> <th @click="sortBy('bplo')">BPLO</th>
<th>GIDP</th> <th @click="sortBy('gidp')">GIDP</th>
<th>HBP</th> <th @click="sortBy('hbp')">HBP</th>
<th>SAC</th> <th @click="sortBy('sac')">SAC</th>
<th>IBB</th> <th @click="sortBy('ibb')">IBB</th>
</tr> </tr>
</thead> </thead>
<tbody v-if="battingStats.length" > <tbody v-if="battingStats.length" >
@ -117,7 +117,9 @@ export default {
}, },
data() { data() {
return { return {
battingStats: [] as BattingStat[] battingStats: [] as BattingStat[],
sortKey: 'team' as keyof BattingStat,
sortOrder: 1
} }
}, },
computed: { computed: {
@ -145,6 +147,25 @@ export default {
const unsortedBattingStats: BattingStat[] = await fetchTeamBattingStatsBySeason(this.seasonNumber) const unsortedBattingStats: BattingStat[] = await fetchTeamBattingStatsBySeason(this.seasonNumber)
this.battingStats = unsortedBattingStats.sort((s1, s2) => s2.team.sname < s1.team.sname ? 1 : -1) this.battingStats = unsortedBattingStats.sort((s1, s2) => s2.team.sname < s1.team.sname ? 1 : -1)
}, },
sortBy(stat: keyof BattingStat): void {
this.setKey(stat)
if (stat == 'team') {
this.battingStats.sort((s1, s2) => s2.team.sname < s1.team.sname ? this.sortOrder : -1 * this.sortOrder)
return
}
this.battingStats.sort((s1, s2) => s2[stat] < s1[stat] ? -1 * this.sortOrder : this.sortOrder)
},
setKey(stat: keyof BattingStat): void {
if (this.sortKey === stat) {
// if key currently selected, flip sort order
this.sortOrder *= -1
} else {
this.sortKey = stat
this.sortOrder = 1
}
},
calculateStrikeoutPercent(stat: BattingStat): string { calculateStrikeoutPercent(stat: BattingStat): string {
if (!stat.pa) return 'N/A' if (!stat.pa) return 'N/A'
return (stat.so * 100 / stat.pa).toFixed(1) return (stat.so * 100 / stat.pa).toFixed(1)