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

Add sorting to team pitching leaderboard

Browse Source
This commit is contained in:
Peter 2024-11-06 20:44:02 -06:00
parent 45fd02a300
commit f09e93df48
2 changed files with 94 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/LeaderboardTeamBattingTable.vue
View File

@ -110,7 +110,7 @@
<script lang="ts">
import { aggregateBattingStats, fetchTeamBattingStatsBySeason, type BattingStat } from '@/services/battingStatsService'
interface BattingStatWithKPercentage extends BattingStat {
interface ExtendedBattingStat extends BattingStat {
kPct: string
}
@ -121,8 +121,8 @@ export default {
},
data() {
return {
battingStats: [] as BattingStatWithKPercentage[],
sortKey: 'team' as keyof BattingStatWithKPercentage,
battingStats: [] as ExtendedBattingStat[],
sortKey: 'team' as keyof ExtendedBattingStat,
sortOrder: 1
}
},
@ -142,6 +142,8 @@ export default {
seasonNumber(newValue, oldValue) {
if (newValue !== oldValue){
this.battingStats = []
this.sortKey = 'team'
this.sortOrder = 1
this.fetchData()
}
}
@ -149,9 +151,11 @@ export default {
methods: {
async fetchData(): Promise<void> {
const unsortedBattingStats: BattingStat[] = await fetchTeamBattingStatsBySeason(this.seasonNumber)
this.battingStats = unsortedBattingStats.map(s => ({...s, kPct: this.calculateStrikeoutPercent(s)})).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 BattingStatWithKPercentage): void {
sortBy(stat: keyof ExtendedBattingStat): void {
this.setKey(stat)
if (stat == 'team') {
@ -161,7 +165,7 @@ export default {
this.battingStats.sort((s1, s2) => s2[stat] < s1[stat] ? -1 * this.sortOrder : this.sortOrder)
},
setKey(stat: keyof BattingStatWithKPercentage): void {
setKey(stat: keyof ExtendedBattingStat): void {
if (this.sortKey === stat) {
// if key currently selected, flip sort order
this.sortOrder *= -1
@ -170,7 +174,7 @@ export default {
this.sortOrder = 1
}
},
getArrow(stat: keyof BattingStatWithKPercentage): string {
getArrow(stat: keyof ExtendedBattingStat): string {
if (this.sortKey !== stat) return ''
return this.sortOrder > 0 ? 'up' : 'down'

116
src/components/LeaderboardTeamPitchingTable.vue
View File

@ -5,37 +5,35 @@
<table class="table table-sm table-striped" id="table-pitching-stats">
<thead class="thead-dark">
<tr>
<th>Team</th>
<th>W</th>
<th>L</th>
<th>W-L%</th>
<th>ERA</th>
<th>G</th>
<th>GS</th>
<th>SV</th>
<th>HD</th>
<th>BSV</th>
<th>IP</th>
<th>H</th>
<th>R</th>
<th>ER</th>
<th>HR</th>
<th>BB</th>
<th>SO</th>
<th>HBP</th>
<th>BK</th>
<th>WP</th>
<th>IR</th>
<th>IRS</th>
<th>IRS%</th>
<th>WHIP</th>
<th>H/9</th>
<th>HR/9</th>
<th>BB/9</th>
<th>SO/9</th>
<th>SO/BB</th>
<!-- <th>Last G</th>
<th>Last G-2</th> -->
<th @click="sortBy('team')" :class="getArrow('team')">Team</th>
<th @click="sortBy('win')" :class="getArrow('win')">W</th>
<th @click="sortBy('loss')" :class="getArrow('loss')">L</th>
<th @click="sortBy('winPct')" :class="getArrow('winPct')">W-L%</th>
<th @click="sortBy('era')" :class="getArrow('era')">ERA</th>
<th @click="sortBy('games')" :class="getArrow('games')">G</th>
<th @click="sortBy('gs')" :class="getArrow('gs')">GS</th>
<th @click="sortBy('save')" :class="getArrow('save')">SV</th>
<th @click="sortBy('hold')" :class="getArrow('hold')">HD</th>
<th @click="sortBy('bsave')" :class="getArrow('bsave')">BSV</th>
<th @click="sortBy('ip')" :class="getArrow('ip')">IP</th>
<th @click="sortBy('hits')" :class="getArrow('hits')">H</th>
<th @click="sortBy('run')" :class="getArrow('run')">R</th>
<th @click="sortBy('e_run')" :class="getArrow('e_run')">ER</th>
<th @click="sortBy('hr')" :class="getArrow('hr')">HR</th>
<th @click="sortBy('bb')" :class="getArrow('bb')">BB</th>
<th @click="sortBy('so')" :class="getArrow('so')">SO</th>
<th @click="sortBy('hbp')" :class="getArrow('hbp')">HBP</th>
<th @click="sortBy('balk')" :class="getArrow('balk')">BK</th>
<th @click="sortBy('wp')" :class="getArrow('wp')">WP</th>
<th @click="sortBy('ir')" :class="getArrow('ir')">IR</th>
<th @click="sortBy('ir_sc')" :class="getArrow('ir_sc')">IRS</th>
<th @click="sortBy('irsPct')" :class="getArrow('irsPct')">IRS%</th>
<th @click="sortBy('whip')" :class="getArrow('whip')">WHIP</th>
<th @click="sortBy('hPer9')" :class="getArrow('hPer9')">H/9</th>
<th @click="sortBy('hrPer9')" :class="getArrow('hrPer9')">HR/9</th>
<th @click="sortBy('bbPer9')" :class="getArrow('bbPer9')">BB/9</th>
<th @click="sortBy('kPer9')" :class="getArrow('kPer9')">SO/9</th>
<th @click="sortBy('kPerBB')" :class="getArrow('kPerBB')">SO/BB</th>
</tr>
</thead>
<tbody v-if="pitchingStats.length">
@ -119,6 +117,13 @@
import { aggregatePitchingStats, fetchTeamPitchingStatsBySeason, type PitchingStat } from '@/services/pitchingStatsService'
import { outsToInnings, winPercentage, hitsPer9, hrsPer9 } from '@/services/utilities'
interface ExtendedPitchingStat extends PitchingStat {
winPct: string
irsPct: string
hPer9: string
hrPer9: string
}
export default {
name: 'LeaderboardTeamPitchingTable',
props: {
@ -126,7 +131,9 @@ export default {
},
data() {
return {
pitchingStats: [] as PitchingStat[]
pitchingStats: [] as ExtendedPitchingStat[],
sortKey: 'team' as keyof ExtendedPitchingStat,
sortOrder: 1
}
},
computed: {
@ -145,6 +152,8 @@ export default {
seasonNumber(newValue, oldValue) {
if (newValue !== oldValue) {
this.pitchingStats = []
this.sortKey = 'team'
this.sortOrder = 1
this.fetchData()
}
}
@ -152,7 +161,39 @@ export default {
methods: {
async fetchData(): Promise<void> {
const unsortedPitchingStats: PitchingStat[] = await fetchTeamPitchingStatsBySeason(this.seasonNumber)
this.pitchingStats = unsortedPitchingStats.sort((s1, s2) => s2.team.sname < s1.team.sname ? 1 : -1)
this.pitchingStats = unsortedPitchingStats
.map(s => (
{...s,
winPct: this.winPercentage(s),
irsPct: this.formatIRSPercentage(s),
hPer9: this.hitsPer9(s),
hrPer9: this.hrsPer9(s)
}))
.sort((s1, s2) => s2.team.sname < s1.team.sname ? 1 : -1)
},
sortBy(stat: keyof ExtendedPitchingStat): void {
this.setKey(stat)
if (stat == 'team') {
this.pitchingStats.sort((s1, s2) => s2.team.sname < s1.team.sname ? this.sortOrder : -1 * this.sortOrder)
return
}
this.pitchingStats.sort((s1, s2) => s2[stat] < s1[stat] ? -1 * this.sortOrder : this.sortOrder)
},
setKey(stat: keyof ExtendedPitchingStat): void {
if (this.sortKey === stat) {
// if key currently selected, flip sort order
this.sortOrder *= -1
} else {
this.sortKey = stat
this.sortOrder = 1
}
},
getArrow(stat: keyof ExtendedPitchingStat): string {
if (this.sortKey !== stat) return ''
return this.sortOrder > 0 ? 'up' : 'down'
},
outsToInnings(stat: PitchingStat): string {
return outsToInnings(stat)
@ -174,3 +215,12 @@ export default {
}
}
</script>
<style>
.up::after {
content: "▵"
}
.down::after {
content: "▿"
}
</style>