95 lines
3.6 KiB
Vue
95 lines
3.6 KiB
Vue
<template>
|
|
<div class="col-sm-8">
|
|
<div class="table-responsive-xl" style="max-width:45rem">
|
|
<table class="table table-sm table-striped">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>Summary</th>
|
|
<th>AB</th>
|
|
<th>H</th>
|
|
<th>HR</th>
|
|
<th>BA</th>
|
|
<th>R</th>
|
|
<th>RBI</th>
|
|
<th>SB</th>
|
|
<th>OBP</th>
|
|
<th>SLG</th>
|
|
<th>OPS</th>
|
|
<th>wOBA</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="batter-summary-table">
|
|
<tr v-if="currentSeasonBatting">
|
|
<td>Season {{ currentSeasonBatting.player.season }}</td>
|
|
<td>{{ currentSeasonBatting.ab }}</td>
|
|
<td>{{ currentSeasonBatting.hit }}</td>
|
|
<td>{{ currentSeasonBatting.hr }}</td>
|
|
<td>{{ currentSeasonBatting.avg.toFixed(3) }}</td>
|
|
<td>{{ currentSeasonBatting.run }}</td>
|
|
<td>{{ currentSeasonBatting.rbi }}</td>
|
|
<td>{{ currentSeasonBatting.sb }}</td>
|
|
<td>{{ currentSeasonBatting.obp.toFixed(3) }}</td>
|
|
<td>{{ currentSeasonBatting.slg.toFixed(3) }}</td>
|
|
<td>{{ currentSeasonBatting.ops.toFixed(3) }}</td>
|
|
<td>{{ currentSeasonBatting.woba.toFixed(3) }}</td>
|
|
</tr>
|
|
<tr v-if="currentPostSeasonBatting">
|
|
<td>S{{ currentPostSeasonBatting.player.season }} / Playoffs</td>
|
|
<td>{{ currentPostSeasonBatting.ab }}</td>
|
|
<td>{{ currentPostSeasonBatting.hit }}</td>
|
|
<td>{{ currentPostSeasonBatting.hr }}</td>
|
|
<td>{{ currentPostSeasonBatting.avg.toFixed(3) }}</td>
|
|
<td>{{ currentPostSeasonBatting.run }}</td>
|
|
<td>{{ currentPostSeasonBatting.rbi }}</td>
|
|
<td>{{ currentPostSeasonBatting.sb }}</td>
|
|
<td>{{ currentPostSeasonBatting.obp.toFixed(3) }}</td>
|
|
<td>{{ currentPostSeasonBatting.slg.toFixed(3) }}</td>
|
|
<td>{{ currentPostSeasonBatting.ops.toFixed(3) }}</td>
|
|
<td>{{ currentPostSeasonBatting.woba.toFixed(3) }}</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot v-if="careerBattingStat" id="batter-summary-footer">
|
|
<tr>
|
|
<th>Career</th>
|
|
<th>{{ careerBattingStat.ab }}</th>
|
|
<th>{{ careerBattingStat.hit }}</th>
|
|
<th>{{ careerBattingStat.hr }}</th>
|
|
<th>{{ careerBattingStat.avg.toFixed(3) }}</th>
|
|
<th>{{ careerBattingStat.run }}</th>
|
|
<th>{{ careerBattingStat.rbi }}</th>
|
|
<th>{{ careerBattingStat.sb }}</th>
|
|
<th>{{ careerBattingStat.obp.toFixed(3) }}</th>
|
|
<th>{{ careerBattingStat.slg.toFixed(3) }}</th>
|
|
<th>{{ careerBattingStat.ops.toFixed(3) }}</th>
|
|
<th>{{ careerBattingStat.woba.toFixed(3) }}</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { aggregateBattingStats, type BattingStat } from '@/services/battingStatsService'
|
|
import type { PropType } from 'vue'
|
|
|
|
export default {
|
|
name: 'PlayerBattingSummaryTable',
|
|
props: {
|
|
currentSeasonBatting: { type: Object as PropType<BattingStat>, required: false },
|
|
currentPostSeasonBatting: { type: Object as PropType<BattingStat>, required: false },
|
|
regularSeasonBattingStats: { type: Array<BattingStat>, required: true }
|
|
},
|
|
computed: {
|
|
careerBattingStat(): BattingStat | undefined {
|
|
if (this.regularSeasonBattingStats.length > 0) {
|
|
// old site behavior just summed regular season stats for the career line total
|
|
return aggregateBattingStats(this.regularSeasonBattingStats)
|
|
}
|
|
|
|
return undefined
|
|
},
|
|
}
|
|
}
|
|
</script>
|