266 lines
9.9 KiB
Vue
266 lines
9.9 KiB
Vue
<template>
|
|
<div v-if="hasPitchingStats" class="row" id="career-pitching-row">
|
|
<div class="col-sm-12">
|
|
<h3>Pitching Stats</h3>
|
|
<div class="table-responsive-xl">
|
|
<table class="table table-sm table-striped" id="career-pitching">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<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.sortableSeason">
|
|
<td>S{{ stat.seasonNumber }}{{ stat.isRegularSeason ? '' : ' / Playoffs' }}</td>
|
|
<td>{{ stat.win }}</td>
|
|
<td>{{ stat.loss }}</td>
|
|
<td>{{ winPercentage(stat) }}</td>
|
|
<td>{{ stat.era.toFixed(2) }}</td>
|
|
<td>{{ stat.games }}</td>
|
|
<td>{{ stat.gs }}</td>
|
|
<td>{{ stat.save }}</td>
|
|
<td>{{ stat.hold }}</td>
|
|
<td>{{ stat.bsave }}</td>
|
|
<td>{{ outsToInnings(stat) }}</td>
|
|
<td>{{ stat.hits }}</td>
|
|
<td>{{ stat.run }}</td>
|
|
<td>{{ stat.e_run }}</td>
|
|
<td>{{ stat.hr }}</td>
|
|
<td>{{ stat.bb }}</td>
|
|
<td>{{ stat.so }}</td>
|
|
<td>{{ stat.hbp }}</td>
|
|
<td>{{ stat.balk }}</td>
|
|
<td>{{ stat.wp }}</td>
|
|
<td>{{ stat.ir }}</td>
|
|
<td>{{ stat.ir_sc }}</td>
|
|
<td>{{ formatIRSPercentage(stat) }}</td>
|
|
<td>{{ stat.whip.toFixed(2) }}</td>
|
|
<td>{{ hitsPer9(stat) }}</td>
|
|
<td>{{ hrsPer9(stat) }}</td>
|
|
<td>{{ stat.bbPer9.toFixed(1) }}</td>
|
|
<td>{{ stat.kPer9.toFixed(1) }}</td>
|
|
<td>{{ stat.kPerBB.toFixed(1) }}</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr v-for="(stat, idx) in careerPitchingStats" :key="idx">
|
|
<th>Career{{ idx > 0 ? ' / Playoffs' : '' }}</th>
|
|
<th>{{ stat.win }}</th>
|
|
<th>{{ stat.loss }}</th>
|
|
<th>{{ winPercentage(stat) }}</th>
|
|
<th>{{ stat.era.toFixed(2) }}</th>
|
|
<th>{{ stat.games }}</th>
|
|
<th>{{ stat.gs }}</th>
|
|
<th>{{ stat.save }}</th>
|
|
<th>{{ stat.hold }}</th>
|
|
<th>{{ stat.bsave }}</th>
|
|
<th>{{ outsToInnings(stat) }}</th>
|
|
<th>{{ stat.hits }}</th>
|
|
<th>{{ stat.run }}</th>
|
|
<th>{{ stat.e_run }}</th>
|
|
<th>{{ stat.hr }}</th>
|
|
<th>{{ stat.bb }}</th>
|
|
<th>{{ stat.so }}</th>
|
|
<th>{{ stat.hbp }}</th>
|
|
<th>{{ stat.balk }}</th>
|
|
<th>{{ stat.wp }}</th>
|
|
<th>{{ stat.ir }}</th>
|
|
<th>{{ stat.ir_sc }}</th>
|
|
<th>{{ formatIRSPercentage(stat) }}</th>
|
|
<th>{{ stat.whip.toFixed(2) }}</th>
|
|
<th>{{ hitsPer9(stat) }}</th>
|
|
<th>{{ hrsPer9(stat) }}</th>
|
|
<th>{{ stat.bbPer9.toFixed(1) }}</th>
|
|
<th>{{ stat.kPer9.toFixed(1) }}</th>
|
|
<th>{{ stat.kPerBB.toFixed(1) }}</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { aggregatePitchingStats, type PitchingStat } from '@/services/pitchingStatsService'
|
|
import { hitsPer9, hrsPer9, outsToInnings, winPercentage } from '@/services/utilities'
|
|
|
|
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 {
|
|
name: 'PlayerCareerPitchingTable',
|
|
props: {
|
|
regularSeasonPitchingStats: { type: Array<PitchingStat>, required: true },
|
|
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)
|
|
},
|
|
careerPitchingStats(): PitchingStat[] {
|
|
let careerStats = []
|
|
|
|
if (this.regularSeasonPitchingStats.length > 0) {
|
|
careerStats.push(aggregatePitchingStats(this.regularSeasonPitchingStats))
|
|
}
|
|
|
|
if (this.showPostSeasonStats && this.postSeasonPitchingStats.length > 0) {
|
|
careerStats.push(aggregatePitchingStats(this.postSeasonPitchingStats))
|
|
}
|
|
|
|
return careerStats
|
|
},
|
|
careerPitchingStat(): PitchingStat | undefined {
|
|
if (this.regularSeasonPitchingStats.length > 0) {
|
|
// old site behavior just summed regular season stats for the career line total
|
|
return aggregatePitchingStats(this.regularSeasonPitchingStats)
|
|
}
|
|
|
|
return undefined
|
|
},
|
|
sortedRegularAndPostSeasonPitching(): PitchingStatWithSeason[] {
|
|
let seasonStats: PitchingStatWithSeason[] = []
|
|
|
|
if (this.regularSeasonPitchingStats?.length) {
|
|
seasonStats = seasonStats.concat(this.regularSeasonPitchingStats.map(stat => {
|
|
return {
|
|
...stat,
|
|
seasonNumber: stat.player.season,
|
|
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)
|
|
}
|
|
}))
|
|
}
|
|
|
|
if (this.showPostSeasonStats && this.postSeasonPitchingStats?.length) {
|
|
seasonStats = seasonStats.concat(this.postSeasonPitchingStats.map(stat => {
|
|
return {
|
|
...stat,
|
|
seasonNumber: stat.player.season,
|
|
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) => 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)
|
|
},
|
|
winPercentage(stat: PitchingStat): string {
|
|
return winPercentage(stat)
|
|
},
|
|
hitsPer9(stat: PitchingStat): string {
|
|
return hitsPer9(stat)
|
|
},
|
|
hrsPer9(stat: PitchingStat): string {
|
|
return hrsPer9(stat)
|
|
},
|
|
formatIRSPercentage(stat: PitchingStat): string {
|
|
if (stat.ir === 0) return '-'
|
|
|
|
return `${(stat.ir_sc_pct * 100).toFixed(1)}%`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.up::after {
|
|
content: "▵"
|
|
}
|
|
|
|
.down::after {
|
|
content: "▿"
|
|
}
|
|
|
|
.faux-arrow::after {
|
|
opacity: 0;
|
|
content: "▿"
|
|
}
|
|
</style>
|