Merge pull request #38 from pgiro/sortable-team-view-tables
Sortable team view tables
This commit is contained in:
Peter
GitHub
commit
e266fe43ec
@ -3,40 +3,40 @@
|
||||
<div class="col-sm-12">
|
||||
<h3>Team Batting {{ isRegularSeason ? '' : ' - Postseason' }}</h3>
|
||||
<div class="table-responsive-xl">
|
||||
<table class="table table-sm table-striped" id="table-batting-stats">
|
||||
<table class="table table-sm table-striped">
|
||||
<thead class="thead-dark">
|
||||
<tr style="min-width: 75px">
|
||||
<th>Player</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="sortBy('playerName')" :class="getArrow('playerName')">Player</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>
|
||||
<th @click="sortBy('hit')" :class="getArrow('hit')">H</th>
|
||||
<th @click="sortBy('double')" :class="getArrow('double')">2B</th>
|
||||
<th @click="sortBy('triple')" :class="getArrow('triple')">3B</th>
|
||||
<th @click="sortBy('hr')" :class="getArrow('hr')">HR</th>
|
||||
<th @click="sortBy('rbi')" :class="getArrow('rbi')">RBI</th>
|
||||
<th @click="sortBy('sb')" :class="getArrow('sb')">SB</th>
|
||||
<th @click="sortBy('cs')" :class="getArrow('cs')">CS</th>
|
||||
<th @click="sortBy('bb')" :class="getArrow('bb')">BB</th>
|
||||
<th @click="sortBy('so')" :class="getArrow('so')">SO</th>
|
||||
<th @click="sortBy('avg')" :class="getArrow('avg')">BA</th>
|
||||
<th @click="sortBy('obp')" :class="getArrow('obp')">OBP</th>
|
||||
<th @click="sortBy('slg')" :class="getArrow('slg')">SLG</th>
|
||||
<th @click="sortBy('ops')" :class="getArrow('ops')">OPS</th>
|
||||
<th @click="sortBy('woba')" :class="getArrow('woba')">wOBA</th>
|
||||
<th @click="sortBy('kPct')" :class="getArrow('kPct')">K%</th>
|
||||
<th @click="sortBy('bphr')" :class="getArrow('bphr')">BPHR</th>
|
||||
<th @click="sortBy('bpfo')" :class="getArrow('bpfo')">BPFO</th>
|
||||
<th @click="sortBy('bp1b')" :class="getArrow('bp1b')">BP1B</th>
|
||||
<th @click="sortBy('bplo')" :class="getArrow('bplo')">BPLO</th>
|
||||
<th @click="sortBy('gidp')" :class="getArrow('gidp')">GIDP</th>
|
||||
<th @click="sortBy('hbp')" :class="getArrow('hbp')">HBP</th>
|
||||
<th @click="sortBy('sac')" :class="getArrow('sac')">SAC</th>
|
||||
<th @click="sortBy('ibb')" :class="getArrow('ibb')">IBB</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="career-batting-table">
|
||||
<tr v-for="stat in battingStats" :key="stat.player.bbref_id">
|
||||
<tr v-for="stat in battingStats" :key="stat.player.name">
|
||||
<td>
|
||||
<RouterLink
|
||||
:to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
|
||||
@ -111,6 +111,11 @@
|
||||
<script lang="ts">
|
||||
import { aggregateBattingStats, fetchBattingStatsBySeasonAndTeamId, type BattingStat } from '@/services/battingStatsService'
|
||||
|
||||
interface ExtendedBattingStat extends BattingStat {
|
||||
playerName: string
|
||||
kPct: string
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'TeamBattingTable',
|
||||
props: {
|
||||
@ -120,7 +125,9 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
battingStats: [] as BattingStat[]
|
||||
battingStats: [] as ExtendedBattingStat[],
|
||||
sortKey: 'pa' as keyof ExtendedBattingStat,
|
||||
sortOrder: -1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -137,14 +144,39 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
teamId(newValue, oldValue) {
|
||||
if (newValue !== oldValue)
|
||||
if (newValue !== oldValue) {
|
||||
this.battingStats = []
|
||||
this.sortKey = 'pa'
|
||||
this.sortOrder = -1
|
||||
this.fetchData()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchData(): Promise<void> {
|
||||
const unsortedBattingStats: BattingStat[] = await fetchBattingStatsBySeasonAndTeamId(this.seasonNumber, this.teamId, this.isRegularSeason)
|
||||
this.battingStats = unsortedBattingStats.sort((s1, s2) => s2.pa - s1.pa)
|
||||
this.battingStats = unsortedBattingStats
|
||||
.map(s => ({ ...s, playerName: s.player.name, kPct: this.calculateStrikeoutPercent(s) }))
|
||||
.sort((s1, s2) => s2.pa - s1.pa)
|
||||
},
|
||||
sortBy(stat: keyof ExtendedBattingStat): void {
|
||||
this.setKey(stat)
|
||||
|
||||
this.battingStats.sort((s1, s2) => s2[stat] < s1[stat] ? this.sortOrder : -1 * this.sortOrder)
|
||||
},
|
||||
setKey(stat: keyof ExtendedBattingStat): void {
|
||||
if (this.sortKey === stat) {
|
||||
// if key currently selected, flip sort order
|
||||
this.sortOrder *= -1
|
||||
} else {
|
||||
this.sortKey = stat
|
||||
this.sortOrder = stat === 'playerName' ? 1 : -1
|
||||
}
|
||||
},
|
||||
getArrow(stat: keyof ExtendedBattingStat): string {
|
||||
if (this.sortKey !== stat) return 'faux-arrow'
|
||||
|
||||
return this.sortOrder > 0 ? 'up' : 'down'
|
||||
},
|
||||
calculateStrikeoutPercent(stat: BattingStat): string {
|
||||
if (!stat.pa) return 'N/A'
|
||||
@ -153,3 +185,18 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.up::after {
|
||||
content: "▵"
|
||||
}
|
||||
|
||||
.down::after {
|
||||
content: "▿"
|
||||
}
|
||||
|
||||
.faux-arrow::after {
|
||||
opacity: 0;
|
||||
content: "▿"
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,22 +5,23 @@
|
||||
<table class="table table-sm table-striped" id="table-fielding-stats">
|
||||
<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="sortBy('playerName')" :class="getArrow('playerName')">Player</th>
|
||||
<th @click="sortBy('pos')" :class="getArrow('pos')">Pos</th>
|
||||
<th @click="sortBy('xCheckCount')" :class="getArrow('xCheckCount')">XCh</th>
|
||||
<th @click="sortBy('hit')" :class="getArrow('hit')">XH</th>
|
||||
<th @click="sortBy('error')" :class="getArrow('error')">E</th>
|
||||
<th @click="sortBy('passedBallCount')" :class="getArrow('passedBallCount')">PB</th>
|
||||
<th @click="sortBy('stolenBaseCheckCount')" :class="getArrow('stolenBaseCheckCount')">SBa</th>
|
||||
<th @click="sortBy('caughtStealingCount')" :class="getArrow('caughtStealingCount')">CSc</th>
|
||||
<th @click="sortBy('caughtStealingPercent')" :class="getArrow('caughtStealingPercent')">CS%</th>
|
||||
<th @click="sortBy('weightedFieldingPercent')" :class="getArrow('weightedFieldingPercent')">wF%</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="career-fielding-table">
|
||||
<tr v-for="stat in fieldingStats" :key="`${stat.player.name}-${stat.pos}`">
|
||||
<td>
|
||||
<RouterLink :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
|
||||
<RouterLink
|
||||
:to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
|
||||
{{ stat.player.name }}
|
||||
</RouterLink>
|
||||
</td>
|
||||
@ -57,6 +58,10 @@
|
||||
import { aggregateFieldingStats, fetchFieldingStatsBySeasonAndTeamId, totaledFieldingStats, type FieldingStat } from '@/services/fieldingStatsService'
|
||||
import { POS_MAP } from '@/services/utilities'
|
||||
|
||||
interface ExtendedFieldingStat extends FieldingStat {
|
||||
playerName: string
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'TeamFieldingTable',
|
||||
props: {
|
||||
@ -66,7 +71,9 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fieldingStats: [] as FieldingStat[]
|
||||
fieldingStats: [] as ExtendedFieldingStat[],
|
||||
sortKey: 'xCheckCount' as keyof ExtendedFieldingStat,
|
||||
sortOrder: -1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -90,14 +97,20 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
teamId(newValue, oldValue) {
|
||||
if (newValue !== oldValue)
|
||||
if (newValue !== oldValue) {
|
||||
this.fieldingStats = []
|
||||
this.sortKey = 'xCheckCount'
|
||||
this.sortOrder = -1
|
||||
this.fetchData()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchData(): Promise<void> {
|
||||
const unsortedFieldingStats: FieldingStat[] = await fetchFieldingStatsBySeasonAndTeamId(this.seasonNumber, this.teamId, this.isRegularSeason)
|
||||
this.fieldingStats = unsortedFieldingStats.sort((s1, s2) => s2.xCheckCount - s1.xCheckCount)
|
||||
this.fieldingStats = unsortedFieldingStats
|
||||
.map(s => ({ ...s, playerName: s.player.name }))
|
||||
.sort((s1, s2) => s2.xCheckCount - s1.xCheckCount)
|
||||
},
|
||||
formatCaughtStealingPercent(stat: FieldingStat): string {
|
||||
if (stat.stolenBaseCheckCount === 0 || Number.isNaN(stat.caughtStealingPercent)) {
|
||||
@ -108,7 +121,46 @@ export default {
|
||||
},
|
||||
formatWeightedFieldingPercent(stat: FieldingStat): string {
|
||||
return stat.weightedFieldingPercent.toFixed(3)
|
||||
},
|
||||
sortBy(stat: keyof ExtendedFieldingStat): void {
|
||||
this.setKey(stat)
|
||||
|
||||
if (stat === 'pos') {
|
||||
this.fieldingStats.sort((s1, s2) => this.sortOrder * (POS_MAP[s1.pos] - POS_MAP[s2.pos]))
|
||||
return
|
||||
}
|
||||
|
||||
this.fieldingStats.sort((s1, s2) => s2[stat] < s1[stat] ? this.sortOrder : -1 * this.sortOrder)
|
||||
},
|
||||
setKey(stat: keyof ExtendedFieldingStat): void {
|
||||
if (this.sortKey === stat) {
|
||||
// if key currently selected, flip sort order
|
||||
this.sortOrder *= -1
|
||||
} else {
|
||||
this.sortKey = stat
|
||||
this.sortOrder = stat === 'playerName' ? 1 : -1
|
||||
}
|
||||
},
|
||||
getArrow(stat: keyof ExtendedFieldingStat): string {
|
||||
if (this.sortKey !== stat) return 'faux-arrow'
|
||||
|
||||
return this.sortOrder > 0 ? 'up' : 'down'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.up::after {
|
||||
content: "▵"
|
||||
}
|
||||
|
||||
.down::after {
|
||||
content: "▿"
|
||||
}
|
||||
|
||||
.faux-arrow::after {
|
||||
opacity: 0;
|
||||
content: "▿"
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,37 +6,35 @@
|
||||
<table class="table table-sm table-striped" id="table-pitching-stats">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
<th>Player</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>Last G</th>
|
||||
<th>Last G-2</th> -->
|
||||
<th @click="sortBy('playerName')" :class="getArrow('playerName')">Player</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>
|
||||
<th @click="sortBy('era')" :class="getArrow('era')">ERA</th>
|
||||
<th @click="sortBy('games')" :class="getArrow('games')">G</th>
|
||||
<th @click="sortBy('gs')" :class="getArrow('gs')">GS</th>
|
||||
<th @click="sortBy('save')" :class="getArrow('save')">SV</th>
|
||||
<th @click="sortBy('hold')" :class="getArrow('hold')">HD</th>
|
||||
<th @click="sortBy('bsave')" :class="getArrow('bsave')">BSV</th>
|
||||
<th @click="sortBy('ip')" :class="getArrow('ip')">IP</th>
|
||||
<th @click="sortBy('hits')" :class="getArrow('hits')">H</th>
|
||||
<th @click="sortBy('run')" :class="getArrow('run')">R</th>
|
||||
<th @click="sortBy('e_run')" :class="getArrow('e_run')">ER</th>
|
||||
<th @click="sortBy('hr')" :class="getArrow('hr')">HR</th>
|
||||
<th @click="sortBy('bb')" :class="getArrow('bb')">BB</th>
|
||||
<th @click="sortBy('so')" :class="getArrow('so')">SO</th>
|
||||
<th @click="sortBy('hbp')" :class="getArrow('hbp')">HBP</th>
|
||||
<th @click="sortBy('balk')" :class="getArrow('balk')">BK</th>
|
||||
<th @click="sortBy('wp')" :class="getArrow('wp')">WP</th>
|
||||
<th @click="sortBy('ir')" :class="getArrow('ir')">IR</th>
|
||||
<th @click="sortBy('ir_sc')" :class="getArrow('ir_sc')">IRS</th>
|
||||
<th @click="sortBy('irsPct')" :class="getArrow('irsPct')">IRS%</th>
|
||||
<th @click="sortBy('whip')" :class="getArrow('whip')">WHIP</th>
|
||||
<th @click="sortBy('hPer9')" :class="getArrow('hPer9')">H/9</th>
|
||||
<th @click="sortBy('hrPer9')" :class="getArrow('hrPer9')">HR/9</th>
|
||||
<th @click="sortBy('bbPer9')" :class="getArrow('bbPer9')">BB/9</th>
|
||||
<th @click="sortBy('kPer9')" :class="getArrow('kPer9')">SO/9</th>
|
||||
<th @click="sortBy('kPerBB')" :class="getArrow('kPerBB')">SO/BB</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="team-pitching-stats">
|
||||
@ -120,6 +118,14 @@
|
||||
import { aggregatePitchingStats, fetchPitchingStatsBySeasonAndTeamId, type PitchingStat } from '@/services/pitchingStatsService'
|
||||
import { outsToInnings, winPercentage, hitsPer9, hrsPer9 } from '@/services/utilities'
|
||||
|
||||
interface ExtendedPitchingStat extends PitchingStat {
|
||||
playerName: string
|
||||
winPct: string
|
||||
irsPct: string
|
||||
hPer9: string
|
||||
hrPer9: string
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'TeamPitchingTable',
|
||||
props: {
|
||||
@ -129,7 +135,9 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pitchingStats: [] as PitchingStat[]
|
||||
pitchingStats: [] as ExtendedPitchingStat[],
|
||||
sortKey: 'ip' as keyof ExtendedPitchingStat,
|
||||
sortOrder: -1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -146,14 +154,47 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
teamId(newValue, oldValue) {
|
||||
if (newValue !== oldValue)
|
||||
if (newValue !== oldValue) {
|
||||
this.pitchingStats = []
|
||||
this.sortKey = 'ip'
|
||||
this.sortOrder = -1
|
||||
this.fetchData()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchData(): Promise<void> {
|
||||
const unsortedPitchingStats: PitchingStat[] = await fetchPitchingStatsBySeasonAndTeamId(this.seasonNumber, this.teamId, this.isRegularSeason)
|
||||
this.pitchingStats = unsortedPitchingStats.sort((s1, s2) => s2.outs - s1.outs)
|
||||
this.pitchingStats = unsortedPitchingStats
|
||||
.map(s => (
|
||||
{
|
||||
...s,
|
||||
playerName: s.player.name,
|
||||
winPct: this.winPercentage(s),
|
||||
irsPct: this.formatIRSPercentage(s),
|
||||
hPer9: this.hitsPer9(s),
|
||||
hrPer9: this.hrsPer9(s)
|
||||
}))
|
||||
.sort((s1, s2) => s2.ip - s1.ip)
|
||||
},
|
||||
sortBy(stat: keyof ExtendedPitchingStat): void {
|
||||
this.setKey(stat)
|
||||
|
||||
this.pitchingStats.sort((s1, s2) => s2[stat] < s1[stat] ? this.sortOrder : -1 * this.sortOrder)
|
||||
},
|
||||
setKey(stat: keyof ExtendedPitchingStat): void {
|
||||
if (this.sortKey === stat) {
|
||||
// if key currently selected, flip sort order
|
||||
this.sortOrder *= -1
|
||||
} else {
|
||||
this.sortKey = stat
|
||||
this.sortOrder = stat === 'playerName' ? 1 : -1
|
||||
}
|
||||
},
|
||||
getArrow(stat: keyof ExtendedPitchingStat): string {
|
||||
if (this.sortKey !== stat) return 'faux-arrow'
|
||||
|
||||
return this.sortOrder > 0 ? 'up' : 'down'
|
||||
},
|
||||
outsToInnings(stat: PitchingStat): string {
|
||||
return outsToInnings(stat)
|
||||
@ -175,3 +216,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