Flatten extended stat and use teamName, add placeholder arrow to avoid shifting

src/components/LeaderboardTeamBattingTable.vue

@@ -5,7 +5,7 @@
         <table class="table table-sm table-striped" id="table-batting-stats">
           <thead class="thead-dark">
             <tr style="min-width: 75px">
-              <th @click="sortBy('team')" :class="getArrow('team')">Team</th>
+              <th @click="sortBy('teamName')" :class="getArrow('teamName')">Team</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>
@@ -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<void> {
       const unsortedBattingStats: BattingStat[] = await fetchTeamBattingStatsBySeason(this.seasonNumber)
       this.battingStats = unsortedBattingStats
-        .map(s => ({...s, kPct: this.calculateStrikeoutPercent(s)}))
+        .map(s => ({...s, teamName: s.team.sname, kPct: this.calculateStrikeoutPercent(s)}))
-        .sort((s1, s2) => s2.team.sname < s1.team.sname ? 1 : -1)
+        .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: "▿"
+}
 </style>

src/components/LeaderboardTeamPitchingTable.vue

@@ -5,7 +5,7 @@
         <table class="table table-sm table-striped" id="table-pitching-stats">
           <thead class="thead-dark">
             <tr>
-              <th @click="sortBy('team')" :class="getArrow('team')">Team</th>
+              <th @click="sortBy('teamName')" :class="getArrow('teamName')">Team</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>
@@ -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: "▿"
+}
 </style>