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

Flatten extended stat and use teamName, add placeholder arrow to avoid shifting

Browse Source
This commit is contained in:
Peter 2024-11-06 21:07:56 -06:00
parent f09e93df48
commit 3e6205abf8
2 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/LeaderboardTeamBattingTable.vue
View File

@ -5,7 +5,7 @@
<table class="table table-sm table-striped" id="table-batting-stats">
<thead class="thead-dark">
<tr style="min-width: 75px">
<th @click="sortBy('team')" :class="getArrow('team')">Team</th>
<th @click="sortBy('teamName')" :class="getArrow('teamName')">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>
@ -111,6 +111,7 @@
import { aggregateBattingStats, fetchTeamBattingStatsBySeason, type BattingStat } from '@/services/battingStatsService'
interface ExtendedBattingStat extends BattingStat {
teamName: string
kPct: string
}
@ -122,7 +123,7 @@ export default {
data() {
return {
battingStats: [] as ExtendedBattingStat[],
sortKey: 'team' as keyof ExtendedBattingStat,
sortKey: 'teamName' as keyof ExtendedBattingStat,
sortOrder: 1
}
},
@ -152,18 +153,13 @@ export default {
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)
.map(s => ({...s, teamName: s.team.sname, kPct: this.calculateStrikeoutPercent(s)}))
.sort((s1, s2) => s2.teamName < s1.teamName ? 1 : -1)
},
sortBy(stat: keyof ExtendedBattingStat): 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)
this.battingStats.sort((s1, s2) => s2[stat] < s1[stat] ? this.sortOrder : -1 * this.sortOrder)
},
setKey(stat: keyof ExtendedBattingStat): void {
if (this.sortKey === stat) {
@ -171,11 +167,11 @@ export default {
this.sortOrder *= -1
} else {
this.sortKey = stat
this.sortOrder = 1
this.sortOrder = stat === 'teamName' ? 1 : -1
}
},
getArrow(stat: keyof ExtendedBattingStat): string {
if (this.sortKey !== stat) return ''
if (this.sortKey !== stat) return 'faux-arrow'
return this.sortOrder > 0 ? 'up' : 'down'
},
@ -194,4 +190,8 @@ export default {
.down::after {
content: "▿"
}
.faux-arrow::after {
opacity: 0;
content: "▿"
}
</style>

23
src/components/LeaderboardTeamPitchingTable.vue
View File

@ -5,7 +5,7 @@
<table class="table table-sm table-striped" id="table-pitching-stats">
<thead class="thead-dark">
<tr>
<th @click="sortBy('team')" :class="getArrow('team')">Team</th>
<th @click="sortBy('teamName')" :class="getArrow('teamName')">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>
@ -118,6 +118,7 @@ import { aggregatePitchingStats, fetchTeamPitchingStatsBySeason, type PitchingSt
import { outsToInnings, winPercentage, hitsPer9, hrsPer9 } from '@/services/utilities'
interface ExtendedPitchingStat extends PitchingStat {
teamName: string
winPct: string
irsPct: string
hPer9: string
@ -132,7 +133,7 @@ export default {
data() {
return {
pitchingStats: [] as ExtendedPitchingStat[],
sortKey: 'team' as keyof ExtendedPitchingStat,
sortKey: 'teamName' as keyof ExtendedPitchingStat,
sortOrder: 1
}
},
@ -164,22 +165,18 @@ export default {
this.pitchingStats = unsortedPitchingStats
.map(s => (
{...s,
teamName: s.team.sname,
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)
.sort((s1, s2) => s2.teamName < s1.teamName ? 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)
this.pitchingStats.sort((s1, s2) => s2[stat] < s1[stat] ? this.sortOrder : -1 * this.sortOrder)
},
setKey(stat: keyof ExtendedPitchingStat): void {
if (this.sortKey === stat) {
@ -187,11 +184,11 @@ export default {
this.sortOrder *= -1
} else {
this.sortKey = stat
this.sortOrder = 1
this.sortOrder = stat === 'teamName' ? 1 : -1
}
},
getArrow(stat: keyof ExtendedPitchingStat): string {
if (this.sortKey !== stat) return ''
if (this.sortKey !== stat) return 'faux-arrow'
return this.sortOrder > 0 ? 'up' : 'down'
},
@ -223,4 +220,8 @@ export default {
.down::after {
content: "▿"
}
.faux-arrow::after {
opacity: 0;
content: "▿"
}
</style>