sba-website/src/components/LeaderboardTeamFieldingTable.vue

<template>
  <div class="col-sm-6">
    <div class="table-responsive-xl" style="max-width:40rem">
      <table class="table table-sm table-striped" id="table-fielding-stats">
        <thead class="thead-dark">
          <tr>
            <th @click="sortBy('teamName')" :class="getArrow('teamName')">Team</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 v-if="fieldingStats.length" >
          <tr v-for="stat in fieldingStats" :key="stat.team.abbrev">
            <td>
                <RouterLink
                  :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: stat.team.abbrev } }">
                  {{ stat.team.sname }}
                </RouterLink>
              </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 v-if="fieldingStats.length" >
          <tr v-for="stat in totalFieldingStat" id="career-fielding-footer" :key="stat.pos">
            <th>Total</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>
</template>
<script lang="ts">
import { aggregateFieldingStats, fetchTeamFieldingStatsBySeason, type FieldingStat } from '@/services/fieldingStatsService'

interface ExtendedFieldingStat extends FieldingStat {
  teamName: string
}

export default {
  name: 'LeaderboardTeamFieldingTable',
  props: {
    seasonNumber: { type: Number, required: true }
  },
  data() {
    return {
      fieldingStats: [] as ExtendedFieldingStat[],
      sortKey: 'teamName' as keyof ExtendedFieldingStat,
      sortOrder: 1
    }
  },
  computed: {
    totalFieldingStat(): FieldingStat[] {
      if (this.fieldingStats.length > 0) {
        return aggregateFieldingStats(this.fieldingStats)
      }

      return []
    }
  },
  created() {
    this.fetchData()
  },
  watch: {
    seasonNumber(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.fieldingStats = []
        this.sortKey = 'teamName'
        this.sortOrder = 1
        this.fetchData()
      }
    }
  },
  methods: {
    async fetchData(): Promise<void> {
      const unsortedFieldingStats: FieldingStat[] = await fetchTeamFieldingStatsBySeason(this.seasonNumber)
      this.fieldingStats = unsortedFieldingStats
        .map(s => ({...s, teamName: s.team.sname}))
        .sort((s1, s2) => s2.teamName < s1.teamName ? 1 : -1)
    },
    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 === 'teamName' ? 1 : -1
      }
    },
    getArrow(stat: keyof ExtendedFieldingStat): 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>

<style>
.up::after {
  content: "▵"
}
.down::after {
  content: "▿"
}
.faux-arrow::after {
  opacity: 0;
  content: "▿"
}
</style>