diff --git a/src/components/LeaderboardTeamBattingTable.vue b/src/components/LeaderboardTeamBattingTable.vue index 4b0db65..353a712 100644 --- a/src/components/LeaderboardTeamBattingTable.vue +++ b/src/components/LeaderboardTeamBattingTable.vue @@ -5,7 +5,7 @@ - + @@ -111,6 +111,7 @@ import { aggregateBattingStats, fetchTeamBattingStatsBySeason, type BattingStat } from '@/services/battingStatsService' interface ExtendedBattingStat extends BattingStat { + teamName: string kPct: string } @@ -122,7 +123,7 @@ export default { data() { return { battingStats: [] as ExtendedBattingStat[], - sortKey: 'team' as keyof ExtendedBattingStat, + sortKey: 'teamName' as keyof ExtendedBattingStat, sortOrder: 1 } }, @@ -152,18 +153,13 @@ export default { async fetchData(): Promise { const unsortedBattingStats: BattingStat[] = await fetchTeamBattingStatsBySeason(this.seasonNumber) this.battingStats = unsortedBattingStats - .map(s => ({...s, kPct: this.calculateStrikeoutPercent(s)})) - .sort((s1, s2) => s2.team.sname < s1.team.sname ? 1 : -1) + .map(s => ({...s, teamName: s.team.sname, kPct: this.calculateStrikeoutPercent(s)})) + .sort((s1, s2) => s2.teamName < s1.teamName ? 1 : -1) }, sortBy(stat: keyof ExtendedBattingStat): void { this.setKey(stat) - - if (stat == 'team') { - this.battingStats.sort((s1, s2) => s2.team.sname < s1.team.sname ? this.sortOrder : -1 * this.sortOrder) - return - } - this.battingStats.sort((s1, s2) => s2[stat] < s1[stat] ? -1 * this.sortOrder : this.sortOrder) + this.battingStats.sort((s1, s2) => s2[stat] < s1[stat] ? this.sortOrder : -1 * this.sortOrder) }, setKey(stat: keyof ExtendedBattingStat): void { if (this.sortKey === stat) { @@ -171,11 +167,11 @@ export default { this.sortOrder *= -1 } else { this.sortKey = stat - this.sortOrder = 1 + this.sortOrder = stat === 'teamName' ? 1 : -1 } }, getArrow(stat: keyof ExtendedBattingStat): string { - if (this.sortKey !== stat) return '' + if (this.sortKey !== stat) return 'faux-arrow' return this.sortOrder > 0 ? 'up' : 'down' }, @@ -194,4 +190,8 @@ export default { .down::after { content: "▿" } +.faux-arrow::after { + opacity: 0; + content: "▿" +} diff --git a/src/components/LeaderboardTeamPitchingTable.vue b/src/components/LeaderboardTeamPitchingTable.vue index 9eb6fbb..1151e40 100644 --- a/src/components/LeaderboardTeamPitchingTable.vue +++ b/src/components/LeaderboardTeamPitchingTable.vue @@ -5,7 +5,7 @@
TeamTeam PA AB R
- + @@ -118,6 +118,7 @@ import { aggregatePitchingStats, fetchTeamPitchingStatsBySeason, type PitchingSt import { outsToInnings, winPercentage, hitsPer9, hrsPer9 } from '@/services/utilities' interface ExtendedPitchingStat extends PitchingStat { + teamName: string winPct: string irsPct: string hPer9: string @@ -132,7 +133,7 @@ export default { data() { return { pitchingStats: [] as ExtendedPitchingStat[], - sortKey: 'team' as keyof ExtendedPitchingStat, + sortKey: 'teamName' as keyof ExtendedPitchingStat, sortOrder: 1 } }, @@ -164,22 +165,18 @@ export default { this.pitchingStats = unsortedPitchingStats .map(s => ( {...s, + teamName: s.team.sname, winPct: this.winPercentage(s), irsPct: this.formatIRSPercentage(s), hPer9: this.hitsPer9(s), hrPer9: this.hrsPer9(s) })) - .sort((s1, s2) => s2.team.sname < s1.team.sname ? 1 : -1) + .sort((s1, s2) => s2.teamName < s1.teamName ? 1 : -1) }, sortBy(stat: keyof ExtendedPitchingStat): void { this.setKey(stat) - - if (stat == 'team') { - this.pitchingStats.sort((s1, s2) => s2.team.sname < s1.team.sname ? this.sortOrder : -1 * this.sortOrder) - return - } - this.pitchingStats.sort((s1, s2) => s2[stat] < s1[stat] ? -1 * this.sortOrder : this.sortOrder) + this.pitchingStats.sort((s1, s2) => s2[stat] < s1[stat] ? this.sortOrder : -1 * this.sortOrder) }, setKey(stat: keyof ExtendedPitchingStat): void { if (this.sortKey === stat) { @@ -187,11 +184,11 @@ export default { this.sortOrder *= -1 } else { this.sortKey = stat - this.sortOrder = 1 + this.sortOrder = stat === 'teamName' ? 1 : -1 } }, getArrow(stat: keyof ExtendedPitchingStat): string { - if (this.sortKey !== stat) return '' + if (this.sortKey !== stat) return 'faux-arrow' return this.sortOrder > 0 ? 'up' : 'down' }, @@ -223,4 +220,8 @@ export default { .down::after { content: "▿" } +.faux-arrow::after { + opacity: 0; + content: "▿" +}
TeamTeam W L W-L%