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