Merge pull request #39 from pgiro/sortable-player-view-tables
Sortable player view tables
This commit is contained in:
Peter
GitHub
commit
8b94097b9d
@ -74,7 +74,7 @@ import { aggregateBattingStats, type BattingStat } from '@/services/battingStats
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
export default {
|
||||
name: "PlayerBattingSummaryTable",
|
||||
name: 'PlayerBattingSummaryTable',
|
||||
props: {
|
||||
currentSeasonBatting: { type: Object as PropType<BattingStat>, required: false },
|
||||
currentPostSeasonBatting: { type: Object as PropType<BattingStat>, required: false },
|
||||
|
||||
@ -6,33 +6,33 @@
|
||||
<table class="table table-sm table-striped" id="career-batting">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
<th>Season</th>
|
||||
<th>PA</th>
|
||||
<th>AB</th>
|
||||
<th>R</th>
|
||||
<th>H</th>
|
||||
<th>2B</th>
|
||||
<th>3B</th>
|
||||
<th>HR</th>
|
||||
<th>RBI</th>
|
||||
<th>SB</th>
|
||||
<th>CS</th>
|
||||
<th>BB</th>
|
||||
<th>SO</th>
|
||||
<th>BA</th>
|
||||
<th>OBP</th>
|
||||
<th>SLG</th>
|
||||
<th>OPS</th>
|
||||
<th>wOBA</th>
|
||||
<th>K%</th>
|
||||
<th>BPHR</th>
|
||||
<th>BPFO</th>
|
||||
<th>BP1B</th>
|
||||
<th>BPLO</th>
|
||||
<th>GIDP</th>
|
||||
<th>HBP</th>
|
||||
<th>SAC</th>
|
||||
<th>IBB</th>
|
||||
<th @click="setKey('sortableSeason')" :class="getArrow('sortableSeason')">Season</th>
|
||||
<th @click="setKey('pa')" :class="getArrow('pa')">PA</th>
|
||||
<th @click="setKey('ab')" :class="getArrow('ab')">AB</th>
|
||||
<th @click="setKey('run')" :class="getArrow('run')">R</th>
|
||||
<th @click="setKey('hit')" :class="getArrow('hit')">H</th>
|
||||
<th @click="setKey('double')" :class="getArrow('double')">2B</th>
|
||||
<th @click="setKey('triple')" :class="getArrow('triple')">3B</th>
|
||||
<th @click="setKey('hr')" :class="getArrow('hr')">HR</th>
|
||||
<th @click="setKey('rbi')" :class="getArrow('rbi')">RBI</th>
|
||||
<th @click="setKey('sb')" :class="getArrow('sb')">SB</th>
|
||||
<th @click="setKey('cs')" :class="getArrow('cs')">CS</th>
|
||||
<th @click="setKey('bb')" :class="getArrow('bb')">BB</th>
|
||||
<th @click="setKey('so')" :class="getArrow('so')">SO</th>
|
||||
<th @click="setKey('avg')" :class="getArrow('avg')">BA</th>
|
||||
<th @click="setKey('obp')" :class="getArrow('obp')">OBP</th>
|
||||
<th @click="setKey('slg')" :class="getArrow('slg')">SLG</th>
|
||||
<th @click="setKey('ops')" :class="getArrow('ops')">OPS</th>
|
||||
<th @click="setKey('woba')" :class="getArrow('woba')">wOBA</th>
|
||||
<th @click="setKey('kPct')" :class="getArrow('kPct')">K%</th>
|
||||
<th @click="setKey('bphr')" :class="getArrow('bphr')">BPHR</th>
|
||||
<th @click="setKey('bpfo')" :class="getArrow('bpfo')">BPFO</th>
|
||||
<th @click="setKey('bp1b')" :class="getArrow('bp1b')">BP1B</th>
|
||||
<th @click="setKey('bplo')" :class="getArrow('bplo')">BPLO</th>
|
||||
<th @click="setKey('gidp')" :class="getArrow('gidp')">GIDP</th>
|
||||
<th @click="setKey('hbp')" :class="getArrow('hbp')">HBP</th>
|
||||
<th @click="setKey('sac')" :class="getArrow('sac')">SAC</th>
|
||||
<th @click="setKey('ibb')" :class="getArrow('ibb')">IBB</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="career-batting-table">
|
||||
@ -109,6 +109,10 @@ import { aggregateBattingStats, type BattingStat } from '@/services/battingStats
|
||||
interface BattingStatWithSeason extends BattingStat {
|
||||
seasonNumber: number
|
||||
isRegularSeason: boolean
|
||||
|
||||
sortableSeason: string // constructed to sort S1 -> S1 Playoffs -> S2 -> etc
|
||||
|
||||
kPct: string
|
||||
}
|
||||
|
||||
export default {
|
||||
@ -118,6 +122,12 @@ export default {
|
||||
postSeasonBattingStats: { type: Array<BattingStat>, required: true },
|
||||
showPostSeasonStats: { type: Boolean, required: true }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sortKey: 'sortableSeason' as keyof BattingStatWithSeason,
|
||||
sortOrder: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasBattingStats(): boolean {
|
||||
return !!(this.regularSeasonBattingStats.length + this.postSeasonBattingStats.length)
|
||||
@ -143,7 +153,9 @@ export default {
|
||||
return {
|
||||
...stat,
|
||||
seasonNumber: stat.player.season,
|
||||
isRegularSeason: true
|
||||
isRegularSeason: true,
|
||||
sortableSeason: `${`${stat.player.season}`.padStart(3, '0')}-A-Regular`,
|
||||
kPct: this.calculateStrikeoutPercent(stat)
|
||||
}
|
||||
}))
|
||||
}
|
||||
@ -153,21 +165,31 @@ export default {
|
||||
return {
|
||||
...stat,
|
||||
seasonNumber: stat.player.season,
|
||||
isRegularSeason: false
|
||||
isRegularSeason: false,
|
||||
sortableSeason: `${`${stat.player.season}`.padStart(3, '0')}-B-Playoffs`,
|
||||
kPct: this.calculateStrikeoutPercent(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)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setKey(stat: keyof BattingStatWithSeason): 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 BattingStatWithSeason): string {
|
||||
if (this.sortKey !== stat) return 'faux-arrow'
|
||||
|
||||
return this.sortOrder > 0 ? 'up' : 'down'
|
||||
},
|
||||
calculateStrikeoutPercent(stat: BattingStat): string {
|
||||
if (!stat.pa) return 'N/A'
|
||||
return (stat.so * 100 / stat.pa).toFixed(1)
|
||||
@ -175,3 +197,18 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.up::after {
|
||||
content: "▵"
|
||||
}
|
||||
|
||||
.down::after {
|
||||
content: "▿"
|
||||
}
|
||||
|
||||
.faux-arrow::after {
|
||||
opacity: 0;
|
||||
content: "▿"
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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 '-'
|
||||
|
||||
@ -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,34 @@ 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)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
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 +235,18 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.up::after {
|
||||
content: "▵"
|
||||
}
|
||||
|
||||
.down::after {
|
||||
content: "▿"
|
||||
}
|
||||
|
||||
.faux-arrow::after {
|
||||
opacity: 0;
|
||||
content: "▿"
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user