sba-website/src/components/PlayerCareerFieldingTable.vue

<template>
  <div v-if="hasFieldingStats" class="row" id="career-fielding-row">
    <div class="col-sm-6">
      <h3>Fielding Stats</h3>
      <div class="table-responsive-xl">
        <table class="table table-sm table-striped" id="career-fielding">
          <thead class="thead-dark">
            <tr>
              <th @click="setKey('sortableSeason')" :class="getArrow('sortableSeason')">Season</th>
              <th @click="setKey('pos')" :class="getArrow('pos')">Pos</th>
              <th @click="setKey('xCheckCount')" :class="getArrow('xCheckCount')">XCh</th>
              <th @click="setKey('hit')" :class="getArrow('hit')">XH</th>
              <th @click="setKey('error')" :class="getArrow('error')">E</th>
              <th @click="setKey('passedBallCount')" :class="getArrow('passedBallCount')">PB</th>
              <th @click="setKey('stolenBaseCheckCount')" :class="getArrow('stolenBaseCheckCount')">SBa</th>
              <th @click="setKey('caughtStealingCount')" :class="getArrow('caughtStealingCount')">CSc</th>
              <th @click="setKey('caughtStealingPercent')" :class="getArrow('caughtStealingPercent')">CS%</th>
              <th @click="setKey('weightedFieldingPercent')" :class="getArrow('weightedFieldingPercent')">wF%</th>
            </tr>
          </thead>
          <tbody id="career-fielding-table">
            <tr v-for="stat in sortedRegularAndPostSeasonFielding" :key="stat.sortableSeason">
              <td>S{{ stat.seasonNumber }}{{ stat.isRegularSeason ? '' : ' / Playoffs' }}</td>
              <td>{{ stat.pos }}</td>
              <td>{{ stat.xCheckCount }}</td>
              <td>{{ stat.hit }}</td>
              <td>{{ stat.error }}</td>
              <td>{{ stat.passedBallCount }}</td>
              <td>{{ stat.stolenBaseCheckCount }}</td>
              <td>{{ stat.caughtStealingCount }}</td>
              <td>{{ formatCaughtStealingPercent(stat) }}</td>
              <td>{{ formatWeightedFieldingPercent(stat) }}</td>
            </tr>
          </tbody>
          <tfoot>
            <tr v-for="stat in sortedCareerFieldingStats" :key="stat.pos">
              <th>Career</th>
              <th>{{ stat.pos }}</th>
              <th>{{ stat.xCheckCount }}</th>
              <th>{{ stat.hit }}</th>
              <th>{{ stat.error }}</th>
              <th>{{ stat.passedBallCount }}</th>
              <th>{{ stat.stolenBaseCheckCount }}</th>
              <th>{{ stat.caughtStealingCount }}</th>
              <th>{{ formatCaughtStealingPercent(stat) }}</th>
              <th>{{ formatWeightedFieldingPercent(stat) }}</th>
            </tr>
            <tr v-for="stat in sortedPlayoffsCareerFieldingStats" :key="stat.pos">
              <th>Career / Playoffs</th>
              <th>{{ stat.pos }}</th>
              <th>{{ stat.xCheckCount }}</th>
              <th>{{ stat.hit }}</th>
              <th>{{ stat.error }}</th>
              <th>{{ stat.passedBallCount }}</th>
              <th>{{ stat.stolenBaseCheckCount }}</th>
              <th>{{ stat.caughtStealingCount }}</th>
              <th>{{ formatCaughtStealingPercent(stat) }}</th>
              <th>{{ formatWeightedFieldingPercent(stat) }}</th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { aggregateFieldingStats, type FieldingStat } from '@/services/fieldingStatsService'
import { POS_MAP } from '@/services/utilities'

interface FieldingStatWithSeason extends FieldingStat {
  seasonNumber: number
  isRegularSeason: boolean

  sortableSeason: string // constructed to sort S1 -> S1 Playoffs -> S2 -> etc
}

export default {
  name: 'PlayerCareerFieldingTable',
  props: {
    regularSeasonFieldingStats: { type: Array<FieldingStat>, required: true },
    postSeasonFieldingStats: { type: Array<FieldingStat>, required: true },
    showPostSeasonStats: { type: Boolean, required: true }
  },
  data() {
    return {
      sortKey: 'sortableSeason' as keyof FieldingStatWithSeason,
      sortOrder: 1
    }
  },
  computed: {
    hasFieldingStats(): boolean {
      return !!(this.regularSeasonFieldingStats.length + this.postSeasonFieldingStats.length)
    },
    sortedCareerFieldingStats(): FieldingStat[] {
      if (this.regularSeasonFieldingStats.length > 0) {
        // old site behavior just summed regular season stats for the career line total
        return aggregateFieldingStats(this.regularSeasonFieldingStats)
          .sort((a, b) => POS_MAP[a.pos] - POS_MAP[b.pos]) //only need to sort careers totals by position
      }

      return []
    },
    sortedPlayoffsCareerFieldingStats(): FieldingStat[] {
      if (this.showPostSeasonStats && this.postSeasonFieldingStats.length > 0) {
        return aggregateFieldingStats(this.postSeasonFieldingStats)
          .sort((a, b) => POS_MAP[a.pos] - POS_MAP[b.pos]) //only need to sort careers totals by position
      }

      return []
    },
    sortedRegularAndPostSeasonFielding(): FieldingStatWithSeason[] {
      let seasonStats: FieldingStatWithSeason[] = []

      if (this.regularSeasonFieldingStats?.length) {
        seasonStats = seasonStats.concat(this.regularSeasonFieldingStats.map(stat => {
          return {
            ...stat,
            seasonNumber: stat.player.season,
            isRegularSeason: true,
            sortableSeason: `${`${stat.player.season}`.padStart(3, '0')}-A-Regular-${POS_MAP[stat.pos]}`
          }
        }))
      }

      if (this.showPostSeasonStats && this.postSeasonFieldingStats?.length) {
        seasonStats = seasonStats.concat(this.postSeasonFieldingStats.map(stat => {
          return {
            ...stat,
            seasonNumber: stat.player.season,
            isRegularSeason: false,
            sortableSeason: `${`${stat.player.season}`.padStart(3, '0')}-B-Playoffs-${POS_MAP[stat.pos]}`
          }
        }))
      }

      return seasonStats.sort((s1, s2) => s2[this.sortKey] < s1[this.sortKey] ? this.sortOrder : -1 * this.sortOrder)
    },
  },
  methods: {
    setKey(stat: keyof FieldingStatWithSeason): 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 FieldingStatWithSeason): string {
      if (this.sortKey !== stat) return 'faux-arrow'

      return this.sortOrder > 0 ? 'up' : 'down'
    },
    formatCaughtStealingPercent(stat: FieldingStat): string {
      if (stat.stolenBaseCheckCount === 0 || Number.isNaN(stat.caughtStealingPercent)) {
        return '-'
      }

      return `${(stat.caughtStealingPercent * 100).toFixed(1)}%`
    },
    formatWeightedFieldingPercent(stat: FieldingStat): string {
      return stat.weightedFieldingPercent.toFixed(3)
    }
  }
}
</script>