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

Add sorting to career fielding table

Browse Source
This commit is contained in:
Peter 2024-11-16 09:04:52 -06:00
parent 208cd09c62
commit 6f93c01196
1 changed files with 40 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/PlayerCareerFieldingTable.vue
View File

@ -6,20 +6,20 @@
<table class="table table-sm table-striped" id="career-fielding">
<thead class="thead-dark">
<tr>
<th>Season</th>
<th>Pos</th>
<th>XCh</th>
<th>XH</th>
<th>E</th>
<th>PB</th>
<th>SBa</th>
<th>CSc</th>
<th>CS%</th>
<th>wF%</th>
<th @click="setKey('sortableSeason')" :class="getArrow('sortableSeason')">Season</th>
<th @click="setKey('pos')" :class="getArrow('pos')">Pos</th>
<th @click="setKey('xCheckCount')" :class="getArrow('xCheckCount')">XCh</th>
<th @click="setKey('hit')" :class="getArrow('hit')">XH</th>
<th @click="setKey('error')" :class="getArrow('error')">E</th>
<th @click="setKey('passedBallCount')" :class="getArrow('passedBallCount')">PB</th>
<th @click="setKey('stolenBaseCheckCount')" :class="getArrow('stolenBaseCheckCount')">SBa</th>
<th @click="setKey('caughtStealingCount')" :class="getArrow('caughtStealingCount')">CSc</th>
<th @click="setKey('caughtStealingPercent')" :class="getArrow('caughtStealingPercent')">CS%</th>
<th @click="setKey('weightedFieldingPercent')" :class="getArrow('weightedFieldingPercent')">wF%</th>
</tr>
</thead>
<tbody id="career-fielding-table">
<tr v-for="stat in sortedRegularAndPostSeasonFielding">
<tr v-for="stat in sortedRegularAndPostSeasonFielding" :key="stat.sortableSeason">
<td>S{{ stat.seasonNumber }}{{ stat.isRegularSeason ? '' : ' / Playoffs' }}</td>
<td>{{ stat.pos }}</td>
<td>{{ stat.xCheckCount }}</td>
@ -33,7 +33,7 @@
</tr>
</tbody>
<tfoot>
<tr v-for="stat in sortedCareerFieldingStats">
<tr v-for="stat in sortedCareerFieldingStats" :key="stat.pos">
<th>Career</th>
<th>{{ stat.pos }}</th>
<th>{{ stat.xCheckCount }}</th>
@ -45,7 +45,7 @@
<th>{{ formatCaughtStealingPercent(stat) }}</th>
<th>{{ formatWeightedFieldingPercent(stat) }}</th>
</tr>
<tr v-for="stat in sortedPlayoffsCareerFieldingStats">
<tr v-for="stat in sortedPlayoffsCareerFieldingStats" :key="stat.pos">
<th>Career / Playoffs</th>
<th>{{ stat.pos }}</th>
<th>{{ stat.xCheckCount }}</th>
@ -71,31 +71,23 @@ import { POS_MAP } from '@/services/utilities'
interface FieldingStatWithSeason extends FieldingStat {
seasonNumber: number
isRegularSeason: boolean
}
function compareFieldingStats(s1: FieldingStatWithSeason, s2: FieldingStatWithSeason): number {
if (s1.seasonNumber - s2.seasonNumber !== 0) {
return s1.seasonNumber - s2.seasonNumber
}
if (s1.isRegularSeason !== s2.isRegularSeason) {
return s1.isRegularSeason
? -1
: 1
}
// at this point stats are same season and also both regular or post season stats
// and must be sorted on position order
return POS_MAP[s1.pos] - POS_MAP[s2.pos]
sortableSeason: string // constructed to sort S1 -> S1 Playoffs -> S2 -> etc
}
export default {
name: "PlayerCareerFieldingTable",
name: 'PlayerCareerFieldingTable',
props: {
regularSeasonFieldingStats: { type: Array<FieldingStat>, required: true },
postSeasonFieldingStats: { type: Array<FieldingStat>, required: true },
showPostSeasonStats: { type: Boolean, required: true }
},
data() {
return {
sortKey: 'sortableSeason' as keyof FieldingStatWithSeason,
sortOrder: 1
}
},
computed: {
hasFieldingStats(): boolean {
return !!(this.regularSeasonFieldingStats.length + this.postSeasonFieldingStats.length)
@ -125,7 +117,8 @@ export default {
return {
...stat,
seasonNumber: stat.player.season,
isRegularSeason: true
isRegularSeason: true,
sortableSeason: `${`${stat.player.season}`.padStart(3, '0')}-A-Regular-${POS_MAP[stat.pos]}`
}
}))
}
@ -135,15 +128,30 @@ export default {
return {
...stat,
seasonNumber: stat.player.season,
isRegularSeason: false
isRegularSeason: false,
sortableSeason: `${`${stat.player.season}`.padStart(3, '0')}-B-Playoffs-${POS_MAP[stat.pos]}`
}
}))
}
return seasonStats.sort(compareFieldingStats)
return seasonStats.sort((s1, s2) => s2[this.sortKey] < s1[this.sortKey] ? this.sortOrder : -1 * this.sortOrder)
},
},
methods: {
setKey(stat: keyof FieldingStatWithSeason): 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 FieldingStatWithSeason): string {
if (this.sortKey !== stat) return 'faux-arrow'
return this.sortOrder > 0 ? 'up' : 'down'
},
formatCaughtStealingPercent(stat: FieldingStat): string {
if (stat.stolenBaseCheckCount === 0 || Number.isNaN(stat.caughtStealingPercent)) {
return '-'