Sortable player batting stats

src/components/PlayerCareerBattingTable.vue

@@ -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>