From 8db37bfca070dc0c69959c0f31c6f2edd89af3e2 Mon Sep 17 00:00:00 2001
From: Peter <peterlgirouard@gmail.com>
Date: Thu, 14 Nov 2024 17:16:33 -0600
Subject: [PATCH 1/6] Initial team fielding table sorting

---
 src/components/TeamFieldingTable.vue | 69 ++++++++++++++++++++++------
 1 file changed, 56 insertions(+), 13 deletions(-)

diff --git a/src/components/TeamFieldingTable.vue b/src/components/TeamFieldingTable.vue
index b54d663..8768007 100644
--- a/src/components/TeamFieldingTable.vue
+++ b/src/components/TeamFieldingTable.vue
@@ -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: {
@@ -97,7 +104,9 @@ export default {
   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 +117,41 @@ export default {
     },
     formatWeightedFieldingPercent(stat: FieldingStat): string {
       return stat.weightedFieldingPercent.toFixed(3)
+    },
+    sortBy(stat: keyof ExtendedFieldingStat): void {
+      this.setKey(stat)
+
+      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>

From b3c8bc291301da7bf27847d5928216aeaf707331 Mon Sep 17 00:00:00 2001
From: Peter <peterlgirouard@gmail.com>
Date: Thu, 14 Nov 2024 17:18:44 -0600
Subject: [PATCH 2/6] Special sort case for position name (number)

---
 src/components/TeamFieldingTable.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/TeamFieldingTable.vue b/src/components/TeamFieldingTable.vue
index 8768007..8a66230 100644
--- a/src/components/TeamFieldingTable.vue
+++ b/src/components/TeamFieldingTable.vue
@@ -121,6 +121,11 @@ export default {
     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 {

From 1533fbd0ae8b8781bf787b62c7784f32a714a8f5 Mon Sep 17 00:00:00 2001
From: Peter <peterlgirouard@gmail.com>
Date: Fri, 15 Nov 2024 11:30:09 -0600
Subject: [PATCH 3/6] Clean up comment

---
 src/components/TeamPitchingTable.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/TeamPitchingTable.vue b/src/components/TeamPitchingTable.vue
index a7fdb5c..412a8d9 100644
--- a/src/components/TeamPitchingTable.vue
+++ b/src/components/TeamPitchingTable.vue
@@ -35,8 +35,6 @@
               <th>BB/9</th>
               <th>SO/9</th>
               <th>SO/BB</th>
-              <!-- <th>Last G</th>
-              <th>Last G-2</th> -->
             </tr>
           </thead>
           <tbody id="team-pitching-stats">

From 113146573365355c050b7ffd06896781d3eb04b1 Mon Sep 17 00:00:00 2001
From: Peter <peterlgirouard@gmail.com>
Date: Fri, 15 Nov 2024 16:26:09 -0600
Subject: [PATCH 4/6] Reset data on watcher for fielding table

---
 src/components/TeamFieldingTable.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/TeamFieldingTable.vue b/src/components/TeamFieldingTable.vue
index 8a66230..94579e7 100644
--- a/src/components/TeamFieldingTable.vue
+++ b/src/components/TeamFieldingTable.vue
@@ -97,8 +97,12 @@ export default {
   },
   watch: {
     teamId(newValue, oldValue) {
-      if (newValue !== oldValue)
+      if (newValue !== oldValue) {
+        this.fieldingStats = []
+        this.sortKey = 'xCheckCount'
+        this.sortOrder = -1
         this.fetchData()
+      }
     }
   },
   methods: {

From 6eef04e8c259de1478a309a0d69a2c5727c49c72 Mon Sep 17 00:00:00 2001
From: Peter <peterlgirouard@gmail.com>
Date: Fri, 15 Nov 2024 16:35:23 -0600
Subject: [PATCH 5/6] Add sorting to TeamBattingTable and fix duplicate key
 issue

---
 src/components/TeamBattingTable.vue | 111 ++++++++++++++++++++--------
 1 file changed, 79 insertions(+), 32 deletions(-)

diff --git a/src/components/TeamBattingTable.vue b/src/components/TeamBattingTable.vue
index 2e6331c..85406fc 100644
--- a/src/components/TeamBattingTable.vue
+++ b/src/components/TeamBattingTable.vue
@@ -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>

From 971ae3f12e9036c0836de82705aff0ee4ec08829 Mon Sep 17 00:00:00 2001
From: Peter <peterlgirouard@gmail.com>
Date: Fri, 15 Nov 2024 16:43:02 -0600
Subject: [PATCH 6/6] Add sorting to pitching table

---
 src/components/TeamPitchingTable.vue | 122 ++++++++++++++++++++-------
 1 file changed, 90 insertions(+), 32 deletions(-)

diff --git a/src/components/TeamPitchingTable.vue b/src/components/TeamPitchingTable.vue
index 412a8d9..30bcc31 100644
--- a/src/components/TeamPitchingTable.vue
+++ b/src/components/TeamPitchingTable.vue
@@ -6,35 +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 @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">
@@ -118,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: {
@@ -127,7 +135,9 @@ export default {
   },
   data() {
     return {
-      pitchingStats: [] as PitchingStat[]
+      pitchingStats: [] as ExtendedPitchingStat[],
+      sortKey: 'ip' as keyof ExtendedPitchingStat,
+      sortOrder: -1
     }
   },
   computed: {
@@ -144,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)
@@ -173,3 +216,18 @@ export default {
   }
 }
 </script>
+
+<style>
+.up::after {
+  content: "▵"
+}
+
+.down::after {
+  content: "▿"
+}
+
+.faux-arrow::after {
+  opacity: 0;
+  content: "▿"
+}
+</style>