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

First pass at sorting player career stats table

Browse Source
This commit is contained in:
Peter 2024-11-15 17:18:02 -06:00
parent e266fe43ec
commit e911801d15
1 changed files with 99 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/components/PlayerCareerPitchingTable.vue
View File

@ -6,39 +6,39 @@
<table class="table table-sm table-striped" id="career-pitching">
<thead class="thead-dark">
<tr>
<th>Season</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 @click="setKey('sortableSeason')" :class="getArrow('sortableSeason')">Season</th>
<th @click="setKey('win')" :class="getArrow('win')">W</th>
<th @click="setKey('loss')" :class="getArrow('loss')">L</th>
<th @click="setKey('winPct')" :class="getArrow('winPct')">W-L%</th>
<th @click="setKey('era')" :class="getArrow('era')">ERA</th>
<th @click="setKey('games')" :class="getArrow('games')">G</th>
<th @click="setKey('gs')" :class="getArrow('gs')">GS</th>
<th @click="setKey('save')" :class="getArrow('save')">SV</th>
<th @click="setKey('hold')" :class="getArrow('hold')">HD</th>
<th @click="setKey('bsave')" :class="getArrow('bsave')">BSV</th>
<th @click="setKey('ip')" :class="getArrow('ip')">IP</th>
<th @click="setKey('hits')" :class="getArrow('hits')">H</th>
<th @click="setKey('run')" :class="getArrow('run')">R</th>
<th @click="setKey('e_run')" :class="getArrow('e_run')">ER</th>
<th @click="setKey('hr')" :class="getArrow('hr')">HR</th>
<th @click="setKey('bb')" :class="getArrow('bb')">BB</th>
<th @click="setKey('so')" :class="getArrow('so')">SO</th>
<th @click="setKey('hbp')" :class="getArrow('hbp')">HBP</th>
<th @click="setKey('balk')" :class="getArrow('balk')">BK</th>
<th @click="setKey('wp')" :class="getArrow('wp')">WP</th>
<th @click="setKey('ir')" :class="getArrow('ir')">IR</th>
<th @click="setKey('ir_sc')" :class="getArrow('ir_sc')">IRS</th>
<th @click="setKey('irsPct')" :class="getArrow('irsPct')">IRS%</th>
<th @click="setKey('whip')" :class="getArrow('whip')">WHIP</th>
<th @click="setKey('hPer9')" :class="getArrow('hPer9')">H/9</th>
<th @click="setKey('hrPer9')" :class="getArrow('hrPer9')">HR/9</th>
<th @click="setKey('bbPer9')" :class="getArrow('bbPer9')">BB/9</th>
<th @click="setKey('kPer9')" :class="getArrow('kPer9')">SO/9</th>
<th @click="setKey('kPerBB')" :class="getArrow('kPerBB')">SO/BB</th>
</tr>
</thead>
<tbody id="career-pitching-table">
<tr v-for="stat in sortedRegularAndPostSeasonPitching" :key="stat.seasonNumber">
<tr v-for="stat in sortedRegularAndPostSeasonPitching" :key="stat.sortableSeason">
<td>S{{ stat.seasonNumber }}{{ stat.isRegularSeason ? '' : ' / Playoffs' }}</td>
<td>{{ stat.win }}</td>
<td>{{ stat.loss }}</td>
@ -116,6 +116,14 @@ import { hitsPer9, hrsPer9, outsToInnings, winPercentage } from '@/services/util
interface PitchingStatWithSeason extends PitchingStat {
seasonNumber: number
isRegularSeason: boolean
sortableSeason: string // constructed to sort S1 -> S1 Playoffs -> S2 -> etc
// added for sortable table
winPct: string
irsPct: string
hPer9: string
hrPer9: string
}
export default {
@ -125,6 +133,12 @@ export default {
postSeasonPitchingStats: { type: Array<PitchingStat>, required: true },
showPostSeasonStats: { type: Boolean, required: true }
},
data() {
return {
sortKey: 'sortableSeason' as keyof PitchingStatWithSeason,
sortOrder: 1
}
},
computed: {
hasPitchingStats(): boolean {
return !!(this.regularSeasonPitchingStats.length + this.postSeasonPitchingStats.length)
@ -158,7 +172,12 @@ export default {
return {
...stat,
seasonNumber: stat.player.season,
isRegularSeason: true
isRegularSeason: true,
sortableSeason: `${`${stat.player.season}`.padStart(3, '0')}-A-Regular`,
winPct: this.winPercentage(stat),
irsPct: this.formatIRSPercentage(stat),
hPer9: this.hitsPer9(stat),
hrPer9: this.hrsPer9(stat)
}
}))
}
@ -168,21 +187,47 @@ export default {
return {
...stat,
seasonNumber: stat.player.season,
isRegularSeason: false
isRegularSeason: false,
sortableSeason: `${`${stat.player.season}`.padStart(3, '0')}-B-Playoffs`,
winPct: this.winPercentage(stat),
irsPct: this.formatIRSPercentage(stat),
hPer9: this.hitsPer9(stat),
hrPer9: this.hrsPer9(stat)
}
}))
}
return seasonStats.sort((s1, s2) => {
return s1.seasonNumber - s2.seasonNumber === 0
? s1.isRegularSeason
? -1
: 1
: s1.seasonNumber - s2.seasonNumber
})
return seasonStats.sort((s1, s2) => s2[this.sortKey] < s1[this.sortKey] ? this.sortOrder : -1 * this.sortOrder)
// return seasonStats.sort((s1, s2) => {
// return s1.seasonNumber - s2.seasonNumber === 0
// ? s1.isRegularSeason
// ? -1
// : 1
// : s1.seasonNumber - s2.seasonNumber
// })
},
},
methods: {
// setKey(stat: keyof PitchingStatWithSeason): void {
// this.setKey(stat)
// this.pitchingStats.sort((s1, s2) => s2[stat] < s1[stat] ? this.sortOrder : -1 * this.sortOrder)
// },
setKey(stat: keyof PitchingStatWithSeason): void {
if (this.sortKey === stat) {
// if key currently selected, flip sort order
this.sortOrder *= -1
} else {
this.sortKey = stat
this.sortOrder = stat === 'sortableSeason' ? 1 : -1
}
},
getArrow(stat: keyof PitchingStatWithSeason): string {
if (this.sortKey !== stat) return 'faux-arrow'
return this.sortOrder > 0 ? 'up' : 'down'
},
outsToInnings(stat: PitchingStat): string {
return outsToInnings(stat)
},
@ -203,3 +248,18 @@ export default {
}
}
</script>
<style>
.up::after {
content: "▵"
}
.down::after {
content: "▿"
}
.faux-arrow::after {
opacity: 0;
content: "▿"
}
</style>