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

Add arrow to sorted column header

Browse Source
This commit is contained in:
Peter 2024-11-06 20:18:44 -06:00
parent a0ced8d59f
commit 45fd02a300
1 changed files with 51 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
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 @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 @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>
<th @click="sortBy('team')" :class="getArrow('team')">Team</th>
<th @click="sortBy('pa')" :class="getArrow('pa')">PA</th>
<th @click="sortBy('ab')" :class="getArrow('ab')">AB</th>
<th @click="sortBy('run')" :class="getArrow('run')">R</th>
<th @click="sortBy('hit')" :class="getArrow('hit')">H</th>
<th @click="sortBy('double')" :class="getArrow('double')">2B</th>
<th @click="sortBy('triple')" :class="getArrow('triple')">3B</th>
<th @click="sortBy('hr')" :class="getArrow('hr')">HR</th>
<th @click="sortBy('rbi')" :class="getArrow('rbi')">RBI</th>
<th @click="sortBy('sb')" :class="getArrow('sb')">SB</th>
<th @click="sortBy('cs')" :class="getArrow('cs')">CS</th>
<th @click="sortBy('bb')" :class="getArrow('bb')">BB</th>
<th @click="sortBy('so')" :class="getArrow('so')">SO</th>
<th @click="sortBy('avg')" :class="getArrow('avg')">BA</th>
<th @click="sortBy('obp')" :class="getArrow('obp')">OBP</th>
<th @click="sortBy('slg')" :class="getArrow('slg')">SLG</th>
<th @click="sortBy('ops')" :class="getArrow('ops')">OPS</th>
<th @click="sortBy('woba')" :class="getArrow('woba')">wOBA</th>
<th @click="sortBy('kPct')" :class="getArrow('kPct')">K%</th>
<th @click="sortBy('bphr')" :class="getArrow('bphr')">BPHR</th>
<th @click="sortBy('bpfo')" :class="getArrow('bpfo')">BPFO</th>
<th @click="sortBy('bp1b')" :class="getArrow('bp1b')">BP1B</th>
<th @click="sortBy('bplo')" :class="getArrow('bplo')">BPLO</th>
<th @click="sortBy('gidp')" :class="getArrow('gidp')">GIDP</th>
<th @click="sortBy('hbp')" :class="getArrow('hbp')">HBP</th>
<th @click="sortBy('sac')" :class="getArrow('sac')">SAC</th>
<th @click="sortBy('ibb')" :class="getArrow('ibb')">IBB</th>
</tr>
</thead>
<tbody v-if="battingStats.length" >
@ -59,7 +59,7 @@
<td>{{ stat.slg.toFixed(3) }}</td>
<td>{{ stat.ops.toFixed(3) }}</td>
<td>{{ stat.woba.toFixed(3) }}</td>
<td>{{ calculateStrikeoutPercent(stat) }}</td>
<td>{{ stat.kPct }}</td>
<td>{{ stat.bphr }}</td>
<td>{{ stat.bpfo }}</td>
<td>{{ stat.bp1b }}</td>
@ -110,6 +110,10 @@
<script lang="ts">
import { aggregateBattingStats, fetchTeamBattingStatsBySeason, type BattingStat } from '@/services/battingStatsService'
interface BattingStatWithKPercentage extends BattingStat {
kPct: string
}
export default {
name: 'LeaderboardTeamBattingTable',
props: {
@ -117,8 +121,8 @@ export default {
},
data() {
return {
battingStats: [] as BattingStat[],
sortKey: 'team' as keyof BattingStat,
battingStats: [] as BattingStatWithKPercentage[],
sortKey: 'team' as keyof BattingStatWithKPercentage,
sortOrder: 1
}
},
@ -145,9 +149,9 @@ export default {
methods: {
async fetchData(): Promise<void> {
const unsortedBattingStats: BattingStat[] = await fetchTeamBattingStatsBySeason(this.seasonNumber)
this.battingStats = unsortedBattingStats.sort((s1, s2) => s2.team.sname < s1.team.sname ? 1 : -1)
this.battingStats = unsortedBattingStats.map(s => ({...s, kPct: this.calculateStrikeoutPercent(s)})).sort((s1, s2) => s2.team.sname < s1.team.sname ? 1 : -1)
},
sortBy(stat: keyof BattingStat): void {
sortBy(stat: keyof BattingStatWithKPercentage): void {
this.setKey(stat)
if (stat == 'team') {
@ -157,7 +161,7 @@ export default {
this.battingStats.sort((s1, s2) => s2[stat] < s1[stat] ? -1 * this.sortOrder : this.sortOrder)
},
setKey(stat: keyof BattingStat): void {
setKey(stat: keyof BattingStatWithKPercentage): void {
if (this.sortKey === stat) {
// if key currently selected, flip sort order
this.sortOrder *= -1
@ -166,6 +170,11 @@ export default {
this.sortOrder = 1
}
},
getArrow(stat: keyof BattingStatWithKPercentage): string {
if (this.sortKey !== stat) return ''
return this.sortOrder > 0 ? 'up' : 'down'
},
calculateStrikeoutPercent(stat: BattingStat): string {
if (!stat.pa) return 'N/A'
return (stat.so * 100 / stat.pa).toFixed(1)
@ -173,3 +182,12 @@ export default {
}
}
</script>
<style>
.up::after {
content: "▵"
}
.down::after {
content: "▿"
}
</style>